/* ------------------------------------
// contents
------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500&display=swap");
/* ------------------------------------
// contents
------------------------------------ */
#contents {
  padding: 0;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 300; }

.shareaholic-share-buttons-container {
  max-width: 900px;
  margin: 0 auto; }

/* ------------------------------------
// article_container
------------------------------------ */
#articleContainer {
  margin: 0 auto;
  padding: 0 0 50px;
  position: relative;
  overflow: hidden; }
  #articleContainer .articledate {
    text-align: right; }
  #articleContainer article {
    background: #FFF;
    color: #000;
    font-size: 1.8rem;
    line-height: 2.0;
    margin: 0 auto;
    max-width: 900px;
    position: relative; }
    #articleContainer article:before {
      content: "";
      height: 100%;
      width: 50vw;
      background: url("/journal/wp-content/themes/jaifpaper/images/feature/opinion/opinion_background_01.png") repeat top right;
      background-size: 1682px auto;
      display: block;
      position: absolute;
      top: 0;
      right: calc(100% + 20px); }
    #articleContainer article:after {
      content: "";
      height: 100%;
      width: 50vw;
      background: url("/journal/wp-content/themes/jaifpaper/images/feature/opinion/opinion_background_02.png") repeat top left;
      background-size: 1664px auto;
      display: block;
      position: absolute;
      top: 0;
      left: calc(100% + 20px); }
  #articleContainer .articlesns {
    max-width: 1200px;
    margin: 30px auto; }

@media screen and (max-width: 1024px) {
  #articleContainer {
    padding: 0 0 50px 0; }
    #articleContainer article {
      padding: 55px 8%;
      max-width: 680px;
      margin: 0 auto;
      box-sizing: content-box; }
      #articleContainer article:before {
        display: none; }
      #articleContainer article:after {
        display: none; } }
@media screen and (max-width: 767px) {
  #articleContainer {
    padding: 0 0 50px 0; }
    #articleContainer article {
      padding: 25px 20px;
      font-size: 1.4rem; }
      #articleContainer article:before {
        display: none; }
      #articleContainer article:after {
        display: none; } }
/* ------------------------------------
// article
------------------------------------ */
#articleContainer article p {
  margin-bottom: 1em; }
#articleContainer article .translator {
  text-align: right; }
#articleContainer article figure {
  margin: 50px 0; }
#articleContainer article section {
  margin: 60px 0 90px;
  overflow: hidden;
  clear: both; }
  #articleContainer article section:first-child {
    margin: 0 0 90px 0; }
#articleContainer article .articledate + section {
  margin: 0 0 90px 0; }
#articleContainer article h2 {
  font-size: 2.8rem;
  margin-bottom: 30px; }
#articleContainer article ol {
  list-style-type: decimal;
  margin-bottom: 25px;
  padding-left: 40px; }
  #articleContainer article ol li {
    margin-bottom: 5px; }
#articleContainer article ul {
  list-style-type: disc;
  margin-bottom: 25px;
  padding-left: 40px; }
  #articleContainer article ul li {
    margin-bottom: 5px; }

@media screen and (max-width: 1024px) {
  #articleContainer article section {
    margin: 30px 0 60px;
    overflow: hidden;
    clear: both; }
  #articleContainer article h2 {
    margin-bottom: 20px; } }
@media screen and (max-width: 767px) {
  #articleContainer article section {
    margin: 30px 0 60px;
    overflow: hidden;
    clear: both; }
  #articleContainer article h2 {
    font-size: 1.7rem;
    margin-bottom: 20px; } }
/* ------------------------------------
// auther
------------------------------------ */
#auther {
  max-width: 652px;
  margin: 120px 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: flex-start;
  gap: 30px; }
  #auther .photo {
    grid-row: 1 / span 2;
    grid-column: 2; }
  #auther dl.name {
    grid-row: 1;
    grid-column: 1;
    text-align: right; }
    #auther dl.name dt {
      font-size: 1.4rem;
      margin-bottom: 5px; }
    #auther dl.name dd {
      font-size: 3.0rem;
      font-weight: 300;
      line-height: 1; }
  #auther .disc {
    grid-row: 2;
    grid-column: 1;
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-ideograph; }
  #auther .data {
    width: calc(100% - 180px); }

@media screen and (max-width: 767px) {
  #auther {
    max-width: 652px;
    margin: 60px 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 120px;
    align-items: flex-start;
    gap: 20px; }
    #auther .photo {
      grid-row: 1;
      grid-column: 2; }
    #auther dl.name {
      grid-row: 1;
      grid-column: 1; }
    #auther .disc {
      grid-row: 2;
      grid-column: 1/ span 2;
      font-size: 1.5rem;
      line-height: 1.6;
      text-align: justify;
      text-justify: inter-ideograph; }
    #auther .data {
      width: calc(100% - 180px); } }
