@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
li,
ol,
p,
span,
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: inherit
}

img,
small,
svg {
  display: block
}

em,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: inherit;
  font-style: normal
}

svg {
  overflow: hidden
}

a {
  color: #262626;
  text-decoration: none
}

:focus {
  outline: 0
}

input {
  border: none;
  padding: 0;
  -webkit-appearance: none
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=index]) article#first {
    padding: 125px 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html:not([page=index]) article#first {
    padding: 172px 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html:not([page=index]) article#first {
    padding: 172px 100px 0 350px
  }
}

html[page=index]:not([scroll-is=true]) {
  height: 100vh;
  overflow: hidden
}

body {
  text-align: justify;
  background-color: #f9f9f9;
  background-image: url(assets/img/common/bg-dot.png);
  background-position: center center;
  word-break: break-all;
  color: #262626;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  flex-flow: column;
  min-height: 100vh
}

body::-webkit-scrollbar {
  display: none
}

body ::selection {
  background: #262626;
  color: #fff
}

body main#container {
  overflow: hidden;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  h1:after,
  h1:before {
    content: '';
    display: block
  }

  h1.f-en {
    font-size: 27px
  }

  h1.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(44 / 27 * 1em)
  }

  h1.f-en.m:before {
    margin-top: calc((1 - (44 / 27))/ 2 * 1em)
  }

  h1.f-en.m:after {
    margin-bottom: calc((1 - (44 / 27))/ 2 * 1em)
  }

  h1.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(44 / 27 * 1em)
  }

  h1.f-en.b:before {
    margin-top: calc((1 - (44 / 27))/ 2 * 1em)
  }

  h1.f-en.b:after {
    margin-bottom: calc((1 - (44 / 27))/ 2 * 1em)
  }

  h1.f-ja {
    font-size: 25px
  }

  h1.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(44 / 25 * 1em)
  }

  h1.f-ja.m:before {
    margin-top: calc((1 - (44 / 25))/ 2 * 1em)
  }

  h1.f-ja.m:after {
    margin-bottom: calc((1 - (44 / 25))/ 2 * 1em)
  }

  h1.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 27px;
    position: relative;
    top: 1px
  }

  h1.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(44 / 25 * 1em)
  }

  h1.f-ja.b:before {
    margin-top: calc((1 - (44 / 25))/ 2 * 1em)
  }

  h1.f-ja.b:after {
    margin-bottom: calc((1 - (44 / 25))/ 2 * 1em)
  }

  h1.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 27px;
    position: relative;
    top: 1px
  }

  h2:after,
  h2:before {
    content: '';
    display: block
  }

  h2.f-en {
    font-size: 30px
  }

  h2.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  h2.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  h2.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  h2.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  h2.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  h2.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  h2.f-ja {
    font-size: 20px
  }

  h2.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  h2.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  h2.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  h2.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  h2.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  h2.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  h2.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  h2.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  h3:after,
  h3:before {
    content: '';
    display: block
  }

  h3.f-en {
    font-size: 22px
  }

  h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 22 * 1em)
  }

  h3.f-en.m:before {
    margin-top: calc((1 - (14 / 22))/ 2 * 1em)
  }

  h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 22))/ 2 * 1em)
  }

  h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 22 * 1em)
  }

  h3.f-en.b:before {
    margin-top: calc((1 - (25 / 22))/ 2 * 1em)
  }

  h3.f-en.b:after {
    margin-bottom: calc((1 - (25 / 22))/ 2 * 1em)
  }

  h3.f-ja {
    font-size: 18px
  }

  h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 18 * 1em)
  }

  h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 18))/ 2 * 1em)
  }

  h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 18))/ 2 * 1em)
  }

  h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 22px;
    position: relative;
    top: 1px
  }

  h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  h3.f-ja.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h3.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 22px;
    position: relative;
    top: 1px
  }

  h4:after,
  h4:before {
    content: '';
    display: block
  }

  h4.f-en {
    font-size: 18px
  }

  h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(39 / 18 * 1em)
  }

  h4.f-en.m:before {
    margin-top: calc((1 - (39 / 18))/ 2 * 1em)
  }

  h4.f-en.m:after {
    margin-bottom: calc((1 - (39 / 18))/ 2 * 1em)
  }

  h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 18 * 1em)
  }

  h4.f-en.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h4.f-en.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h4.f-ja {
    font-size: 16px
  }

  h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(39 / 16 * 1em)
  }

  h4.f-ja.m:before {
    margin-top: calc((1 - (39 / 16))/ 2 * 1em)
  }

  h4.f-ja.m:after {
    margin-bottom: calc((1 - (39 / 16))/ 2 * 1em)
  }

  h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 16 * 1em)
  }

  h4.f-ja.b:before {
    margin-top: calc((1 - (25 / 16))/ 2 * 1em)
  }

  h4.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 16))/ 2 * 1em)
  }

  h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  p:after,
  p:before {
    content: '';
    display: block
  }

  p.f-en {
    font-size: 16px
  }

  p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 16 * 1em)
  }

  p.f-en.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-en.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 16 * 1em)
  }

  p.f-en.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-en.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-ja {
    font-size: 14px
  }

  p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 14 * 1em)
  }

  p.f-ja.m:before {
    margin-top: calc((1 - (35 / 14))/ 2 * 1em)
  }

  p.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 14))/ 2 * 1em)
  }

  p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 14 * 1em)
  }

  p.f-ja.b:before {
    margin-top: calc((1 - (35 / 14))/ 2 * 1em)
  }

  p.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 14))/ 2 * 1em)
  }

  p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  h5:after,
  h5:before {
    content: '';
    display: block
  }

  h5.f-en {
    font-size: 15px
  }

  h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  h5.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  h5.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  h5.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  h5.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  h5.f-ja {
    font-size: 13px
  }

  h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  h5.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  h5.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  h5.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  h5.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  h6:after,
  h6:before {
    content: '';
    display: block
  }

  h6.f-en {
    font-size: 12px
  }

  h6.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(16 / 12 * 1em)
  }

  h6.f-en.m:before {
    margin-top: calc((1 - (16 / 12))/ 2 * 1em)
  }

  h6.f-en.m:after {
    margin-bottom: calc((1 - (16 / 12))/ 2 * 1em)
  }

  h6.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 12 * 1em)
  }

  h6.f-en.b:before {
    margin-top: calc((1 - (14 / 12))/ 2 * 1em)
  }

  h6.f-en.b:after {
    margin-bottom: calc((1 - (14 / 12))/ 2 * 1em)
  }

  h6.f-ja {
    font-size: 11px
  }

  h6.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(16 / 11 * 1em)
  }

  h6.f-ja.m:before {
    margin-top: calc((1 - (16 / 11))/ 2 * 1em)
  }

  h6.f-ja.m:after {
    margin-bottom: calc((1 - (16 / 11))/ 2 * 1em)
  }

  h6.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 12px;
    position: relative;
    top: 1px
  }

  h6.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 11 * 1em)
  }

  h6.f-ja.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  h6.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  h6.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 12px;
    position: relative;
    top: 1px
  }

  small:after,
  small:before {
    content: '';
    display: block
  }

  small.f-en {
    font-size: 11px
  }

  small.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  small.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  small.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  small.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  small.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  small.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  small.f-ja {
    font-size: 10px
  }

  small.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  small.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  small.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  small.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  small.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  small.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  small.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  small.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  h1:after,
  h1:before {
    content: '';
    display: block
  }

  h1.f-en {
    font-size: 38px
  }

  h1.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  h1.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(62 / 38 * 1em)
  }

  h1.f-en.b:before {
    margin-top: calc((1 - (62 / 38))/ 2 * 1em)
  }

  h1.f-en.b:after {
    margin-bottom: calc((1 - (62 / 38))/ 2 * 1em)
  }

  h1.f-ja {
    font-size: 36px
  }

  h1.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em
  }

  h1.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 38px;
    position: relative;
    top: 1px
  }

  h1.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(62 / 36 * 1em)
  }

  h1.f-ja.b:before {
    margin-top: calc((1 - (62 / 36))/ 2 * 1em)
  }

  h1.f-ja.b:after {
    margin-bottom: calc((1 - (62 / 36))/ 2 * 1em)
  }

  h1.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 38px;
    position: relative;
    top: 1px
  }

  h2:after,
  h2:before {
    content: '';
    display: block
  }

  h2.f-en {
    font-size: 30px
  }

  h2.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  h2.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(39 / 30 * 1em)
  }

  h2.f-en.b:before {
    margin-top: calc((1 - (39 / 30))/ 2 * 1em)
  }

  h2.f-en.b:after {
    margin-bottom: calc((1 - (39 / 30))/ 2 * 1em)
  }

  h2.f-ja {
    font-size: 28px
  }

  h2.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em
  }

  h2.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  h2.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(39 / 28 * 1em)
  }

  h2.f-ja.b:before {
    margin-top: calc((1 - (39 / 28))/ 2 * 1em)
  }

  h2.f-ja.b:after {
    margin-bottom: calc((1 - (39 / 28))/ 2 * 1em)
  }

  h2.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  h3:after,
  h3:before {
    content: '';
    display: block
  }

  h3.f-en {
    font-size: 27px
  }

  h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(33 / 27 * 1em)
  }

  h3.f-en.m:before {
    margin-top: calc((1 - (33 / 27))/ 2 * 1em)
  }

  h3.f-en.m:after {
    margin-bottom: calc((1 - (33 / 27))/ 2 * 1em)
  }

  h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(33 / 27 * 1em)
  }

  h3.f-en.b:before {
    margin-top: calc((1 - (33 / 27))/ 2 * 1em)
  }

  h3.f-en.b:after {
    margin-bottom: calc((1 - (33 / 27))/ 2 * 1em)
  }

  h3.f-ja {
    font-size: 24px
  }

  h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(33 / 24 * 1em)
  }

  h3.f-ja.m:before {
    margin-top: calc((1 - (33 / 24))/ 2 * 1em)
  }

  h3.f-ja.m:after {
    margin-bottom: calc((1 - (33 / 24))/ 2 * 1em)
  }

  h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 27px;
    position: relative;
    top: 1px
  }

  h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(33 / 24 * 1em)
  }

  h3.f-ja.b:before {
    margin-top: calc((1 - (33 / 24))/ 2 * 1em)
  }

  h3.f-ja.b:after {
    margin-bottom: calc((1 - (33 / 24))/ 2 * 1em)
  }

  h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 27px;
    position: relative;
    top: 1px
  }

  h4:after,
  h4:before {
    content: '';
    display: block
  }

  h4.f-en {
    font-size: 20px
  }

  h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(25 / 20 * 1em)
  }

  h4.f-en.m:before {
    margin-top: calc((1 - (25 / 20))/ 2 * 1em)
  }

  h4.f-en.m:after {
    margin-bottom: calc((1 - (25 / 20))/ 2 * 1em)
  }

  h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 20 * 1em)
  }

  h4.f-en.b:before {
    margin-top: calc((1 - (25 / 20))/ 2 * 1em)
  }

  h4.f-en.b:after {
    margin-bottom: calc((1 - (25 / 20))/ 2 * 1em)
  }

  h4.f-ja {
    font-size: 18px
  }

  h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  h4.f-ja.m:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h4.f-ja.m:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 20px;
    position: relative;
    top: 1px
  }

  h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  h4.f-ja.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h4.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    top: 1px
  }

  p:after,
  p:before {
    content: '';
    display: block
  }

  p.f-en {
    font-size: 18px
  }

  p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  p.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  p.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  p.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  p.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  p.f-ja {
    font-size: 16px
  }

  p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  p.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  p.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  h5:after,
  h5:before {
    content: '';
    display: block
  }

  h5.f-en {
    font-size: 16px
  }

  h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  h5.f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  h5.f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  h5.f-en.b:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  h5.f-en.b:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  h5.f-ja {
    font-size: 14px
  }

  h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  h5.f-ja.m:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  h5.f-ja.m:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  h5.f-ja.b:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  h5.f-ja.b:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  h6:after,
  h6:before {
    content: '';
    display: block
  }

  h6.f-en {
    font-size: 14px
  }

  h6.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 14 * 1em)
  }

  h6.f-en.m:before {
    margin-top: calc((1 - (17 / 14))/ 2 * 1em)
  }

  h6.f-en.m:after {
    margin-bottom: calc((1 - (17 / 14))/ 2 * 1em)
  }

  h6.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 14 * 1em)
  }

  h6.f-en.b:before {
    margin-top: calc((1 - (17 / 14))/ 2 * 1em)
  }

  h6.f-en.b:after {
    margin-bottom: calc((1 - (17 / 14))/ 2 * 1em)
  }

  h6.f-ja {
    font-size: 12px
  }

  h6.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 12 * 1em)
  }

  h6.f-ja.m:before {
    margin-top: calc((1 - (17 / 12))/ 2 * 1em)
  }

  h6.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 12))/ 2 * 1em)
  }

  h6.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 14px;
    position: relative;
    top: 1px
  }

  h6.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 12 * 1em)
  }

  h6.f-ja.b:before {
    margin-top: calc((1 - (17 / 12))/ 2 * 1em)
  }

  h6.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 12))/ 2 * 1em)
  }

  h6.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    top: 1px
  }

  small:after,
  small:before {
    content: '';
    display: block
  }

  small.f-en {
    font-size: 11px
  }

  small.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  small.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  small.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  small.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  small.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  small.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  small.f-ja {
    font-size: 10px
  }

  small.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  small.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  small.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  small.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  small.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  small.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  small.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  small.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

span.c.left {
  margin-left: -.3em
}

span.c.right {
  letter-spacing: -.3em
}

span.c.both {
  margin-left: -.15em;
  letter-spacing: -.15em
}

.hover {
  cursor: pointer
}

@media (min-width:1px) and (max-width:960px) {
  .box-2 .box-separate,.box-2 .box-btns,.box-2 .area-fixed-left,.box-2 .side-title {
    display: none;
  }

  .elem-text.btn-small{
    display: none!important;
  }

  .frame-liquid {
    padding: 0 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .box-2 .box-separate,.box-2 .box-btns,.box-2 .area-fixed-left,.box-2 .side-title {
    display: none;
  }

  .frame-liquid {
    display: flex;
    height: 100%
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .frame-liquid>.area {
    height: 100%
  }

  .box-2 .box-separate,.box-2 .box-btns,.box-2 .area-fixed-left,.box-2 .side-title {
    display: none;
  }
}

@media (min-width:961px) and (max-width:1280px) {
  .frame-liquid>.area.area-fixed-left {
    width: 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  .frame-liquid>.area.area-fixed-left {
    width: 350px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .frame-liquid>.area.area-liquid {
    flex: 1
  }
}

@media (min-width:961px) and (max-width:1280px) {
  .frame-liquid>.area.area-fixed-right {
    width: 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  .frame-liquid>.area.area-fixed-right {
    width: 100px
  }
}

.side-title {
  display: flex
}

@media (min-width:1px) and (max-width:960px) {
  .side-title {
    flex-direction: column-reverse
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .side-title {
    width: 100%;
    justify-content: flex-end;
    position: relative;
    right: 48px
  }
}

.side-title h4 {
  font-family: GothicDB
}

@media (min-width:1px) and (max-width:960px) {
  .side-title h4 {
    margin-top: 8px;
    letter-spacing: .12em
  }

  .side-title h4:after,
  .side-title h4:before {
    content: '';
    display: block
  }

  .side-title h4.f-en {
    font-size: 20px
  }

  .side-title h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 20 * 1em)
  }

  .side-title h4.f-en.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  .side-title h4.f-en.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  .side-title h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 20 * 1em)
  }

  .side-title h4.f-en.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  .side-title h4.f-en.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  .side-title h4.f-ja {
    font-size: 18px
  }

  .side-title h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 18 * 1em)
  }

  .side-title h4.f-ja.m:before {
    margin-top: calc((1 - (14 / 18))/ 2 * 1em)
  }

  .side-title h4.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 18))/ 2 * 1em)
  }

  .side-title h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 20px;
    position: relative;
    top: 1px
  }

  .side-title h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 18 * 1em)
  }

  .side-title h4.f-ja.b:before {
    margin-top: calc((1 - (14 / 18))/ 2 * 1em)
  }

  .side-title h4.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 18))/ 2 * 1em)
  }

  .side-title h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .side-title h4 {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
  }

  .side-title h4[size='s'] {
    font-size: 16px
  }

  .side-title h4[size='m'] {
    font-size: 23px
  }
}

.side-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:1px) and (max-width:960px) {
  .side-title h6 {
    font-size: 12px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .side-title h6 {
    font-size: 13px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
  }
}

#side-pop {
  position: fixed;
  z-index: 20;
  opacity: 0;
  transform: translateY(30px);
  transition: 50ms opacity 50ms linear, .2s transform linear
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop {
    bottom: 38px;
    width: 46px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop {
    bottom: 46px;
    width: 100px
  }
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop {
    left: 0
  }
}

@media (min-width:961px) and (max-width:1280px) {
  #side-pop {
    left: 10px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  #side-pop {
    left: 128px
  }
}

#side-pop.in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity linear, .4s transform cubic-bezier(.175, .885, .32, 1.275)
}

#side-pop .balloon-illust[text-is=false] {
  display: none
}

#side-pop .balloon-illust .balloon {
  display: table;
  position: relative;
  margin: 0 auto;
  pointer-events: none
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust .balloon {
    margin: 0 auto 4px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust .balloon {
    margin: 0 auto 8px
  }
}

#side-pop .balloon-illust .balloon.pop {
  animation: .1s animation-side-pop-balloon linear;
  animation-iteration-count: 2;
  animation-direction: alternate
}

@-moz-keyframes animation-side-pop-balloon {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-3px)
  }
}

@-webkit-keyframes animation-side-pop-balloon {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-3px)
  }
}

@-o-keyframes animation-side-pop-balloon {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-3px)
  }
}

@keyframes animation-side-pop-balloon {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-3px)
  }
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust .balloon .bg {
    width: 33px;
    height: 285px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust .balloon .bg {
    width: 80px;
    height: 224.11px
  }
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust .balloon .bg svg path.svg-path-shadow {
    fill: #e0e0e0
  }

  #side-pop .balloon-illust .balloon .bg svg path.svg-path-balloon {
    fill: #fff;
    stroke: #000;
    stroke-miterlimit: 10;
    stroke-width: 1.5px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust .balloon .bg svg path.svg-path-shadow {
    fill: #e0e0e0
  }

  #side-pop .balloon-illust .balloon .bg svg path.svg-path-bg {
    fill: #fff
  }
}

#side-pop .balloon-illust .balloon .area-text {
  width: 100%;
  position: absolute;
  top: 0
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust .balloon .area-text {
    height: calc(100% - 6px);
    width: calc(100% - 5px);
    left: 3px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust .balloon .area-text {
    height: calc(100% - 15px);
    width: calc(100% - 4px);
    left: 2px
  }
}

#side-pop .balloon-illust .balloon .area-text .texts {
  position: relative;
  width: 100%;
  height: 100%
}

#side-pop .balloon-illust .balloon .area-text .texts .text {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust .balloon .area-text .texts .text {
    height: calc(100% - 0px)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text:after,
  #side-pop .balloon-illust .balloon .area-text .texts .text:before {
    content: '';
    display: block
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en {
    font-size: 11px
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja {
    font-size: 10px
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust .balloon .area-text .texts .text {
    padding: 30px 0;
    height: calc(100% - 60px)
  }
}

#side-pop .balloon-illust .balloon .area-text .texts .text.in {
  opacity: 1
}

#side-pop .balloon-illust .balloon .area-text .texts .text h6 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  user-select: none;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  #side-pop .balloon-illust .balloon .area-text .texts .text h6:after,
  #side-pop .balloon-illust .balloon .area-text .texts .text h6:before {
    content: '';
    display: block
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en {
    font-size: 11px
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja {
    font-size: 10px
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  #side-pop .balloon-illust .balloon .area-text .texts .text h6.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust .balloon .area-text .texts .text h6 span.c.en {
    position: relative;
    left: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust .balloon .area-text .texts .text h6 br {
    display: none
  }
}

#side-pop .balloon-illust #side-pop-illust {
  position: relative;
  pointer-events: none
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust #side-pop-illust {
    left: -18px;
    width: 110px;
    height: 115px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust #side-pop-illust {
    left: -11px;
    width: 180px;
    height: 192px
  }
}

#side-pop .balloon-illust #side-pop-illust.pop {
  animation: 80ms animation-side-pop-illust linear;
  animation-iteration-count: 2;
  animation-direction: alternate
}

@-moz-keyframes animation-side-pop-illust {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(3px)
  }
}

@-webkit-keyframes animation-side-pop-illust {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(3px)
  }
}

@-o-keyframes animation-side-pop-illust {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(3px)
  }
}

@keyframes animation-side-pop-illust {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(3px)
  }
}

#side-pop .balloon-illust #side-pop-illust .illust {
  position: absolute;
  opacity: 0
}

#side-pop .balloon-illust #side-pop-illust .illust.in {
  opacity: 1
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust #side-pop-illust .illust[num='1'] {
    background-image: url(assets/img/common/sidepop-illust-1-sp.png);
    background-size: 100% 100%;
    width: 98px;
    height: 111px;
    display: block;
    top: 0;
    left: 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust #side-pop-illust .illust[num='1'] {
    background-image: url(assets/img/common/sidepop-illust-1.png);
    background-size: 100% 100%;
    width: 158px;
    height: 178px;
    display: block;
    top: 1px;
    left: 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust #side-pop-illust .illust[num='2'] {
    background-image: url(assets/img/common/sidepop-illust-2-sp.png);
    background-size: 100% 100%;
    width: 107px;
    height: 113px;
    display: block;
    top: 0;
    left: 2px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust #side-pop-illust .illust[num='2'] {
    background-image: url(assets/img/common/sidepop-illust-2.png);
    background-size: 100% 100%;
    width: 176px;
    height: 185px;
    display: block;
    top: 0;
    left: 4px
  }
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .balloon-illust #side-pop-illust .illust[num='3'] {
    background-image: url(assets/img/common/sidepop-illust-3-sp.png);
    background-size: 100% 100%;
    width: 69px;
    height: 114px;
    display: block;
    top: 0;
    left: 7px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .balloon-illust #side-pop-illust .illust[num='3'] {
    background-image: url(assets/img/common/sidepop-illust-3.png);
    background-size: 100% 100%;
    width: 116px;
    height: 191.5px;
    display: block;
    top: 0;
    left: 9px
  }
}

#side-pop .btn-contact {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .btn-contact {
    width: 46px;
    height: 105px;
    border-radius: 0 5px 5px 0;
    margin-top: -24px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .btn-contact {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-top: -21px
  }
}

#side-pop .btn-contact:hover.hover {
  background-color: #fb8b1e
}

#side-pop .btn-contact .elem {
  position: relative;
  left: -2px
}

#side-pop .btn-contact .elem .icon {
  margin: 0 auto
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .btn-contact .elem .icon {
    width: 13px;
    height: 14px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #side-pop .btn-contact .elem .icon {
    width: 22px;
    height: 24px
  }
}

#side-pop .btn-contact .elem .icon svg path {
  fill: #fff
}

#side-pop .btn-contact .elem h5 {
  color: #fff;
  margin: 10px auto 0
}

