@charset "UTF-8";
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #333;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}

main, article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
  display: block;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

.overlay {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100vh;
  right: -100%;
  top: 0;
  background: #fff;
  overflow-y: auto;
  transition: right 0.5s cubic-bezier(0.7, 0.3, 0.15, 1);
}
.overlay.open {
  right: 0;
}
.overlay h2 {
  width: 120px;
  margin: 0 0 30px 5%;
  padding-top: 30px;
}
.overlay h2.special {
  width: 163px;
}
.overlay h2 img {
  width: 100%;
}
.overlay ul {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 80px;
}
.overlay ul.special {
  padding-bottom: 0;
}
.overlay ul li {
  margin-bottom: 20px;
}
.overlay ul li a {
  display: block;
  font-size: 0;
}
.overlay ul li a img {
  display: inline-block;
  vertical-align: middle;
  width: 18%;
}
.overlay ul li a span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3%;
  font-size: 3.4vw;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.overlay ul li a span small {
  font-size: 3vw;
  font-weight: 400;
}

body {
  padding-top: 13.5vw;
}

.header_bg {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.wrapper {
  position: relative;
}

.menu-btn-wrapper {
  position: -webkit-sticky;
  position: sticky;
  z-index: 200;
  width: 50px;
  height: 40px;
  right: 0;
  top: 0;
  margin: 0 0 0 auto;
}

.menu-btn {
  position: absolute;
  width: 39px;
  height: 30px;
  right: 0;
  bottom: 0;
  border-top: solid 1px #7500c0;
  border-left: solid 1px #7500c0;
  border-bottom: solid 1px #7500c0;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: #fff;
}
.menu-btn span {
  position: absolute;
  width: 20px;
  height: 2px;
  right: 8px;
  background: #7500c0;
  transition: 0.3s;
}
.menu-btn span:nth-of-type(1) {
  top: 8px;
}
.menu-btn span:nth-of-type(2) {
  top: 14px;
}
.menu-btn span:nth-of-type(3) {
  top: 20px;
}
.menu-btn.open span:nth-of-type(1) {
  width: 10px;
  top: 10px;
  transform: rotate(45deg);
}
.menu-btn.open span:nth-of-type(3) {
  width: 10px;
  top: 18px;
  transform: rotate(-45deg);
}

header {
  position: relative;
  z-index: 11;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header.header-top {
  position: absolute;
  left: 0;
  top: 0;
}
header.header-top a img {
  height: 35px;
}
header a {
  display: block;
  margin: 0 15px;
}
header a img {
  width: auto;
  height: 15px;
}
header a:nth-of-type(2) {
  display: none;
}

.top-header {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: calc(100vh - 280px);
  left: 0;
  top: calc(100px + 13.5vw);
}
.top-header.hide {
  opacity: 0;
}
.top-header h1 {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  z-index: 3;
  right: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-100%);
  transition: top 1s 1.3s;
}
.top-header h1 img {
  width: auto;
  height: 10.26vw;
  opacity: 0;
  transform: translateX(-300%);
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}
.top-header h1 img:nth-of-type(9) {
  transition-delay: 0;
}
.top-header h1 img:nth-of-type(8) {
  transition-delay: 0.1s;
}
.top-header h1 img:nth-of-type(7) {
  transition-delay: 0.15s;
}
.top-header h1 img:nth-of-type(6) {
  transition-delay: 0.2s;
}
.top-header h1 img:nth-of-type(5) {
  transition-delay: 0.25s;
}
.top-header h1 img:nth-of-type(4) {
  transition-delay: 0.3s;
}
.top-header h1 img:nth-of-type(3) {
  transition-delay: 0.35s;
}
.top-header h1 img:nth-of-type(2) {
  transition-delay: 0.4s;
}
.top-header h1 img:nth-of-type(1) {
  transition-delay: 0.45s;
}
.top-header span {
  position: relative;
  display: block;
  width: 94%;
  height: 100%;
  margin: 0 0 0 auto;
  background-image: url(top2.jpg);
  background-repeat: no-repeat;
  background-position: 40% center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s 1.3s ease-in;
}
.top-header span::before, .top-header span::after {
  position: absolute;
  z-index: 2;
  content: "";
  width: 100%;
  height: 50%;
  left: 0;
  background: #fff;
  transition: height 1s 1.3s;
}
.top-header span::before {
  top: 0;
}
.top-header span::after {
  bottom: 0;
}
.top-header.fadein h1 {
  top: 0;
}
.top-header.fadein h1 img {
  opacity: 1;
  transform: none;
}
.top-header.fadein span {
  opacity: 1;
}
.top-header.fadein span::before, .top-header.fadein span::after {
  height: 0;
}

.top-lead {
  position: relative;
  z-index: 10;
  margin-top: calc(100vh - 210px);
  padding: 20px 0 0;
  background: #fff;
}
.top-lead p {
  width: 94%;
  margin: 0 0 0 auto;
  font-size: 3.6vw;
  line-height: 2.3;
  font-weight: 500;
  opacity: 0;
  transition: opacity 1s 2.3s ease-in;
}
.top-lead.fadein p {
  opacity: 1;
}

.top-list1 {
  position: relative;
  z-index: 10;
  padding: 80px 6% 0;
  background: #fff;
}
.top-list1 h2 {
  width: 30vw;
  margin-bottom: 40px;
}
.top-list1 h2 img {
  width: 100%;
}
.top-list1 ul li {
  margin-bottom: 25px;
}
.top-list1 ul li:last-child {
  margin-bottom: 0;
}
.top-list1 ul li a {
  display: flex;
  align-items: center;
}
.top-list1 ul li a img {
  width: 25%;
  margin-right: 3%;
}
.top-list1 ul li a span {
  display: flex;
  align-items: center;
  min-height: 16.8vw;
  padding: 5px 0 5px 6%;
  border-left: solid 1px #aaa;
  font-size: 4vw;
  line-height: 1.4;
  font-weight: 700;
  color: #999;
}
.top-list1 ul li a[href] span {
  color: #000;
}

.top-list2 {
  position: relative;
  z-index: 10;
  padding: 80px 0 60px;
  background: #fff;
}
.top-list2 .list-item {
  position: relative;
  width: 85%;
  margin: 0 auto 60px;
  padding-top: 48%;
  padding-bottom: 5%;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
}
.top-list2 .list-item:last-child {
  margin-bottom: 0;
}
.top-list2 .list-item > span {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.top-list2 .list-item > span.special1 {
  background-image: url(special1_main.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.special2 {
  background-image: url(special2_main.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.special3 {
  background-image: url(special3_main.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.special4 {
  background-image: url(special4_main.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.special5 {
  background-image: url(special5_main.jpg?0401);
  background-position: center top;
}
.top-list2 .list-item > span.special6 {
  background-image: url(special6_main.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.article1 {
  background-image: url(article1_thum.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.article2 {
  background-image: url(article2_thum.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.article3 {
  background-image: url(article3_thum.jpg?0208);
  background-position: center top;
}
.top-list2 .list-item > span.article4 {
  background-image: url(article4_thum.jpg?0215);
  background-position: center top;
}
.top-list2 .list-item > span.article5 {
  background-image: url(article5_thum.jpg?0521);
  background-position: center top;
}
.top-list2 .list-item > span.article6 {
  background-image: url(article6_thum.jpg?0607);
  background-position: center top;
}
.top-list2 .list-item > span.article7 {
  background-image: url(article7_thum.jpg?0621);
  background-position: center top;
}
.top-list2 .list-item > span.article8 {
  background-image: url(article8_thum.jpg?0720);
  background-position: center top;
}
.top-list2 .list-item > span.article9 {
  background-image: url(article9_thum.jpg?0927);
  background-position: center top;
}
.top-list2 .list-item > span.article10 {
  background-image: url(article10_thum.jpg?1105);
  background-position: center top;
}
.top-list2 .list-item > span.article11 {
  background-image: url(article11_thum.jpg?0726);
  background-position: center top;
}
.top-list2 .list-item > span.article12 {
  background-image: url(article12_thum.jpg?0804);
  background-position: center top;
}
.top-list2 .list-item > span.article13 {
  background-image: url(article13_thum.jpg?0805);
  background-position: center top;
}
.top-list2 .list-item > span.article14 {
  background-image: url(article14_thum.jpg?0116);
  background-position: center top;
}
.top-list2 .list-item > span.article15 {
  background-image: url(article15_thum.jpg?0613);
  background-position: center top;
}
.top-list2 .list-item > span.article16 {
  background-image: url(article16_thum.jpg?0628);
  background-position: center top;
}
.top-list2 .list-item > span.article17 {
  background-image: url(article17_thum.jpg?0720-2);
  background-position: center top;
}
.top-list2 .list-item > span.article18 {
  background-image: url(article18_thum.jpg);
  background-position: center top;
}
.top-list2 .list-item > span.article19 {
  background-image: url(article19_thum.jpg?1220);
  background-position: center top;
}
.top-list2 .list-item > span.article20 {
  background-image: url(article20_thum.jpg?071802);
  background-position: center top;
}
.top-list2 .list-item > span.article21 {
  background-image: url(article21_thum_large.jpg?0912);
  background-position: center top;
}
.top-list2 .list-item.large {
  padding-top: 63%;
}
.top-list2 .list-item.large > span {
  padding-top: 75%;
}
.top-list2 .list-item > div {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  padding: 5% 0 0;
  background: #fff;
}
.top-list2 .list-item > div h3 {
  position: relative;
  margin-bottom: 0;
  padding-left: 28%;
  font-size: 4.2vw;
  line-height: 1.4;
  font-weight: 900;
  color: #000;
}
.top-list2 .list-item > div h3.long {
  font-size: 4.2vw;
}
.top-list2 .list-item > div h3 img {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 20%;
  margin: 0;
  transform: translateY(-50%);
}
.top-list2 .list-item > div h3 span {
  display: block;
  margin-bottom: 0.4em;
  font-size: 3.3vw;
  line-height: 1.4;
  font-weight: 500;
  color: #000;
}
.top-list2 .list-item > div p {
  margin-top: 5%;
  padding: 0 8%;
  font-size: 13px;
  line-height: 1.6;
}
.top-list2 .list-item a {
  display: block;
  width: 44%;
  margin: 5% auto 0;
  background: #7500c0;
}
.top-list2 .list-item a img {
  width: 100%;
}
.top-list2 .top-special {
  position: relative;
  margin-bottom: 60px;
  padding-bottom: 60px;
}
.top-list2 .top-special::after {
  position: absolute;
  content: "";
  width: 90%;
  height: 1px;
  left: 5%;
  bottom: 0;
  background-color: #7500c0;
}
.top-list2 .top-special h2 {
  position: relative;
  width: 90%;
  margin: 0 auto 50px;
}
.top-list2 .top-special h2::after {
  position: absolute;
  content: "";
  width: calc(100% - 180px);
  height: 1px;
  right: 0;
  bottom: 12px;
  background-color: #7500c0;
}
.top-list2 .top-special h2 img {
  display: block;
  width: 163px;
}
.top-list2 .top-special .list-item {
  padding-top: 42.5%;
}
.top-list2 .top-special .list-item.cs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  padding: 0;
}
.top-list2 .top-special .list-item.cs .special-title {
  margin-bottom: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}
.top-list2 .top-special .list-item.cs .special-title span {
  display: block;
  color: #7500c0;
  font-weight: 700;
}
.top-list2 .top-special .list-item.cs .special-coming {
  font-size: 15px;
  color: #7500c0;
}
.top-list2 .top-special .list-item > span {
  padding-top: 62.5%;
}
.top-list2 .top-special .list-item > div .special-title {
  margin-top: 0;
  margin-bottom: 0.8em;
  text-align: center;
  font-size: 3.3vw;
  line-height: 1.5;
  font-weight: 700;
}
.top-list2 .top-special .list-item > div .special-title span {
  display: block;
  color: #7500c0;
  font-weight: 700;
}
.top-list2 .top-special .list-item > div h3 {
  padding: 0;
  text-align: center;
}
.top-list2 .top-special .list-item > div h3 span {
  margin: 5px 0 0;
}
.top-list2 .top-special .text-item {
  width: 85%;
  margin: 0 auto;
  padding: 5% 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}
.top-list2 .top-special .text-item > div {
  padding: 5% 0;
}
.top-list2 .top-special .text-item > div > img {
  width: 80%;
  height: 32vw;
  margin: 0 auto 4%;
  object-fit: cover;
  object-position: center top;
}
.top-list2 .top-special .text-item > div .special-title {
  margin-bottom: 0.6em;
  text-align: center;
  font-size: 3.3vw;
  line-height: 1.5;
  font-weight: 700;
}
.top-list2 .top-special .text-item > div .special-title span {
  display: block;
  color: #7500c0;
  font-weight: 700;
}
.top-list2 .top-special .text-item > div h3 {
  margin-bottom: 5%;
  text-align: center;
  font-size: 4.2vw;
  line-height: 1.4;
  font-weight: 900;
  color: #000;
}
.top-list2 .top-special .text-item > div h3 span {
  display: block;
  margin-top: 0.8em;
  font-size: 3.3vw;
}
.top-list2 .top-special .text-item > div h3 span.small {
  font-size: 3vw;
}
.top-list2 .top-special .text-item > div a {
  display: block;
  width: 44%;
  margin: 5% auto 0;
  background: #7500c0;
}
.top-list2 .top-special .text-item > div a img {
  width: 100%;
}

.article-header {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 53.3vw;
  left: 0;
  top: calc(100px + 13.5vw);
}
.article-header.hide {
  opacity: 0;
}
.article-header p {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  width: 100%;
  transform: translateY(-100%);
}
.article-header p img {
  width: auto;
  height: 9vw;
  opacity: 0;
  transform: translateX(-300%);
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}
.article-header p img:nth-of-type(9) {
  transition-delay: 0;
}
.article-header p img:nth-of-type(8) {
  transition-delay: 0.1s;
}
.article-header p img:nth-of-type(7) {
  transition-delay: 0.15s;
}
.article-header p img:nth-of-type(6) {
  transition-delay: 0.2s;
}
.article-header p img:nth-of-type(5) {
  transition-delay: 0.25s;
}
.article-header p img:nth-of-type(4) {
  transition-delay: 0.3s;
}
.article-header p img:nth-of-type(3) {
  transition-delay: 0.35s;
}
.article-header p img:nth-of-type(2) {
  transition-delay: 0.4s;
}
.article-header p img:nth-of-type(1) {
  transition-delay: 0.45s;
}
.article-header span {
  position: relative;
  display: block;
  width: 80%;
  height: 100%;
  margin: 0 0 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.8s 0.3s ease-in;
}
.article-header span.vol1 {
  background-image: url(article1_main.jpg);
  background-position: right center;
}
.article-header span.vol2 {
  background-image: url(article2_main.jpg);
  background-position: center center;
}
.article-header span.vol3 {
  background-image: url(article3_main.jpg?0208);
  background-position: center center;
}
.article-header span.vol4 {
  background-image: url(article4_main.jpg?0215);
  background-position: left top;
}
.article-header span.vol5 {
  background-image: url(article5_main.jpg?0521);
  background-position: center center;
}
.article-header span.vol6 {
  background-image: url(article6_main.jpg?0607);
  background-position: left center;
}
.article-header span.vol7 {
  background-image: url(article7_main.jpg?0621);
  background-position: left center;
}
.article-header span.vol8 {
  background-image: url(article8_main.jpg?0720);
  background-position: right top;
}
.article-header span.vol9 {
  background-image: url(article9_main.jpg?0927);
  background-position: center center;
}
.article-header span.vol10 {
  background-image: url(article10_main.jpg?1105);
  background-position: right bottom;
}
.article-header span.vol11 {
  background-image: url(article11_main.jpg?0726);
  background-position: center center;
}
.article-header span.vol12 {
  background-image: url(article12_main.jpg?0804);
  background-position: left center;
}
.article-header span.vol13 {
  background-image: url(article13_main.jpg?0805);
  background-position: center center;
}
.article-header span.vol14 {
  background-image: url(article14_main.jpg?0116);
  background-position: center center;
}
.article-header span.vol15 {
  background-image: url(article15_main.jpg?0613);
  background-position: center center;
}
.article-header span.vol16 {
  background-image: url(article16_main.jpg?0628);
  background-position: center top;
}
.article-header span.vol17 {
  background-image: url(article17_main.jpg?0720-2);
  background-position: center top;
}
.article-header span.vol18 {
  background-image: url(article18_main.jpg?1228);
  background-position: center center;
}
.article-header span.vol19 {
  background-image: url(article19_main.jpg?1220);
  background-position: 80% center;
}
.article-header span.vol20 {
  background-image: url(article20_main.jpg?071802);
  background-position: left top;
}
.article-header span.vol21 {
  background-image: url(article21_main.webp?0829);
  background-position: center center;
}
.article-header.fadein p img {
  opacity: 1;
  transform: none;
}
.article-header.fadein span {
  opacity: 1;
}

.article-header2 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 30vw;
  margin-top: 15vw;
}
.article-header2 p {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  width: 100%;
  transform: translateY(-100%);
}
.article-header2 p img {
  width: auto;
  height: 9vw;
}
.article-header2 span {
  position: relative;
  display: block;
  width: 90%;
  height: 100%;
  margin: 0 0 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
}
.article-header2 span.vol1 {
  background-image: url(article1_main.jpg);
  background-position: right center;
}
.article-header2 span.vol2 {
  background-image: url(article2_main.jpg);
  background-position: center center;
}
.article-header2 span.vol3 {
  background-image: url(article3_main.jpg?0208);
  background-position: center center;
}
.article-header2 span.vol4 {
  background-image: url(article4_main.jpg?0215);
  background-position: center 30%;
}
.article-header2 span.vol5 {
  background-image: url(article5_main.jpg?0521);
  background-position: center 65%;
}
.article-header2 span.vol6 {
  background-image: url(article6_main.jpg?0607);
  background-position: left 30%;
}
.article-header2 span.vol7 {
  background-image: url(article7_main.jpg?0621);
  background-position: left center;
}
.article-header2 span.vol8 {
  background-image: url(article8_main.jpg?0720);
  background-position: right 35%;
}
.article-header2 span.vol9 {
  background-image: url(article9_main.jpg?0927);
  background-position: center center;
}
.article-header2 span.vol10 {
  background-image: url(article10_main.jpg?1105);
  background-position: right bottom;
}
.article-header2 span.vol11 {
  background-image: url(article11_main.jpg?0726);
  background-position: center 95%;
}
.article-header2 span.vol12 {
  background-image: url(article12_main.jpg?0804);
  background-position: left 30%;
}
.article-header2 span.vol13 {
  background-image: url(article13_main.jpg?0805);
  background-position: center 60%;
}
.article-header2 span.vol14 {
  background-image: url(article14_main.jpg?0116);
  background-position: center 35%;
}
.article-header2 span.vol15 {
  background-image: url(article15_main.jpg?0613);
  background-position: center center;
}
.article-header2 span.vol16 {
  background-image: url(article16_main.jpg?0628);
  background-position: center 20%;
}
.article-header2 span.vol17 {
  background-image: url(article17_main.jpg?0720-2);
  background-position: center 15%;
}
.article-header2 span.vol18 {
  background-image: url(article18_main.jpg?1228);
  background-position: center 40%;
}
.article-header2 span.vol19 {
  background-image: url(article19_main.jpg?1220);
  background-position: center center;
}
.article-header2 span.vol20 {
  background-image: url(article20_main.jpg?071802);
  background-position: left 10%;
}
.article-header2 span.vol21 {
  background-image: url(article21_main.webp?0829);
  background-position: center 35%;
}

.article-lead {
  position: relative;
  z-index: 10;
  margin-top: calc(53.5vw + 50px);
  background: #fff;
  opacity: 0;
  transform: translateY(18vw);
  transition: opacity 0.8s 1s, transform 0.8s 1s;
}
.article-lead h1 {
  margin-bottom: 30px;
  padding: 5% 6% 0;
  font-size: 6.7vw;
  line-height: 1.4;
  font-weight: 900;
  color: #000;
}
.article-lead h1.small {
  font-size: 6vw;
}
.article-lead h1.small2 {
  font-size: 5.5vw;
}
.article-lead h1.small2 .sub {
  font-size: 4.2vw;
}
.article-lead h1 .vol {
  position: absolute;
  left: 0;
  top: 0;
  width: 30vw;
  height: 12vw;
  background: #fff;
  transform: translateY(-100%);
}
.article-lead h1 .vol img {
  width: auto;
  height: 9vw;
  margin: 2vw auto 0 6vw;
}
.article-lead h1 .sub {
  display: block;
  margin-bottom: 3vw;
  font-size: 5vw;
  line-height: 1.3;
  color: #000;
}
.article-lead p {
  width: 88%;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.8;
}
.article-lead.fadein {
  opacity: 1;
  transform: none;
}

.article-lead2 {
  position: relative;
  z-index: 10;
  margin-top: 40px;
  background: #fff;
}
.article-lead2 h1 {
  text-align: center;
  font-size: 5vw;
  line-height: 1.4;
  font-weight: 900;
  color: #000;
}
.article-lead2 h1 .vol {
  display: block;
  width: 70px;
  margin: 0 auto 10px;
}
.article-lead2 h1 .vol img {
  width: 100%;
}

.article-section {
  position: relative;
  z-index: 10;
  padding: 80px 6% 0;
  background: #fff;
}
.article-section.hide {
  display: none;
}
.article-section h2 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 30px;
  text-align: center;
  font-size: 4.8vw;
  line-height: 1.4;
  font-weight: 900;
  color: #000;
}
.article-section h2::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 5px;
  left: calc(50% - 30px);
  bottom: 0;
  background: #7500c0;
}
.article-section h3 {
  position: relative;
  margin: 3em 0 1.5em;
  padding-bottom: 1.5em;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 900;
  color: #000;
}
.article-section h3::after {
  position: absolute;
  content: "";
  width: 40px;
  height: 3px;
  left: calc(50% - 20px);
  bottom: 0;
  background: #7500c0;
}
.article-section p {
  margin-bottom: 1.8em;
  font-size: 15px;
  line-height: 1.8;
}
.article-section p a {
  font-weight: 900;
  text-decoration: underline;
}
.article-section p strong {
  font-weight: 700;
  color: #000;
}
.article-section p sup {
  display: inline-block;
  vertical-align: top;
  font-size: 80%;
  text-indent: 0;
}
.article-section p.interviewer {
  padding-left: 2.5em;
  text-indent: -2.5em;
  font-weight: 700;
  color: #000;
}
.article-section p.interviewer span {
  position: relative;
  display: inline-block;
  width: 2.5em;
  text-indent: 0;
}
.article-section p.interviewer span::after {
  position: absolute;
  content: "";
  width: 95%;
  height: 1px;
  left: 0;
  top: 50%;
  background: #000;
}
.article-section p.interviewee {
  padding-left: 2.5em;
  text-indent: -2.5em;
}
.article-section p.interviewee span {
  display: inline-block;
  width: 2.5em;
  text-indent: 0;
  font-weight: 700;
  color: #7500c0;
}
.article-section p.interviewee.name4 span {
  width: 4.5em;
}
.article-section p.interviewee.name5 span {
  width: 5.5em;
}
.article-section p.note {
  margin-top: -1.25em;
  padding-left: 4.125em;
  text-indent: -1em;
  font-size: 12px;
  line-height: 1.5;
}
.article-section p.note20 {
  margin-top: -1.25em;
  margin-bottom: 2.25em;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 12px;
  line-height: 1.5;
}
.article-section.name3 p.interviewer {
  padding-left: 3.3em;
  text-indent: -3.3em;
}
.article-section.name3 p.interviewer span {
  width: 3.3em;
}
.article-section.name3 p.interviewee {
  padding-left: 3.3em;
  text-indent: -3.3em;
}
.article-section.name3 p.interviewee span {
  width: 3.3em;
}
.article-section.name3 p.note {
  padding-left: 5.125em;
}
.article-section .hideText {
  display: none;
}
.article-section .next {
  position: absolute;
  left: calc(50% - 65px);
  top: 30px;
  width: 70px;
  padding-right: 60px;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  color: #7500c0;
}
.article-section .next::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  right: 0;
  top: 16px;
  background: #7500c0;
}
.article-section .next::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  right: 0;
  top: 16px;
  border-right: solid 1px #7500c0;
  border-bottom: solid 1px #7500c0;
  transform: translateY(-5.5px) rotate(-45deg);
}
.article-section .readmore {
  display: block;
  width: 150px;
  margin: 0 auto 80px;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: #7500c0;
  border: solid 1px #7500c0;
  border-radius: 18px;
}
.article-section.article8_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -20vw;
}
.article-section.article8_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -25vw;
}
.article-section.article8_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article11_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -25vw;
}
.article-section.article11_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article12_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -22vw;
}
.article-section.article12_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -12vw;
}
.article-section.article12_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article13_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -25vw;
}
.article-section.article13_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -17vw;
}
.article-section.article13_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article14_p2 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -27vw;
}
.article-section.article14_p2 .article-profile .profile > span {
  display: block;
}
.article-section.article14_p3 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -18vw;
}
.article-section.article14_p3 .article-profile .profile > span {
  display: block;
}
.article-section.article15_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -18vw;
}
.article-section.article15_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -21vw;
}
.article-section.article15_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article15_p2 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -18vw;
}
.article-section.article15_p2 .article-profile .profile > span {
  display: block;
}
.article-section.article16_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -20vw;
}
.article-section.article16_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -20vw;
}
.article-section.article16_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article16_p2 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -21vw;
}
.article-section.article16_p2 .article-profile .profile > span {
  display: block;
}
.article-section.article17_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -22vw;
}
.article-section.article17_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article17_p2 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -18vw;
}
.article-section.article17_p2 .article-profile .profile > span {
  display: block;
}
.article-section.article18_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -22vw;
}
.article-section.article18_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article18_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -19vw;
}
.article-section.article19_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -22vw;
}
.article-section.article19_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article19_p1 .article-profile:nth-of-type(2) > span img {
  margin-left: -19vw;
}
.article-section.article19_p3 .article-linkText a {
  width: 80%;
}
.article-section.article21_p1 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -22vw;
}
.article-section.article21_p1 .article-profile .profile > span {
  display: block;
}
.article-section.article21_p2 .article-profile > span img {
  width: auto;
  height: 100%;
  margin-left: -29vw;
}
.article-section.article21_p2 .article-profile .profile > span {
  display: block;
}