/* ------------------------------------
// opinionWave
------------------------------------ */
#opinionWave {
  height: 189px;
  position: relative; }
  @media screen and (min-width: 1025px) {
    #opinionWave {
      height: 189px; } }
  @media screen and (max-width: 1024px) {
    #opinionWave {
      height: 20vw; } }
  @media screen and (max-width: 768px) {
    #opinionWave {
      height: 40vw; } }
  #opinionWave:after {
    content: "";
    width: 100vw;
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    background: url("/journal/wp-content/themes/jaifpaper/images/feature/opinion/opinion_wave.png") repeat-x center 0/cover;
    transform: translateX(-50%); }
    @media screen and (min-width: 1025px) {
      #opinionWave:after {
        height: 189px;
        max-height: 189px; } }
    @media screen and (max-width: 1024px) {
      #opinionWave:after {
        height: 20vw;
        max-height: 20vw; } }
    @media screen and (max-width: 768px) {
      #opinionWave:after {
        height: 40vw;
        max-height: 40vw; } }

#backIndex {
  text-align: center;
  padding: 0 20px;
  margin: 80px 0; }
  #backIndex a {
    max-width: 600px;
    display: block;
    margin: 0 auto;
    border: 1px solid #000;
    font-size: 2.4rem;
    text-align: center;
    padding: 1.2rem;
    letter-spacing: .5rem;
    color: #000; }
    #backIndex a:hover {
      background: #F3F3F3; }

@media screen and (max-width: 767px) {
  #backIndex {
    margin: 30px 0; }
    #backIndex a {
      font-size: 1.8rem; } }
/* ------------------------------------
// topindex_vi
------------------------------------ */
#vi {
  background: #FFF;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; }
  #vi:after {
    content: "";
    width: 100vw;
    height: 12vw;
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    background: url("/journal/wp-content/themes/jaifpaper/images/feature/opinion/opinion_wave.png") repeat-x center 0/cover;
    transform: translateX(-50%); }
    @media screen and (min-width: 1200px) {
      #vi:after {
        max-height: 189px; } }
  #vi .photo img {
    vertical-align: bottom; }

#categoryLead {
  margin: 0 auto;
  padding: 47px 25px 33px;
  background: #000;
  color: #FFF; }
  #categoryLead .box {
    max-width: 970px;
    margin: 0 auto; }
  #categoryLead h1 {
    font-weight: 200;
    font-size: 3.6rem;
    letter-spacing: .3rem;
    margin-bottom: 3px;
    line-height: 1.2; }
  #categoryLead .sub {
    font-weight: 400;
    font-size: 1.7rem;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem; }
    #categoryLead .sub:before {
      content: "";
      width: 4rem;
      height: 1.4rem;
      border-bottom: 1px solid #FFF; }
  #categoryLead p.categoryTop {
    color: #FFF;
    font-weight: 200;
    font-size: 4.2rem; }
    #categoryLead p.categoryTop span {
      font-weight: 300;
      font-size: 3.2rem; }

@media screen and (max-width: 767px) {
  #vi {
    aspect-ratio: unset; }
    #vi:after {
      content: "";
      width: 100vw;
      height: 18vw; }

  #categoryLead {
    padding: 25px 25px; }
    #categoryLead h1 {
      font-size: 2.4rem;
      letter-spacing: 0; }
    #categoryLead .sub {
      font-weight: 400;
      font-size: 1.5rem;
      gap: 1rem; }
      #categoryLead .sub:before {
        content: "";
        width: 90px;
        height: 1.4rem;
        display: inline-block;
        border-bottom: 1px solid #FFF; }
    #categoryLead p.categoryTop {
      font-size: 2.4rem; }
      #categoryLead p.categoryTop span {
        font-size: 1.8rem; } }
/* ------------------------------------
// shiseitsutenTop
------------------------------------ */
#opinionContainer {
  background: #FFF;
  padding: 50px 0 185px 0;
  position: relative; }

.opinionList {
  max-width: 1050px;
  margin: 0 auto;
  position: relative;
  padding: 0 0 110px 0; }
  .opinionList ul {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; }
    .opinionList ul li {
      background: #FFF;
      width: 28%;
      margin-bottom: 45px;
      padding: 0 0; }
      .opinionList ul li a {
        color: #000; }
      .opinionList ul li figure {
        margin-bottom: 10px;
        overflow: hidden;
        display: block;
        position: relative;
        height: 150px; }
        .opinionList ul li figure img {
          max-height: 100%;
          width: auto; }
      .opinionList ul li .title {
        font-size: 2.0rem;
        margin-bottom: 6px;
        line-height: 1.2; }
      .opinionList ul li .subtitle {
        font-size: 1.5rem;
        margin-bottom: 12px;
        display: flex;
        justify-content: flex-start;
        gap: 5px; }
        .opinionList ul li .subtitle:before {
          content: "";
          width: 30px;
          height: 1px;
          background: #000;
          margin-top: 10px;
          display: block; }
      .opinionList ul li dl {
        margin-bottom: 24px; }
        .opinionList ul li dl dt {
          font-size: 1.4rem;
          margin-bottom: 3px; }
        .opinionList ul li dl dd {
          font-size: 2.1rem;
          line-height: 1.2; }
      .opinionList ul li .disc {
        font-size: 1.5rem;
        line-height: 1.5; }

@media screen and (max-width: 1024px) {
  #opinionContainer {
    padding: 38px 0 120px 0; }

  .opinionList {
    max-width: 100%;
    padding: 0 6%; }
    .opinionList ul li {
      width: 45%; } }
@media screen and (max-width: 767px) {
  #opinionContainer {
    padding: 38px 0 120px 0; }

  .opinionList {
    padding: 0 6%; }
    .opinionList ul {
      margin-bottom: 40px; }
      .opinionList ul li {
        width: 100%; } }