@media (min-width:1px) and (max-width:960px) {
  #side-pop .btn-contact .elem h5 {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 1em !important
  }

  #side-pop .btn-contact .elem h5:after,
  #side-pop .btn-contact .elem h5:before {
    content: '';
    display: block
  }

  #side-pop .btn-contact .elem h5.f-en {
    font-size: 12px
  }

  #side-pop .btn-contact .elem h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(16 / 12 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-en.m:before {
    margin-top: calc((1 - (16 / 12))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-en.m:after {
    margin-bottom: calc((1 - (16 / 12))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 12 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-en.b:before {
    margin-top: calc((1 - (14 / 12))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-en.b:after {
    margin-bottom: calc((1 - (14 / 12))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja {
    font-size: 11px
  }

  #side-pop .btn-contact .elem h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(16 / 11 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja.m:before {
    margin-top: calc((1 - (16 / 11))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja.m:after {
    margin-bottom: calc((1 - (16 / 11))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 12px;
    position: relative;
    top: 1px
  }

  #side-pop .btn-contact .elem h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 11 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  #side-pop .btn-contact .elem h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 12px;
    position: relative;
    top: 1px
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50
}

@media (min-width:1px) and (max-width:960px) {
  header {
    position: absolute
  }
}

@media (min-width:1px) and (max-width:960px) {
  header .band {
    position: relative;
    background-color: #262626;
    width: 100%;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1
  }

  header .band small.text {
    color: #fff;
    letter-spacing: .38em
  }

  header .band small.text span.c.en {
    font-size: 12px;
    letter-spacing: .38em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  header .band {
    display: none
  }
}

@media (min-width:1px) and (max-width:960px) {
  header>.inner {
    padding: 22px 17px 0
  }
}

@media (min-width:961px) and (max-width:1280px) {
  header>.inner {
    padding: 60px 46px 0 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  header>.inner {
    padding: 60px 100px 0 128px
  }
}

header>.inner .inner-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between
}

header>.inner .inner-frame .logo {
  display: flex;
  align-items: center;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

header>.inner .inner-frame .logo.hover:hover {
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  header>.inner .inner-frame .logo h1.sitelogo {
    width: 195px;
    height: 25px
  }

  html[page=index] header>.inner .inner-frame .logo h1.sitelogo {
    opacity: 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  header>.inner .inner-frame .logo h1.sitelogo {
    width: 236px;
    height: 30.06px
  }
}

@media (min-width:1px) and (max-width:960px) {
  header>.inner .inner-frame .logo small {
    display: none
  }
}

@media (min-width:961px) and (max-width:1024px) {
  header>.inner .inner-frame .logo small {
    margin-left: 16px
  }
}

@media (min-width:1025px) and (max-width:99999px) {
  header>.inner .inner-frame .logo small {
    margin-left: 23px
  }
}

header>.inner .inner-frame .links {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  header>.inner .inner-frame .links {
    display: none
  }
}

header>.inner .inner-frame .links .page {
  display: flex;
  align-items: center
}

header>.inner .inner-frame .links .page a {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

header>.inner .inner-frame .links .page a:not(:first-child) {
  margin-left: 23px
}

@media (min-width:961px) and (max-width:1024px) {
  header>.inner .inner-frame .links .page a:not(:first-child) {
    margin-left: 16px
  }
}

@media (min-width:1025px) and (max-width:99999px) {
  header>.inner .inner-frame .links .page a:not(:first-child) {
    margin-left: 23px
  }
}

header>.inner .inner-frame .links .page a.hover:hover {
  color: #fb8b1e
}

header>.inner .inner-frame .links .separate {
  width: 1px;
  height: 7px;
  background-size: auto auto;
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, #262626, #262626 1px, transparent 1px, transparent 2px);
  margin: 0 30px
}

@media (min-width:961px) and (max-width:1024px) {
  header>.inner .inner-frame .links .separate {
    margin: 0 20px
  }
}

@media (min-width:1025px) and (max-width:99999px) {
  header>.inner .inner-frame .links .separate {
    margin: 0 30px
  }
}

header>.inner .inner-frame .links .sns {
  display: flex;
  align-items: center
}

@media (min-width:961px) and (max-width:1024px) {
  header>.inner .inner-frame .links .sns a:not(:first-child) {
    margin-left: 12px
  }
}

@media (min-width:1025px) and (max-width:99999px) {
  header>.inner .inner-frame .links .sns a:not(:first-child) {
    margin-left: 16px
  }
}

@media (min-width:961px) and (max-width:1024px) {
  header>.inner .inner-frame .links .sns a svg {
    width: 20px;
    height: 20px
  }
}

@media (min-width:1025px) and (max-width:99999px) {
  header>.inner .inner-frame .links .sns a svg {
    width: 23px;
    height: 23px
  }
}

header>.inner .inner-frame .links .sns a svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

header>.inner .inner-frame .links .sns a.hover:hover svg path {
  fill: #fb8b1e
}

header>.inner .inner-frame .humberger {
  width: 74px;
  height: 21px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto
}

@media (min-width:1px) and (max-width:960px) {
  header>.inner .inner-frame .humberger {
    width: 40px;
    height: 14px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  header>.inner .inner-frame .humberger {
    transform: translateY(-100px)
  }
}

header>.inner .inner-frame .humberger svg rect {
  fill: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

header>.inner .inner-frame .humberger.hover:hover svg rect {
  fill: #fb8b1e
}

header[pos=fixed] {
  position: fixed
}

header[pos=fixed] .band {
  display: none
}

@media (min-width:961px) and (max-width:1280px) {
  header[pos=fixed]>.inner {
    padding: 46px 46px 0 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  header[pos=fixed]>.inner {
    padding: 46px 100px 0 128px
  }
}

header[pos=fixed]>.inner .inner-frame .logo h1.sitelogo {
  background-color: #f9f9f9
}

@media (min-width:1px) and (max-width:960px) {
  header[pos=fixed]>.inner .inner-frame .logo h1.sitelogo {
    width: 195px;
    height: 25px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  header[pos=fixed]>.inner .inner-frame .logo h1.sitelogo {
    width: 196px;
    height: 26px
  }
}

header[pos=fixed]>.inner .inner-frame .logo small {
  background-color: #f9f9f9
}

header[pos=fixed]>.inner .inner-frame .links {
  display: none
}

header[pos=fixed]>.inner .inner-frame .humberger {
  background-color: #f9f9f9;
  transform: translateY(0)
}

header[pos=fixed][fade=out] {
  opacity: 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] header[logo=in] .inner-frame .logo h1.sitelogo {
    opacity: 1
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer {
    margin-top: 128px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html:not([page=about]) footer {
    margin-top: 166px
  }
}

footer .box-1 {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-1 {
    padding: 0 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=about] footer .box-1 {
    padding: 0 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=about] footer .box-1 {
    padding: 0 100px 0 350px
  }
}

footer .box-1 h3.title {
  margin-bottom: 54px
}

footer .box-1 h3.title span.line {
  position: relative
}

footer .box-1 h3.title span.line .underline {
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  position: absolute;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-1 h3.title {
    margin-bottom: 45px
  }
}

footer .box-1 .notes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-1 .notes {
    bottom: 22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-1 .notes {
    bottom: 23px
  }
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-1 .notes {
    left: 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  footer .box-1 .notes {
    right: 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  footer .box-1 .notes {
    right: 100px
  }
}

footer .box-1 .notes .icon {
  opacity: .8
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-1 .notes .icon {
    width: 10px;
    height: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-1 .notes .icon {
    width: 11px;
    height: 11px
  }
}

footer .box-1 .notes .icon svg path {
  fill: #d53030
}

footer .box-1 .notes small {
  margin-left: 4px;
  color: rgba(38, 38, 38, .4)
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-1 .notes small {
    letter-spacing: .03em !important
  }
}

footer .box-2 {
  background-color: #e5e5e5
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-2 {
    padding: 56px 0 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html:not([page=about]) footer .box-2 {
    padding: 60px 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-2 {
    margin-top: -115px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] footer .box-2 {
    margin-top: -52px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-2 {
    padding: 155px 17px 50px 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=about] footer .box-2 {
    padding: 100px 46px 50px 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=about] footer .box-2 {
    padding: 100px 100px 50px 350px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-2 .frame-liquid {
    padding: 0
  }
}

footer .box-2 .frame-liquid .area.area-fixed-left {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-2 .frame-liquid .area.area-fixed-left {
    justify-content: space-between;
    align-items: baseline
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-2 .frame-liquid .area.area-liquid {
    margin-top: 14px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-btns {
    display: flex;
    justify-content: space-between
  }
}

html:not([page=about]) footer .box-btns {
  width: 100%
}

html:not([page=about]) footer .box-btns .btn-square {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square {
    height: 73px
  }

  html:not([page=about]) footer .box-btns .btn-square:not(:first-child) {
    margin-top: 8px
  }

  html:not([page=about]) footer .box-btns .btn-square .inner .arrow {
    width: 22px;
    height: 22px
  }

  html:not([page=about]) footer .box-btns .btn-square .inner .line-tip {
    width: 22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html:not([page=about]) footer .box-btns .btn-square {
    width: calc((100% - 16px)/ 2);
    height: 106px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square {
    padding: 0 30px 0 30px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html:not([page=about]) footer .box-btns .btn-square {
    padding: 0 26.666666666666668px 0 26.666666666666668px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html:not([page=about]) footer .box-btns .btn-square {
    padding: 0 30px 0 38px
  }
}

html:not([page=about]) footer .box-btns .btn-square[color=orange]:hover.hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html:not([page=about]) footer .box-btns .btn-square[color=orange]:hover.hover .inner .text {
  color: #fff
}

html:not([page=about]) footer .box-btns .btn-square[color=orange]:hover.hover .inner .arrow svg path.line {
  fill: #fff
}

html:not([page=about]) footer .box-btns .btn-square[color=orange]:hover.hover .inner .arrow svg path.arrow {
  fill: #fb8b1e
}

html:not([page=about]) footer .box-btns .btn-square[color=orange]:hover.hover .inner .line-tip {
  background-color: #fff;
  bottom: -2px;
  height: 6px
}

html:not([page=about]) footer .box-btns .btn-square[color=orange] .inner .line-tip {
  background-color: #fb8b1e
}

html:not([page=about]) footer .box-btns .btn-square .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative
}

html:not([page=about]) footer .box-btns .btn-square .inner .box-text {
  display: flex;
  align-items: center
}

html:not([page=about]) footer .box-btns .btn-square .inner .box-text .icon {
  margin-right: 12px
}

html:not([page=about]) footer .box-btns .btn-square .inner .box-text .icon[name=footer-company] {
  background-image: url(assets/img/footer/icon-company.png);
  background-size: 100% 100%;
  width: 36px;
  height: 32px;
  display: block
}

html:not([page=about]) footer .box-btns .btn-square .inner .box-text .icon[name=footer-investor] {
  background-image: url(assets/img/footer/icon-investor.png);
  background-size: 100% 100%;
  width: 35px;
  height: 35px;
  display: block
}

html:not([page=about]) footer .box-btns .btn-square .inner .box-text .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html:not([page=about]) footer .box-btns .btn-square .inner .arrow {
  width: 22px;
  height: 22px
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square .inner .arrow {
    width: 18px;
    height: 18px
  }
}

html:not([page=about]) footer .box-btns .btn-square .inner .arrow svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html:not([page=about]) footer .box-btns .btn-square .inner .arrow svg path.arrow {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html:not([page=about]) footer .box-btns .btn-square .inner .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 22px
}

html:not([page=about]) footer .box-btns .btn-square .inner .line-tip[size='s'] {
  width: 20px
}

html:not([page=about]) footer .box-btns .btn-square .inner .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square .inner .line-tip {
    width: 18px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square {
    height: 73px
  }

  html:not([page=about]) footer .box-btns .btn-square:not(:first-child) {
    margin-top: 8px
  }

  html:not([page=about]) footer .box-btns .btn-square .inner .arrow {
    width: 22px;
    height: 22px
  }

  html:not([page=about]) footer .box-btns .btn-square .inner .line-tip {
    width: 22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html:not([page=about]) footer .box-btns .btn-square {
    width: calc((100% - 16px)/ 2);
    height: 106px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html:not([page=about]) footer .box-btns .btn-square {
    padding: 0 30px 0 30px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html:not([page=about]) footer .box-btns .btn-square {
    padding: 0 26.666666666666668px 0 26.666666666666668px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html:not([page=about]) footer .box-btns .btn-square {
    padding: 0 30px 0 38px
  }
}

html[page=about] footer .box-btns {
  width: 100%
}

html[page=about] footer .box-btns .btn-square {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-btns .btn-square {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-btns .btn-square {
    width: 100%;
    height: 72px;
    padding: 0 30px 0 26px
  }

  html[page=about] footer .box-btns .btn-square:not(:first-child) {
    margin-top: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] footer .box-btns .btn-square {
    width: calc(470 / 990 * 100%);
    height: 106px;
    padding: 0 48px
  }
}

html[page=about] footer .box-btns .btn-square .inner {
  width: 100%
}

html[page=about] footer .box-btns .btn-square[color=orange]:hover.hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html[page=about] footer .box-btns .btn-square[color=orange]:hover.hover .inner .text {
  color: #fff
}

html[page=about] footer .box-btns .btn-square[color=orange]:hover.hover .inner .arrow svg path.line {
  fill: #fff
}

html[page=about] footer .box-btns .btn-square[color=orange]:hover.hover .inner .arrow svg path.arrow {
  fill: #fb8b1e
}

html[page=about] footer .box-btns .btn-square[color=orange]:hover.hover .inner .line-tip {
  background-color: #fff;
  bottom: -2px;
  height: 6px
}

html[page=about] footer .box-btns .btn-square[color=orange] .inner .line-tip {
  background-color: #fb8b1e
}

html[page=about] footer .box-btns .btn-square .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative
}

html[page=about] footer .box-btns .btn-square .inner .box-text {
  display: flex;
  align-items: center
}

html[page=about] footer .box-btns .btn-square .inner .box-text .icon {
  margin-right: 12px
}

html[page=about] footer .box-btns .btn-square .inner .box-text .icon[name=footer-company] {
  background-image: url(assets/img/footer/icon-company.png);
  background-size: 100% 100%;
  width: 36px;
  height: 32px;
  display: block
}

html[page=about] footer .box-btns .btn-square .inner .box-text .icon[name=footer-investor] {
  background-image: url(assets/img/footer/icon-investor.png);
  background-size: 100% 100%;
  width: 35px;
  height: 35px;
  display: block
}

html[page=about] footer .box-btns .btn-square .inner .box-text .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=about] footer .box-btns .btn-square .inner .arrow {
  width: 26px;
  height: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-btns .btn-square .inner .arrow {
    width: 22px;
    height: 22px
  }
}

html[page=about] footer .box-btns .btn-square .inner .arrow svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=about] footer .box-btns .btn-square .inner .arrow svg path.arrow {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=about] footer .box-btns .btn-square .inner .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 26px
}

html[page=about] footer .box-btns .btn-square .inner .line-tip[size='s'] {
  width: 20px
}

html[page=about] footer .box-btns .btn-square .inner .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-btns .btn-square .inner .line-tip {
    width: 22px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] footer .box-btns .btn-square {
    width: 100%;
    height: 72px;
    padding: 0 30px 0 26px
  }

  html[page=about] footer .box-btns .btn-square:not(:first-child) {
    margin-top: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] footer .box-btns .btn-square {
    width: calc(470 / 990 * 100%);
    height: 106px;
    padding: 0 48px
  }
}

html[page=about] footer .box-btns .btn-square .inner {
  width: 100%
}

footer .box-separate {
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .2), rgba(38, 38, 38, .2) 2px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-separate {
    margin: 45px 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-separate {
    margin: 60px 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-other {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end
  }
}

footer .box-other .cell-sns-links .sns {
  display: flex
}

footer .box-other .cell-sns-links .sns a {
  display: block;
  width: 23px;
  height: 23px
}

footer .box-other .cell-sns-links .sns a:not(:first-child) {
  margin-left: 16px
}

footer .box-other .cell-sns-links .sns a svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

footer .box-other .cell-sns-links .sns a.hover:hover svg path {
  fill: #fb8b1e
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-other .cell-sns-links .sns {
    justify-content: flex-end
  }
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-other .cell-sns-links .links {
    margin-top: 20px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  footer .box-other .cell-sns-links .links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 22px
  }
}

footer .box-other .cell-sns-links .links a {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

footer .box-other .cell-sns-links .links a.hover:hover {
  color: #fb8b1e
}

footer .box-other .cell-sns-links .links .dummy {
  opacity: .5
}

footer .box-other .cell-sns-links .links .link-box-1 {
  display: flex;
  align-items: center
}

footer .box-other .cell-sns-links .links .link-box-1 .separate {
  width: 1px;
  height: 5px;
  background-size: auto auto;
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, #262626, #262626 1px, transparent 1px, transparent 2px);
  margin: 0 10px
}

footer .box-other .cell-sns-links .links .link-box-2 {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-other .cell-sns-links .links .link-box-2 {
    margin-top: 10px
  }
}

footer .box-other .cell-sns-links .links .link-box-2 a:not(:first-child) {
  margin-left: 10px
}

footer .box-other small.copyright {
  color: rgba(38, 38, 38, .4);
  margin-top: 16px
}

@media (min-width:1px) and (max-width:960px) {
  footer .box-other small.copyright {
    letter-spacing: .08em
  }
}

@media (min-width:961px) and (max-width:1280px) {

  footer .box-other small.copyright:after,
  footer .box-other small.copyright:before {
    content: '';
    display: block
  }

  footer .box-other small.copyright.f-en {
    font-size: 10px
  }

  footer .box-other small.copyright.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  footer .box-other small.copyright.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 10 * 1em)
  }

  footer .box-other small.copyright.f-en.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  footer .box-other small.copyright.f-en.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

#menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 100;
  user-select: none;
  width: 100%;
  background: rgba(38, 38, 38, .2);
  right: -100%
}

#menu[status=in] {
  right: 0
}

#menu .menu-contents {
  position: relative;
  margin: 0 0 0 auto;
  height: 100%
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents {
    width: 100%
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents {
    width: 744px
  }
}

#menu .menu-contents .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4e9d6;
  background-image: url(assets/img/common/bg-noise.png);
  background-size: 100px 100px;
  background-position: center center;
  opacity: .98
}

#menu .menu-contents .menu-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .menu-header .band {
    position: relative;
    background-color: #262626;
    width: 100%;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1
  }

  #menu .menu-contents .menu-header .band small.text {
    color: #fff;
    letter-spacing: .38em
  }

  #menu .menu-contents .menu-header .band small.text span.c.en {
    font-size: 12px;
    letter-spacing: .38em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents .menu-header .band {
    display: none
  }
}

#menu .menu-contents .menu-header .area-logo-close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding: 0 17px
}

#menu .menu-contents .menu-header .area-logo-close a.logo {
  width: 195px;
  height: 25px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

#menu .menu-contents .menu-header .area-logo-close a.logo.hover:hover {
  opacity: .6
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents .menu-header .area-logo-close a.logo {
    display: none
  }
}

#menu .menu-contents .menu-header .area-logo-close .menu-close {
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .menu-header .area-logo-close .menu-close {
    width: 40px;
    height: 14px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents .menu-header .area-logo-close .menu-close {
    width: 74.05px;
    height: 21.07px;
    position: absolute;
    top: 46px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents .menu-header .area-logo-close .menu-close {
    right: 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  #menu .menu-contents .menu-header .area-logo-close .menu-close {
    right: 100px
  }
}

#menu .menu-contents .menu-header .area-logo-close .menu-close.hover:hover svg path {
  fill: #fb8b1e
}

#menu .menu-contents .menu-header .area-logo-close .menu-close svg path {
  fill-rule: evenodd;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

#menu .menu-contents .area-scroll {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame {
    height: calc(100% - 125px);
    min-height: calc(100% - 125px)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents .area-scroll .frame {
    height: calc(100% - 172px);
    min-height: calc(100% - 172px)
  }
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame {
    padding: 125px 17px 0
  }
}

@media (min-width:961px) and (max-width:1280px) {
  #menu .menu-contents .area-scroll .frame {
    padding: 172px 46px 0
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  #menu .menu-contents .area-scroll .frame {
    padding: 172px 100px 0
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap:not(:first-child) {
  margin-top: 30px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text {
  display: table;
  margin: 0 0 0 auto;
  position: relative
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.hover:hover.heading h6 {
  color: rgba(251, 139, 30, .4)
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.hover:hover.heading h3 {
  color: #fb8b1e
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.hover:hover.btn-small h5 {
  color: #fb8b1e !important
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.hover:hover .area-tip .tip-right {
  opacity: 1
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h6 {
  text-align: right;
  color: rgba(38, 38, 38, .4);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3 {
  margin-top: 10px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3 {
    margin-top: 8px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3:after,
  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3:before {
    content: '';
    display: block
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en {
    font-size: 30px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja {
    font-size: 20px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.heading h3[name=about] {
  letter-spacing: -.05em !important
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.btn-small h5 {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.btn-small h5[type=information] {
  color: #52a9f6
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.btn-small h5[type=interview] {
  color: #33bb54
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.btn-small h5[type=summary] {
  color: #ff665b
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text.btn-small h5[type=knowledge] {
  color: #fac626
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip {
  position: relative
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip .tip-right {
  width: 6px;
  background-color: #fb8b1e;
  border-radius: 3px 0 0 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip .tip-right {
    right: -17px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip .tip-right {
    right: -46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip .tip-right {
    right: -100px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip .tip-right[size='m'] {
  height: 23px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .elem-text .area-tip .tip-right[size='s'] {
  height: 14px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .detail {
  margin-top: 23px
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .detail {
    margin-top: 22px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-1 .wrap .detail a:not(:first-child) {
  margin-top: 16px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search {
  width: 100%;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search {
    border-radius: 5px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner {
  padding: 23px 30px
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner {
    padding: 20px 22px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text] {
  width: 100%;
  flex: 1;
  height: 14px
}

@media (min-width:1px) and (max-width:960px) {

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text]:after,
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text]:before {
    content: '';
    display: block
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en {
    font-size: 16px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(30 / 16 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.b:before {
    margin-top: calc((1 - (30 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.b:after {
    margin-bottom: calc((1 - (30 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja {
    font-size: 13px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 13 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m:before {
    margin-top: calc((1 - (20 / 13))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m:after {
    margin-bottom: calc((1 - (20 / 13))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(30 / 13 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b:before {
    margin-top: calc((1 - (30 / 13))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b:after {
    margin-bottom: calc((1 - (30 / 13))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text]:after,
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text]:before {
    content: '';
    display: block
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en {
    font-size: 16px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.b:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-en.b:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja {
    font-size: 14px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text].f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=text]::placeholder {
  color: rgba(38, 38, 38, .2)
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=submit] {
  width: 19px;
  height: 19px;
  background-color: #fff;
  margin-left: 30px;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=submit] {
    width: 17px;
    height: 17px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search form input[type=submit].hover:hover {
  opacity: .6
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search .icon {
  width: 19px;
  height: 19px;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 30px
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-search .icon {
    width: 17px;
    height: 17px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate {
  position: relative;
  margin: 23px 0
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate {
    margin: 20px 0
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate .separate {
  width: 100%;
  height: 1px;
  background-size: auto auto;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 1px, transparent 1px, transparent 3px)
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate .line-tip[size='s'] {
  width: 20px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate .line-tip[size='m'] {
  width: 26px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate .line-tip[size='s'] {
  bottom: 0;
  right: 0;
  width: 19px
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-separate .line-tip[size='s'] {
    width: 17px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-tags .btns {
  display: flex
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-tags .btns a:not(:first-child) {
  margin-left: 10px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-tags .btns a small {
  color: rgba(38, 38, 38, .6);
  text-decoration: underline;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .elem-search .inner .box-tags .btns a.hover:hover small {
  color: #262626
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 {
    margin-top: 56px;
    padding-bottom: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 {
    margin-top: 60px;
    padding-bottom: 46px
  }
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box .sns {
  display: flex
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box .sns a {
  display: block;
  width: 23px;
  height: 23px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box .sns a:not(:first-child) {
  margin-left: 16px
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box .sns a svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box .sns a.hover:hover svg path {
  fill: #fb8b1e
}

#menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box small {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:1px) and (max-width:960px) {
  #menu .menu-contents .area-scroll .frame .inner-frame .area-2 .box small {
    font-size: 9px
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=index] #intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  background-image: url(assets/img/common/bg-dot.png);
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000
}

html[page=index] #intro .box-copy {
  position: relative;
  height: 1px
}

html[page=index] #intro .box-copy h3.text {
  position: relative;
  top: -1em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] #intro .box-copy h3.text {
    width: calc(513px / 2);
    height: calc(100px / 2)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] #intro .box-copy h3.text {
    width: 566px;
    height: 27px
  }
}

html[page=index] #intro .box-copy h3.text svg g {
  opacity: 0
}

html[page=index] #intro .box-copy h3.text.out {
  opacity: 0;
  transition: .2s opacity 0s linear
}

html[page=index] #intro .logo {
  width: 196px;
  height: 26px;
  position: absolute;
  bottom: 38px;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0
}

html[page=index] #intro .logo.in {
  opacity: 1;
  transition: .2s opacity 0s linear
}

html[page=index] #intro .logo.in.out {
  opacity: 0;
  transition: .2s opacity 0s linear
}

html[page=index] article#kv {
  width: 100%;
  height: 100vh
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv {
    height: calc(100vh - 28px);
    position: relative;
    margin-top: 28px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#kv {
    height: 100vh
  }
}

html[page=index] article#kv .inner-kv {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv .inner-kv {
    height: calc(100% - 80px)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#kv .inner-kv {
    padding-top: 142px;
    height: calc(100% - 142px)
  }
}

html[page=index] article#kv .inner-kv .logo {
  /* background-image: url(assets/img/top/kv-logo.png); */
  background-size: 100% 100%;
  width: 197px;
  height: 117px;
  display: block;
  position: absolute;
  z-index: 10;
  top: 28px;
  left: 0;
  right: 0;
  margin: auto
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv .inner-kv .warp-area-illust {
    height: calc(917 / 1057 * 100%);
    top: 70px;
    position: relative
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#kv .inner-kv .warp-area-illust {
    height: 100%
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust {
  position: relative
}

@media (min-width:1px) and (max-width:412px) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust {
    width: calc(1384 / 750 * 100vw);
    height: calc((1384 / 750 * 100vw) * 917 / 1384);
    left: 50%;
    margin-left: calc(1384 / 750 * 100vw * -.5)
  }
}

@media (min-width:413px) and (max-width:960px) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust {
    height: 100%;
    left: 50%;
    width: calc((100vh - 423px / 2) * 1384 / 917);
    margin-left: calc(((100vh - 423px / 2) * 1384 / 917)/ -2)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers {
    width: 100%;
    height: 100%
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer.layer-1 {
  z-index: 1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer.layer-2 {
  z-index: 2
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer.layer-3 {
  z-index: 3
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer.layer-4 {
  z-index: 4
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust {
  opacity: 0;
  transform: scale(.9)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1'] {
    bottom: calc(375 / 917 * 100%);
    left: calc(0 / 1384 * 100%);
    width: calc((1308 / 1384) * 100%);
    max-width: 1308px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1']:before {
    content: '';
    display: block;
    padding-top: 41.437308868501525%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1'] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-1-1-sp.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1'].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity 0s linear, .5s transform 0s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1'] {
    bottom: calc(178 / 917 * 100%);
    left: calc(227 / 1384 * 100%);
    width: calc((296 / 1384) * 100%);
    max-width: 296px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1']:before {
    content: '';
    display: block;
    padding-top: 177.02702702702703%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1'] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-2-1-sp.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1'].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity .7s linear, .5s transform .7s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2'] {
    bottom: calc(103 / 917 * 100%);
    left: calc(904 / 1384 * 100%);
    width: calc((312 / 1384) * 100%);
    max-width: 312px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2']:before {
    content: '';
    display: block;
    padding-top: 148.71794871794873%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2'] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-2-2-sp.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2'].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity .9s linear, .5s transform .9s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman] {
    bottom: calc(0 / 917 * 100%);
    left: calc(368 / 1384 * 100%);
    width: calc((316 / 1384) * 100%);
    max-width: 316px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman]:before {
    content: '';
    display: block;
    padding-top: 127.84810126582278%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-4-woman-sp.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity 1.3s linear, .5s transform 1.3s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker] {
    bottom: calc(68 / 917 * 100%);
    left: calc(732 / 1384 * 100%);
    width: calc((296 / 1384) * 100%);
    max-width: 296px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker]:before {
    content: '';
    display: block;
    padding-top: 144.5945945945946%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-4-ticker-sp.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity 1.1s linear, .5s transform 1.1s cubic-bezier(.175, .885, .32, 1.275)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1'] {
    bottom: calc(182 / 708 * 100%);
    left: calc(85 / 1440 * 100%);
    width: calc((1270 / 1440) * 100%);
    max-width: 9999px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1']:before {
    content: '';
    display: block;
    padding-top: 41.41732283464567%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1'] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-1-1.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='1'][name='1'].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity 0s linear, .5s transform 0s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1'] {
    bottom: calc(96 / 708 * 100%);
    left: calc(-8 / 1440 * 100%);
    width: calc((287 / 1440) * 100%);
    max-width: 9999px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1']:before {
    content: '';
    display: block;
    padding-top: 177.00348432055748%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1'] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-2-1.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='1'].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity .7s linear, .5s transform .7s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2'] {
    bottom: calc(83 / 708 * 100%);
    left: calc(1108 / 1440 * 100%);
    width: calc((311 / 1440) * 100%);
    max-width: 9999px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2']:before {
    content: '';
    display: block;
    padding-top: 149.19614147909968%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2'] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-2-2.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='2'][name='2'].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity .9s linear, .5s transform .9s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman] {
    bottom: calc(39 / 708 * 100%);
    left: calc(279 / 1440 * 100%);
    width: calc((357 / 1440) * 100%);
    max-width: 9999px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman]:before {
    content: '';
    display: block;
    padding-top: 127.45098039215685%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-4-woman.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=woman].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity 1.3s linear, .5s transform 1.3s cubic-bezier(.175, .885, .32, 1.275)
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker] {
    bottom: calc(82 / 708 * 100%);
    left: calc(806 / 1440 * 100%);
    width: calc((313 / 1440) * 100%);
    max-width: 9999px;
    position: relative;
    position: absolute
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker]:before {
    content: '';
    display: block;
    padding-top: 145.36741214057508%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker] .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/img/top/kv-layer-4-ticker.png);
    background-size: 100% 100%
  }

  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer .illust[layer='4'][name=ticker].in {
    opacity: 1;
    transform: scale(1);
    transition: .1s opacity 1.1s linear, .5s transform 1.1s cubic-bezier(.175, .885, .32, 1.275)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps {
  width: 100%;
  height: 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon {
  opacity: 0;
  transform: translateY(30px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon .float {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 3.7s linear, .3s transform 3.7s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1] {
  color: scene-1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(385 / 917 * 100%);
  left: calc(335 / 1384 * 100%);
  width: calc((60 / 1384) * 100%);
  max-width: 60px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 103.33333333333334%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-1-scene-1-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 3.9s linear, .3s transform 3.9s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4.2s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1] {
  color: scene-1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(451 / 917 * 100%);
  left: calc(429 / 1384 * 100%);
  width: calc((88 / 1384) * 100%);
  max-width: 88px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 136.36363636363635%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-2-scene-1-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-2] {
  bottom: calc(426 / 917 * 100%);
  left: calc(505 / 1384 * 100%);
  width: calc((74 / 1384) * 100%);
  max-width: 74px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 102.7027027027027%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-2-scene-1-num-2-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2] {
  color: scene-2
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2][num=num-1] {
  bottom: calc(439 / 917 * 100%);
  left: calc(443 / 1384 * 100%);
  width: calc((106 / 1384) * 100%);
  max-width: 106px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-2-scene-2-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 4.1s linear, .3s transform 4.1s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4.399999999999999s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1] {
  color: scene-1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(328 / 917 * 100%);
  left: calc(544 / 1384 * 100%);
  width: calc((96 / 1384) * 100%);
  max-width: 96px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 81.25%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-3-scene-1-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-3] {
  color: scene-3
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-3][num=num-1] {
  bottom: calc(328 / 917 * 100%);
  left: calc(544 / 1384 * 100%);
  width: calc((92 / 1384) * 100%);
  max-width: 92px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-3][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 91.30434782608695%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-3][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-3-scene-3-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 2s linear, .3s transform 2s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.3s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1] {
  color: scene-1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(439 / 917 * 100%);
  left: calc(703 / 1384 * 100%);
  width: calc((114 / 1384) * 100%);
  max-width: 114px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 78.94736842105263%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-1-scene-1-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2] {
  color: scene-2
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2][num=num-1] {
  bottom: calc(441 / 917 * 100%);
  left: calc(723 / 1384 * 100%);
  width: calc((76 / 1384) * 100%);
  max-width: 76px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 113.1578947368421%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-1-scene-2-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 2.2s linear, .3s transform 2.2s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.5s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1] {
  color: scene-1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(539 / 917 * 100%);
  left: calc(876 / 1384 * 100%);
  width: calc((68 / 1384) * 100%);
  max-width: 68px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 135.29411764705884%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-1-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-2] {
  bottom: calc(505 / 917 * 100%);
  left: calc(927 / 1384 * 100%);
  width: calc((66 / 1384) * 100%);
  max-width: 66px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 96.96969696969697%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-1-num-2-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3] {
  color: scene-3
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-1] {
  bottom: calc(525 / 917 * 100%);
  left: calc(851 / 1384 * 100%);
  width: calc((90 / 1384) * 100%);
  max-width: 90px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 135.55555555555557%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-3-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-2] {
  bottom: calc(539 / 917 * 100%);
  left: calc(927 / 1384 * 100%);
  width: calc((76 / 1384) * 100%);
  max-width: 76px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-3-num-2-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 2.4s linear, .3s transform 2.4s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.7s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1] {
  color: scene-1
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(407 / 917 * 100%);
  left: calc(973 / 1384 * 100%);
  width: calc((60 / 1384) * 100%);
  max-width: 60px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 103.33333333333334%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isSP .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-3-scene-1-num-1-sp.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon {
  opacity: 0;
  transform: translateY(30px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon .float {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 3.7s linear, .3s transform 3.7s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(425 / 708 * 100%);
  left: calc(225 / 1440 * 100%);
  width: calc((73 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 104.10958904109589%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-1-scene-1-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-3][num=num-1] {
  bottom: calc(438 / 708 * 100%);
  left: calc(164 / 1440 * 100%);
  width: calc((124 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-3][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 91.93548387096774%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-3][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-1-scene-3-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-3][num=num-2] {
  bottom: calc(518 / 708 * 100%);
  left: calc(258 / 1440 * 100%);
  width: calc((84 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-3][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 134.52380952380955%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-1] .balloon[scene=scene-3][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-1-scene-3-num-2.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 3.9s linear, .3s transform 3.9s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4.2s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(533 / 708 * 100%);
  left: calc(377 / 1440 * 100%);
  width: calc((109 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 135.7798165137615%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-2-scene-1-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-2] {
  bottom: calc(501 / 708 * 100%);
  left: calc(471 / 1440 * 100%);
  width: calc((92 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 101.08695652173914%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-1][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-2-scene-1-num-2.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2][num=num-1] {
  bottom: calc(521 / 708 * 100%);
  left: calc(402 / 1440 * 100%);
  width: calc((130 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 98.46153846153847%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-2] .balloon[scene=scene-2][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-2-scene-2-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 4.1s linear, .3s transform 4.1s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4.399999999999999s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(354 / 708 * 100%);
  left: calc(489 / 1440 * 100%);
  width: calc((117 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 82.05128205128204%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=woman][pos=pos-3] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-woman-pos-3-scene-1-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 2s linear, .3s transform 2s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.3s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(474 / 708 * 100%);
  left: calc(739 / 1440 * 100%);
  width: calc((139 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 79.13669064748201%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-1-scene-1-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2][num=num-1] {
  bottom: calc(481 / 708 * 100%);
  left: calc(771 / 1440 * 100%);
  width: calc((93 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 112.90322580645163%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-1] .balloon[scene=scene-2][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-1-scene-2-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 2.2s linear, .3s transform 2.2s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.5s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(579 / 708 * 100%);
  left: calc(949 / 1440 * 100%);
  width: calc((84 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 134.52380952380955%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-1-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-2] {
  bottom: calc(538 / 708 * 100%);
  left: calc(1008 / 1440 * 100%);
  width: calc((80 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 98.75%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-1][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-1-num-2.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-1] {
  bottom: calc(571 / 708 * 100%);
  left: calc(920 / 1440 * 100%);
  width: calc((109 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 135.7798165137615%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-3-num-1.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-2] {
  bottom: calc(539 / 708 * 100%);
  left: calc(1014 / 1440 * 100%);
  width: calc((92 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-2]:before {
  content: '';
  display: block;
  padding-top: 101.08695652173914%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-2] .balloon[scene=scene-3][num=num-2] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-2-scene-3-num-2.png);
  background-size: 100% 100%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3].in {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 2.4s linear, .3s transform 2.4s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3].in .float {
  animation: 1.6s kvBalloonFloatAnimation cubic-bezier(.455, .03, .515, .955);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.7s
}

@-moz-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-webkit-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@-o-keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes kvBalloonFloatAnimation {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(10px)
  }
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3] .balloon {
  opacity: 0;
  transform: translateY(30px)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3] .balloon[status=view] {
  opacity: 1;
  transform: translateY(0);
  transition: .1s opacity 0s linear, .3s transform 0s cubic-bezier(.175, .885, .32, 1.275)
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1][num=num-1] {
  bottom: calc(418 / 708 * 100%);
  left: calc(1068 / 1440 * 100%);
  width: calc((73 / 1440) * 100%);
  max-width: 9999px;
  position: relative;
  position: absolute
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1][num=num-1]:before {
  content: '';
  display: block;
  padding-top: 104.10958904109589%
}

html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers .layer>.wraps.isPC .wrap-balloon[type=ticker][pos=pos-3] .balloon[scene=scene-1][num=num-1] .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/top/kv-layer-3-ticker-pos-3-scene-1-num-1.png);
  background-size: 100% 100%
}

@media (min-width:961px) and (max-width:99999px) and (aspect-ratio:1440/850),
(min-width:961px) and (max-width:99999px) and (min-aspect-ratio:1440/850) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers {
    height: calc(100vh - 142px - 0px);
    width: calc((100vh - 142px - 0px) * 1440 / 708)
  }
}

@media (min-width:961px) and (max-width:99999px) and (max-aspect-ratio:1440/850) {
  html[page=index] article#kv .inner-kv .warp-area-illust .area-illust .layers {
    width: calc(100vw - 0px - 0px);
    height: calc((100vw - 0px - 0px) * 708 / 1440)
  }
}

html[page=index] article#kv #btn-kv-scroll {
  width: 58px;
  height: 59px;
  position: absolute;
  z-index: 5;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv #btn-kv-scroll {
    bottom: 23px;
    width: 62.5px;
    height: 47px
  }
}

html[page=index] article#kv #btn-kv-scroll.hover:hover svg .border path {
  fill: #fb8b1e
}

html[page=index] article#kv #btn-kv-scroll.hover:hover svg circle {
  fill: #fb8b1e
}

html[page=index] article#kv #btn-kv-scroll.hover:hover svg .arrow path {
  fill: #fff
}

html[page=index] article#kv #btn-kv-scroll.hover:hover svg .text path {
  fill: #fb8b1e
}

html[page=index] article#kv #btn-kv-scroll .bg-circle {
  background-color: #fb8b1e;
  border-radius: 100%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  transform: scale(1);
  animation: 3s animation-kv-circle cubic-bezier(.165, .84, .44, 1);
  animation-iteration-count: infinite
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#kv #btn-kv-scroll .bg-circle {
    width: 30px;
    height: 30px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#kv #btn-kv-scroll .bg-circle {
    width: 40px;
    height: 40px
  }
}

@-moz-keyframes animation-kv-circle {
  0% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(2);
    opacity: 0
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

@-webkit-keyframes animation-kv-circle {
  0% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(2);
    opacity: 0
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

@-o-keyframes animation-kv-circle {
  0% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(2);
    opacity: 0
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes animation-kv-circle {
  0% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(2);
    opacity: 0
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

html[page=index] article#kv #btn-kv-scroll svg {
  position: relative
}

html[page=index] article#kv #btn-kv-scroll svg .border path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#kv #btn-kv-scroll svg circle {
  fill: #fff
}

html[page=index] article#kv #btn-kv-scroll svg .arrow path {
  -webkit-transition: .2s;
  -moz-transform: .2s;
  transition: .2s
}

html[page=index] article#kv #btn-kv-scroll svg .text path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular {
    padding: 37px 17px 0
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=index] article#popular {
    padding: 88px 46px 0
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=index] article#popular {
    padding: 88px 100px 0
  }
}

html[page=index] article#popular .frame {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .area-arrow {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .area-arrow {
    z-index: 21;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    width: 225px;
    height: calc(100% + 88px + 76px);
    top: -88px
  }
}

html[page=index] article#popular .frame .area-arrow.hover:hover .arrow svg circle {
  fill: #fb8b1e
}

html[page=index] article#popular .frame .area-arrow.hover:hover .arrow svg path.border {
  fill: #fb8b1e
}

html[page=index] article#popular .frame .area-arrow.hover:hover .arrow svg path.tip {
  fill: #fff
}

html[page=index] article#popular .frame .area-arrow .arrow {
  width: 90px;
  height: 90px;
  pointer-events: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .area-arrow .arrow {
    display: none
  }
}

html[page=index] article#popular .frame .area-arrow .arrow svg {
  width: 100%;
  height: 100%
}

html[page=index] article#popular .frame .area-arrow .arrow svg circle {
  fill: #fff;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#popular .frame .area-arrow .arrow svg path.border {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#popular .frame .area-arrow .arrow svg path.tip {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .area-arrow[direct=prev] {
    left: -109px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .area-arrow[direct=prev] {
    left: -225px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=index] article#popular .frame .area-arrow[direct=prev] .arrow {
    margin-left: 70px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=index] article#popular .frame .area-arrow[direct=prev] .arrow {
    margin-left: 55px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .area-arrow[direct=next] {
    right: -109px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .area-arrow[direct=next] {
    right: -225px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=index] article#popular .frame .area-arrow[direct=next] .arrow {
    margin: 0 70px 0 auto
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=index] article#popular .frame .area-arrow[direct=next] .arrow {
    margin: 0 55px 0 auto
  }
}

html[page=index] article#popular .frame .bg-element {
  background-color: #f7f4e7;
  background-size: 200px 200px;
  background-position: center center;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .bg-element {
    border-radius: 4px
  }
}

html[page=index] article#popular .frame .front-element {
  padding: 88px 125px 76px;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element {
    padding: 58px 92px 56px
  }
}

html[page=index] article#popular .frame .front-element .up-title {
  display: table;
  user-select: none;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  z-index: 1;
  margin: auto;
  display: block
}

html[page=index] article#popular .frame .front-element .up-title h6 {
  color: rgba(38, 38, 38, .4);
  text-align: center
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .up-title h6 {
    font-size: 13px
  }
}

html[page=index] article#popular .frame .front-element .up-title h3 {
  margin-top: 8px;
  text-align: center
}

@media (min-width:1px) and (max-width:960px) {

  html[page=index] article#popular .frame .front-element .up-title h3:after,
  html[page=index] article#popular .frame .front-element .up-title h3:before {
    content: '';
    display: block
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en {
    font-size: 30px
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .up-title {
    top: -25px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .up-title h3 {
    letter-spacing: .12em !important
  }

  html[page=index] article#popular .frame .front-element .up-title h3:after,
  html[page=index] article#popular .frame .front-element .up-title h3:before {
    content: '';
    display: block
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en {
    font-size: 20px
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja {
    font-size: 18px
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 18 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 20px;
    position: relative;
    top: 1px
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 18 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    top: 1px
  }
}

html[page=index] article#popular .frame .front-element .frame-slide {
  position: relative
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item {
    width: calc(312 / 590 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item {
    width: calc(298 / 990 * 100%)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item:not(:nth-child(3n-2)) {
    margin-left: calc(48 / 990 * 100%)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item:nth-child(n+4) {
    margin-top: 76px
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new.png);
    background-size: 100% 100%;
    width: 42px;
    height: 42px;
    display: block
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 18px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 16px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 {
    margin-top: 16px;
    display: flex;
    align-items: center
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 {
    margin-top: 10px;
    display: flex;
    align-items: center
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date {
    margin-left: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date {
    margin-left: 10px
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='1'] {
    width: calc(156 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='1'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='1'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 156 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='1'] {
    width: calc(298 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='1'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='1'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 298 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='2'] {
    width: calc(327 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='2'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='2'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 327 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='2'] {
    width: calc(644 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='2'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='2'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 644 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='3'] {
    width: calc(498 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='3'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='3'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 498 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='3'] {
    width: calc(990 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='3'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='3'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 990 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='4'] {
    width: calc(669 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='4'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='4'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 669 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='4'] {
    width: calc(1336 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='4'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='4'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 1336 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='5'] {
    width: calc(840 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='5'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='5'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 840 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='5'] {
    width: calc(1682 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='5'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='5'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 1682 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='6'] {
    width: calc(1011 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='6'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='6'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 1011 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='6'] {
    width: calc(2028 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='6'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='6'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 2028 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='7'] {
    width: calc(1182 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='7'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='7'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 1182 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='7'] {
    width: calc(2374 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='7'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='7'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 2374 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='8'] {
    width: calc(1353 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='8'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='8'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 1353 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='8'] {
    width: calc(2720 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='8'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='8'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 2720 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='9'] {
    width: calc(1524 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='9'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='9'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 1524 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='9'] {
    width: calc(3066 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='9'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='9'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 3066 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='10'] {
    width: calc(1695 / 156 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='10'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='10'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 1695 * 100%);
    margin-left: 0 !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='10'] {
    width: calc(3412 / 990 * 100%);
    cursor: grab
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='10'].grabbing {
    cursor: grabbing
  }

  html[page=index] article#popular .frame .front-element .frame-slide ul.items[count='10'] li.item {
    margin-top: 0 !important;
    width: calc(298 / 3412 * 100%);
    margin-left: 0 !important
  }
}

html[page=index] article#popular .frame .front-element .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new {
    padding: 56px 0 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#new {
    padding: 136px 0 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid {
    margin-top: 44px
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items {
  display: flex;
  flex-wrap: wrap
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item {
    width: calc(280 / 590 * 100%)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item:not(:nth-child(2n-1)) {
    margin-left: calc(30 / 590 * 100%)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item:nth-child(n+3) {
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item {
    width: calc(298 / 990 * 100%)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item:not(:nth-child(3n-2)) {
    margin-left: calc(48 / 990 * 100%)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item:nth-child(n+4) {
    margin-top: 76px
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new.png);
    background-size: 100% 100%;
    width: 42px;
    height: 42px;
    display: block
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title:after,
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title:after,
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en {
    font-size: 18px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja {
    font-size: 16px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 {
    margin-top: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 {
    margin-top: 10px;
    display: flex;
    align-items: center
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date {
    margin-top: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date {
    margin-left: 10px
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=index] article#new .frame-liquid .area.area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category {
    padding: 44px 17px 84px 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=index] article#category {
    padding: 76px 46px 166px 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=index] article#category {
    padding: 76px 100px 166px 350px
  }
}

html[page=index] article#category .box {
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box {
    border-radius: 5px
  }
}

html[page=index] article#category .box .center-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box .center-dot {
    display: none
  }
}

html[page=index] article#category .box .center-dot .dot {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: rgba(38, 38, 38, .2)
}

html[page=index] article#category .box>.inner-box {
  position: relative
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#category .box>.inner-box .btns {
    display: flex;
    flex-wrap: wrap
  }
}

html[page=index] article#category .box>.inner-box .btns a {
  display: flex;
  align-items: center;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a {
    height: 95px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#category .box>.inner-box .btns a {
    width: 50%;
    height: 128px
  }
}

html[page=index] article#category .box>.inner-box .btns a.hover:hover .inner-a .cell .elem .text {
  opacity: .5
}

html[page=index] article#category .box>.inner-box .btns a.hover:hover .inner-a .cell .elem .icon {
  opacity: .5
}

html[page=index] article#category .box>.inner-box .btns a.hover:hover .inner-a .cell .separate-bottom .line-tip {
  opacity: .5
}

html[page=index] article#category .box>.inner-box .btns a .separate-side {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a .separate-side {
    display: none
  }
}

html[page=index] article#category .box>.inner-box .btns a .separate-side .line {
  width: 100%;
  height: 66px;
  background-size: auto auto;
  background-image: repeating-linear-gradient(0deg, rgba(38, 38, 38, .4), rgba(38, 38, 38, .4) 1px, transparent 1px, transparent 3px)
}

html[page=index] article#category .box>.inner-box .btns a .inner-a {
  padding: 0 46px;
  height: 100%;
  width: 100%
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a {
    padding: 0 28px
  }
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell {
  position: relative;
  width: 100%;
  height: 100%
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3 {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3:after,
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3:before {
    content: '';
    display: block
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en {
    font-size: 25px
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 25 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.b:before {
    margin-top: calc((1 - (28 / 25))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.b:after {
    margin-bottom: calc((1 - (28 / 25))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja {
    font-size: 22px
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 25px;
    position: relative;
    top: 1px
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 22 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b:before {
    margin-top: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 25px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3:after,
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3:before {
    content: '';
    display: block
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en {
    font-size: 18px
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(39 / 18 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.m:before {
    margin-top: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.m:after {
    margin-bottom: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-en.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja {
    font-size: 16px
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(39 / 16 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.m:before {
    margin-top: calc((1 - (39 / 16))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.m:after {
    margin-bottom: calc((1 - (39 / 16))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 16 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b:before {
    margin-top: calc((1 - (25 / 16))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 16))/ 2 * 1em)
  }

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3[type=interview] {
  color: #33bb54
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3[type=information] {
  color: #52a9f6
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3[type=summary] {
  color: #ff665b
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h3[type=knowledge] {
  color: #fac626
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h6 {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h6 {
    margin-top: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .text h6 {
    margin-top: 16px
  }
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .icon {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .icon {
    width: 22px;
    height: 22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .icon {
    width: 26px;
    height: 26px
  }
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .elem .icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom {
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line {
  width: 100%;
  height: 100%;
  background-size: auto auto;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .4), rgba(38, 38, 38, .4) 1px, transparent 1px, transparent 3px);
  position: relative;
  top: 0;
  left: 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line[num='4'] {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line[num='3'],
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line[num='4'] {
    display: none
  }
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[size='s'] {
  width: 20px
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[size='m'] {
  width: 26px
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[type=interview] {
  background-color: #33bb54
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[type=information] {
  background-color: #52a9f6
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[type=summary] {
  background-color: #ff665b
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[type=knowledge] {
  background-color: #fac626
}

html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[size='m'] {
  bottom: 0;
  right: 0;
  height: 5px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#category .box>.inner-box .btns a .inner-a .cell .separate-bottom .line-tip[size='m'] {
    width: 22px;
    height: 4px
  }
}

html[page=index] article#about {
  background-color: #f7f4e7;
  position: relative;
  overflow: hidden;
  padding: 164px 0 46px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about {
    padding: 56px 0
  }
}

html[page=index] article#about .bg-balloon {
  position: absolute
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .bg-balloon {
    background-image: url(assets/img/top/about-bg-balloon-sp.png);
    background-size: 100% 100%;
    width: 567px;
    height: 567px;
    display: block;
    top: -122px;
    right: -339px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#about .bg-balloon {
    background-image: url(assets/img/top/about-bg-balloon.png);
    background-size: 100% 100%;
    width: 588.5px;
    height: 588.5px;
    display: block;
    top: -132px;
    right: -218px
  }
}

html[page=index] article#about .frame-liquid {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid {
    margin-top: 44px
  }
}

html[page=index] article#about .frame-liquid .area.area-liquid h1 span.line {
  position: relative
}

html[page=index] article#about .frame-liquid .area.area-liquid h1 span.line .underline {
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  position: absolute;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid p {
    margin: 50px 0 0 0;
    line-height: calc(61 / 28 * 1em)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#about .frame-liquid .area.area-liquid p {
    line-height: calc(35 / 16 * 1em);
    margin: 45px 0 0 60px
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p:after,
  html[page=index] article#about .frame-liquid .area.area-liquid p:before {
    content: '';
    display: block
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en {
    font-size: 18px
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja {
    font-size: 16px
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=index] article#about .frame-liquid .area.area-liquid p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square {
    margin: 44px 0 0 0;
    height: 72px;
    padding: 0 30px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square {
    margin: 60px 0 0 60px;
    height: 90px;
    padding: 0 48px
  }
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square[color=orange]:hover.hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square[color=orange]:hover.hover .inner .text {
  color: #fff
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square[color=orange]:hover.hover .inner .arrow svg path.line {
  fill: #fff
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square[color=orange]:hover.hover .inner .arrow svg path.arrow {
  fill: #fb8b1e
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square[color=orange]:hover.hover .inner .line-tip {
  background-color: #fff;
  bottom: -2px;
  height: 6px
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square[color=orange] .inner .line-tip {
  background-color: #fb8b1e
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .box-text {
  display: flex;
  align-items: center
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .box-text .icon {
  margin-right: 12px
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .box-text .icon[name=footer-company] {
  background-image: url(assets/img/footer/icon-company.png);
  background-size: 100% 100%;
  width: 36px;
  height: 32px;
  display: block
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .box-text .icon[name=footer-investor] {
  background-image: url(assets/img/footer/icon-investor.png);
  background-size: 100% 100%;
  width: 35px;
  height: 35px;
  display: block
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .box-text .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .arrow {
  width: 26px;
  height: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .arrow {
    width: 22px;
    height: 22px
  }
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .arrow svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .arrow svg path.arrow {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 26px
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .line-tip[size='s'] {
  width: 20px
}

html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square .inner .line-tip {
    width: 22px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square {
    margin: 44px 0 0 0;
    height: 72px;
    padding: 0 30px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=index] article#about .frame-liquid .area.area-liquid .btn-square {
    margin: 60px 0 0 60px;
    height: 90px;
    padding: 0 48px
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=list] article#first .up-title {
  display: table;
  user-select: none
}

html[page=list] article#first .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#first .up-title h6 {
    font-size: 13px
  }
}

html[page=list] article#first .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#first .up-title h3:after,
  html[page=list] article#first .up-title h3:before {
    content: '';
    display: block
  }

  html[page=list] article#first .up-title h3.f-en {
    font-size: 30px
  }

  html[page=list] article#first .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=list] article#first .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=list] article#first .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=list] article#first .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=list] article#first .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=list] article#first .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

html[page=list] article#first .area-sort {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort {
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#first .area-sort {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 60px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#first .area-sort .frame-search {
    width: calc(644 / 990 * 100%)
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search {
  width: 100%;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-search .elem-search {
    border-radius: 5px
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner {
  padding: 23px 30px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-search .elem-search .inner {
    padding: 20px 22px
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text] {
  width: 100%;
  flex: 1;
  height: 14px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text]:after,
  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text]:before {
    content: '';
    display: block
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en {
    font-size: 16px
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(30 / 16 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.b:before {
    margin-top: calc((1 - (30 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.b:after {
    margin-bottom: calc((1 - (30 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja {
    font-size: 13px
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 13 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m:before {
    margin-top: calc((1 - (20 / 13))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m:after {
    margin-bottom: calc((1 - (20 / 13))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(30 / 13 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b:before {
    margin-top: calc((1 - (30 / 13))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b:after {
    margin-bottom: calc((1 - (30 / 13))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text]:after,
  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text]:before {
    content: '';
    display: block
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en {
    font-size: 16px
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.b:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-en.b:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja {
    font-size: 14px
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text].f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=text]::placeholder {
  color: rgba(38, 38, 38, .2)
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=submit] {
  width: 19px;
  height: 19px;
  background-color: #fff;
  margin-left: 30px;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=submit] {
    width: 17px;
    height: 17px
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search form input[type=submit].hover:hover {
  opacity: .6
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search .icon {
  width: 19px;
  height: 19px;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 30px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-search .icon {
    width: 17px;
    height: 17px
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate {
  position: relative;
  margin: 23px 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate {
    margin: 20px 0
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate .separate {
  width: 100%;
  height: 1px;
  background-size: auto auto;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 1px, transparent 1px, transparent 3px)
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate .line-tip[size='s'] {
  width: 20px
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate .line-tip[size='m'] {
  width: 26px
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate .line-tip[size='s'] {
  bottom: 0;
  right: 0;
  width: 19px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-separate .line-tip[size='s'] {
    width: 17px
  }
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-tags .btns {
  display: flex
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-tags .btns a:not(:first-child) {
  margin-left: 10px
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-tags .btns a small {
  color: rgba(38, 38, 38, .6);
  text-decoration: underline;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#first .area-sort .frame-search .elem-search .inner .box-tags .btns a.hover:hover small {
  color: #262626
}

html[page=list] article#first .area-sort .frame-category {
  z-index: 10
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-category {
    position: relative;
    margin-top: 14px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#first .area-sort .frame-category {
    width: calc(298 / 990 * 100%);
    position: absolute;
    right: 0;
    top: 0
  }
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category {
  width: 100%;
  overflow: hidden;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-category .elem-sort-category {
    border-radius: 5px
  }
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=information] {
  border-color: #52a9f6
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=information] .area-heading .btn-base {
  background-color: #52a9f6
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=interview] {
  border-color: #33bb54
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=interview] .area-heading .btn-base {
  background-color: #33bb54
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=summary] {
  border-color: #ff665b
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=summary] .area-heading .btn-base {
  background-color: #ff665b
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=knowledge] {
  border-color: #fac626
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category:not([status=open])[type=knowledge] .area-heading .btn-base {
  background-color: #fac626
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category[status=open] .area-heading .btn-base {
  background-color: #fff
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category[status=open] .area-heading .btn-base h5 {
  color: rgba(38, 38, 38, .2)
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category[status=open] .area-heading .btn-base .icon {
  transform: rotateX(180deg)
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category[status=open] .area-heading .btn-base .icon svg path {
  fill: #262626
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category .area-heading {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category .area-heading .btn-base {
  height: 60px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#first .area-sort .frame-category .elem-sort-category .area-heading .btn-base {
    height: 56px;
    padding: 0 22px
  }
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category .area-heading .btn-base h5 {
  color: #fff;
  padding: 0;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category .area-heading .btn-base .icon {
  width: 12px;
  height: 7px;
  -webkit-transition: .3s;
  -moz-transform: .3s;
  transition: .3s
}

html[page=list] article#first .area-sort .frame-category .elem-sort-category .area-heading .btn-base .icon svg path {
  fill: #fff
}

html[page=list] article#first .area-sort .frame-category .area-accordion {
  background-color: #f2f2f2;
  overflow: hidden;
  height: 0
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category {
  height: 56px;
  display: flex;
  align-items: center;
  margin-top: 2px;
  background-color: #fff;
  padding: 0 30px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category.hover:hover {
  background-color: #fb8b1e
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category.hover:hover h5 {
  color: #fff
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category h5 {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category h5[type=information] {
  color: #52a9f6
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category h5[type=interview] {
  color: #33bb54
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category h5[type=summary] {
  color: #ff665b
}

html[page=list] article#first .area-sort .frame-category .area-accordion a.btn-category h5[type=knowledge] {
  color: #fac626
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive {
    padding: 52px 0 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive {
    padding: 76px 0 0
  }
}

html[page=list] article#archive .frame-liquid ul.items {
  display: flex;
  flex-wrap: wrap
}

html[page=list] article#archive .frame-liquid ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item {
    width: calc(280 / 590 * 100%)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item:not(:nth-child(2n-1)) {
    margin-left: calc(30 / 590 * 100%)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item:nth-child(n+3) {
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid ul.items li.item {
    width: calc(298 / 990 * 100%)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item:not(:nth-child(3n-2)) {
    margin-left: calc(48 / 990 * 100%)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item:nth-child(n+4) {
    margin-top: 76px
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=list] article#archive .frame-liquid ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=list] article#archive .frame-liquid ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=list] article#archive .frame-liquid ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new.png);
    background-size: 100% 100%;
    width: 42px;
    height: 42px;
    display: block
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title:after,
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title:after,
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en {
    font-size: 18px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja {
    font-size: 16px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 {
    margin-top: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 {
    margin-top: 10px;
    display: flex;
    align-items: center
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date {
    margin-top: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date {
    margin-left: 10px
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid ul.items {
    margin-bottom: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid ul.items {
    margin-bottom: 76px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid .no-items {
    margin-bottom: 100px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid .no-items {
    margin-bottom: 120px
  }
}

html[page=list] article#archive .frame-liquid .pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between
}

html[page=list] article#archive .frame-liquid .pagination a.direct {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#archive .frame-liquid .pagination a.direct:after,
  html[page=list] article#archive .frame-liquid .pagination a.direct:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en {
    font-size: 13px
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=list] article#archive .frame-liquid .pagination a.direct:after,
  html[page=list] article#archive .frame-liquid .pagination a.direct:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en {
    font-size: 15px
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination a.direct.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }
}

html[page=list] article#archive .frame-liquid .pagination a.direct.no-click {
  color: rgba(38, 38, 38, .4);
  cursor: default
}

html[page=list] article#archive .frame-liquid .pagination a.direct:not(.no-click).hover:hover {
  color: #fb8b1e
}

html[page=list] article#archive .frame-liquid .pagination .pages {
  display: flex
}

html[page=list] article#archive .frame-liquid .pagination .pages a {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid .pagination .pages a {
    letter-spacing: 0 !important
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a:after,
  html[page=list] article#archive .frame-liquid .pagination .pages a:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en {
    font-size: 13px
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid .pagination .pages a {
    letter-spacing: 0 !important
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a:after,
  html[page=list] article#archive .frame-liquid .pagination .pages a:before {
    content: '';
    display: block
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en {
    font-size: 15px
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=list] article#archive .frame-liquid .pagination .pages a.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }
}

html[page=list] article#archive .frame-liquid .pagination .pages a:not(:first-child) {
  margin-left: 32px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid .pagination .pages a:not(:first-child) {
    margin-left: 14px
  }
}

html[page=list] article#archive .frame-liquid .pagination .pages a[status=current] {
  background-color: #fb8b1e;
  color: #fff;
  cursor: default
}

html[page=list] article#archive .frame-liquid .pagination .pages a:not([status=current]).hover:hover {
  color: #fb8b1e
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-liquid .pagination {
    margin-bottom: 16px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#archive .frame-liquid .pagination {
    margin-bottom: 12px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#archive .frame-separate {
    padding: 0 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=list] article#archive .frame-separate {
    padding: 0 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=list] article#archive .frame-separate {
    padding: 0 100px 0 350px
  }
}

html[page=list] article#archive .frame-separate .separate {
  width: 100%;
  height: 2px;
  background-size: auto auto;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .2), rgba(38, 38, 38, .2) 2px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular {
    padding: 84px 0 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#popular {
    padding: 136px 0 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid {
    margin-top: 44px
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide {
  position: relative
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item {
    width: calc(312 / 590 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item {
    width: calc(162 / 990 * 100%)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item:not(:nth-child(5n-4)) {
    margin-left: calc(45 / 990 * 100%)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-s.png);
    background-size: 100% 100%;
    width: 36px;
    height: 36px;
    display: block
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 16px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 14px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 {
    margin-top: 16px;
    display: flex;
    align-items: center
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 {
    margin-top: 8px
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
    margin-left: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
    margin-top: 8px
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='1'] {
    width: calc(156 / 295 * 100%);
    cursor: grab
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='1'].grabbing {
    cursor: grabbing
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='1'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 156 * 100%);
    margin-left: 0 !important
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='2'] {
    width: calc(327 / 295 * 100%);
    cursor: grab
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='2'].grabbing {
    cursor: grabbing
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='2'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 327 * 100%);
    margin-left: 0 !important
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='3'] {
    width: calc(498 / 295 * 100%);
    cursor: grab
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='3'].grabbing {
    cursor: grabbing
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='3'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 498 * 100%);
    margin-left: 0 !important
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='4'] {
    width: calc(669 / 295 * 100%);
    cursor: grab
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='4'].grabbing {
    cursor: grabbing
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='4'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 669 * 100%);
    margin-left: 0 !important
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='5'] {
    width: calc(840 / 295 * 100%);
    cursor: grab
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='5'].grabbing {
    cursor: grabbing
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='5'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 840 * 100%);
    margin-left: 0 !important
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='6'] {
    width: calc(1011 / 295 * 100%);
    cursor: grab
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='6'].grabbing {
    cursor: grabbing
  }

  html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='6'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 1011 * 100%);
    margin-left: 0 !important
  }
}

html[page=list] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=single] article#first {
  background-color: #fff;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#first {
    padding-bottom: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#first {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 60px
  }
}

html[page=single] article#first .area-title {
  flex: 1;
  padding-right: 2em
}

html[page=single] article#first .area-title h6.posttype {
  display: table;
  padding: 5px;
  border-radius: 2px;
  color: #fff
}

html[page=single] article#first .area-title h6.posttype[type=interview] {
  background-color: #33bb54
}

html[page=single] article#first .area-title h6.posttype[type=information] {
  background-color: #52a9f6
}

html[page=single] article#first .area-title h6.posttype[type=summary] {
  background-color: #ff665b
}

html[page=single] article#first .area-title h6.posttype[type=knowledge] {
  background-color: #fac626
}

html[page=single] article#first .area-title h2.title {
  margin: 16px 0
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#first .area-title h2.title:after,
  html[page=single] article#first .area-title h2.title:before {
    content: '';
    display: block
  }

  html[page=single] article#first .area-title h2.title.f-en {
    font-size: 22px
  }

  html[page=single] article#first .area-title h2.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 22 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-en.m:before {
    margin-top: calc((1 - (14 / 22))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-en.m:after {
    margin-bottom: calc((1 - (14 / 22))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 22 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-en.b:before {
    margin-top: calc((1 - (25 / 22))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-en.b:after {
    margin-bottom: calc((1 - (25 / 22))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja {
    font-size: 18px
  }

  html[page=single] article#first .area-title h2.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 18 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja.m:before {
    margin-top: calc((1 - (14 / 18))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 18))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 22px;
    position: relative;
    top: 1px
  }

  html[page=single] article#first .area-title h2.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=single] article#first .area-title h2.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 22px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#first .area-title .tags {
  display: flex
}

html[page=single] article#first .area-title .tags a {
  color: rgba(38, 38, 38, .6);
  text-decoration: underline;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#first .area-title .tags a.hover:hover {
  color: #262626
}

html[page=single] article#first .area-title .tags a:not(:first-child) {
  margin-left: 10px
}

html[page=single] article#first .area-title .box-date {
  margin-top: 16px;
  display: flex;
  align-items: center
}

html[page=single] article#first .area-title .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block
}

html[page=single] article#first .area-title .box-date h6.date {
  margin-left: 5px
}

html[page=single] article#first .area-code {
  display: flex;
  align-items: flex-end
}

html[page=single] article#first .area-code[type=knowledge] {
  display: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#first .area-code {
    flex-direction: column;
    position: absolute;
    bottom: -30px;
    right: 17px;
    z-index: 3
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#first .area-code {
    flex-direction: column-reverse
  }
}

html[page=single] article#first .area-code h2.code {
  font-family: Arial, "メイリオ";
  font-weight: 700;
  font-size: 53px;
  line-height: calc(1em * .792452830188679)
}

html[page=single] article#first .area-code h2.code:after {
  margin-bottom: -3px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#first .area-code h2.code {
    font-size: 32px
  }
}

html[page=single] article#first .area-code small {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#first .area-code small {
    margin-top: 10px;
    letter-spacing: .02em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#first .area-code small {
    margin-bottom: 8px
  }
}

html[page=single] article#lead {
  position: relative;
  z-index: 1;
  background-image: url(assets/img/common/bg-noise.png);
  background-size: 100px 100px;
  background-position: center center
}

html[page=single] article#lead .bg-square {
  position: absolute;
  width: 100%;
  background-image: url(assets/img/common/bg-square.png);
  background-size: 11px 11px;
  background-position: top center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .bg-square {
    border-bottom: solid 1px rgba(38, 38, 38, .03)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .bg-square {
    border-bottom: solid 1px rgba(38, 38, 38, .01)
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .bg-square {
    height: calc(100% - (21px * 2));
    top: 21px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .bg-square {
    height: calc(100% - (42px * 2));
    top: 42px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front {
    padding: 56px 17px 56px 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#lead .area-front {
    padding: 90px 46px 90px 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#lead .area-front {
    padding: 90px 100px 90px 350px
  }
}

html[page=single] article#lead .area-front .pattern-a {
  position: relative
}

html[page=single] article#lead .area-front .pattern-a ul.items li {
  display: flex;
  align-items: flex-end
}

html[page=single] article#lead .area-front .pattern-a ul.items li:not(:first-child) {
  margin-top: 30px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li:not(:first-child) {
    margin-top: 22px
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li[type=interviewee] {
  flex-direction: row-reverse
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face {
  width: 60px;
  height: 60px;
  background-color: #fb8b1e;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face {
    width: 38px;
    height: 38px
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face[type=interviewer] {
  margin-right: 23px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face[type=interviewer] {
    margin-right: 14px
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face[type=interviewee] {
  margin-left: 23px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face[type=interviewee] {
    margin-left: 14px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .face[type=interviewer][face=face-1] {
    background-image: url(assets/img/single-list/conversation-face-1-sp.png);
    background-size: 100% 100%;
    width: 27px;
    height: 31px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .face[type=interviewer][face=face-1] {
    background-image: url(assets/img/single-list/conversation-face-1.png);
    background-size: 100% 100%;
    width: 43px;
    height: 49px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .face[type=interviewer][face=face-2] {
    background-image: url(assets/img/single-list/conversation-face-2-sp.png);
    background-size: 100% 100%;
    width: 27px;
    height: 31px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .face[type=interviewer][face=face-2] {
    background-image: url(assets/img/single-list/conversation-face-2.png);
    background-size: 100% 100%;
    width: 44px;
    height: 49px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .face[type=interviewer][face=face-3] {
    background-image: url(assets/img/single-list/conversation-face-3-sp.png);
    background-size: 100% 100%;
    width: 27px;
    height: 31px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .face[type=interviewer][face=face-3] {
    background-image: url(assets/img/single-list/conversation-face-3.png);
    background-size: 100% 100%;
    width: 43px;
    height: 49px;
    display: block
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-face .logo {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-color: #fff
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text {
    width: 100%;
    flex: 1
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text {
    max-width: calc(610 / 990 * 100%)
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon {
  border-radius: 5px;
  box-shadow: 3px 3px 0 rgba(38, 38, 38, .2)
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon[type=interviewer] {
  background-color: #faf9f2
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon[type=interviewee] {
  background-color: #fff
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner {
  padding: 30px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner {
    padding: 23px 16px 16px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p:after,
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p:before {
    content: '';
    display: block
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en {
    font-size: 15px
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja {
    font-size: 13px
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text .balloon .inner p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text h6.name {
  color: rgba(38, 38, 38, .8);
  margin-top: 16px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text h6.name {
    margin-top: 10px
  }
}

html[page=single] article#lead .area-front .pattern-a ul.items li .cell-text h6.name[type=interviewee] {
  text-align: right
}

html[page=single] article#lead .area-front .pattern-b {
  position: relative
}

html[page=single] article#lead .area-front .pattern-b[illust-is=on] {
  display: flex;
  justify-content: space-between
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-b[illust-is=on] .balloon {
    width: calc(380 / 590 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .area-front .pattern-b[illust-is=on] .balloon {
    width: calc(644 / 990 * 100%)
  }
}

html[page=single] article#lead .area-front .pattern-b[illust-is=off] .balloon {
  width: 100%
}

html[page=single] article#lead .area-front .pattern-b[illust-is=off] .balloon .balloon-box-tip {
  display: none
}

html[page=single] article#lead .area-front .pattern-b .balloon {
  position: relative;
  height: fit-content;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
  border-radius: 8px;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  background-color: #faf9f2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-b .balloon {
    border-radius: 5px
  }
}

html[page=single] article#lead .area-front .pattern-b .balloon .balloon-box-tip {
  position: absolute;
  bottom: 5px;
  right: -10px
}

html[page=single] article#lead .area-front .pattern-b .balloon .balloon-box-tip .tip.tip-front {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 10px;
  border-color: transparent transparent transparent #faf9f2;
  z-index: 1;
  position: relative
}

html[page=single] article#lead .area-front .pattern-b .balloon .balloon-box-tip .tip.tip-shadow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 10px;
  border-color: transparent transparent transparent rgba(38, 38, 38, .1);
  position: absolute;
  top: 3px;
  left: 3px
}

html[page=single] article#lead .area-front .pattern-b .balloon .inner {
  padding: 30px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p:after,
  html[page=single] article#lead .area-front .pattern-b .balloon .inner p:before {
    content: '';
    display: block
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en {
    font-size: 15px
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja {
    font-size: 13px
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#lead .area-front .pattern-b .balloon .inner p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust {
  position: relative;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#lead .area-front .pattern-b .wrap-illust {
    width: calc(210 / 590 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#lead .area-front .pattern-b .wrap-illust {
    width: calc(305 / 990 * 100%)
  }
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust .box-illust.isPC {
  top: 38px;
  width: calc((305 / 305) * 100%);
  max-width: 305px;
  position: relative;
  position: absolute
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust .box-illust.isPC:before {
  content: '';
  display: block;
  padding-top: 148.03921568627453%
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust .box-illust.isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/single-list/lead-illust.png);
  background-size: 100% 100%
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust .box-illust.isSP {
  margin-top: 30px;
  margin-left: -8px;
  width: calc((226 / 210) * 100%);
  max-width: 226px;
  position: relative
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust .box-illust.isSP:before {
  content: '';
  display: block;
  padding-top: 222.12389380530973%
}

html[page=single] article#lead .area-front .pattern-b .wrap-illust .box-illust.isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/single-list/lead-illust-sp.png);
  background-size: 100% 100%
}

html[page=single] article#tableofcontents {
  background-color: #fff;
  display: flex;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#tableofcontents {
    flex-direction: column-reverse
  }

  html[page=single] article#tableofcontents[type='a'] {
    padding: 67px 17px 56px 63px
  }

  html[page=single] article#tableofcontents[type='b'] {
    padding: 56px 17px 56px 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#tableofcontents {
    padding: 90px 46px 90px 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#tableofcontents {
    padding: 90px 100px 90px 350px
  }
}

html[page=single] article#tableofcontents>h6 {
  position: absolute;
  color: rgba(38, 38, 38, .6);
  top: 23px;
  right: 100px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#tableofcontents>h6 {
    top: 16px;
    right: 17px
  }

  html[page=single] article#tableofcontents>h6:after,
  html[page=single] article#tableofcontents>h6:before {
    content: '';
    display: block
  }

  html[page=single] article#tableofcontents>h6.f-en {
    font-size: 11px
  }

  html[page=single] article#tableofcontents>h6.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja {
    font-size: 10px
  }

  html[page=single] article#tableofcontents>h6.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#tableofcontents>h6.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents>h6.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#tableofcontents>h6[type='b'] {
  display: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#tableofcontents .area-contents[type='a'] {
    margin-top: -55px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#tableofcontents .area-contents {
    width: calc(642 / 990 * 100%)
  }
}

html[page=single] article#tableofcontents .area-contents ul.items {
  margin-top: 30px;
  border-top: solid 1px rgba(38, 38, 38, .2);
  position: relative;
  z-index: 1;
  background-color: #fff
}

html[page=single] article#tableofcontents .area-contents ul.items li {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px rgba(38, 38, 38, .2)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#tableofcontents .area-contents ul.items li {
    padding: 16px 10px 8px 0;
    align-items: flex-start
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#tableofcontents .area-contents ul.items li {
    padding: 23px 10px 23px 0;
    align-items: center
  }
}

html[page=single] article#tableofcontents .area-contents ul.items li.hover:hover .texts {
  color: #fb8b1e
}

html[page=single] article#tableofcontents .area-contents ul.items li.hover:hover .arrow svg path {
  fill: #fb8b1e
}

html[page=single] article#tableofcontents .area-contents ul.items li .texts {
  display: flex;
  align-items: center;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#tableofcontents .area-contents ul.items li .texts {
    align-items: flex-start
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num:after,
  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num:before {
    content: '';
    display: block
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en {
    font-size: 15px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja {
    font-size: 13px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.num.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text {
  padding: 0 30px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text {
    letter-spacing: 0 !important;
    padding: 0 20px 0 23px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text:after,
  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text:before {
    content: '';
    display: block
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en {
    font-size: 15px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(18 / 15 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en.m:before {
    margin-top: calc((1 - (18 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en.m:after {
    margin-bottom: calc((1 - (18 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(18 / 15 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en.b:before {
    margin-top: calc((1 - (18 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-en.b:after {
    margin-bottom: calc((1 - (18 / 15))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja {
    font-size: 13px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(18 / 13 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.m:before {
    margin-top: calc((1 - (18 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.m:after {
    margin-bottom: calc((1 - (18 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(18 / 13 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.b:before {
    margin-top: calc((1 - (18 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.b:after {
    margin-bottom: calc((1 - (18 / 13))/ 2 * 1em)
  }

  html[page=single] article#tableofcontents .area-contents ul.items li .texts p.text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#tableofcontents .area-contents ul.items li .arrow svg {
  width: 12px;
  height: 7px
}

html[page=single] article#tableofcontents .area-contents ul.items li .arrow svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#tableofcontents .area-illust {
    width: calc(346 / 990 * 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
  }
}

html[page=single] article#tableofcontents .area-illust[type='b'] {
  display: none
}

html[page=single] article#tableofcontents .area-illust .box-photo.isSP {
  background-image: url(assets/img/single-list/tableofcontents-illust-sp.png);
  background-size: 100% 100%;
  width: 159px;
  height: 115px;
  display: block;
  margin: 0 0 0 auto
}

html[page=single] article#tableofcontents .area-illust .box-photo.isPC {
  width: calc((270 / 346) * 100%);
  max-width: 357px;
  position: relative
}

html[page=single] article#tableofcontents .area-illust .box-photo.isPC:before {
  content: '';
  display: block;
  padding-top: 72.54901960784314%
}

html[page=single] article#tableofcontents .area-illust .box-photo.isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/single-list/tableofcontents-illust.png);
  background-size: 100% 100%
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections {
    padding: 12px 0 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#sections {
    padding: 16px 0 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#sections {
    padding: 16px 0 0 350px
  }
}

html[page=single] article#sections section {
  padding-top: 90px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section {
    padding-top: 60px
  }
}

html[page=single] article#sections section .section-tip {
  margin-bottom: 12px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip {
    margin-bottom: 6px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='1'] {
    background-image: url(assets/img/single-list/section-q-1-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='1'] {
    background-image: url(assets/img/single-list/section-q-1.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='1'] {
    background-image: url(assets/img/single-list/section-num-1-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='1'] {
    background-image: url(assets/img/single-list/section-num-1.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='2'] {
    background-image: url(assets/img/single-list/section-q-2-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='2'] {
    background-image: url(assets/img/single-list/section-q-2.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='2'] {
    background-image: url(assets/img/single-list/section-num-2-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='2'] {
    background-image: url(assets/img/single-list/section-num-2.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='3'] {
    background-image: url(assets/img/single-list/section-q-3-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='3'] {
    background-image: url(assets/img/single-list/section-q-3.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='3'] {
    background-image: url(assets/img/single-list/section-num-3-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='3'] {
    background-image: url(assets/img/single-list/section-num-3.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='4'] {
    background-image: url(assets/img/single-list/section-q-4-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='4'] {
    background-image: url(assets/img/single-list/section-q-4.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='4'] {
    background-image: url(assets/img/single-list/section-num-4-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='4'] {
    background-image: url(assets/img/single-list/section-num-4.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='5'] {
    background-image: url(assets/img/single-list/section-q-5-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='5'] {
    background-image: url(assets/img/single-list/section-q-5.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='5'] {
    background-image: url(assets/img/single-list/section-num-5-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='5'] {
    background-image: url(assets/img/single-list/section-num-5.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='6'] {
    background-image: url(assets/img/single-list/section-q-6-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='6'] {
    background-image: url(assets/img/single-list/section-q-6.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='6'] {
    background-image: url(assets/img/single-list/section-num-6-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='6'] {
    background-image: url(assets/img/single-list/section-num-6.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='7'] {
    background-image: url(assets/img/single-list/section-q-7-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='7'] {
    background-image: url(assets/img/single-list/section-q-7.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='7'] {
    background-image: url(assets/img/single-list/section-num-7-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='7'] {
    background-image: url(assets/img/single-list/section-num-7.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='8'] {
    background-image: url(assets/img/single-list/section-q-8-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='8'] {
    background-image: url(assets/img/single-list/section-q-8.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='8'] {
    background-image: url(assets/img/single-list/section-num-8-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='8'] {
    background-image: url(assets/img/single-list/section-num-8.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='9'] {
    background-image: url(assets/img/single-list/section-q-9-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='9'] {
    background-image: url(assets/img/single-list/section-q-9.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='9'] {
    background-image: url(assets/img/single-list/section-num-9-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='9'] {
    background-image: url(assets/img/single-list/section-num-9.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.q[num='10'] {
    background-image: url(assets/img/single-list/section-q-10-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.q[num='10'] {
    background-image: url(assets/img/single-list/section-q-10.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .section-tip.num[num='10'] {
    background-image: url(assets/img/single-list/section-num-10-sp.png);
    background-size: 100% 100%;
    width: 28px;
    height: 19px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .section-tip.num[num='10'] {
    background-image: url(assets/img/single-list/section-num-10.png);
    background-size: 100% 100%;
    width: 34px;
    height: 23px;
    display: block
  }
}

html[page=single] article#sections section .box-heading {
  padding: 23px 30px;
  background-color: #000;
  border-radius: 5px 0 0 5px;
  color: #fff
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .box-heading {
    padding: 16px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .box-heading h2 {
    letter-spacing: .04em !important
  }

  html[page=single] article#sections section .box-heading h2:after,
  html[page=single] article#sections section .box-heading h2:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .box-heading h2.f-en {
    font-size: 20px
  }

  html[page=single] article#sections section .box-heading h2.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(25 / 20 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.m:before {
    margin-top: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.m:after {
    margin-bottom: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 20 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.b:before {
    margin-top: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.b:after {
    margin-bottom: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja {
    font-size: 18px
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 20px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#sections section .box-heading h2:after,
  html[page=single] article#sections section .box-heading h2:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .box-heading h2.f-en {
    font-size: 27px
  }

  html[page=single] article#sections section .box-heading h2.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(33 / 27 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.m:before {
    margin-top: calc((1 - (33 / 27))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.m:after {
    margin-bottom: calc((1 - (33 / 27))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(33 / 27 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.b:before {
    margin-top: calc((1 - (33 / 27))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-en.b:after {
    margin-bottom: calc((1 - (33 / 27))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja {
    font-size: 24px
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(33 / 24 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m:before {
    margin-top: calc((1 - (33 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m:after {
    margin-bottom: calc((1 - (33 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 27px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(33 / 24 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b:before {
    margin-top: calc((1 - (33 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b:after {
    margin-bottom: calc((1 - (33 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .box-heading h2.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 27px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail {
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail {
    margin-top: 60px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail {
    padding-right: 17px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#sections section .detail {
    padding-right: 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#sections section .detail {
    padding-right: 100px
  }
}

html[page=single] article#sections section .detail .box:first-child {
  margin-top: 0 !important
}

html[page=single] article#sections section .detail .box:last-child {
  margin-bottom: 0 !important
}

html[page=single] article#sections section .detail .box.box-heading-h3 {
  max-width: 990px;
  display: flex
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 {
    margin: 44px auto calc(18px - 44px)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 {
    margin: 60px auto calc(32px - 60px)
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 span.icon {
    margin-right: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 span.icon {
    margin-right: 9px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 span.icon svg {
    width: 19px;
    height: 19px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 span.icon svg {
    width: 25px;
    height: 25px
  }
}

html[page=single] article#sections section .detail .box.box-heading-h3 span.icon svg path {
  fill: #fb8b1e
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 h3 {
    margin-top: .15em
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3:after,
  html[page=single] article#sections section .detail .box.box-heading-h3 h3:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en {
    font-size: 18px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja {
    font-size: 16px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m {
    letter-spacing: .08em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h3 h3 {
    margin-top: .1em
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3:after,
  html[page=single] article#sections section .detail .box.box-heading-h3 h3:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en {
    font-size: 24px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 24 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.m:before {
    margin-top: calc((1 - (28 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.m:after {
    margin-bottom: calc((1 - (28 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 24 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.b:before {
    margin-top: calc((1 - (28 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-en.b:after {
    margin-bottom: calc((1 - (28 / 24))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja {
    font-size: 22px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 22 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m:before {
    margin-top: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 24px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 22 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b:before {
    margin-top: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 24px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h3 h3.f-ja.m {
    letter-spacing: .12em
  }
}

html[page=single] article#sections section .detail .box.box-heading-h4 {
  max-width: 990px;
  display: flex
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 {
    margin: 44px auto calc(17px - 44px)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 {
    margin: 60px auto calc(25px - 60px)
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 span.icon {
    margin-right: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 span.icon {
    margin-right: 11px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 span.icon svg {
    width: 17px;
    height: 17px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 span.icon svg {
    width: 22px;
    height: 22px
  }
}

html[page=single] article#sections section .detail .box.box-heading-h4 span.icon svg path {
  fill: #666
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 h4 {
    margin-top: .13em
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4:after,
  html[page=single] article#sections section .detail .box.box-heading-h4 h4:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en {
    font-size: 17px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 17 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.m:before {
    margin-top: calc((1 - (22 / 17))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.m:after {
    margin-bottom: calc((1 - (22 / 17))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 17 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.b:before {
    margin-top: calc((1 - (22 / 17))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.b:after {
    margin-bottom: calc((1 - (22 / 17))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja {
    font-size: 15px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m:before {
    margin-top: calc((1 - (22 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 17px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b:before {
    margin-top: calc((1 - (22 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 17px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m {
    letter-spacing: .08em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-heading-h4 h4 {
    margin-top: .1em
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4:after,
  html[page=single] article#sections section .detail .box.box-heading-h4 h4:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en {
    font-size: 22px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 22 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.m:before {
    margin-top: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.m:after {
    margin-bottom: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 22 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.b:before {
    margin-top: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-en.b:after {
    margin-bottom: calc((1 - (28 / 22))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja {
    font-size: 20px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 20 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m:before {
    margin-top: calc((1 - (28 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 22px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 20 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b:before {
    margin-top: calc((1 - (28 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 20))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 22px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-heading-h4 h4.f-ja.m {
    letter-spacing: .12em
  }
}

html[page=single] article#sections section .detail .box.box-text {
  width: 100%;
  max-width: 990px;
  display: table
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-text {
    margin: 44px auto
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-text {
    margin: 60px auto
  }
}

html[page=single] article#sections section .detail .box.box-text[type=knowledge] .text {
  color: #4c4c4c
}

html[page=single] article#sections section .detail .box.box-text[type=knowledge] .text a {
  color: #4c4c4c
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections section .detail .box.box-text .text:after,
  html[page=single] article#sections section .detail .box.box-text .text:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en {
    font-size: 15px
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#sections section .detail .box.box-text .text:after,
  html[page=single] article#sections section .detail .box.box-text .text:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en {
    font-size: 18px
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja {
    font-size: 16px
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-text .text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections section .detail .box.box-text .text strong {
  background: linear-gradient(to top, transparent, transparent 1px, rgba(251, 139, 30, .4) 2px)
}

html[page=single] article#sections section .detail .box.box-text .text ol,
html[page=single] article#sections section .detail .box.box-text .text ul {
  border-left: solid 2px #ededed
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections section .detail .box.box-text .text ol,
  html[page=single] article#sections section .detail .box.box-text .text ul {
    margin: 12px 0 12px 5px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#sections section .detail .box.box-text .text ol,
  html[page=single] article#sections section .detail .box.box-text .text ul {
    margin: 25px 0 25px 7px
  }
}

html[page=single] article#sections section .detail .box.box-text .text ol li,
html[page=single] article#sections section .detail .box.box-text .text ul li {
  display: flex;
  line-height: calc(36 / 26 * 1em)
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections section .detail .box.box-text .text ol li:not(:first-child),
  html[page=single] article#sections section .detail .box.box-text .text ul li:not(:first-child) {
    margin-top: 19px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#sections section .detail .box.box-text .text ol li:not(:first-child),
  html[page=single] article#sections section .detail .box.box-text .text ul li:not(:first-child) {
    margin-top: 13px
  }
}

html[page=single] article#sections section .detail .box.box-text .text ol {
  counter-reset: count 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-text .text ol {
    padding-left: 22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-text .text ol {
    padding-left: 29px
  }
}

html[page=single] article#sections section .detail .box.box-text .text ol li:before {
  content: counter(count);
  counter-increment: count 1;
  font-weight: 700
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-text .text ol li:before {
    margin-right: .7em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-text .text ol li:before {
    margin-right: .5em
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-text .text ul {
    padding-left: 17px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-text .text ul {
    padding-left: 26px
  }
}

html[page=single] article#sections section .detail .box.box-text .text ul li:before {
  content: '・';
  margin-right: .2em
}

html[page=single] article#sections section .detail .box.box-photo {
  max-width: 644px;
  border: solid 2px #e5e5e5;
  border-radius: 5px;
  overflow: hidden
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-photo {
    width: 100%;
    margin: 44px auto
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-photo {
    width: calc(644 / 990 * 100%);
    margin: 60px auto;
    cursor: default
  }
}

html[page=single] article#sections section .detail .box.box-photo.hover:hover .icon-zoom svg circle,
html[page=single] article#sections section .detail .box.box-photo.hover:hover .icon-zoom svg path,
html[page=single] article#sections section .detail .box.box-photo.hover:hover .icon-zoom svg polygon {
  fill: #fb8b1e
}

html[page=single] article#sections section .detail .box.box-photo.hover:hover .icon-zoom svg rect {
  fill: #fff
}

html[page=single] article#sections section .detail .box.box-photo .photo {
  width: 100%;
  height: auto
}

html[page=single] article#sections section .detail .box.box-photo .icon-zoom {
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 16px;
  right: 16px
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-photo .icon-zoom {
    display: none
  }
}

html[page=single] article#sections section .detail .box.box-photo .icon-zoom svg circle,
html[page=single] article#sections section .detail .box.box-photo .icon-zoom svg path,
html[page=single] article#sections section .detail .box.box-photo .icon-zoom svg polygon,
html[page=single] article#sections section .detail .box.box-photo .icon-zoom svg rect {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#sections section .detail .box.box-photo .icon-zoom svg circle {
  fill: transparent
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li {
  display: flex;
  align-items: flex-end
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li:not(:first-child) {
  margin-top: 30px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li:not(:first-child) {
    margin-top: 22px
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li[type=interviewee] {
  flex-direction: row-reverse
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face {
  width: 60px;
  height: 60px;
  background-color: #fb8b1e;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face {
    width: 38px;
    height: 38px
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face[type=interviewer] {
  margin-right: 23px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face[type=interviewer] {
    margin-right: 14px
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face[type=interviewee] {
  margin-left: 23px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face[type=interviewee] {
    margin-left: 14px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .face[type=interviewer][face=face-1] {
    background-image: url(assets/img/single-list/conversation-face-1-sp.png);
    background-size: 100% 100%;
    width: 27px;
    height: 31px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .face[type=interviewer][face=face-1] {
    background-image: url(assets/img/single-list/conversation-face-1.png);
    background-size: 100% 100%;
    width: 43px;
    height: 49px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .face[type=interviewer][face=face-2] {
    background-image: url(assets/img/single-list/conversation-face-2-sp.png);
    background-size: 100% 100%;
    width: 27px;
    height: 31px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .face[type=interviewer][face=face-2] {
    background-image: url(assets/img/single-list/conversation-face-2.png);
    background-size: 100% 100%;
    width: 44px;
    height: 49px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .face[type=interviewer][face=face-3] {
    background-image: url(assets/img/single-list/conversation-face-3-sp.png);
    background-size: 100% 100%;
    width: 27px;
    height: 31px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .face[type=interviewer][face=face-3] {
    background-image: url(assets/img/single-list/conversation-face-3.png);
    background-size: 100% 100%;
    width: 43px;
    height: 49px;
    display: block
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-face .logo {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-color: #fff
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text {
    width: 100%;
    flex: 1
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text {
    max-width: calc(610 / 990 * 100%)
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon {
  border-radius: 5px;
  box-shadow: 3px 3px 0 rgba(38, 38, 38, .2)
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon[type=interviewer] {
  background-color: #faf9f2
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon[type=interviewee] {
  background-color: #fff
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner {
  padding: 30px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner {
    padding: 23px 16px 16px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p:after,
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en {
    font-size: 15px
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text .balloon .inner p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text h6.name {
  color: rgba(38, 38, 38, .8);
  margin-top: 16px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text h6.name {
    margin-top: 10px
  }
}

html[page=single] article#sections section .detail .box.box-conversation ul.items li .cell-text h6.name[type=interviewee] {
  text-align: right
}

html[page=single] article#sections section .detail .box.box-links {
  margin: 60px auto;
  max-width: 990px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-links {
    margin: 44px auto
  }
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a {
  display: table
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a:not(:first-child) {
  margin-top: 10px
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a.hover:hover .inner .cell-text p {
  color: #fb8b1e
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a.hover:hover .inner .cell-text span.underline {
  background-color: #fb8b1e
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a.hover:hover .inner .icon svg path {
  fill: #fb8b1e
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner {
  display: flex;
  align-items: center
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text {
  flex: 1
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p {
    letter-spacing: .03em !important
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p:after,
  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en {
    font-size: 15px
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .cell-text span.underline {
  width: 100%;
  height: 1px;
  background-color: #262626;
  display: block;
  position: relative;
  margin-top: 2px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .icon {
    width: 12px;
    height: 12px;
    margin-left: 6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .icon {
    width: 16px;
    height: 16px;
    margin-left: 8px
  }
}

html[page=single] article#sections section .detail .box.box-links .text-links-blank a .inner .icon svg path {
  fill: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#sections section .detail .box.box-cite {
  background-color: #faf9f2;
  border: solid 2px #e5e5e5;
  border-radius: 5px;
  margin: 60px auto;
  max-width: 990px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-cite .inner {
    padding: 38px 30px 30px 50px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-cite .inner {
    padding: 46px 75px
  }
}

html[page=single] article#sections section .detail .box.box-cite .inner h5 {
  position: relative;
  color: #4c4c4c
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections section .detail .box.box-cite .inner h5:after,
  html[page=single] article#sections section .detail .box.box-cite .inner h5:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en {
    font-size: 15px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#sections section .detail .box.box-cite .inner h5:after,
  html[page=single] article#sections section .detail .box.box-cite .inner h5:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en {
    font-size: 18px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja {
    font-size: 16px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes {
  display: inline-block
}

html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes svg {
  fill: #fb8b1e
}

html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes.quotes-start {
  position: absolute
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes.quotes-start {
    width: 25px;
    height: 19px;
    top: 0;
    left: -32px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes.quotes-start {
    width: 34px;
    height: 25px;
    top: 0;
    left: -42px
  }
}

html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes.quotes-end {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes.quotes-end {
    width: 13px;
    height: 9px;
    top: -4px;
    left: 2px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections section .detail .box.box-cite .inner h5 span.quotes.quotes-end {
    width: 14px;
    height: 10px;
    top: -4px;
    left: 2px
  }
}

html[page=single] article#sections section .detail .box.box-cite .inner small {
  letter-spacing: .08em !important;
  opacity: .4;
  margin-top: 16px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections section .detail .box.box-cite .inner small:after,
  html[page=single] article#sections section .detail .box.box-cite .inner small:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en {
    font-size: 11px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.m:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.m:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja {
    font-size: 10px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#sections section .detail .box.box-cite .inner small:after,
  html[page=single] article#sections section .detail .box.box-cite .inner small:before {
    content: '';
    display: block
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en {
    font-size: 11px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja {
    font-size: 10px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections section .detail .box.box-cite .inner small.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation {
    padding: 44px 17px 0 0
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#sections .area-predict-presentation {
    padding: 60px 46px 0 0
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation {
    padding: 60px 100px 0 0
  }
}

html[page=single] article#sections .area-predict-presentation ul {
  width: 100%
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul[lng='1'] li {
    width: 100%
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul[lng='2'] li {
    width: calc(465 / 990 * 100%)
  }

  html[page=single] article#sections .area-predict-presentation ul[lng='2'] li:nth-child(2):before {
    content: '';
    display: block;
    position: absolute;
    top: 33px;
    right: calc(100% + (60 / 450 * 100% / 2));
    width: 1px;
    height: 23px;
    background-image: repeating-linear-gradient(0deg, #262626, #262626 1px, transparent 1px, transparent 2px)
  }
}

html[page=single] article#sections .area-predict-presentation ul li {
  position: relative;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li:not(:first-child) {
    margin-top: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul li {
    width: calc(465 / 990 * 100%)
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner {
  padding: 0 46px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner {
    padding: 0 23px
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading {
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading {
    padding: 16px 0
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 .icon {
    margin-right: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 .icon {
    margin-right: 16px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 .icon[type=predict] {
    background-image: url(assets/img/single-list/icon-predict-sp.png);
    background-size: 100% 100%;
    width: 22px;
    height: 22px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 .icon[type=predict] {
    background-image: url(assets/img/single-list/icon-predict.png);
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 .icon[type=presentation] {
    background-image: url(assets/img/single-list/icon-presentation-sp.png);
    background-size: 100% 100%;
    width: 22px;
    height: 22px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 .icon[type=presentation] {
    background-image: url(assets/img/single-list/icon-presentation.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4:after,
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4:before {
    content: '';
    display: block
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en {
    font-size: 15px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-1 h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4 {
  margin-right: -.2em
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4:after,
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4:before {
    content: '';
    display: block
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en {
    font-size: 15px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-heading .cell-2 h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-separate {
  width: 100%;
  height: 1px;
  position: relative
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-separate .separate {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 1px, transparent 3px);
  position: absolute;
  top: 0;
  left: 0
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-separate .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  background-color: #fb8b1e
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-separate .line-tip[size='s'] {
  width: 20px
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-separate .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-separate .line-tip {
    width: 24px
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links {
  padding: 30px 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links {
    padding: 20px 0
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a {
  display: block
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a.hover:hover .box .cell-text h6 {
  color: #fb8b1e
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a.hover:hover .box .cell-text span.underline {
  background-color: #fb8b1e
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a.hover:hover .box .cell-text .icon svg path {
  fill: #fb8b1e
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a:not(:first-child) {
  margin-top: 23px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p:after,
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p:before {
    content: '';
    display: block
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en {
    font-size: 15px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja {
    font-size: 13px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a>p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box {
  display: flex;
  align-items: center;
  margin-top: 10px
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text {
  margin-right: 4px
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6 {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6:after,
  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6:before {
    content: '';
    display: block
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en {
    font-size: 13px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en.m:before {
    margin-top: calc((1 - (14 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en.m:after {
    margin-bottom: calc((1 - (14 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 13 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en.b:before {
    margin-top: calc((1 - (14 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-en.b:after {
    margin-bottom: calc((1 - (14 / 13))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja {
    font-size: 12px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 12 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.m:before {
    margin-top: calc((1 - (14 / 12))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 12))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 13px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 12 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.b:before {
    margin-top: calc((1 - (14 / 12))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 12))/ 2 * 1em)
  }

  html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text h6.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .cell-text span.underline {
  width: 100%;
  height: 1px;
  background-color: #262626;
  display: block;
  position: relative;
  margin-top: 0;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .icon {
  width: 11px;
  height: 11px
}

html[page=single] article#sections .area-predict-presentation ul li .inner .box-links a .box .icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-bottom {
    margin-top: 74px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-bottom {
    margin-top: 136px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-bottom {
    padding-right: 17px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#sections .area-bottom {
    padding-right: 46px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#sections .area-bottom {
    padding-right: 100px
  }
}

html[page=single] article#sections .area-bottom .inner {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  box-sizing: border-box
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#sections .area-bottom .inner {
    border-bottom: solid 1px rgba(38, 38, 38, .2)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#sections .area-bottom .inner {
    border-bottom: solid 2px rgba(38, 38, 38, .2)
  }
}

html[page=single] article#sections .area-bottom .inner h6 {
  color: rgba(38, 38, 38, .6);
  margin-bottom: 16px
}

html[page=single] article#sections .area-bottom .inner h6[type=knowledge] {
  display: none
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#sections .area-bottom .inner h6:after,
  html[page=single] article#sections .area-bottom .inner h6:before {
    content: '';
    display: block
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en {
    font-size: 11px
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja {
    font-size: 10px
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#sections .area-bottom .inner h6.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#sections .area-bottom small {
  opacity: .4;
  margin-top: 16px;
  display: block
}

html[page=single] article#summary {
  padding: 136px 100px 90px 350px;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary {
    padding: 74px 17px 44px 63px
  }
}

html[page=single] article#summary[type=knowledge] {
  padding: 290px 100px 90px 350px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary[type=knowledge] {
    padding: 74px 17px 44px 63px
  }
}

html[page=single] article#summary .area-illust {
  width: calc((900 / 1440) * 100%);
  max-width: 900px;
  position: relative;
  position: absolute;
  bottom: 0;
  right: 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-illust {
    display: none
  }
}

html[page=single] article#summary .area-illust:before {
  content: '';
  display: block;
  padding-top: 41.22222222222222%
}

html[page=single] article#summary .area-illust .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/single-list/summary-illust.png);
  background-size: 100% 100%
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#summary .area-text {
    width: calc(644 / 990 * 100%)
  }
}

html[page=single] article#summary .area-text .box-heaidng {
  margin-bottom: 38px;
  display: table
}

html[page=single] article#summary .area-text .box-heaidng[type=knowledge] {
  display: none
}

html[page=single] article#summary .area-text .box-heaidng h3 {
  margin-bottom: 8px
}

html[page=single] article#summary .area-text .box-heaidng .line {
  width: calc(100% - 1px);
  height: 2px;
  background-size: auto auto;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px)
}

html[page=single] article#summary .area-text .box-text {
  margin-bottom: 60px;
  position: relative
}

html[page=single] article#summary .area-text .box-text[type=knowledge] {
  display: none
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#summary .area-text .box-text:after,
  html[page=single] article#summary .area-text .box-text:before {
    content: '';
    display: block
  }

  html[page=single] article#summary .area-text .box-text.f-en {
    font-size: 15px
  }

  html[page=single] article#summary .area-text .box-text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja {
    font-size: 13px
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#summary .area-text .box-text:after,
  html[page=single] article#summary .area-text .box-text:before {
    content: '';
    display: block
  }

  html[page=single] article#summary .area-text .box-text.f-en {
    font-size: 15px
  }

  html[page=single] article#summary .area-text .box-text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja {
    font-size: 13px
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#summary .area-text .box-text:after,
  html[page=single] article#summary .area-text .box-text:before {
    content: '';
    display: block
  }

  html[page=single] article#summary .area-text .box-text.f-en {
    font-size: 18px
  }

  html[page=single] article#summary .area-text .box-text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja {
    font-size: 16px
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#summary .area-text .box-text p strong {
  background-color: rgba(251, 139, 30, .4)
}

html[page=single] article#summary .area-text .box-text[balloon=on] {
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
  border-radius: 8px;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  background-color: #faf9f2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-text .box-text[balloon=on] {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-text .box-text[balloon=on] .inner {
    padding: 23px 16px 16px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#summary .area-text .box-text[balloon=on] .inner {
    padding: 30px 64px 30px 30px
  }
}

html[page=single] article#summary .area-text .box-text[balloon=on] .balloon-box-tip {
  position: absolute
}

html[page=single] article#summary .area-text .box-text[balloon=on] .balloon-box-tip .tip.tip-front {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 10px;
  border-color: transparent transparent transparent #faf9f2;
  z-index: 1;
  position: relative
}

html[page=single] article#summary .area-text .box-text[balloon=on] .balloon-box-tip .tip.tip-shadow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 10px;
  border-color: transparent transparent transparent rgba(38, 38, 38, .1);
  position: absolute;
  top: 3px;
  left: 3px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-text .box-text[balloon=on] .balloon-box-tip {
    bottom: -13px;
    right: 10px;
    transform: rotateZ(90deg) rotateX(180deg)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#summary .area-text .box-text[balloon=on] .balloon-box-tip {
    bottom: 5px;
    right: -10px
  }
}

html[page=single] article#summary .area-text .box-illust.isSP {
  width: 100vw;
  margin: 22px 0 28px -63px
}

html[page=single] article#summary .area-text .box-illust.isSP .illust {
  background-image: url(assets/img/single-list/summary-illust-sp.png);
  background-size: 100% 100%;
  width: 375px;
  height: 303px;
  display: block;
  margin: 0 auto
}

html[page=single] article#summary .area-text .box-links .text-links-blank a {
  display: table
}

html[page=single] article#summary .area-text .box-links .text-links-blank a:not(:first-child) {
  margin-top: 10px
}

html[page=single] article#summary .area-text .box-links .text-links-blank a.hover:hover .inner .cell-text p {
  color: #fb8b1e
}

html[page=single] article#summary .area-text .box-links .text-links-blank a.hover:hover .inner .cell-text span.underline {
  background-color: #fb8b1e
}

html[page=single] article#summary .area-text .box-links .text-links-blank a.hover:hover .inner .icon svg path {
  fill: #fb8b1e
}

html[page=single] article#summary .area-text .box-links .text-links-blank a .inner {
  display: flex;
  align-items: center
}

html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text {
  flex: 1
}

html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p {
    letter-spacing: .03em !important
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p:after,
  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p:before {
    content: '';
    display: block
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en {
    font-size: 15px
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja {
    font-size: 13px
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .cell-text span.underline {
  width: 100%;
  height: 1px;
  background-color: #262626;
  display: block;
  position: relative;
  margin-top: 2px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .icon {
    width: 12px;
    height: 12px;
    margin-left: 6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .icon {
    width: 16px;
    height: 16px;
    margin-left: 8px
  }
}

html[page=single] article#summary .area-text .box-links .text-links-blank a .inner .icon svg path {
  fill: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#summary .area-text .box-share {
  display: flex;
  align-items: center;
  margin-top: 60px
}

html[page=single] article#summary .area-text .box-share h5 {
  margin-right: 23px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#summary .area-text .box-share h5 {
    margin-right: 13px
  }
}

html[page=single] article#summary .area-text .box-share .btns {
  display: flex;
  align-items: center
}

html[page=single] article#summary .area-text .box-share .btns a svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#summary .area-text .box-share .btns a:not(:first-child) {
  margin-left: 16px
}

html[page=single] article#summary .area-text .box-share .btns a.hover:hover rect,
html[page=single] article#summary .area-text .box-share .btns a.hover:hover svg path {
  fill: #fb8b1e
}

html[page=single] article#summary .area-text .box-share .btns a.tw {
  width: 26px;
  height: 21.13px
}

html[page=single] article#summary .area-text .box-share .btns a.tw svg path {
  fill: #059ff5
}

html[page=single] article#summary .area-text .box-share .btns a.fb {
  width: 23px;
  height: 22.86px
}

html[page=single] article#summary .area-text .box-share .btns a.fb svg path {
  fill: #1877f2
}

html[page=single] article#summary .area-text .box-share .btns a.li {
  width: 24px;
  height: 24px
}

html[page=single] article#summary .area-text .box-share .btns a.li svg path,
html[page=single] article#summary .area-text .box-share .btns a.li svg rect {
  fill: #06c755
}

html[page=single] article#related {
  background-color: #f7e9d3;
  padding: 106px 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related {
    padding: 56px 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid {
    margin-top: 44px
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items {
  display: flex;
  flex-wrap: wrap
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item {
    width: calc(280 / 590 * 100%)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item:not(:nth-child(2n-1)) {
    margin-left: calc(30 / 590 * 100%)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item:nth-child(n+3) {
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item {
    width: calc(298 / 990 * 100%)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item:not(:nth-child(3n-2)) {
    margin-left: calc(48 / 990 * 100%)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item:nth-child(n+4) {
    margin-top: 76px
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new.png);
    background-size: 100% 100%;
    width: 42px;
    height: 42px;
    display: block
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title:after,
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title:after,
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en {
    font-size: 18px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja {
    font-size: 16px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 {
    margin-top: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 {
    margin-top: 10px;
    display: flex;
    align-items: center
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date {
    margin-top: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date {
    margin-left: 10px
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#related .frame-liquid .area-liquid ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

html[page=single] article#new {
  padding: 136px 0 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new {
    padding: 72px 0 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid {
    margin-top: 44px
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide {
  position: relative
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item {
    width: calc(312 / 590 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item {
    width: calc(162 / 990 * 100%)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item:not(:nth-child(5n-4)) {
    margin-left: calc(45 / 990 * 100%)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-s.png);
    background-size: 100% 100%;
    width: 36px;
    height: 36px;
    display: block
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 16px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 14px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 {
    margin-top: 16px;
    display: flex;
    align-items: center
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 {
    margin-top: 8px
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
    margin-left: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
    margin-top: 8px
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='1'] {
    width: calc(156 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='1'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='1'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 156 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='2'] {
    width: calc(327 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='2'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='2'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 327 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='3'] {
    width: calc(498 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='3'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='3'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 498 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='4'] {
    width: calc(669 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='4'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='4'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 669 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='5'] {
    width: calc(840 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='5'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items[count='5'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 840 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#new .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-separate {
    padding: 0 0 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=single] article#new .frame-separate {
    padding: 0 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=single] article#new .frame-separate {
    padding: 0 100px 0 350px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-separate {
    margin-top: 56px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-separate {
    margin-top: 76px
  }
}

html[page=single] article#new .frame-separate .separate {
  width: 100%
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#new .frame-separate .separate {
    height: 1px;
    background-color: #c7c7c7
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#new .frame-separate .separate {
    height: 2px;
    background-color: transparent;
    background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .2), rgba(38, 38, 38, .2) 2px, transparent 2px, transparent 5px)
  }
}

html[page=single] article#popular {
  padding: 90px 0 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular {
    padding: 56px 0 0
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid {
    margin-top: 44px
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide {
  position: relative
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item {
  user-select: none;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item {
    width: calc(312 / 590 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item {
    width: calc(162 / 990 * 100%)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item:not(:nth-child(5n-4)) {
    margin-left: calc(45 / 990 * 100%)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a {
  display: block;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  transform: scale(1)
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a.scale-down {
  transform: scale(.95)
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-photo {
  transform: scale(.95)
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a:not(.scale-down):hover.hover .box-title h5.title {
  color: rgba(38, 38, 38, .6)
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
  position: absolute;
  z-index: 1
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
    top: -6px;
    right: -6px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge {
    top: -8px;
    right: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-sp.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=new] {
    background-image: url(assets/img/common/icon-article-thumbnail-new-s.png);
    background-size: 100% 100%;
    width: 36px;
    height: 36px;
    display: block
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-1.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='1'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-2.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='2'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-3.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='3'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-4.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='4'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-5.png);
  background-size: 100% 100%;
  width: 38px;
  height: 37px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='5'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-6.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='6'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-7.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='7'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-8.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='8'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-9.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='9'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
  background-image: url(assets/img/common/icon-article-thumbnail-poplar-10.png);
  background-size: 100% 100%;
  width: 44px;
  height: 42.5px;
  display: block
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .badge[type=popular][num='10'] {
    width: calc(62px / 2);
    height: calc(60px / 2)
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo {
  width: 100%;
  position: relative;
  background-color: #c7c7c7;
  border-radius: 5px;
  overflow: hidden;
  transform: scale(1);
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-photo .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title {
  margin-top: 16px
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title {
  color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 15px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 13px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:after,
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title:before {
    content: '';
    display: block
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en {
    font-size: 16px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.m:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(20 / 16 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:before {
    margin-top: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-en.b:after {
    margin-bottom: calc((1 - (20 / 16))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja {
    font-size: 14px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(20 / 14 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:before {
    margin-top: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b:after {
    margin-bottom: calc((1 - (20 / 14))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-title h5.title.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 {
    margin-top: 16px;
    display: flex;
    align-items: center
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 {
    margin-top: 8px
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype {
  padding: 3px 5px 2px;
  border-radius: 2px;
  color: #fff;
  display: table;
  white-space: nowrap
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=interview] {
  background-color: #33bb54
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=information] {
  background-color: #52a9f6
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=summary] {
  background-color: #ff665b
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .posttype[type=knowledge] {
  background-color: #fac626
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
    margin-left: 8px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date {
    margin-top: 8px
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date .icon {
  background-image: url(assets/img/single-list/icon-clock.png);
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  display: block;
  opacity: .6
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date .icon {
    width: 9px;
    height: 9px
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date {
  color: rgba(38, 38, 38, .6);
  margin-left: 3px;
  flex: 1
}

@media (min-width:1px) and (max-width:960px) {

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date:after,
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date:before {
    content: '';
    display: block
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en {
    font-size: 11px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja {
    font-size: 10px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items li.item a .box-1 .box-date h6.date.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='1'] {
    width: calc(156 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='1'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='1'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 156 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='2'] {
    width: calc(327 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='2'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='2'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 327 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='3'] {
    width: calc(498 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='3'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='3'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 498 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='4'] {
    width: calc(669 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='4'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='4'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 669 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='5'] {
    width: calc(840 / 295 * 100%);
    cursor: grab
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='5'].grabbing {
    cursor: grabbing
  }

  html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items[count='5'] li.item {
    margin-top: 0 !important;
    width: calc(156 / 840 * 100%);
    margin-left: 0 !important
  }
}

html[page=single] article#popular .frame-liquid .area-liquid .frame-slide ul.items .no-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

html[page=single] article#gallery {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  overflow: auto
}

html[page=single] article#gallery img {
  height: 100%;
  width: auto
}

html[page=single] article#gallery .btn-gallery-close {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  box-sizing: border-box;
  border: solid 2px #262626;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 28px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#gallery .btn-gallery-close.hover:hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html[page=single] article#gallery .btn-gallery-close.hover:hover .box-line .line {
  background-color: #fff
}

html[page=single] article#gallery .btn-gallery-close .box-line {
  width: calc(12px * 1.41);
  height: calc(12px * 1.41);
  position: relative
}

html[page=single] article#gallery .btn-gallery-close .box-line .line {
  width: 100%;
  height: 2px;
  background-color: #262626;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 2px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=single] article#gallery .btn-gallery-close .box-line .line.line-1 {
  transform: rotate(45deg)
}

html[page=single] article#gallery .btn-gallery-close .box-line .line.line-2 {
  transform: rotate(-45deg)
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=about] body {
  background-color: #f7f4e7
}

html[page=about] article#first {
  position: relative;
  z-index: 1
}

html[page=about] article#first .up-title {
  display: table;
  user-select: none
}

html[page=about] article#first .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#first .up-title h6 {
    font-size: 13px
  }
}

html[page=about] article#first .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=about] article#first .up-title h3:after,
  html[page=about] article#first .up-title h3:before {
    content: '';
    display: block
  }

  html[page=about] article#first .up-title h3.f-en {
    font-size: 30px
  }

  html[page=about] article#first .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=about] article#first .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=about] article#first .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=about] article#first .up-title h3:after,
  html[page=about] article#first .up-title h3:before {
    content: '';
    display: block
  }

  html[page=about] article#first .up-title h3.f-en {
    font-size: 16px
  }

  html[page=about] article#first .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 16 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 16))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 16))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 16 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 16))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 16))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja {
    font-size: 14px
  }

  html[page=about] article#first .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 14 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 14))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 14))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=about] article#first .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 14 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 14))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 14))/ 2 * 1em)
  }

  html[page=about] article#first .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

html[page=about] article#first h1 {
  margin-top: 106px;
  color: #fb8b1e
}

html[page=about] article#first h1 span.line {
  position: relative
}

html[page=about] article#first h1 span.line .underline {
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  position: absolute;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#first h1 {
    margin-top: 56px;
    letter-spacing: 0
  }
}

html[page=about] article#first .box-text {
  margin-top: 60px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#first .box-text {
    margin-top: 44px
  }
}

html[page=about] article#first .box-text p:not(:first-child) {
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#first .box-text p:not(:first-child) {
    margin-top: 35px
  }
}

html[page=about] article#first .separate-navigations {
  padding-top: 60px
}

html[page=about] article#first .separate-navigations .separate {
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 2px, transparent 2px, transparent 5px)
}

html[page=about] article#first .navigations ul {
  position: relative;
  user-select: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#first .navigations ul {
    display: inline-flex;
    width: max-content;
    margin: 16px 0 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#first .navigations ul {
    display: flex;
    margin: 23px 0 30px
  }
}

html[page=about] article#first .navigations ul li {
  display: flex;
  align-items: center
}

html[page=about] article#first .navigations ul li.hover:hover h5 {
  color: #fb8b1e
}

html[page=about] article#first .navigations ul li.hover:hover .icon svg circle {
  fill: #fb8b1e
}

html[page=about] article#first .navigations ul li.hover:hover .icon svg path.border {
  fill: #fb8b1e
}

html[page=about] article#first .navigations ul li.hover:hover .icon svg path.tip {
  fill: #fff
}

html[page=about] article#first .navigations ul li:not(:first-child) {
  margin-left: 23px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#first .navigations ul li:not(:first-child) {
    margin-left: 22px
  }
}

html[page=about] article#first .navigations ul li h5 {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=about] article#first .navigations ul li .icon {
  width: 15px;
  height: 15px;
  margin-left: 4px
}

html[page=about] article#first .navigations ul li .icon svg circle {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  fill: transparent
}

html[page=about] article#first .navigations ul li .icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=about] article#first .navigations ul li .icon svg path.border {
  fill: #262626
}

html[page=about] article#first .navigations ul li .icon svg path.tip {
  fill: #262626
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail {
    padding: 0 17px 72px 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=about] article#detail {
    padding: 0 46px 106px 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=about] article#detail {
    padding: 0 100px 106px 350px
  }
}

html[page=about] article#detail section {
  padding-top: 106px;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section {
    padding-top: 84px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section[lng='2'] {
    display: flex
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section[lng='2'] .element {
    width: 50%
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section[lng='2'] .element:nth-child(2) {
    margin-top: 84px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section[lng='2'] .element:nth-child(2) .inner-element {
    padding-left: 18px
  }
}

html[page=about] article#detail section:last-child {
  border-bottom: solid 2px rgba(38, 38, 38, .1);
  padding-bottom: 110px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section:last-child {
    padding-bottom: 70px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section.section-1 .element {
    width: calc(644 / 990 * 100%)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section.section-2 .element {
    width: calc(644 / 990 * 100%);
    margin: 0 0 0 auto
  }
}

html[page=about] article#detail section .bg-balloon {
  position: absolute
}

html[page=about] article#detail section .bg-balloon.isSP {
  width: calc((1690 / 590) * 100%);
  max-width: 845px;
  position: relative;
  position: absolute;
  bottom: 48px;
  right: calc(233 / 590 * 100%)
}

html[page=about] article#detail section .bg-balloon.isSP:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .bg-balloon.isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/bg-balloon-sp.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .bg-balloon.isPC {
  right: calc(785 / 990 * 100%);
  bottom: 0;
  background-image: url(assets/img/about/bg-balloon.png);
  background-size: 100% 100%;
  width: 817px;
  height: 817px;
  display: block
}

html[page=about] article#detail section .element {
  position: relative;
  z-index: 1
}

html[page=about] article#detail section .element .area-heading {
  margin-bottom: 46px;
  position: relative
}

html[page=about] article#detail section .element .area-heading .icon {
  background-color: #fb8b1e;
  border-radius: 4px;
  margin-right: 6px;
  position: absolute
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-heading .icon {
    width: 15px;
    height: 15px;
    top: 4px;
    left: -22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-heading .icon {
    width: 17px;
    height: 17px;
    top: 3px;
    left: -24px
  }
}

html[page=about] article#detail section .element .area-detail .box:first-child {
  margin-top: 0 !important
}

html[page=about] article#detail section .element .area-detail .box:last-child {
  margin-bottom: 0 !important
}

html[page=about] article#detail section .element .area-detail .box.box-photo,
html[page=about] article#detail section .element .area-detail .box.box-text {
  margin: 38px 0
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5:after,
html[page=about] article#detail section .element .area-detail .box.box-photo h5:before,
html[page=about] article#detail section .element .area-detail .box.box-text h5:after,
html[page=about] article#detail section .element .area-detail .box.box-text h5:before {
  content: '';
  display: block
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en {
  font-size: 15px
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en.m,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en.m {
  font-family: Arial, "メイリオ";
  letter-spacing: .04em;
  line-height: calc(28 / 15 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en.m:before,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en.m:before {
  margin-top: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en.m:after,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en.m:after {
  margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en.b,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en.b {
  font-family: Arial, "メイリオ";
  font-weight: 700;
  letter-spacing: .04em;
  line-height: calc(28 / 15 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en.b:before,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en.b:before {
  margin-top: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-en.b:after,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-en.b:after {
  margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja {
  font-size: 13px
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.m,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.m {
  font-family: Arial, GothicM;
  letter-spacing: .053em;
  line-height: calc(28 / 13 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.m:before,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.m:before {
  margin-top: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.m:after,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.m:after {
  margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.m span.c.en,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.m span.c.en {
  font-family: Arial, "メイリオ";
  letter-spacing: .04em;
  font-size: 15px;
  position: relative;
  top: 1px
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.b,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.b {
  font-family: Arial, GothicDB;
  letter-spacing: .053em;
  line-height: calc(28 / 13 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.b:before,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.b:before {
  margin-top: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.b:after,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.b:after {
  margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-photo h5.f-ja.b span.c.en,
html[page=about] article#detail section .element .area-detail .box.box-text h5.f-ja.b span.c.en {
  font-family: Arial, "メイリオ";
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 15px;
  position: relative;
  top: 1px
}

html[page=about] article#detail section .element .area-detail .box.box-photo {
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-photo img {
  user-select: none
}

@media (min-width:1px) and (max-width:738px) {
  html[page=about] article#detail section .element .area-detail .box.box-photo img {
    position: relative
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-photo img {
    width: 675px;
    height: auto
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-photo img {
    width: 100%;
    height: auto
  }
}

html[page=about] article#detail section .element .area-detail .box.box-photo .film {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-photo .area-btn {
  position: absolute;
  top: 0;
  right: -17px;
  height: 100%;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff)
}

@media (min-width:739px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-photo .area-btn {
    display: none
  }
}

html[page=about] article#detail section .element .area-detail .box.box-photo .area-btn .arrow {
  width: 44px;
  height: 44px;
  position: relative;
  right: -6px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items {
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  border: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items {
    padding: 28px 40px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items {
    display: flex;
    padding: 60px 0
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li {
  position: relative
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li {
    width: calc(100% / 3)
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li:not(:first-child) .separate {
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 1px, transparent 3px);
    margin: 28px 0
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li:not(:first-child) .separate {
    width: 1px;
    height: 100%;
    background-image: repeating-linear-gradient(0deg, #262626, #262626 1px, transparent 1px, transparent 3px);
    position: absolute;
    top: 0;
    left: 0
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner {
  text-align: center
}

@media (min-width:1px) and (max-width:960px) {

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en {
    font-size: 18px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(39 / 18 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en.m:before {
    margin-top: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en.m:after {
    margin-bottom: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-en.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja {
    font-size: 16px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(39 / 16 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.m:before {
    margin-top: calc((1 - (39 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.m:after {
    margin-bottom: calc((1 - (39 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 16 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.b:before {
    margin-top: calc((1 - (25 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3[type=information] {
  color: #52a9f6
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3[type=interview] {
  color: #33bb54
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3[type=summary] {
  color: #ff665b
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h3[type=knowledge] {
  color: #fac626
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h6 {
  margin-top: 16px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner h6 {
    margin-top: 10px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner small {
  color: rgba(38, 38, 38, .6);
  margin-top: 7px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=three-article] ul.items li .inner small {
    margin-top: 8px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 990px;
  margin: 0 auto
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li {
  position: relative;
  display: table;
  max-width: 227px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li {
    width: calc(280 / 590 * 100%);
    margin-left: calc(30 / 590 * 100%)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(1) {
    margin-left: 0
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(3) {
    margin: 0 calc(155 / 590 * 100%)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(4) {
    margin-left: 0
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(n+3) {
    margin-top: -17px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li {
    width: calc(227 / 990 * 100%);
    margin-left: calc(63 / 990 * 100%)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(n+4) {
    margin-top: 17px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(1),
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(4) {
    margin-left: 0
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(1) .wrap-front .dot,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li:nth-child(4) .wrap-front .dot {
    display: none
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .bg {
  width: calc((227 / 227) * 100%);
  max-width: 227px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .bg:before {
  content: '';
  display: block;
  padding-top: 109.05077262693158%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .bg .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-balloon.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front:before {
  content: '';
  display: block;
  padding-top: calc(220 / 227 * 100%)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .dot {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .dot {
    width: 8px;
    height: 8px;
    background-color: #fb8b1e;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    left: calc(-35 / 227 * 100%)
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem {
  margin-bottom: calc(56 / 220 * 100%);
  width: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon {
  display: table;
  margin: 0 auto
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='1'].isSP {
  width: calc((46 / 140) * 100%);
  max-width: 9999px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='1'].isSP:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='1'].isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-1-sp.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='1'].isPC {
  width: calc((70 / 227) * 100%);
  max-width: 70px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='1'].isPC:before {
  content: '';
  display: block;
  padding-top: 100.71428571428571%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='1'].isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-1.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='2'].isSP {
  width: calc((48 / 140) * 100%);
  max-width: 9999px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='2'].isSP:before {
  content: '';
  display: block;
  padding-top: 56.25%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='2'].isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-2-sp.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='2'].isPC {
  width: calc((74.5 / 227) * 100%);
  max-width: 74.5px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='2'].isPC:before {
  content: '';
  display: block;
  padding-top: 53.691275167785236%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='2'].isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-2.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='3'].isSP {
  width: calc((40 / 140) * 100%);
  max-width: 9999px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='3'].isSP:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='3'].isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-3-sp.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='3'].isPC {
  width: calc((64 / 227) * 100%);
  max-width: 64px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='3'].isPC:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='3'].isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-3.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='4'].isSP {
  width: calc((38 / 140) * 100%);
  max-width: 9999px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='4'].isSP:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='4'].isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-4-sp.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='4'].isPC {
  width: calc((55 / 227) * 100%);
  max-width: 55px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='4'].isPC:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='4'].isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-4.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='5'].isSP {
  width: calc((42 / 140) * 100%);
  max-width: 9999px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='5'].isSP:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='5'].isSP .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-5-sp.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='5'].isPC {
  width: calc((58 / 227) * 100%);
  max-width: 58px;
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='5'].isPC:before {
  content: '';
  display: block;
  padding-top: 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem .icon[num='5'].isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-icon-5.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p {
  text-align: center;
  margin-top: 23px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p[num='5'] {
  letter-spacing: -.1em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p {
    margin-top: 12px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en {
    font-size: 12px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(16 / 12 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en.m:before {
    margin-top: calc((1 - (16 / 12))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en.m:after {
    margin-bottom: calc((1 - (16 / 12))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 12 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en.b:before {
    margin-top: calc((1 - (14 / 12))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-en.b:after {
    margin-bottom: calc((1 - (14 / 12))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja {
    font-size: 11px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(16 / 11 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.m:before {
    margin-top: calc((1 - (16 / 11))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.m:after {
    margin-bottom: calc((1 - (16 / 11))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 12px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 ul.items li .wrap-front .front .elem p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 12px;
    position: relative;
    top: 1px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text {
  margin-top: 38px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4 span.line {
  position: relative
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4 span.line .underline {
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  position: absolute;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4 span.line .underline {
    bottom: -6px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en {
    font-size: 22px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(39 / 22 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en.m:before {
    margin-top: calc((1 - (39 / 22))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en.m:after {
    margin-bottom: calc((1 - (39 / 22))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(39 / 22 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en.b:before {
    margin-top: calc((1 - (39 / 22))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-en.b:after {
    margin-bottom: calc((1 - (39 / 22))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja {
    font-size: 18px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(39 / 18 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.m:before {
    margin-top: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.m:after {
    margin-bottom: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 22px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(39 / 18 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.b:before {
    margin-top: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.b:after {
    margin-bottom: calc((1 - (39 / 18))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 22px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h4 {
    text-align: center
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5 {
  color: rgba(38, 38, 38, .9)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5 {
    margin-top: 35px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en {
    font-size: 15px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja {
    font-size: 13px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-1 .under-text h5 {
    text-align: center;
    margin-top: 32px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 {
  margin-top: 76px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 {
    margin-top: 44px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame {
  background-color: #f7e9d3;
  background-image: url(assets/img/common/bg-noise.png);
  background-size: 100px 100px;
  background-position: center center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame {
    border-radius: 5px 0 0 5px;
    width: calc(100% + 17px)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame {
    border-radius: 5px 0 0 5px;
    width: calc(100% + 100px);
    margin: 0 0 0 auto
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame {
    padding: 26px 17px 0 17px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame {
    padding: 70px 100px 70px 60px;
    display: flex
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon {
    width: calc(685 / 930 * 100%)
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon {
  width: 100%;
  position: relative;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
  border-radius: 8px;
  background-color: #fff;
  border: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .balloon-box-tip {
    position: absolute;
    bottom: -9px;
    right: 130px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .balloon-box-tip .tip.tip-front {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13px 9px 0;
    border-color: transparent #fff transparent transparent;
    z-index: 1;
    position: relative
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .balloon-box-tip .tip.tip-shadow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13px 9px 0;
    border-color: transparent rgba(38, 38, 38, .1) transparent transparent;
    position: absolute;
    top: 3px;
    left: 3px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .balloon-box-tip {
    position: absolute;
    top: 92px;
    right: -10px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .balloon-box-tip .tip.tip-front {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.5px 0 8.5px 10px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
    position: relative
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .balloon-box-tip .tip.tip-shadow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.5px 0 8.5px 10px;
    border-color: transparent transparent transparent rgba(38, 38, 38, .1);
    position: absolute;
    top: 3px;
    left: 3px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon {
    padding: 28px 15px 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon {
    padding: 30px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion {
    overflow: hidden
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5 {
    margin-top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en {
    font-size: 15px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja {
    font-size: 13px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en {
    font-size: 16px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(30 / 16 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.m:before {
    margin-top: calc((1 - (30 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.m:after {
    margin-bottom: calc((1 - (30 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-en.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja {
    font-size: 14px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(30 / 14 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m:before {
    margin-top: calc((1 - (30 / 14))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m:after {
    margin-bottom: calc((1 - (30 / 14))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 16px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 14 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b:before {
    margin-top: calc((1 - (35 / 14))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 14))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-balloon .balloon .inner-balloon .box-accordion h5.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 1px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust {
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: -32px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust {
    width: calc(245 / 930 * 100%)
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust h6 {
  letter-spacing: -.1em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust h6 {
    margin-bottom: 24px;
    margin-right: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust h6 {
    margin: 0 calc(38 / 245 * 100%) 0 auto;
    display: table
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust .box-illust.isPC {
  width: calc((176 / 245) * 100%);
  max-width: 176px;
  position: relative;
  position: absolute;
  margin-top: 16px;
  right: calc(8 / 245 * 100%)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust .box-illust.isPC:before {
  content: '';
  display: block;
  padding-top: 223.2673267326733%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust .box-illust.isPC .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(assets/img/about/fund-illust.png);
  background-size: 100% 100%
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=fund] .area-2 .frame .inner-frame .cell-illust .box-illust.isSP {
  background-image: url(assets/img/about/fund-illust-sp.png);
  background-size: 100% 100%;
  width: 147px;
  height: 152px;
  display: block;
  margin-right: 13px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading:after,
html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading:before {
  content: '';
  display: block
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en {
  font-size: 15px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en.m {
  font-family: Arial, "メイリオ";
  letter-spacing: .04em;
  line-height: calc(28 / 15 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en.m:before {
  margin-top: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en.m:after {
  margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en.b {
  font-family: Arial, "メイリオ";
  font-weight: 700;
  letter-spacing: .04em;
  line-height: calc(28 / 15 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en.b:before {
  margin-top: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-en.b:after {
  margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja {
  font-size: 13px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.m {
  font-family: Arial, GothicM;
  letter-spacing: .053em;
  line-height: calc(28 / 13 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.m:before {
  margin-top: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.m:after {
  margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.m span.c.en {
  font-family: Arial, "メイリオ";
  letter-spacing: .04em;
  font-size: 15px;
  position: relative;
  top: 1px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.b {
  font-family: Arial, GothicDB;
  letter-spacing: .053em;
  line-height: calc(28 / 13 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.b:before {
  margin-top: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.b:after {
  margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] h5.heading.f-ja.b span.c.en {
  font-family: Arial, "メイリオ";
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 15px;
  position: relative;
  top: 1px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices {
  margin-top: 68px
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice {
  position: relative
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice[type=investor] {
    width: calc(100% - 38px)
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice[type=manager] {
    width: calc(100% - 20px)
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice:not(:first-child) {
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice:not(:first-child) {
    margin-top: 44px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon {
  position: absolute;
  justify-content: center;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon {
    background-image: url(assets/img/about/voice-balloon-sp.png);
    background-size: 100% 100%;
    width: 68px;
    height: 68px;
    display: block;
    display: flex
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon {
    background-image: url(assets/img/about/voice-balloon.png);
    background-size: 100% 100%;
    width: 90px;
    height: 90px;
    display: block;
    display: flex
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon {
    top: -22px;
    left: -22px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon {
    top: -16px;
    left: -8px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='1'] {
    background-image: url(assets/img/about/voice-face-1-sp.png);
    background-size: 100% 100%;
    width: 45px;
    height: 53px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='1'] {
    background-image: url(assets/img/about/voice-face-1.png);
    background-size: 100% 100%;
    width: 60px;
    height: 70px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='2'] {
    background-image: url(assets/img/about/voice-face-2-sp.png);
    background-size: 100% 100%;
    width: 45px;
    height: 50px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='2'] {
    background-image: url(assets/img/about/voice-face-2.png);
    background-size: 100% 100%;
    width: 59px;
    height: 66px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='3'] {
    background-image: url(assets/img/about/voice-face-3-sp.png);
    background-size: 100% 100%;
    width: 43px;
    height: 51px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='3'] {
    background-image: url(assets/img/about/voice-face-3.png);
    background-size: 100% 100%;
    width: 57px;
    height: 67px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='4'] {
    background-image: url(assets/img/about/voice-face-4-sp.png);
    background-size: 100% 100%;
    width: 48px;
    height: 47px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='4'] {
    background-image: url(assets/img/about/voice-face-4.png);
    background-size: 100% 100%;
    width: 64px;
    height: 61px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='5'] {
    background-image: url(assets/img/about/voice-face-5-sp.png);
    background-size: 100% 100%;
    width: 38px;
    height: 50px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='5'] {
    background-image: url(assets/img/about/voice-face-5.png);
    background-size: 100% 100%;
    width: 50px;
    height: 66px;
    display: block
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='6'] {
    background-image: url(assets/img/about/voice-face-6-sp.png);
    background-size: 100% 100%;
    width: 46px;
    height: 50px;
    display: block
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .balloon .face[num='6'] {
    background-image: url(assets/img/about/voice-face-6.png);
    background-size: 100% 100%;
    width: 60px;
    height: 66px;
    display: block
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame {
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
  border-radius: 8px;
  background-color: #fff;
  border: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame {
    padding: 28px 14px 28px 56px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame {
    padding: 38px 38px 38px 100px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p:after,
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p:before {
    content: '';
    display: block
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en {
    font-size: 15px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja {
    font-size: 13px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .frame p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark {
  position: absolute
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark[pos='1'] {
    background-image: url(assets/img/about/voice-mark-1-sp.png);
    background-size: 100% 100%;
    width: 14px;
    height: 15px;
    display: block;
    top: -11px;
    right: -11px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark[pos='1'] {
    background-image: url(assets/img/about/voice-mark-1.png);
    background-size: 100% 100%;
    width: 17.5px;
    height: 17.5px;
    display: block;
    top: -15px;
    right: -15px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark[pos='2'] {
    background-image: url(assets/img/about/voice-mark-2-sp.png);
    background-size: 100% 100%;
    width: 14px;
    height: 14px;
    display: block;
    bottom: -11px;
    right: -11px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark[pos='2'] {
    background-image: url(assets/img/about/voice-mark-2.png);
    background-size: 100% 100%;
    width: 17.5px;
    height: 17.5px;
    display: block;
    bottom: -15px;
    right: -15px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark[pos='3'] {
    background-image: url(assets/img/about/voice-mark-3-sp.png);
    background-size: 100% 100%;
    width: 14px;
    height: 14px;
    display: block;
    bottom: -11px;
    left: -11px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=about] article#detail section .element .area-detail .box.box-custom[name=voice] ul.voices li.voice .mark[pos='3'] {
    background-image: url(assets/img/about/voice-mark-3.png);
    background-size: 100% 100%;
    width: 17.5px;
    height: 17.5px;
    display: block;
    bottom: -15px;
    left: -15px
  }
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=contact] article#first .area-title .up-title {
  display: table;
  user-select: none
}

html[page=contact] article#first .area-title .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#first .area-title .up-title h6 {
    font-size: 13px
  }
}

html[page=contact] article#first .area-title .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact] article#first .area-title .up-title h3:after,
  html[page=contact] article#first .area-title .up-title h3:before {
    content: '';
    display: block
  }

  html[page=contact] article#first .area-title .up-title h3.f-en {
    font-size: 30px
  }

  html[page=contact] article#first .area-title .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact] article#first .area-title .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#first .area-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

html[page=contact] article#first .area-title .pages {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .area-title .pages {
    margin-top: 28px
  }
}

html[page=contact] article#first .area-title .pages .box-text {
  position: relative
}

html[page=contact] article#first .area-title .pages .box-text h6 {
  color: #262626
}

html[page=contact] article#first .area-title .pages .box-text .mark {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #fb8b1e;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: auto
}

html[page=contact] article#first .area-title .pages .box-line {
  margin: 0 11px
}

html[page=contact] article#first .area-title .pages .box-line .line {
  width: 47px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .box-btns {
    margin-top: 46px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#first .box-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 60px
  }
}

html[page=contact] article#first .box-btns .btn-square {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .box-btns .btn-square {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .box-btns .btn-square {
    padding: 0 28px;
    height: 76px
  }

  html[page=contact] article#first .box-btns .btn-square:not(:first-child) {
    margin-top: 16px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#first .box-btns .btn-square {
    padding: 0 48px 0 60px;
    height: 90px;
    width: calc((100% - 12px)/ 2)
  }
}

html[page=contact] article#first .box-btns .btn-square:not(:hover).no-select {
  border-color: #ccc;
  background-color: #f2f2f2;
  box-shadow: 3px 3px 0 rgba(38, 38, 38, .1)
}

html[page=contact] article#first .box-btns .btn-square:not(:hover).no-select .inner .box-text {
  opacity: .5
}

html[page=contact] article#first .box-btns .btn-square:not(:hover).no-select .inner>.arrow {
  opacity: .5
}

html[page=contact] article#first .box-btns .btn-square .inner>.arrow {
  transform: rotate(90deg)
}

html[page=contact] article#first .box-btns .btn-square[color=orange]:hover.hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html[page=contact] article#first .box-btns .btn-square[color=orange]:hover.hover .inner .text {
  color: #fff
}

html[page=contact] article#first .box-btns .btn-square[color=orange]:hover.hover .inner .arrow svg path.line {
  fill: #fff
}

html[page=contact] article#first .box-btns .btn-square[color=orange]:hover.hover .inner .arrow svg path.arrow {
  fill: #fb8b1e
}

html[page=contact] article#first .box-btns .btn-square[color=orange]:hover.hover .inner .line-tip {
  background-color: #fff;
  bottom: -2px;
  height: 6px
}

html[page=contact] article#first .box-btns .btn-square[color=orange] .inner .line-tip {
  background-color: #fb8b1e
}

html[page=contact] article#first .box-btns .btn-square .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative
}

html[page=contact] article#first .box-btns .btn-square .inner .box-text {
  display: flex;
  align-items: center
}

html[page=contact] article#first .box-btns .btn-square .inner .box-text .icon {
  margin-right: 12px
}

html[page=contact] article#first .box-btns .btn-square .inner .box-text .icon[name=footer-company] {
  background-image: url(assets/img/footer/icon-company.png);
  background-size: 100% 100%;
  width: 36px;
  height: 32px;
  display: block
}

html[page=contact] article#first .box-btns .btn-square .inner .box-text .icon[name=footer-investor] {
  background-image: url(assets/img/footer/icon-investor.png);
  background-size: 100% 100%;
  width: 35px;
  height: 35px;
  display: block
}

html[page=contact] article#first .box-btns .btn-square .inner .box-text .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact] article#first .box-btns .btn-square .inner .arrow {
  width: 22px;
  height: 22px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .box-btns .btn-square .inner .arrow {
    width: 18px;
    height: 18px
  }
}

html[page=contact] article#first .box-btns .btn-square .inner .arrow svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact] article#first .box-btns .btn-square .inner .arrow svg path.arrow {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact] article#first .box-btns .btn-square .inner .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 22px
}

html[page=contact] article#first .box-btns .btn-square .inner .line-tip[size='s'] {
  width: 20px
}

html[page=contact] article#first .box-btns .btn-square .inner .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .box-btns .btn-square .inner .line-tip {
    width: 18px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .box-btns .btn-square {
    padding: 0 28px;
    height: 76px
  }

  html[page=contact] article#first .box-btns .btn-square:not(:first-child) {
    margin-top: 16px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#first .box-btns .btn-square {
    padding: 0 48px 0 60px;
    height: 90px;
    width: calc((100% - 12px)/ 2)
  }
}

html[page=contact] article#first .box-btns .btn-square:not(:hover).no-select {
  border-color: #ccc;
  background-color: #f2f2f2;
  box-shadow: 3px 3px 0 rgba(38, 38, 38, .1)
}

html[page=contact] article#first .box-btns .btn-square:not(:hover).no-select .inner .box-text {
  opacity: .5
}

html[page=contact] article#first .box-btns .btn-square:not(:hover).no-select .inner>.arrow {
  opacity: .5
}

html[page=contact] article#first .box-btns .btn-square .inner>.arrow {
  transform: rotate(90deg)
}

html[page=contact] article#first p.text-under-btns {
  margin-top: 46px
}

html[page=contact] article#first p.text-under-btns.out {
  display: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first p.text-under-btns {
    margin-top: 56px
  }

  html[page=contact] article#first p.text-under-btns:after,
  html[page=contact] article#first p.text-under-btns:before {
    content: '';
    display: block
  }

  html[page=contact] article#first p.text-under-btns.f-en {
    font-size: 15px
  }

  html[page=contact] article#first p.text-under-btns.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja {
    font-size: 13px
  }

  html[page=contact] article#first p.text-under-btns.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#first p.text-under-btns.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first p.text-under-btns.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=contact] article#first .separate {
  width: 100%;
  height: 2px;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px);
  margin: 60px 0
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#first .separate {
    margin: 46px 0
  }
}

html[page=contact] article#first .area-change p.text-upper-form {
  display: none
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact] article#first .area-change p.text-upper-form:after,
  html[page=contact] article#first .area-change p.text-upper-form:before {
    content: '';
    display: block
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en {
    font-size: 15px
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja {
    font-size: 13px
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change p.text-upper-form.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#first .area-change p.text-upper-form br {
    display: none
  }
}

html[page=contact] article#first .area-change p.text-upper-form.in {
  display: block
}

html[page=contact] article#first .area-change h6.attention {
  color: red;
  margin-top: 16px;
  display: none
}

html[page=contact] article#first .area-change h6.attention.in {
  display: block
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact] article#first .area-change h6.attention:after,
  html[page=contact] article#first .area-change h6.attention:before {
    content: '';
    display: block
  }

  html[page=contact] article#first .area-change h6.attention.f-en {
    font-size: 11px
  }

  html[page=contact] article#first .area-change h6.attention.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 11 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-en.m:before {
    margin-top: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-en.m:after {
    margin-bottom: calc((1 - (22 / 11))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 11 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-en.b:before {
    margin-top: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-en.b:after {
    margin-bottom: calc((1 - (14 / 11))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja {
    font-size: 10px
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 10 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.m:before {
    margin-top: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 10))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 11px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 10 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.b:before {
    margin-top: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 10))/ 2 * 1em)
  }

  html[page=contact] article#first .area-change h6.attention.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 11px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail {
    margin: 72px 0 0 auto
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#detail {
    margin: 76px 0 0 auto
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail {
    width: calc(100% - 17px)
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=contact] article#detail {
    width: calc(100% - 46px)
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=contact] article#detail {
    width: calc(100% - 128px)
  }
}

html[page=contact] article#detail .frame {
  background-color: #f2f2f2
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame {
    border-radius: 4px 0 0 4px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#detail .frame {
    border-radius: 5px 0 0 5px
  }
}

html[page=contact] article#detail .frame .forms form {
  display: none
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form {
    padding: 56px 17px 56px 46px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=contact] article#detail .frame .forms form {
    padding: 76px 46px 76px 180px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=contact] article#detail .frame .forms form {
    padding: 76px 100px 76px 222px
  }
}

html[page=contact] article#detail .frame .forms form.in {
  display: block
}

html[page=contact] article#detail .frame .forms form .box:not(:first-child) {
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .box:not(:first-child) {
    margin-top: 28px
  }
}

html[page=contact] article#detail .frame .forms form .box.error .area-heading p.heading {
  color: red
}

html[page=contact] article#detail .frame .forms form .box.error .area-heading .text-required {
  display: block
}

html[page=contact] article#detail .frame .forms form .box .area-heading {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading:after,
  html[page=contact] article#detail .frame .forms form .box .area-heading .heading:before {
    content: '';
    display: block
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en {
    font-size: 15px
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja {
    font-size: 13px
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .area-heading .heading.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=contact] article#detail .frame .forms form .box .area-heading span.dot {
  color: red
}

html[page=contact] article#detail .frame .forms form .box .area-heading .text-required {
  color: red;
  display: none
}

html[page=contact] article#detail .frame .forms form .box .cell {
  margin-top: 16px;
  width: 100%
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#detail .frame .forms form .box .cell:not([column='1']) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .box .cell:not([column='1']) .text:not(:first-child) {
    margin-top: 10px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#detail .frame .forms form .box .cell:not([column='1']) .text {
    width: calc((100% - 12px)/ 2)
  }

  html[page=contact] article#detail .frame .forms form .box .cell:not([column='1']) .text:nth-child(n+3) {
    margin-top: 18px
  }
}

html[page=contact] article#detail .frame .forms form .box .cell .text {
  padding: 30px 40px;
  width: 100%;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  border-color: #999;
  border-radius: 5px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .box .cell .text {
    padding: 9px 28px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text:after,
  html[page=contact] article#detail .frame .forms form .box .cell .text:before {
    content: '';
    display: block
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en {
    font-size: 18px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja {
    font-size: 16px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=contact] article#detail .frame .forms form .box .cell .text:after,
  html[page=contact] article#detail .frame .forms form .box .cell .text:before {
    content: '';
    display: block
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en {
    font-size: 20px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(25 / 20 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.m:before {
    margin-top: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.m:after {
    margin-bottom: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(25 / 20 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.b:before {
    margin-top: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-en.b:after {
    margin-bottom: calc((1 - (25 / 20))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja {
    font-size: 18px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 20px;
    position: relative;
    top: 1px
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(25 / 18 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b:before {
    margin-top: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b:after {
    margin-bottom: calc((1 - (25 / 18))/ 2 * 1em)
  }

  html[page=contact] article#detail .frame .forms form .box .cell .text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .box .cell .text {
    border-radius: 5px
  }
}

html[page=contact] article#detail .frame .forms form .box .cell .text:not(:placeholder-shown) {
  border-color: #262626
}

html[page=contact] article#detail .frame .forms form .box .cell .text:focus {
  background-color: #f7f4e7
}

html[page=contact] article#detail .frame .forms form .box .cell .text::placeholder {
  color: rgba(38, 38, 38, .2)
}

html[page=contact] article#detail .frame .forms form .btn-square {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  margin-top: 60px;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  margin-top: 60px;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .btn-square {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .btn-square {
    padding: 0 28px;
    height: 76px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#detail .frame .forms form .btn-square {
    padding: 0 48px 0 60px;
    height: 90px
  }
}

html[page=contact] article#detail .frame .forms form .btn-square input[type=submit] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

html[page=contact] article#detail .frame .forms form .btn-square[color=orange]:hover.hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html[page=contact] article#detail .frame .forms form .btn-square[color=orange]:hover.hover .inner .text {
  color: #fff
}

html[page=contact] article#detail .frame .forms form .btn-square[color=orange]:hover.hover .inner .arrow svg path.line {
  fill: #fff
}

html[page=contact] article#detail .frame .forms form .btn-square[color=orange]:hover.hover .inner .arrow svg path.arrow {
  fill: #fb8b1e
}

html[page=contact] article#detail .frame .forms form .btn-square[color=orange]:hover.hover .inner .line-tip {
  background-color: #fff;
  bottom: -2px;
  height: 6px
}

html[page=contact] article#detail .frame .forms form .btn-square[color=orange] .inner .line-tip {
  background-color: #fb8b1e
}

html[page=contact] article#detail .frame .forms form .btn-square .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .box-text {
  display: flex;
  align-items: center
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .box-text .icon {
  margin-right: 12px
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .box-text .icon[name=footer-company] {
  background-image: url(assets/img/footer/icon-company.png);
  background-size: 100% 100%;
  width: 36px;
  height: 32px;
  display: block
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .box-text .icon[name=footer-investor] {
  background-image: url(assets/img/footer/icon-investor.png);
  background-size: 100% 100%;
  width: 35px;
  height: 35px;
  display: block
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .box-text .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .arrow {
  width: 26px;
  height: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .btn-square .inner .arrow {
    width: 22px;
    height: 22px
  }
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .arrow svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .arrow svg path.arrow {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 26px
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .line-tip[size='s'] {
  width: 20px
}

html[page=contact] article#detail .frame .forms form .btn-square .inner .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .btn-square .inner .line-tip {
    width: 22px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact] article#detail .frame .forms form .btn-square {
    padding: 0 28px;
    height: 76px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact] article#detail .frame .forms form .btn-square {
    padding: 0 48px 0 60px;
    height: 90px
  }
}

html[page=contact] article#detail .frame .forms form .btn-square input[type=submit] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=contact-confirm] article#first .area-title .up-title {
  display: table;
  user-select: none
}

html[page=contact-confirm] article#first .area-title .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-confirm] article#first .area-title .up-title h6 {
    font-size: 13px
  }
}

html[page=contact-confirm] article#first .area-title .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact-confirm] article#first .area-title .up-title h3:after,
  html[page=contact-confirm] article#first .area-title .up-title h3:before {
    content: '';
    display: block
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en {
    font-size: 30px
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first .area-title .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-confirm] article#first .area-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

html[page=contact-confirm] article#first .area-title .pages {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#first .area-title .pages {
    margin-top: 28px
  }
}

html[page=contact-confirm] article#first .area-title .pages .box-text {
  position: relative
}

html[page=contact-confirm] article#first .area-title .pages .box-text h6 {
  color: #262626
}

html[page=contact-confirm] article#first .area-title .pages .box-text .mark {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #fb8b1e;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: auto
}

html[page=contact-confirm] article#first .area-title .pages .box-line {
  margin: 0 11px
}

html[page=contact-confirm] article#first .area-title .pages .box-line .line {
  width: 47px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 2px, transparent 5px)
}

html[page=contact-confirm] article#first p.text {
  margin-top: 46px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact-confirm] article#first p.text:after,
  html[page=contact-confirm] article#first p.text:before {
    content: '';
    display: block
  }

  html[page=contact-confirm] article#first p.text.f-en {
    font-size: 15px
  }

  html[page=contact-confirm] article#first p.text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja {
    font-size: 13px
  }

  html[page=contact-confirm] article#first p.text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact-confirm] article#first p.text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#first p.text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact-confirm] article#first p.text br {
    display: none
  }
}

html[page=contact-confirm] article#detail {
  background-color: #f2f2f2;
  border-radius: 5px 0 0 5px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail {
    margin: 72px 0 0 auto
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-confirm] article#detail {
    margin: 76px 0 0 auto
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail {
    width: calc(100% - 17px)
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=contact-confirm] article#detail {
    width: calc(100% - 46px)
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=contact-confirm] article#detail {
    width: calc(100% - 128px)
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame {
    padding: 56px 17px 56px 46px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=contact-confirm] article#detail .frame {
    padding: 76px 46px 76px 180px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=contact-confirm] article#detail .frame {
    padding: 76px 100px 76px 222px
  }
}

html[page=contact-confirm] article#detail .frame .inputted .box:not(:first-child) {
  margin-top: 38px
}

html[page=contact-confirm] article#detail .frame .inputted .box .heading {
  color: rgba(38, 38, 38, .4);
  margin-bottom: 14px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame .inputted .box .heading {
    margin-bottom: 10px
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading:after,
  html[page=contact-confirm] article#detail .frame .inputted .box .heading:before {
    content: '';
    display: block
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en {
    font-size: 15px
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja {
    font-size: 13px
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame .inputted .box .heading.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=contact-confirm] article#detail .frame .inputted .box .cell-text {
  display: flex;
  align-items: center
}

html[page=contact-confirm] article#detail .frame .inputted .box .cell-text h4.text:not(:first-child) {
  margin-left: .5em
}

html[page=contact-confirm] article#detail .frame .btn-square {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  border: solid 2px #000;
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  background-color: #fff;
  position: relative;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: relative
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame .btn-square {
    border-radius: 5px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame .btn-square {
    padding: 0 28px;
    height: 76px;
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-confirm] article#detail .frame .btn-square {
    padding: 0 48px 0 60px;
    height: 90px;
    margin-top: 60px
  }
}

html[page=contact-confirm] article#detail .frame .btn-square[color=orange]:hover.hover {
  background-color: #fb8b1e;
  border-color: #fb8b1e
}

html[page=contact-confirm] article#detail .frame .btn-square[color=orange]:hover.hover .inner .text {
  color: #fff
}

html[page=contact-confirm] article#detail .frame .btn-square[color=orange]:hover.hover .inner .arrow svg path.line {
  fill: #fff
}

html[page=contact-confirm] article#detail .frame .btn-square[color=orange]:hover.hover .inner .arrow svg path.arrow {
  fill: #fb8b1e
}

html[page=contact-confirm] article#detail .frame .btn-square[color=orange]:hover.hover .inner .line-tip {
  background-color: #fff;
  bottom: -2px;
  height: 6px
}

html[page=contact-confirm] article#detail .frame .btn-square[color=orange] .inner .line-tip {
  background-color: #fb8b1e
}

html[page=contact-confirm] article#detail .frame .btn-square .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .box-text {
  display: flex;
  align-items: center
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .box-text .icon {
  margin-right: 12px
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .box-text .icon[name=footer-company] {
  background-image: url(assets/img/footer/icon-company.png);
  background-size: 100% 100%;
  width: 36px;
  height: 32px;
  display: block
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .box-text .icon[name=footer-investor] {
  background-image: url(assets/img/footer/icon-investor.png);
  background-size: 100% 100%;
  width: 35px;
  height: 35px;
  display: block
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .box-text .text {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .arrow {
  width: 26px;
  height: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame .btn-square .inner .arrow {
    width: 22px;
    height: 22px
  }
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .arrow svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .arrow svg path.arrow {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .line-tip {
  height: 4px;
  border-radius: 3px 3px 0 0;
  background-color: #262626;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 26px
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .line-tip[size='s'] {
  width: 20px
}

html[page=contact-confirm] article#detail .frame .btn-square .inner .line-tip[size='m'] {
  width: 26px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame .btn-square .inner .line-tip {
    width: 22px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame .btn-square {
    padding: 0 28px;
    height: 76px;
    margin-top: 44px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-confirm] article#detail .frame .btn-square {
    padding: 0 48px 0 60px;
    height: 90px;
    margin-top: 60px
  }
}

html[page=contact-confirm] article#detail .frame a.prev {
  display: flex;
  align-items: center;
  margin-top: 26px;
  width: max-content
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame a.prev {
    margin-top: 22px
  }
}

html[page=contact-confirm] article#detail .frame a.prev .icon {
  width: 22px;
  height: 22px;
  transform: rotate(180deg)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-confirm] article#detail .frame a.prev .icon {
    width: 18px;
    height: 18px
  }
}

html[page=contact-confirm] article#detail .frame a.prev .icon svg circle,
html[page=contact-confirm] article#detail .frame a.prev .icon svg path.arrow,
html[page=contact-confirm] article#detail .frame a.prev .icon svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact-confirm] article#detail .frame a.prev p {
  margin-left: 7px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact-confirm] article#detail .frame a.prev p:after,
  html[page=contact-confirm] article#detail .frame a.prev p:before {
    content: '';
    display: block
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en {
    font-size: 15px
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja {
    font-size: 13px
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-confirm] article#detail .frame a.prev p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=contact-confirm] article#detail .frame a.prev.hover:hover .icon svg circle {
  fill: #fb8b1e
}

html[page=contact-confirm] article#detail .frame a.prev.hover:hover .icon svg path.line {
  fill: #fb8b1e
}

html[page=contact-confirm] article#detail .frame a.prev.hover:hover .icon svg path.arrow {
  fill: #fff
}

html[page=contact-confirm] article#detail .frame a.prev.hover:hover p {
  color: #fb8b1e
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=contact-done] article#first .area-title .up-title {
  display: table;
  user-select: none
}

html[page=contact-done] article#first .area-title .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-done] article#first .area-title .up-title h6 {
    font-size: 13px
  }
}

html[page=contact-done] article#first .area-title .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact-done] article#first .area-title .up-title h3:after,
  html[page=contact-done] article#first .area-title .up-title h3:before {
    content: '';
    display: block
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en {
    font-size: 30px
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=contact-done] article#first .area-title .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-done] article#first .area-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

html[page=contact-done] article#first .area-title .pages {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-done] article#first .area-title .pages {
    margin-top: 28px
  }
}

html[page=contact-done] article#first .area-title .pages .box-text {
  position: relative
}

html[page=contact-done] article#first .area-title .pages .box-text h6 {
  color: #262626
}

html[page=contact-done] article#first .area-title .pages .box-text .mark {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #fb8b1e;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: auto
}

html[page=contact-done] article#first .area-title .pages .box-line {
  margin: 0 11px
}

html[page=contact-done] article#first .area-title .pages .box-line .line {
  width: 47px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-done] article#detail {
    padding: 46px 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=contact-done] article#detail {
    padding: 44px 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=contact-done] article#detail {
    padding: 44px 100px 0 350px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact-done] article#detail p.heading:after,
  html[page=contact-done] article#detail p.heading:before {
    content: '';
    display: block
  }

  html[page=contact-done] article#detail p.heading.f-en {
    font-size: 18px
  }

  html[page=contact-done] article#detail p.heading.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja {
    font-size: 16px
  }

  html[page=contact-done] article#detail p.heading.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=contact-done] article#detail p.heading.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=contact-done] article#detail p.heading.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-done] article#detail p.heading br {
    display: none
  }
}

html[page=contact-done] article#detail a.download {
  display: inline-flex;
  align-items: center
}

html[page=contact-done] article#detail a.download p {
  text-decoration: underline;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=contact-done] article#detail a.download p:after,
  html[page=contact-done] article#detail a.download p:before {
    content: '';
    display: block
  }

  html[page=contact-done] article#detail a.download p.f-en {
    font-size: 15px
  }

  html[page=contact-done] article#detail a.download p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja {
    font-size: 13px
  }

  html[page=contact-done] article#detail a.download p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=contact-done] article#detail a.download p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail a.download p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=contact-done] article#detail a.download .icon {
  width: 14px;
  height: 13px;
  margin-left: 8px
}

html[page=contact-done] article#detail a.download .icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact-done] article#detail a.download.hover:hover p {
  color: #fb8b1e
}

html[page=contact-done] article#detail a.download.hover:hover .icon svg path {
  fill: #fb8b1e
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-done] article#detail a.download {
    margin-top: 28px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-done] article#detail a.download {
    margin-top: 23px
  }
}

html[page=contact-done] article#detail h6.text {
  color: rgba(38, 38, 38, .6)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-done] article#detail h6.text {
    margin-top: 44px
  }

  html[page=contact-done] article#detail h6.text:after,
  html[page=contact-done] article#detail h6.text:before {
    content: '';
    display: block
  }

  html[page=contact-done] article#detail h6.text.f-en {
    font-size: 13px
  }

  html[page=contact-done] article#detail h6.text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja {
    font-size: 13px
  }

  html[page=contact-done] article#detail h6.text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 13px;
    position: relative;
    top: 1px
  }

  html[page=contact-done] article#detail h6.text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    top: 1px
  }

  html[page=contact-done] article#detail h6.text br:not(:first-child) {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-done] article#detail h6.text {
    margin-top: 56px
  }

  html[page=contact-done] article#detail h6.text:after,
  html[page=contact-done] article#detail h6.text:before {
    content: '';
    display: block
  }

  html[page=contact-done] article#detail h6.text.f-en {
    font-size: 14px
  }

  html[page=contact-done] article#detail h6.text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(26 / 14 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.m:before {
    margin-top: calc((1 - (26 / 14))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.m:after {
    margin-bottom: calc((1 - (26 / 14))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(26 / 14 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.b:before {
    margin-top: calc((1 - (26 / 14))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-en.b:after {
    margin-bottom: calc((1 - (26 / 14))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja {
    font-size: 12px
  }

  html[page=contact-done] article#detail h6.text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(26 / 12 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.m:before {
    margin-top: calc((1 - (26 / 12))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.m:after {
    margin-bottom: calc((1 - (26 / 12))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 14px;
    position: relative;
    top: 1px
  }

  html[page=contact-done] article#detail h6.text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(26 / 12 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.b:before {
    margin-top: calc((1 - (26 / 12))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.b:after {
    margin-bottom: calc((1 - (26 / 12))/ 2 * 1em)
  }

  html[page=contact-done] article#detail h6.text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    top: 1px
  }
}

html[page=contact-done] article#detail a.fortop {
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-done] article#detail a.fortop {
    margin-top: 28px
  }
}

html[page=contact-done] article#detail a.fortop h4 {
  margin-right: 8px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=contact-done] article#detail a.fortop .icon {
    width: 18px;
    height: 18px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=contact-done] article#detail a.fortop .icon {
    width: 26px;
    height: 26px
  }
}

html[page=contact-done] article#detail a.fortop .icon svg circle,
html[page=contact-done] article#detail a.fortop .icon svg path.arrow,
html[page=contact-done] article#detail a.fortop .icon svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=contact-done] article#detail a.fortop.hover:hover .icon svg circle {
  fill: #fb8b1e
}

html[page=contact-done] article#detail a.fortop.hover:hover .icon svg path.line {
  fill: #fb8b1e
}

html[page=contact-done] article#detail a.fortop.hover:hover .icon svg path.arrow {
  fill: #fff
}

html[page=contact-done] article#detail a.fortop.hover:hover h4 {
  color: #fb8b1e
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=disclaimer] article#first .area-title .up-title {
  display: table;
  user-select: none
}

html[page=disclaimer] article#first .area-title .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=disclaimer] article#first .area-title .up-title h6 {
    font-size: 13px
  }
}

html[page=disclaimer] article#first .area-title .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=disclaimer] article#first .area-title .up-title h3:after,
  html[page=disclaimer] article#first .area-title .up-title h3:before {
    content: '';
    display: block
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en {
    font-size: 30px
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=disclaimer] article#first .area-title .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=disclaimer] article#first .area-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

html[page=disclaimer] article#first .area-title .pages {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=disclaimer] article#first .area-title .pages {
    margin-top: 28px
  }
}

html[page=disclaimer] article#first .area-title .pages .box-text {
  position: relative
}

html[page=disclaimer] article#first .area-title .pages .box-text h6 {
  color: #262626
}

html[page=disclaimer] article#first .area-title .pages .box-text .mark {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #fb8b1e;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: auto
}

html[page=disclaimer] article#first .area-title .pages .box-line {
  margin: 0 11px
}

html[page=disclaimer] article#first .area-title .pages .box-line .line {
  width: 47px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=disclaimer] article#detail {
    padding: 46px 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=disclaimer] article#detail {
    padding: 44px 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=disclaimer] article#detail {
    padding: 44px 100px 0 350px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=disclaimer] article#detail p.heading:after,
  html[page=disclaimer] article#detail p.heading:before {
    content: '';
    display: block
  }

  html[page=disclaimer] article#detail p.heading.f-en {
    font-size: 18px
  }

  html[page=disclaimer] article#detail p.heading.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-en.m:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-en.m:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(22 / 18 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-en.b:before {
    margin-top: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-en.b:after {
    margin-bottom: calc((1 - (22 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja {
    font-size: 16px
  }

  html[page=disclaimer] article#detail p.heading.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja.m:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja.m:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=disclaimer] article#detail p.heading.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(22 / 16 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja.b:before {
    margin-top: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja.b:after {
    margin-bottom: calc((1 - (22 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail p.heading.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=disclaimer] article#detail p.heading br {
    display: none
  }
}

html[page=disclaimer] article#detail a.download {
  display: inline-flex;
  align-items: center
}

html[page=disclaimer] article#detail a.download p {
  text-decoration: underline;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=disclaimer] article#detail a.download p:after,
  html[page=disclaimer] article#detail a.download p:before {
    content: '';
    display: block
  }

  html[page=disclaimer] article#detail a.download p.f-en {
    font-size: 15px
  }

  html[page=disclaimer] article#detail a.download p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-en.m:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-en.m:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(17 / 15 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-en.b:before {
    margin-top: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-en.b:after {
    margin-bottom: calc((1 - (17 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja {
    font-size: 13px
  }

  html[page=disclaimer] article#detail a.download p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja.m:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja.m:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=disclaimer] article#detail a.download p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(17 / 13 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja.b:before {
    margin-top: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja.b:after {
    margin-bottom: calc((1 - (17 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail a.download p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=disclaimer] article#detail a.download .icon {
  width: 14px;
  height: 13px;
  margin-left: 8px
}

html[page=disclaimer] article#detail a.download .icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=disclaimer] article#detail a.download.hover:hover p {
  color: #fb8b1e
}

html[page=disclaimer] article#detail a.download.hover:hover .icon svg path {
  fill: #fb8b1e
}

@media (min-width:1px) and (max-width:960px) {
  html[page=disclaimer] article#detail a.download {
    margin-top: 28px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=disclaimer] article#detail a.download {
    margin-top: 23px
  }
}

@media (min-width:1px) and (max-width:960px) {

  html[page=disclaimer] article#detail h6.text:after,
  html[page=disclaimer] article#detail h6.text:before {
    content: '';
    display: block
  }

  html[page=disclaimer] article#detail h6.text.f-en {
    font-size: 15px
  }

  html[page=disclaimer] article#detail h6.text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja {
    font-size: 13px
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=disclaimer] article#detail h6.text br:not(:first-child) {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {

  html[page=disclaimer] article#detail h6.text:after,
  html[page=disclaimer] article#detail h6.text:before {
    content: '';
    display: block
  }

  html[page=disclaimer] article#detail h6.text.f-en {
    font-size: 18px
  }

  html[page=disclaimer] article#detail h6.text.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja {
    font-size: 16px
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=disclaimer] article#detail h6.text.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

html[page=disclaimer] article#detail h6.text:not(:first-child) {
  margin-top: 1.8em
}

html[page=disclaimer] article#detail a.fortop {
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=disclaimer] article#detail a.fortop {
    margin-top: 28px
  }
}

html[page=disclaimer] article#detail a.fortop h4 {
  margin-right: 8px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=disclaimer] article#detail a.fortop .icon {
    width: 18px;
    height: 18px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=disclaimer] article#detail a.fortop .icon {
    width: 26px;
    height: 26px
  }
}

html[page=disclaimer] article#detail a.fortop .icon svg circle,
html[page=disclaimer] article#detail a.fortop .icon svg path.arrow,
html[page=disclaimer] article#detail a.fortop .icon svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=disclaimer] article#detail a.fortop.hover:hover .icon svg circle {
  fill: #fb8b1e
}

html[page=disclaimer] article#detail a.fortop.hover:hover .icon svg path.line {
  fill: #fb8b1e
}

html[page=disclaimer] article#detail a.fortop.hover:hover .icon svg path.arrow {
  fill: #fff
}

html[page=disclaimer] article#detail a.fortop.hover:hover h4 {
  color: #fb8b1e
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=policy] article#first .area-title .up-title {
  display: table;
  user-select: none
}

html[page=policy] article#first .area-title .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=policy] article#first .area-title .up-title h6 {
    font-size: 13px
  }
}

html[page=policy] article#first .area-title .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=policy] article#first .area-title .up-title h3:after,
  html[page=policy] article#first .area-title .up-title h3:before {
    content: '';
    display: block
  }

  html[page=policy] article#first .area-title .up-title h3.f-en {
    font-size: 30px
  }

  html[page=policy] article#first .area-title .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=policy] article#first .area-title .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=policy] article#first .area-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

html[page=policy] article#first .area-title .pages {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#first .area-title .pages {
    margin-top: 28px
  }
}

html[page=policy] article#first .area-title .pages .box-text {
  position: relative
}

html[page=policy] article#first .area-title .pages .box-text h6 {
  color: #262626
}

html[page=policy] article#first .area-title .pages .box-text .mark {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #fb8b1e;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: auto
}

html[page=policy] article#first .area-title .pages .box-line {
  margin: 0 11px
}

html[page=policy] article#first .area-title .pages .box-line .line {
  width: 47px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail {
    padding: 46px 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=policy] article#detail {
    padding: 44px 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=policy] article#detail {
    padding: 44px 100px 0 350px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail h6.text-top {
    margin-bottom: 60px
  }

  html[page=policy] article#detail h6.text-top:after,
  html[page=policy] article#detail h6.text-top:before {
    content: '';
    display: block
  }

  html[page=policy] article#detail h6.text-top.f-en {
    font-size: 15px
  }

  html[page=policy] article#detail h6.text-top.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja {
    font-size: 13px
  }

  html[page=policy] article#detail h6.text-top.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail h6.text-top.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail h6.text-top br:not(:first-child) {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=policy] article#detail h6.text-top {
    margin-bottom: 60px
  }

  html[page=policy] article#detail h6.text-top:after,
  html[page=policy] article#detail h6.text-top:before {
    content: '';
    display: block
  }

  html[page=policy] article#detail h6.text-top.f-en {
    font-size: 18px
  }

  html[page=policy] article#detail h6.text-top.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja {
    font-size: 16px
  }

  html[page=policy] article#detail h6.text-top.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail h6.text-top.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=policy] article#detail h6.text-top.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail ol.items>li.item:not(:first-child) {
    margin-top: 40px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=policy] article#detail ol.items>li.item:not(:first-child) {
    margin-top: 60px
  }
}

html[page=policy] article#detail ol.items>li.item h4.heading {
  margin-bottom: 20px;
  letter-spacing: .12em
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part:not(:first-child) {
  margin-top: 20px
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p {
  letter-spacing: .08em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p {
    letter-spacing: .08em
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p:after,
  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p:before {
    content: '';
    display: block
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en {
    font-size: 15px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja {
    font-size: 13px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name {
  letter-spacing: .12em
}

@media (min-width:1px) and (max-width:960px) {

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name:after,
  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name:before {
    content: '';
    display: block
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en {
    font-size: 15px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja {
    font-size: 13px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail {
  display: flex;
  align-items: center;
  margin-top: 10px
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p {
  margin-right: .5em
}

@media (min-width:1px) and (max-width:960px) {

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p:after,
  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p:before {
    content: '';
    display: block
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en {
    font-size: 15px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja {
    font-size: 13px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a {
  display: flex;
  align-items: center
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p:after,
  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p:before {
    content: '';
    display: block
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en {
    font-size: 15px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja {
    font-size: 13px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text .underline {
  width: 100%;
  height: 1px;
  background-color: #262626;
  display: block;
  position: relative;
  margin-top: 2px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a span.icon {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 6px
}

html[page=policy] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a span.icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=policy] article#detail p.date {
  margin-top: 40px;
  letter-spacing: .08em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail p.date {
    margin-left: -.3em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=policy] article#detail p.date {
    text-align: right;
    margin-right: -.3em
  }
}

html[page=policy] article#detail a.fortop {
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail a.fortop {
    margin-top: 28px
  }
}

html[page=policy] article#detail a.fortop h4 {
  margin-right: 8px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=policy] article#detail a.fortop .icon {
    width: 18px;
    height: 18px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=policy] article#detail a.fortop .icon {
    width: 26px;
    height: 26px
  }
}

html[page=policy] article#detail a.fortop .icon svg circle,
html[page=policy] article#detail a.fortop .icon svg path.arrow,
html[page=policy] article#detail a.fortop .icon svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=policy] article#detail a.fortop.hover:hover .icon svg circle {
  fill: #fb8b1e
}

html[page=policy] article#detail a.fortop.hover:hover .icon svg path.line {
  fill: #fb8b1e
}

html[page=policy] article#detail a.fortop.hover:hover .icon svg path.arrow {
  fill: #fff
}

html[page=policy] article#detail a.fortop.hover:hover h4 {
  color: #fb8b1e
}

@font-face {
  font-family: GothicM;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-Medium.otf) format('otf')
}

@font-face {
  font-family: GothicDB;
  src: url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.woff) format('woff'), url(assets/font/GothicMB/A-OTF-GothicMB101Pro-DeBold.otf) format('otf')
}

@media (min-width:1px) and (max-width:960px) {
  .isPC {
    display: none !important
  }
}

@media (min-width:961px) and (max-width:99999px) {
  .isSP {
    display: none !important
  }
}

html[page=terms] article#first .area-title .up-title {
  display: table;
  user-select: none
}

html[page=terms] article#first .area-title .up-title h6 {
  color: rgba(38, 38, 38, .4)
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=terms] article#first .area-title .up-title h6 {
    font-size: 13px
  }
}

html[page=terms] article#first .area-title .up-title h3 {
  margin-top: 8px
}

@media (min-width:1px) and (max-width:960px) {

  html[page=terms] article#first .area-title .up-title h3:after,
  html[page=terms] article#first .area-title .up-title h3:before {
    content: '';
    display: block
  }

  html[page=terms] article#first .area-title .up-title h3.f-en {
    font-size: 30px
  }

  html[page=terms] article#first .area-title .up-title h3.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-en.m:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-en.m:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(14 / 30 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-en.b:before {
    margin-top: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-en.b:after {
    margin-bottom: calc((1 - (14 / 30))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja {
    font-size: 20px
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.m:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.m:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 30px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(14 / 20 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.b:before {
    margin-top: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.b:after {
    margin-bottom: calc((1 - (14 / 20))/ 2 * 1em)
  }

  html[page=terms] article#first .area-title .up-title h3.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    top: 1px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=terms] article#first .area-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

html[page=terms] article#first .area-title .pages {
  display: flex;
  align-items: center
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#first .area-title .pages {
    margin-top: 28px
  }
}

html[page=terms] article#first .area-title .pages .box-text {
  position: relative
}

html[page=terms] article#first .area-title .pages .box-text h6 {
  color: #262626
}

html[page=terms] article#first .area-title .pages .box-text .mark {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #fb8b1e;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: auto
}

html[page=terms] article#first .area-title .pages .box-line {
  margin: 0 11px
}

html[page=terms] article#first .area-title .pages .box-line .line {
  width: 47px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #262626, #262626 1px, transparent 2px, transparent 5px)
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail {
    padding: 46px 17px 0 63px
  }
}

@media (min-width:961px) and (max-width:1280px) {
  html[page=terms] article#detail {
    padding: 44px 46px 0 226px
  }
}

@media (min-width:1281px) and (max-width:99999px) {
  html[page=terms] article#detail {
    padding: 44px 100px 0 350px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail h6.text-top {
    margin-bottom: 60px
  }

  html[page=terms] article#detail h6.text-top:after,
  html[page=terms] article#detail h6.text-top:before {
    content: '';
    display: block
  }

  html[page=terms] article#detail h6.text-top.f-en {
    font-size: 15px
  }

  html[page=terms] article#detail h6.text-top.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja {
    font-size: 13px
  }

  html[page=terms] article#detail h6.text-top.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail h6.text-top.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail h6.text-top br:not(:first-child) {
    display: none
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=terms] article#detail h6.text-top {
    margin-bottom: 60px
  }

  html[page=terms] article#detail h6.text-top:after,
  html[page=terms] article#detail h6.text-top:before {
    content: '';
    display: block
  }

  html[page=terms] article#detail h6.text-top.f-en {
    font-size: 18px
  }

  html[page=terms] article#detail h6.text-top.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.m:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.m:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(35 / 18 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.b:before {
    margin-top: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-en.b:after {
    margin-bottom: calc((1 - (35 / 18))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja {
    font-size: 16px
  }

  html[page=terms] article#detail h6.text-top.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.m:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.m:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 18px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail h6.text-top.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(35 / 16 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.b:before {
    margin-top: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.b:after {
    margin-bottom: calc((1 - (35 / 16))/ 2 * 1em)
  }

  html[page=terms] article#detail h6.text-top.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 1px
  }
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail ol.items>li.item:not(:first-child) {
    margin-top: 40px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=terms] article#detail ol.items>li.item:not(:first-child) {
    margin-top: 60px
  }
}

html[page=terms] article#detail ol.items>li.item h4.heading {
  margin-bottom: 20px;
  letter-spacing: .12em
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part:not(:first-child) {
  margin-top: 20px
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p {
  letter-spacing: .08em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p {
    letter-spacing: .08em
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p:after,
  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p:before {
    content: '';
    display: block
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en {
    font-size: 15px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja {
    font-size: 13px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-text p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name {
  letter-spacing: .12em
}

@media (min-width:1px) and (max-width:960px) {

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name:after,
  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name:before {
    content: '';
    display: block
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en {
    font-size: 15px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja {
    font-size: 13px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info p.name.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail {
  display: flex;
  align-items: center;
  margin-top: 10px
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p {
  margin-right: .5em
}

@media (min-width:1px) and (max-width:960px) {

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p:after,
  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p:before {
    content: '';
    display: block
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en {
    font-size: 15px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja {
    font-size: 13px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail>p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a {
  display: flex;
  align-items: center
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

@media (min-width:1px) and (max-width:960px) {

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p:after,
  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p:before {
    content: '';
    display: block
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en {
    font-size: 15px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.m {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.m:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.m:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.b {
    font-family: Arial, "メイリオ";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: calc(28 / 15 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.b:before {
    margin-top: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-en.b:after {
    margin-bottom: calc((1 - (28 / 15))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja {
    font-size: 13px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m {
    font-family: Arial, GothicM;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.m span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-size: 15px;
    position: relative;
    top: 1px
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b {
    font-family: Arial, GothicDB;
    letter-spacing: .053em;
    line-height: calc(28 / 13 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b:before {
    margin-top: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b:after {
    margin-bottom: calc((1 - (28 / 13))/ 2 * 1em)
  }

  html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text p.f-ja.b span.c.en {
    font-family: Arial, "メイリオ";
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    top: 1px
  }
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a .cell-text .underline {
  width: 100%;
  height: 1px;
  background-color: #262626;
  display: block;
  position: relative;
  margin-top: 2px;
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a span.icon {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 6px
}

html[page=terms] article#detail ol.items>li.item ul.parts>li.part .layout-box-campaly-info .mail a span.icon svg path {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=terms] article#detail p.date {
  margin-top: 40px;
  letter-spacing: .08em
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail p.date {
    margin-left: -.3em
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=terms] article#detail p.date {
    text-align: right;
    margin-right: -.3em
  }
}

html[page=terms] article#detail a.fortop {
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 38px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail a.fortop {
    margin-top: 28px
  }
}

html[page=terms] article#detail a.fortop h4 {
  margin-right: 8px
}

@media (min-width:1px) and (max-width:960px) {
  html[page=terms] article#detail a.fortop .icon {
    width: 18px;
    height: 18px
  }
}

@media (min-width:961px) and (max-width:99999px) {
  html[page=terms] article#detail a.fortop .icon {
    width: 26px;
    height: 26px
  }
}

html[page=terms] article#detail a.fortop .icon svg circle,
html[page=terms] article#detail a.fortop .icon svg path.arrow,
html[page=terms] article#detail a.fortop .icon svg path.line {
  -webkit-transition: .15s;
  -moz-transform: .15s;
  transition: .15s
}

html[page=terms] article#detail a.fortop.hover:hover .icon svg circle {
  fill: #fb8b1e
}

html[page=terms] article#detail a.fortop.hover:hover .icon svg path.line {
  fill: #fb8b1e
}

html[page=terms] article#detail a.fortop.hover:hover .icon svg path.arrow {
  fill: #fff
}

html[page=terms] article#detail a.fortop.hover:hover h4 {
  color: #fb8b1e
}