.article-profile {
  width: 90%;
  margin: 60px auto;
}
.article-profile > span {
  display: block;
  height: 80vw;
  margin-bottom: 20px;
  overflow: hidden;
  border-bottom: solid 5px #7500c0;
}
.article-profile > span img {
  width: 100%;
}
.article-profile .profile {
  font-size: 12px;
  line-height: 1.5;
}
.article-profile .profile .name {
  display: block;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: #000;
}
.article-profile .profile .name small {
  font-size: 75%;
  font-weight: 700;
  color: #000;
}
.article-profile .profile .job {
  display: block;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.article-fig {
  margin: 60px 0;
}
.article-fig img {
  width: 100%;
}
.article-fig img.pc {
  display: none;
}
.article-fig p {
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: #7500c0;
}
.article-fig p.caption {
  width: 70%;
  margin: 15px auto 0;
  padding-left: 3em;
  text-indent: -3em;
  text-align: left;
  font-size: 11px;
  font-weight: normal;
  color: #333;
}
.article-fig p.caption a {
  font-weight: normal;
  color: #333;
  text-decoration: underline;
}
.article-fig p.caption2 {
  width: 100%;
  margin: 10px auto 0;
  text-align: right;
  font-size: 11px;
  font-weight: normal;
  color: #333;
}
.article-fig .article1-fig2 img {
  min-width: 240px;
  width: 80%;
  margin: -4vw auto 0;
}
.article-fig.article4-fig1 .caption {
  width: 80%;
  padding-left: 1em;
  text-indent: -1em;
}
.article-fig.article4-fig5 img {
  border: solid 1px #ccc;
}
.article-fig.article14-fig2 .caption2 {
  text-align: center;
}
.article-fig.article14-fig3 {
  margin-bottom: 0;
}
.article-fig.article18-fig1 .caption {
  width: 80%;
  padding-left: 0;
  text-indent: 0;
}
.article-fig.article19-fig3 .movie {
  height: 52.875vw;
}
.article-fig.article20-fig4 .movie, .article-fig.article20-fig6 .movie {
  height: 52.875vw;
}

.article-linkText {
  padding: 60px 0;
  text-align: center;
}
.article-linkText a {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  background-color: #7500c0;
}
.article-linkText a span {
  position: relative;
  display: inline-block;
  padding-right: 60px;
  font-weight: 900;
  color: #fff;
}
.article-linkText a span::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  right: 0;
  top: 12px;
  background: #fff;
}
.article-linkText a span::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  right: 0;
  top: 12px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-5.5px) rotate(-45deg);
}

.article-linkText + .article-linkText {
  padding-top: 0;
}

.article-enquete {
  display: none;
  margin-bottom: 60px;
  text-align: center;
}
.article-enquete.enquete-p2 {
  display: none;
  margin-bottom: 20px;
}
.article-enquete a {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  background: #7500c0;
}

.article-nextpage {
  display: none;
}

.linkArea-wrapper {
  position: relative;
  z-index: 20;
  background: #fff;
}
.linkArea-wrapper.top {
  display: block;
}
.linkArea-wrapper.top .linkArea {
  justify-content: center;
}
.linkArea-wrapper.top .linkArea .sns {
  width: 40px;
  height: 40px;
  margin: 0 15px;
}

.linkArea {
  width: 220px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  transition: opacity 0.5s;
}
.linkArea::before {
  content: "SNSでシェアする";
  width: 100%;
  margin-bottom: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
}
.linkArea.hide {
  opacity: 0;
  pointer-events: none;
}
.linkArea .enquete {
  display: none;
}
.linkArea .enquete + .sns {
  order: 2;
}
.linkArea .enquete + .sns + .sns {
  order: 3;
}
.linkArea .enquete + .sns + .sns + .sns {
  order: 1;
}
.linkArea .sns {
  width: 40px;
  height: 40px;
  margin: 0 15px;
  opacity: 0.3;
}
.linkArea .sns:first-child {
  order: 2;
}
.linkArea .sns:first-child + .sns {
  order: 3;
}
.linkArea .sns:first-child + .sns + .sns {
  order: 1;
}
.linkArea .sns img {
  width: 100%;
}
.linkArea .about {
  order: 4;
  margin-top: 60px;
  font-size: 0;
}
.linkArea .about img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 36px;
}
.linkArea .about img:nth-of-type(1) {
  display: none;
}
.linkArea .about img + img {
  height: 45px;
}
.linkArea .latest {
  min-width: 220px;
  margin-left: auto;
}
.linkArea .latest a {
  display: flex;
  align-items: center;
  width: 100%;
}
.linkArea .latest a.hide {
  display: none;
}
.linkArea .latest .latest-head {
  display: block;
  padding: 5px 8px;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  background: #7500c0;
  border-radius: 18px;
}
.linkArea .latest .latest-title {
  display: block;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
}
.linkArea .latest .latest-title small {
  font-weight: 400;
}

.footer-enquete {
  margin-top: 60px;
  margin-bottom: 20px;
  text-align: center;
}
.footer-enquete a {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  background: #7500c0;
}

.footer1 {
  position: relative;
  z-index: 10;
  padding: 60px 0 40px;
  background: #fff;
}
.footer1 .newfuture {
  display: block;
  width: 250px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}
.footer1 .newfuture img {
  width: 100%;
}
.footer1 .newfuture::after {
  display: block;
  content: "他の記事を見る";
  margin-top: 15px;
}
.footer1 .newfuture.newfuture_top::after {
  display: none;
}
.footer1 .letthere {
  display: block;
  width: 62vw;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 0;
}
.footer1 .letthere img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 45px;
}
.footer1 .logo {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 0 auto 30px;
}
.footer1 .logo a {
  display: block;
  margin: 0 15px;
}
.footer1 .logo a img {
  width: auto;
  height: 35px;
}
.footer1 p {
  display: none;
  margin: 0 auto 1.3em;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

footer {
  display: none;
  position: relative;
  z-index: 10;
  padding: 20px 0 15px;
  background: #000;
}
footer ul {
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
}
footer ul li {
  margin-bottom: 10px;
  padding: 2px 10px;
  border-right: solid 1px #aaa;
}
footer ul li:last-child {
  border: none;
}
footer ul li a {
  display: block;
  font-size: 11px;
  line-height: 1;
  color: #aaa;
}
footer p {
  text-align: center;
  font-size: 11px;
  line-height: 1;
  color: #aaa;
}