@charset "UTF-8";
/* ==========================================================================//
//
//　common
//
// ========================================================================== */
/** -------------------------------- **
	インポート
*** ----------------------------------------------------------------- ***/
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");
/** -------------------------------- **
	base
*** ----------------------------------------------------------------- ***/
.sp {
  display: none !important; }
  @media only screen and (max-width: 767px) {
    .sp {
      display: block !important; } }

img {
  height: auto; }

strong {
  font-weight: 700; }

em {
  font-style: italic; }

sub,
sup {
  font-size: .5em;
  font-weight: inherit;
  line-height: 0; }

sup {
  vertical-align: super; }

/** -------------------------------- **
	コンテンツ幅
*** ----------------------------------------------------------------- ***/
.inner {
  width: 1100px;
  margin: 0 auto;
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    .inner {
      width: 100%;
      padding: 0 calc((30 / 750) * 100vw); } }

/** -------------------------------- **
	ボタン
*** ----------------------------------------------------------------- ***/
.btnPrintPage {
  display: inline-block;
  padding-bottom: 15px;
  color: #46b035;
  font-size: 2.1rem;
  font-weight: 700;
  border-bottom: 3px solid #46b035; }
  @media only screen and (max-width: 767px) {
    .btnPrintPage {
      padding-bottom: 10px;
      font-size: 1.8rem;
      border-bottom: 2px solid #46b035; } }

/** -------------------------------- **
	リンク
*** ----------------------------------------------------------------- ***/
.linkText {
  text-decoration: underline; }
  .linkText:hover {
    text-decoration: none; }

.linkArrowLeft {
  display: inline-block;
  padding-left: 40px;
  text-indent: -40px;
  line-height: 1.5; }
  .linkArrowLeft::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 19px;
    margin: 0 12px -1px 0;
    background: url("/common/images/resonance/icon_more-arrow.svg") no-repeat center center/contain; }
  .linkArrowLeft:hover {
    text-decoration: underline; }
  @media only screen and (max-width: 767px) {
    .linkArrowLeft {
      padding-left: 28px;
      text-indent: -28px; }
      .linkArrowLeft::before {
        width: 20px;
        height: 13px;
        margin: 0 8px -1px 0; } }

/** -------------------------------- **
	box
*** ----------------------------------------------------------------- ***/
.txtBox p {
  font-size: 2rem;
  line-height: 2.5; }
.txtBox.small p {
  font-size: 1.8rem;
  line-height: 1.889; }
@media only screen and (max-width: 767px) {
  .txtBox p {
    font-size: 1.4rem;
    line-height: 2; }
  .txtBox.small p {
    font-size: 1.4rem;
    line-height: 1.714; } }

.noticeBox p {
  font-size: 1.6rem;
  line-height: 2; }
@media only screen and (max-width: 767px) {
  .noticeBox p {
    font-size: 1.2rem;
    line-height: 1.75; } }

.imgBox figcaption {
  font-size: 1.6rem; }
@media only screen and (max-width: 767px) {
  .imgBox {
    font-size: 1.2rem; } }

.flowBox .left {
  float: left; }
.flowBox .right {
  float: right; }
@media only screen and (max-width: 767px) {
  .flowBox.col1WidthSp .left,
  .flowBox.col1WidthSp .right {
    float: none; }
  .flowBox.col2WidthSp .left,
  .flowBox.col2WidthSp .right {
    width: calc(100% / 2); }
  .flowBox.col3WidthSp .left,
  .flowBox.col3WidthSp .right {
    width: calc(100% / 3); } }

.flexBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between; }
  .flexBox.type1 .col1 {
    width: 505px; }
  .flexBox.type1 .col2 {
    width: 505px;
    margin-left: 30px; }
    .flexBox.type1 .col2 .imgFlexList li {
      width: 237px;
      margin-left: 31px; }
      .flexBox.type1 .col2 .imgFlexList li:nth-child(2n + 1) {
        margin-left: 0; }
      .flexBox.type1 .col2 .imgFlexList li:nth-child(n + 3) {
        margin-top: 30px; }
  .flexBox.type2 .col1 {
    width: 505px;
    margin-left: 30px; }
  .flexBox.type2 .col2 {
    width: 505px; }
    .flexBox.type2 .col2 .imgFlexList li {
      width: 237px;
      margin-left: 31px; }
      .flexBox.type2 .col2 .imgFlexList li:nth-child(2n + 1) {
        margin-left: 0; }
      .flexBox.type2 .col2 .imgFlexList li:nth-child(n + 3) {
        margin-top: 30px; }
  .flexBox.type3 .col1 {
    width: 673px; }
  .flexBox.type3 .col2 {
    width: 335px;
    margin-left: 32px; }
    .flexBox.type3 .col2 .imgFlexList li {
      width: 100%; }
      .flexBox.type3 .col2 .imgFlexList li:nth-child(n + 2) {
        margin-top: 30px; }
  .flexBox.type4 .col1 {
    width: 673px;
    margin-left: 32px; }
  .flexBox.type4 .col2 {
    width: 335px; }
    .flexBox.type4 .col2 .imgFlexList li {
      width: 100%; }
      .flexBox.type4 .col2 .imgFlexList li:nth-child(n + 2) {
        margin-top: 30px; }
  @media only screen and (max-width: 767px) {
    .flexBox.type1 .col1 {
      width: 100%; }
    .flexBox.type1 .col2 {
      width: 100%;
      margin-left: 0; }
      .flexBox.type1 .col2 .imgFlexList li {
        width: calc((100% - 10px) / 2);
        margin-left: 10px; }
        .flexBox.type1 .col2 .imgFlexList li:nth-child(2n + 1) {
          margin-left: 0; }
        .flexBox.type1 .col2 .imgFlexList li:nth-child(n + 3) {
          margin-top: 10px; }
    .flexBox.type2 .col1 {
      width: 100%;
      margin-left: 0; }
    .flexBox.type2 .col2 {
      width: 100%; }
      .flexBox.type2 .col2 .imgFlexList li {
        width: calc((100% - 10px) / 2);
        margin-left: 10px; }
        .flexBox.type2 .col2 .imgFlexList li:nth-child(2n + 1) {
          margin-left: 0; }
        .flexBox.type2 .col2 .imgFlexList li:nth-child(n + 3) {
          margin-top: 10px; }
    .flexBox.type3 .col1 {
      width: 100%; }
    .flexBox.type3 .col2 {
      width: 100%;
      margin-left: 0; }
      .flexBox.type3 .col2 .imgFlexList li {
        width: calc((100% - 10px) / 2);
        margin: 0 0 0 10px !important; }
        .flexBox.type3 .col2 .imgFlexList li:nth-child(2n + 1) {
          margin-left: 0 !important; }
        .flexBox.type3 .col2 .imgFlexList li:nth-child(n + 3) {
          margin-top: 10px !important; }
    .flexBox.type4 .col1 {
      width: 100%;
      margin-left: 0; }
    .flexBox.type4 .col2 {
      width: 100%; }
      .flexBox.type4 .col2 .imgFlexList li {
        width: calc((100% - 10px) / 2);
        margin: 0 0 0 10px !important; }
        .flexBox.type4 .col2 .imgFlexList li:nth-child(2n + 1) {
          margin-left: 0 !important; }
        .flexBox.type4 .col2 .imgFlexList li:nth-child(n + 3) {
          margin-top: 10px !important; } }

/** -------------------------------- **
	リスト
*** ----------------------------------------------------------------- ***/
.flexList {
  display: flex;
  flex-wrap: wrap; }
  .flexList > li img {
    width: 100%; }
  .flexList.col2 > li {
    width: 505px;
    margin-left: 30px; }
    .flexList.col2 > li:nth-of-type(2n + 1) {
      margin-left: 0; }
    .flexList.col2 > li:nth-of-type(n + 3) {
      margin-top: 30px; }
  .flexList.col3 > li {
    width: 334px;
    margin-left: 19px; }
    .flexList.col3 > li:nth-of-type(3n + 1) {
      margin-left: 0; }
    .flexList.col3 > li:nth-of-type(n + 4) {
      margin-top: 30px; }
  .flexList.col4 > li {
    width: 245px;
    margin-left: 20px; }
    .flexList.col4 > li:nth-of-type(4n + 1) {
      margin-left: 0; }
    .flexList.col4 > li:nth-of-type(n + 5) {
      margin-top: 20px; }
  @media only screen and (max-width: 767px) {
    .flexList > li img {
      width: 100%; }
    .flexList.col1Sp > li {
      width: 100%;
      margin-left: 0 !important; }
      .flexList.col1Sp > li:nth-of-type(n + 2) {
        margin-top: 15px; }
    .flexList.col2Sp > li {
      width: calc((100% - 10px) / 2);
      margin-left: 10px !important; }
      .flexList.col2Sp > li:nth-of-type(2n + 1) {
        margin-left: 0 !important; }
      .flexList.col2Sp > li:nth-of-type(n + 3) {
        margin-top: 10px; }
    .flexList.col3Sp > li {
      width: calc((100% - 20px) / 3);
      margin-left: 10px !important; }
      .flexList.col3Sp > li:nth-of-type(3n + 1) {
        margin-left: 0 !important; }
      .flexList.col3Sp > li:nth-of-type(n + 4) {
        margin-top: 10px; } }

.imgFlexList {
  display: flex;
  flex-wrap: wrap; }
  .imgFlexList li img {
    width: 100%; }

/** -------------------------------- **
	マーカー
*** ----------------------------------------------------------------- ***/
.txtMarker.green {
  border-bottom: 6px solid #46af35; }
.txtMarker.blue {
  border-bottom: 6px solid #009fe8; }
.txtMarker.yellow {
  border-bottom: 6px solid #c7ac00; }
.txtMarker.pink {
  border-bottom: 6px solid #e24486; }
.txtMarker.orange {
  border-bottom: 6px solid #f18f5c; }
.txtMarker.black {
  color: #fff;
  background-color: #000; }
@media only screen and (max-width: 767px) {
  .txtMarker.green {
    border-bottom: 3px solid #46af35; }
  .txtMarker.blue {
    border-bottom: 3px solid #009fe8; }
  .txtMarker.yellow {
    border-bottom: 3px solid #c7ac00; }
  .txtMarker.pink {
    border-bottom: 3px solid #e24486; }
  .txtMarker.orange {
    border-bottom: 3px solid #f18f5c; } }

/** -------------------------------- **
	テーブル
*** ----------------------------------------------------------------- ***/
.dataTable {
  table-layout: fixed;
  border-collapse: collapse; }
  .dataTable th,
  .dataTable td {
    padding: 25px;
    font-size: 2rem;
    line-height: 2;
    border: 2px solid #201512; }
  .dataTable th {
    border-left: none; }
  .dataTable td {
    border-right: none; }
  @media only screen and (max-width: 767px) {
    .dataTable th,
    .dataTable td {
      padding: 10px;
      font-size: 1.4rem;
      line-height: 1.75;
      border: 1px solid #201512; } }

/** -------------------------------- **
	タイトル
*** ----------------------------------------------------------------- ***/
.borderTitle {
  position: relative; }
  .borderTitle::after {
    content: '';
    position: absolute;
    top: calc((100% - 2px) / 2);
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #201512; }
  .borderTitle span {
    position: relative;
    z-index: 1;
    padding-right: 1.5em;
    color: #201512;
    font-size: 2.3rem;
    font-weight: 700;
    background-color: #fff; }
  @media only screen and (max-width: 767px) {
    .borderTitle span {
      font-size: 1.8rem; } }

/** -------------------------------- **
	フォント種類
*** ----------------------------------------------------------------- ***/
.fSawarabi {
  font-family: 'Sawarabi Mincho', sans-serif; }

/** -------------------------------- **
	movie
*** ----------------------------------------------------------------- ***/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; }

/* ==========================================================================//
//
//　layout
//
// ========================================================================== */
/** -------------------------------- **
	footer
*** ----------------------------------------------------------------- ***/
.contactusBox p {
  font-size: 1.8rem; }
@media only screen and (max-width: 767px) {
  .contactusBox p {
    font-size: 1.4rem; } }

#gFooter .contact {
  display: none !important; }
#gFooter .links {
  display: none !important; }

/** -------------------------------- **
	ヘッドライン
*** ----------------------------------------------------------------- ***/
.pageTitle {
  background-color: #46b035; }

/** -------------------------------- **
	パンくずリスト
*** ----------------------------------------------------------------- ***/
.breadcrumb {
  margin: 10px auto; }

/** -------------------------------- **
	メインビュー
*** ----------------------------------------------------------------- ***/
.mainview img {
  width: 100%; }

/* ==========================================================================//
//
//　TOP
//
// ========================================================================== */
.leadBox .leadTitle {
  font-size: 2.6rem;
  line-height: 1.5; }
.leadBox .leadDetail {
  line-height: 2; }
.leadBox .linkLeadMore {
  display: inline-block;
  line-height: 1.5;
  border-bottom: 2px solid #fff; }
  .leadBox .linkLeadMore .more::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 19px;
    margin: 0 7px -2px 15px;
    background: url("/common/images/resonance/icon_more-arrow.svg") no-repeat center center/contain; }
  .leadBox .linkLeadMore:hover {
    border-bottom: 2px solid #231815; }
@media only screen and (max-width: 767px) {
  .leadBox .leadTitle {
    font-size: 1.8rem; }
  .leadBox .linkLeadMore .more::after {
    width: 20px;
    height: 13px;
    margin: 0 4px -1px 7px; } }

/** -------------------------------- **
	検索タブ
*** ----------------------------------------------------------------- ***/
.searchTabList {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .searchTabList li {
    position: relative; }
    .searchTabList li::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 2px;
      height: 23px;
      background-color: #46b035; }
    .searchTabList li a {
      display: block;
      width: 100%;
      padding: 1px 10px;
      text-align: center; }
      .searchTabList li a span {
        color: #46b035;
        font-size: 2.1rem;
        font-weight: 700; }
      .searchTabList li a.active span, .searchTabList li a:hover span {
        position: relative;
        padding-bottom: 25px; }
        .searchTabList li a.active span::before, .searchTabList li a.active span::after, .searchTabList li a:hover span::before, .searchTabList li a:hover span::after {
          content: '';
          position: absolute; }
        .searchTabList li a.active span::before, .searchTabList li a:hover span::before {
          bottom: 7px;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: #46b035; }
        .searchTabList li a.active span::after, .searchTabList li a:hover span::after {
          bottom: 0;
          left: calc((100% - 10px) / 2);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 8px 5px 0 5px;
          border-color: #46b035 transparent transparent transparent; }
    .searchTabList li:first-of-type::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 2px;
      height: 23px;
      background-color: #46b035; }
    .searchTabList li:nth-of-type(1) {
      width: 20%; }
    .searchTabList li:nth-of-type(2) {
      width: 31%; }
    .searchTabList li:nth-of-type(3) {
      width: 24%; }
    .searchTabList li:nth-of-type(4) {
      width: 25%; }
  @media only screen and (max-width: 767px) {
    .searchTabList {
      flex-wrap: wrap; }
      .searchTabList li {
        width: 50% !important; }
        .searchTabList li::after {
          width: 1px;
          height: 18px; }
        .searchTabList li a {
          padding: 1px 5px; }
          .searchTabList li a span {
            font-size: 1.6rem; }
          .searchTabList li a.active span, .searchTabList li a:hover span {
            padding-bottom: 15px; }
            .searchTabList li a.active span::before, .searchTabList li a:hover span::before {
              bottom: 7px;
              height: 2px; }
            .searchTabList li a.active span::after, .searchTabList li a:hover span::after {
              left: calc((100% - 10px) / 2);
              border-width: 8px 5px 0 5px; }
        .searchTabList li:nth-of-type(2n + 1)::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 1px;
          height: 18px;
          background-color: #46b035; }
        .searchTabList li:nth-of-type(n + 3) {
          margin-top: 25px; } }

/** -------------------------------- **
	キャチフレーズ
*** ----------------------------------------------------------------- ***/
.catchphrase p {
  color: #7d7d7d;
  font-size: 1.8rem;
  line-height: 2; }
  .catchphrase p.hidden {
    display: none; }
@media only screen and (max-width: 767px) {
  .catchphrase p {
    font-size: 1.4rem; } }

/** -------------------------------- **
	検索結果
*** ----------------------------------------------------------------- ***/
.searchResultList {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 31px);
  margin: 0 -15.5px; }
  .searchResultList li {
    width: 326px;
    margin: 30px 15.5px; }
    .searchResultList li.hidden {
      display: none; }
    .searchResultList li a {
      position: relative;
      display: block; }
      .searchResultList li a:hover .searchResultTitle {
        text-decoration: underline; }
      .searchResultList li a.new::after {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        display: block;
        width: 45px;
        height: 45px;
        background: url("/common/images/resonance/icon_new.png") no-repeat center center/contain; }
    .searchResultList li .searchResultSubTitle {
      display: flex;
      justify-content: space-between;
      margin-top: 15px; }
      .searchResultList li .searchResultSubTitle span {
        font-size: 1.2rem; }
      .searchResultList li .searchResultSubTitle .date {
        margin-left: 1em; }
    .searchResultList li .searchResultTitle {
      margin-top: 5px;
      font-size: 1.5rem;
      line-height: 1.75; }
  @media only screen and (max-width: 767px) {
    .searchResultList {
      width: calc(100% + 20px);
      margin: 0 -10px; }
      .searchResultList li {
        width: calc((100% - 40px) / 2);
        margin: 20px 10px 0; }
        .searchResultList li a.new::after {
          top: -10px;
          right: -10px;
          width: 30px;
          height: 30px; } }
  @media only screen and (max-width: 375px) {
    .searchResultList {
      width: 100%;
      margin: 0; }
      .searchResultList li {
        width: 100%;
        max-width: 326px;
        margin: 20px auto 0; } }

/** -------------------------------- **
	MORE
*** ----------------------------------------------------------------- ***/
#btnSearchResultMore {
  font-size: 2.3rem; }
  #btnSearchResultMore.hidden {
    display: none; }
  @media only screen and (max-width: 767px) {
    #btnSearchResultMore {
      font-size: 1.8rem; }
      #btnSearchResultMore::before {
        margin-bottom: 1px; } }

/* ==========================================================================//
//
//　記事詳細
//
// ========================================================================== */
/** -------------------------------- **
	タイトル
*** ----------------------------------------------------------------- ***/
/* メインタイトル */
.articleTitle {
  line-height: 1.5;
  text-align: center; }
  .articleTitle .date {
    font-size: 1.9rem;
    font-weight: 500; }
  .articleTitle .type {
    margin-top: 20px;
    font-size: 1.9rem;
    font-weight: 700; }
  .articleTitle .title {
    margin-top: 15px;
    font-size: 3.4rem;
    font-weight: 500; }
  .articleTitle .sub {
    margin-top: 5px;
    font-size: 2.5rem;
    font-weight: 500; }
  @media only screen and (max-width: 767px) {
    .articleTitle .date {
      font-size: 1.6rem; }
    .articleTitle .type {
      margin-top: 10px;
      font-size: 1.6rem; }
    .articleTitle .title {
      margin-top: 10px;
      font-size: 2rem; }
    .articleTitle .sub {
      font-size: 1.8rem; } }

/* セクションタイトル */
.secTitle {
  margin-bottom: 0;
  padding: 0;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left; }
  @media only screen and (max-width: 767px) {
    .secTitle {
      font-size: 1.8rem; } }

/** -------------------------------- **
	かとマPICKS
*** ----------------------------------------------------------------- ***/
.picksBox {
  position: relative;
  padding: 35px 40px;
  background-color: #f0f0f0; }
  @media only screen and (max-width: 767px) {
    .picksBox {
      padding: 20px; }
      .picksBox .liftFlowSp.colReverseSp {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse; }
      .picksBox .picksIcon {
        width: calc((259 / 750) * 100%);
        max-width: 259px; } }

.picksBoxTitle {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5; }
  @media only screen and (max-width: 767px) {
    .picksBoxTitle {
      font-size: 1.8rem; } }

/** -------------------------------- **
	Read More
*** ----------------------------------------------------------------- ***/
.relateList {
  display: flex;
  justify-content: center; }
  .relateList li {
    width: 326px; }
    .relateList li + li {
      margin-left: 31px; }
    .relateList li a:hover .relateTitle {
      text-decoration: underline; }
    .relateList li .relateSubTitle {
      display: flex;
      justify-content: space-between;
      margin-top: 15px; }
      .relateList li .relateSubTitle span {
        font-size: 1.2rem; }
      .relateList li .relateSubTitle .date {
        margin-left: 1em; }
    .relateList li .relateTitle {
      margin-top: 5px;
      font-size: 1.5rem;
      line-height: 1.75; }
  @media only screen and (max-width: 767px) {
    .relateList {
      flex-wrap: wrap; }
      .relateList li {
        width: 100%;
        max-width: 326px;
        margin: 0 auto; }
        .relateList li + li {
          margin-top: 20px;
          margin-left: auto; } }

/** -------------------------------- **
	ビヨンドジェンダーマーケット
*** ----------------------------------------------------------------- ***/
.genderTimelineList {
  display: flex;
  justify-content: space-between;
  max-width: 890px;
  margin: 0 auto; }
  .genderTimelineList li {
    position: relative;
    width: calc((100% - 20px) / 3); }
    .genderTimelineList li a {
      display: flex;
      align-items: center;
      padding: 15px 0 15px 15px;
      min-height: 75px;
      border-radius: 1em 0 0 1em;
      margin-right: 31px; }
      .genderTimelineList li a::after {
        content: '';
        position: absolute;
        right: 6px;
        top: 12.5px;
        z-index: -1;
        width: 50px;
        height: 50px;
        border-radius: .5em;
        transform: rotate(45deg) skew(5deg, 5deg); }
    .genderTimelineList li .year {
      display: inline-block;
      margin-left: 1em;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5; }
    .genderTimelineList li.past a {
      background-color: #E5E5E6; }
      .genderTimelineList li.past a::after {
        background-color: #E5E5E6; }
    .genderTimelineList li.past .time {
      max-width: 83.5px; }
    .genderTimelineList li.now a {
      background-color: #C6DEE5; }
      .genderTimelineList li.now a::after {
        background-color: #C6DEE5; }
    .genderTimelineList li.now .time {
      max-width: 40px; }
    .genderTimelineList li.future a {
      background-color: #97D7E6; }
      .genderTimelineList li.future a::after {
        background-color: #97D7E6; }
    .genderTimelineList li.future .time {
      max-width: 83.5px; }
  @media only screen and (max-width: 767px) {
    .genderTimelineList li {
      width: calc((100% - 10px) / 3); }
      .genderTimelineList li a {
        flex-wrap: wrap;
        padding: 7px 0 7px 7px;
        min-height: 55px;
        margin-right: 19px; }
        .genderTimelineList li a::after {
          right: 2px;
          top: 10px;
          width: 35px;
          height: 35px;
          transform: rotate(45deg) skew(9.5deg, 9.5deg); }
      .genderTimelineList li .year {
        width: 100%;
        margin: 0;
        font-size: 1rem; }
      .genderTimelineList li.past .time {
        max-width: 60px; }
      .genderTimelineList li.now .time {
        max-width: 29px; }
      .genderTimelineList li.future .time {
        max-width: 60px; } }
  @media only screen and (max-width: 375px) {
    .genderTimelineList li .year {
      font-size: calc((10 / 375) * 100vw); } }

.genderTimelineTitle {
  font-size: 2.4rem;
  font-weight: 500;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .genderTimelineTitle {
      font-size: 1.4rem; } }

.genderTimelineBox {
  border-radius: 48px;
  padding: 85px 30px 70px; }
  .genderTimelineBox.past {
    background-color: #E5E5E6; }
  .genderTimelineBox.now {
    background-color: #C6DEE5;
    padding: 70px 30px 45px; }
  .genderTimelineBox.future {
    background-color: #97D7E6;
    padding: 80px 30px 70px; }
  @media only screen and (max-width: 767px) {
    .genderTimelineBox {
      border-radius: 16px;
      padding: 30px 15px; }
      .genderTimelineBox.now {
        padding: 30px 15px; }
      .genderTimelineBox.future {
        padding: 30px 15px; } }

.genderTimelineLeadBox {
  display: flex;
  justify-content: space-between; }
  .genderTimelineLeadBox .txtBox,
  .genderTimelineLeadBox .imgBox {
    width: calc((100% - 18px) / 2); }
  .genderTimelineLeadBox .txtBox .sub {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .1em; }
  .genderTimelineLeadBox .txtBox .year {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.3; }
  .genderTimelineLeadBox .txtBox .detail {
    line-height: 1.6; }
    .genderTimelineLeadBox .txtBox .detail.big {
      font-size: 2.4rem;
      line-height: 1.833; }
  .genderTimelineLeadBox .imgBox {
    text-align: center; }
    .genderTimelineLeadBox .imgBox img {
      margin: 0 auto; }
  .genderTimelineLeadBox.past .txtBox .time {
    max-width: 400px; }
  .genderTimelineLeadBox.past .imgBox img {
    max-width: 322px; }
  .genderTimelineLeadBox.now .txtBox .time {
    max-width: 190px; }
  .genderTimelineLeadBox.now .txtBox .detailFlexBox {
    display: flex;
    align-items: flex-end;
    justify-content: space-between; }
    .genderTimelineLeadBox.now .txtBox .detailFlexBox p {
      width: calc(100% - 198px); }
    .genderTimelineLeadBox.now .txtBox .detailFlexBox img {
      width: 183px; }
  .genderTimelineLeadBox.now .imgBox img {
    max-width: 479px; }
  .genderTimelineLeadBox.future .txtBox .time {
    max-width: 400px; }
  .genderTimelineLeadBox.future .imgBox img {
    max-width: 401px; }
  @media only screen and (max-width: 767px) {
    .genderTimelineLeadBox {
      flex-wrap: wrap; }
      .genderTimelineLeadBox .txtBox,
      .genderTimelineLeadBox .imgBox {
        width: 100%; }
      .genderTimelineLeadBox .txtBox {
        display: flex;
        flex-wrap: wrap;
        width: 100%; }
        .genderTimelineLeadBox .txtBox .time {
          width: 100%; }
        .genderTimelineLeadBox .txtBox .sub {
          font-size: 1.6rem; }
        .genderTimelineLeadBox .txtBox .year {
          font-size: 1.2rem; }
        .genderTimelineLeadBox .txtBox .detail {
          font-size: 1.2rem;
          line-height: 1.9166; }
          .genderTimelineLeadBox .txtBox .detail.big {
            font-size: 1.8rem;
            line-height: 1.888; }
      .genderTimelineLeadBox .imgBox {
        width: 100%; }
      .genderTimelineLeadBox.past .txtBox .time {
        max-width: 164px; }
      .genderTimelineLeadBox.past .txtBox .leftSp {
        width: calc(100% - 179px);
        margin-left: 15px; }
      .genderTimelineLeadBox.past .imgBox img {
        max-width: 232px;
        width: 100%; }
      .genderTimelineLeadBox.now .txtBox .time {
        max-width: 79px; }
      .genderTimelineLeadBox.now .txtBox .leftSp {
        width: calc(100% - 99px);
        margin-left: 20px; }
      .genderTimelineLeadBox.now .txtBox .detailFlexBox {
        align-items: flex-start; }
        .genderTimelineLeadBox.now .txtBox .detailFlexBox p {
          width: calc(100% - 109px); }
        .genderTimelineLeadBox.now .txtBox .detailFlexBox img {
          width: 100px; }
      .genderTimelineLeadBox.now .imgBox img {
        max-width: 333px;
        width: 100%; }
      .genderTimelineLeadBox.future .txtBox .time {
        max-width: 177px; }
      .genderTimelineLeadBox.future .txtBox .leftSp {
        width: calc(100% - 192px);
        margin-left: 15px; }
      .genderTimelineLeadBox.future .imgBox img {
        max-width: 311px;
        width: 100%; } }
  @media only screen and (max-width: 375px) {
    .genderTimelineLeadBox.past .txtBox .time {
      max-width: calc((164 / 390) * 100vw); }
    .genderTimelineLeadBox.past .txtBox .leftSp {
      width: calc(100% - ((179 / 390) * 100vw));
      margin-left: calc((15 / 390) * 100vw); }
    .genderTimelineLeadBox.now .txtBox .time {
      max-width: calc((79 / 390) * 100vw); }
    .genderTimelineLeadBox.now .txtBox .leftSp {
      width: calc(100% - ((99 / 390) * 100vw));
      margin-left: calc((20 / 390) * 100vw); }
    .genderTimelineLeadBox.future .txtBox .time {
      max-width: calc((177 / 390) * 100vw); }
    .genderTimelineLeadBox.future .txtBox .leftSp {
      width: calc(100% - c(1925 / 390) * 100vw);
      margin-left: calc((15 / 390) * 100vw); } }

.speechBubbleBox {
  position: relative;
  max-width: 264px;
  padding: 48px 0 31px;
  margin: 0 auto;
  background-image: url("/common/images/resonance/tabloid-05/img_speech-top.png"), url("/common/images/resonance/tabloid-05/img_speech-bottom.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: contain, contain; }
  .speechBubbleBox p {
    padding: 0 25px;
    background-color: #fff; }
    .speechBubbleBox p span {
      position: relative;
      z-index: 1;
      font-size: 1.9rem;
      font-weight: 700;
      line-height: 1.5; }
  .speechBubbleBox.now {
    max-width: 473px;
    padding: 50px 0 26px;
    background-image: url("/common/images/resonance/tabloid-05/img_speech-top-now.png"), url("/common/images/resonance/tabloid-05/img_speech-bottom-now.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: contain, contain; }
  .speechBubbleBox.future {
    max-width: 389px;
    padding: 56px 0 25px;
    background-image: url("/common/images/resonance/tabloid-05/img_speech-top-future.png"), url("/common/images/resonance/tabloid-05/img_speech-bottom-future.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: contain, contain; }
  @media only screen and (max-width: 767px) {
    .speechBubbleBox {
      max-width: 218px;
      padding: 39px 0 25px;
      margin: 0 auto; }
      .speechBubbleBox p {
        padding: 0 20px; }
        .speechBubbleBox p span {
          font-size: 1.4rem; }
      .speechBubbleBox.now {
        max-width: 333px;
        padding: 35px 0 20px;
        background-image: url("/common/images/resonance/tabloid-05/img_speech-top-now-sp.png"), url("/common/images/resonance/tabloid-05/img_speech-bottom-now-sp.png");
        background-repeat: no-repeat, no-repeat;
        background-position: top center, bottom center;
        background-size: contain, contain; }
      .speechBubbleBox.future {
        max-width: 320px;
        padding: 46px 0 24px; } }
  @media only screen and (max-width: 375px) {
    .speechBubbleBox.now {
      padding: calc((35 / 390) * 100vw) 0 calc((20 / 390) * 100vw); }
    .speechBubbleBox.future {
      padding: calc((46 / 390) * 100vw) 0 calc((24 / 390) * 100vw); } }

.scrollImgBox.mrNone {
  width: 1010px;
  margin-right: -30px; }
.scrollImgBox.w1610 {
  overflow-x: auto; }
  .scrollImgBox.w1610 .scrollBox {
    width: 1640px;
    padding-right: 30px; }
@media only screen and (max-width: 767px) {
  .scrollImgBox.mrNone, .scrollImgBox.mrNoneSp {
    overflow-x: auto;
    width: calc(100% + 15px);
    margin-right: -15px; }
  .scrollImgBox.w925sp .scrollBox {
    width: 925px; }
  .scrollImgBox.w1476sp .scrollBox {
    width: 1491px;
    padding-right: 15px; }
  .scrollImgBox.w923sp .scrollBox {
    width: 938px;
    padding-right: 15px; } }

.scllorText {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 177px;
  margin-left: auto;
  padding-right: 121px; }
  .scllorText img {
    max-width: 56px; }
  .scllorText::before, .scllorText::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0; }
  .scllorText::before {
    width: 110px;
    height: 2px;
    background-color: #1A1311; }
  .scllorText::after {
    width: 10px;
    height: 10px;
    border-top: 2px solid #1A1311;
    border-right: 2px solid #1A1311;
    transform: rotate(45deg); }

.borderTopBox {
  width: calc(100% + 60px);
  margin: 0 -30px;
  padding: 0 30px;
  border-top: 2px solid #FBFBFB; }
  @media only screen and (max-width: 767px) {
    .borderTopBox {
      width: calc(100% + 30px);
      margin: 0 -15px;
      padding: 0 15px; } }

.insightTitle {
  display: flex;
  align-items: center;
  justify-content: center; }
  .insightTitle span {
    display: inline-block;
    margin-left: 20px;
    padding: 0 22px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 33px;
    text-align: center;
    border-radius: 22px; }
  .insightTitle.fashion span {
    background-color: #23D93C; }
  .insightTitle.fashion img {
    max-width: 239px; }
  .insightTitle.cosme {
    align-items: flex-end; }
    .insightTitle.cosme span {
      background-color: #FFDE2A; }
    .insightTitle.cosme img {
      max-width: 336px; }
  @media only screen and (max-width: 767px) {
    .insightTitle {
      display: block;
      text-align: center; }
      .insightTitle span {
        display: block;
        max-width: 126px;
        margin: 0 auto;
        padding: 0 14px;
        font-size: 1.4rem;
        line-height: 25px; }
      .insightTitle.fashion img {
        max-width: 175px; }
      .insightTitle.cosme img {
        max-width: 246px; } }

.fashionBox {
  display: flex;
  justify-content: space-between; }
  .fashionBox .left {
    width: 469px; }
  .fashionBox .right {
    width: 479px; }
  .fashionBox .title {
    font-weight: 700;
    line-height: 1.5; }
  .fashionBox .detail {
    font-size: 1.8rem;
    line-height: 1.889; }
  @media only screen and (max-width: 767px) {
    .fashionBox {
      display: block; }
      .fashionBox .left {
        width: 100%; }
      .fashionBox .right {
        width: 100%; }
      .fashionBox .title {
        text-align: center; }
      .fashionBox .detail {
        font-size: 1.2rem;
        line-height: 2; }
      .fashionBox .imgBox {
        text-align: center; } }

.cosmeBox {
  display: flex;
  justify-content: space-between; }
  @media only screen and (max-width: 767px) {
    .cosmeBox {
      display: block;
      text-align: center; } }

.cosmeWrap {
  display: flex;
  flex-wrap: wrap;
  width: calc((100% - 28px) / 2); }
  .cosmeWrap .cosmeImgBox {
    width: 222px;
    margin-top: 46px; }
  .cosmeWrap .imgBalloonBox {
    position: relative;
    z-index: 1;
    width: 328px;
    margin-top: -55px; }
  @media only screen and (max-width: 767px) {
    .cosmeWrap {
      width: 100%;
      justify-content: center; }
      .cosmeWrap .cosmeImgBox {
        width: 134px;
        margin-top: 38px; }
      .cosmeWrap .imgBalloonBox {
        margin-top: -21px; }
        .cosmeWrap .imgBalloonBox img {
          width: 281px; }
      .cosmeWrap.ladies {
        flex-direction: row-reverse; } }
  @media only screen and (max-width: 390px) {
    .cosmeWrap .cosmeImgBox {
      width: calc((131 / 390) * 100vw);
      margin-top: calc((38 / 390) * 100vw); } }

.cosmeBalloonBox {
  position: relative;
  width: 254px;
  padding-left: 19px; }
  .cosmeBalloonBox::after {
    content: '';
    position: absolute;
    top: 72px;
    left: 1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13px 23px 13px;
    border-color: transparent transparent #fff transparent;
    transform: rotate(-70deg); }
  @media only screen and (max-width: 767px) {
    .cosmeBalloonBox {
      width: 194px;
      padding-left: 14px; }
      .cosmeBalloonBox::after {
        top: 55px;
        left: 1px;
        border-width: 0 10px 18px 10px; }
      .cosmeBalloonBox.ladies {
        padding: 0 14px 0 0; }
        .cosmeBalloonBox.ladies::after {
          left: auto;
          right: 1px;
          transform: rotate(-289deg); } }
  @media only screen and (max-width: 390px) {
    .cosmeBalloonBox {
      width: calc((191 / 390) * 100vw);
      padding-left: calc((14 / 390) * 100vw); }
      .cosmeBalloonBox::after {
        top: calc((55 / 390) * 100vw);
        border-width: 0 calc((10 / 390) * 100vw) calc((38 / 390) * 100vw) calc((10 / 390) * 100vw); }
      .cosmeBalloonBox.ladies {
        padding: 0 calc((14 / 390) * 100vw) 0 0; } }

.cosmeBalloonWrap {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 235px;
  height: 235px;
  padding: 20px;
  border-radius: 50%;
  background-color: #fff; }
  .cosmeBalloonWrap .title {
    width: 100%;
    text-align: center; }
    .cosmeBalloonWrap .title span {
      display: inline-block;
      font-size: 1.8rem;
      font-weight: 700;
      padding-bottom: 15px;
      border-bottom: 2px solid #070001; }
  .cosmeBalloonWrap .detail {
    display: block;
    width: 100%;
    margin-top: 15px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center; }
  @media only screen and (max-width: 767px) {
    .cosmeBalloonWrap {
      width: 180px;
      height: 180px;
      padding: 10px; }
      .cosmeBalloonWrap .title span {
        font-size: 1.4rem;
        padding-bottom: 10px; }
      .cosmeBalloonWrap .detail {
        margin-top: 10px;
        font-size: 1.4rem; } }
  @media only screen and (max-width: 390px) {
    .cosmeBalloonWrap {
      width: calc((180 / 390) * 100vw);
      height: calc((180 / 390) * 100vw);
      padding: calc((10 / 390) * 100vw); }
      .cosmeBalloonWrap .title span {
        font-size: calc((14 / 390) * 100vw);
        padding-bottom: calc((10 / 390) * 100vw); }
      .cosmeBalloonWrap .detail {
        margin-top: calc((10 / 390) * 100vw);
        font-size: calc((14 / 390) * 100vw); } }

.senseOfValueBox {
  display: flex;
  justify-content: space-between; }
  .senseOfValueBox .left {
    width: 477px; }
    .senseOfValueBox .left .imgBox {
      margin-left: 70px; }
  .senseOfValueBox .right {
    width: 473px; }
    .senseOfValueBox .right .imgBox {
      text-align: center; }
  .senseOfValueBox .txtBox p {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.833; }
  @media only screen and (max-width: 767px) {
    .senseOfValueBox {
      display: block; }
      .senseOfValueBox .left {
        width: 100%; }
        .senseOfValueBox .left .imgBox {
          margin: 0 auto;
          text-align: center; }
          .senseOfValueBox .left .imgBox img {
            width: 219px;
            margin: 0 auto; }
          .senseOfValueBox .left .imgBox.sp img {
            width: auto; }
      .senseOfValueBox .right {
        display: none; }
      .senseOfValueBox .txtBox p {
        font-size: 1.8rem;
        line-height: 1.888; } }

.needsBox {
  margin-top: -60px; }
  @media only screen and (max-width: 767px) {
    .needsBox {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: -93px; } }

.needsTitle {
  display: block;
  max-width: 193px;
  margin: 0 auto;
  padding: 0 18px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 33px;
  text-align: center;
  border-radius: 22px;
  background-color: #FBFBFB; }
  @media only screen and (max-width: 767px) {
    .needsTitle {
      max-width: 162px;
      padding: 0 14px;
      font-size: 1.5rem;
      line-height: 29px; } }

.needsDataBox {
  display: flex;
  border-radius: 13px; }
  .needsDataBox dt,
  .needsDataBox dd {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 13px 40px; }
  .needsDataBox dt {
    position: relative;
    width: 215px; }
    .needsDataBox dt::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background-color: #1A1311; }
  .needsDataBox dd {
    width: calc(100% - 215px);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.65; }
  .needsDataBox.cosmetics {
    background-color: #FFDE2A; }
    .needsDataBox.cosmetics dt img {
      max-width: 128px; }
  .needsDataBox.fashion {
    background-color: #23D93C; }
    .needsDataBox.fashion dt img {
      max-width: 95px; }
  @media only screen and (max-width: 767px) {
    .needsDataBox {
      flex-wrap: wrap; }
      .needsDataBox dt,
      .needsDataBox dd {
        width: 100%;
        min-height: auto;
        padding: 15px 20px; }
      .needsDataBox dt {
        min-height: 50px; }
        .needsDataBox dt img {
          margin: 0 auto; }
        .needsDataBox dt::after {
          width: 100%;
          height: 1px; }
      .needsDataBox dd {
        font-size: 1.4rem;
        line-height: 1.785; }
      .needsDataBox.cosmetics dt img {
        max-width: 119px; }
      .needsDataBox.fashion dt {
        padding: 12px 20px 9px; }
        .needsDataBox.fashion dt img {
          max-width: 88px; } }

.ideaTitle {
  text-align: center; }
  .ideaTitle img {
    width: 193px; }
  @media only screen and (max-width: 767px) {
    .ideaTitle img {
      width: 128px; } }

.ideaLeadBox p {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .ideaLeadBox p {
    font-size: 2rem; } }

.mapFloor {
  position: relative; }

.lnkMapFloor {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%; }
  .lnkMapFloor:hover {
    background-color: #fff;
    opacity: .5; }
  .lnkMapFloor.no1 {
    top: 561px;
    right: 294px; }
  .lnkMapFloor.no2 {
    top: 385px;
    right: 352px; }
  .lnkMapFloor.no3 {
    bottom: 334px;
    right: 378px; }
  .lnkMapFloor.no4 {
    bottom: 456px;
    right: 246px; }
  .lnkMapFloor.no5 {
    top: 411px;
    right: 427px; }
  .lnkMapFloor.no6 {
    top: 508px;
    right: 112px; }
  .lnkMapFloor.no7 {
    top: 489px;
    left: 212px; }
  .lnkMapFloor.no8 {
    top: 320px;
    left: 125px; }
  .lnkMapFloor.no9 {
    top: 554px;
    left: 242px; }
  @media only screen and (max-width: 767px) {
    .lnkMapFloor {
      width: calc((32 / 767) * 100vw);
      height: calc((32 / 767) * 100vw); }
      .lnkMapFloor.no1 {
        top: calc((381 / 767) * 100vw);
        right: calc((199 / 767) * 100vw); }
      .lnkMapFloor.no2 {
        top: calc((261 / 767) * 100vw);
        right: calc((238 / 767) * 100vw); }
      .lnkMapFloor.no3 {
        bottom: calc((226 / 767) * 100vw);
        right: calc((256 / 767) * 100vw); }
      .lnkMapFloor.no4 {
        bottom: calc((310 / 767) * 100vw);
        right: calc((167 / 767) * 100vw); }
      .lnkMapFloor.no5 {
        top: calc((279 / 767) * 100vw);
        right: calc((290 / 767) * 100vw); }
      .lnkMapFloor.no6 {
        top: calc((344 / 767) * 100vw);
        right: calc((76 / 767) * 100vw); }
      .lnkMapFloor.no7 {
        top: calc((331 / 767) * 100vw);
        left: calc((143 / 767) * 100vw); }
      .lnkMapFloor.no8 {
        top: calc((217 / 767) * 100vw);
        left: calc((84 / 767) * 100vw); }
      .lnkMapFloor.no9 {
        top: calc((376 / 767) * 100vw);
        left: calc((164 / 767) * 100vw); } }

.bdrLeftTitle {
  position: relative;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 50px; }
  .bdrLeftTitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 25px;
    height: 100%; }
  .bdrLeftTitle.green::before {
    background-color: #23D93C; }
  .bdrLeftTitle.yellow::before {
    background-color: #FFDE2A; }
  @media only screen and (max-width: 767px) {
    .bdrLeftTitle {
      font-size: 1.6rem;
      line-height: 1.6875;
      padding-left: 21px; }
      .bdrLeftTitle::before {
        width: 13px; } }

.floorBox {
  padding: 100px 50px; }
  .floorBox.apparel {
    border: 10px solid #23D93C;
    background: url("/common/images/resonance/tabloid-05/bg_floor_apparel.png") no-repeat top 5px right 5px/196px 102px; }
  .floorBox.cosme {
    border: 10px solid #FFDE2A;
    background: url("/common/images/resonance/tabloid-05/bg_floor_cosme.png") no-repeat top 5px right 5px/230px 159px; }
  @media only screen and (max-width: 767px) {
    .floorBox {
      padding: 35px 8px; }
      .floorBox.apparel {
        border: 5px solid #23D93C;
        background: url("/common/images/resonance/tabloid-05/bg_floor_apparel.png") no-repeat top 2px right 2px/87px 45px; }
      .floorBox.cosme {
        border: 5px solid #FFDE2A;
        background: url("/common/images/resonance/tabloid-05/bg_floor_cosme.png") no-repeat top 2px right 2px/98px 68px; } }

.beyondIdeaTitle {
  padding: 65px 0 0 235px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.583;
  background: url("/common/images/resonance/tabloid-05/bg_beyond-idea.png") no-repeat top left/260px 118px; }
  @media only screen and (max-width: 767px) {
    .beyondIdeaTitle {
      padding: 75px 0 0 0;
      font-size: 1.4rem;
      line-height: 1.714;
      background: url("/common/images/resonance/tabloid-05/bg_beyond-idea.png") no-repeat top center/118px 54px; } }

.imgFloorBox {
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .imgFloorBox.no1 img {
      width: 289px; } }

.floorFlexBox {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .floorFlexBox .left,
  .floorFlexBox .right {
    width: 436px; }
  @media only screen and (max-width: 767px) {
    .floorFlexBox {
      overflow-x: hidden;
      align-items: flex-start;
      max-width: 400px;
      margin: 0 auto; }
      .floorFlexBox .left {
        width: 188px; }
      .floorFlexBox .right {
        width: calc(100% - 206px); } }
  @media only screen and (max-width: 375px) {
    .floorFlexBox .left {
      width: calc((188 / 390) * 100vw); }
    .floorFlexBox .right {
      width: calc(100% - ((206 / 390) * 100vw)); } }

.imgTxtFloorBox .imgBox {
  text-align: center; }
.imgTxtFloorBox .txtBox .title,
.imgTxtFloorBox .txtBox .detail {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.833; }
@media only screen and (max-width: 767px) {
  .imgTxtFloorBox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse; }
    .imgTxtFloorBox .imgBox {
      position: relative; }
      .imgTxtFloorBox .imgBox img {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
        max-width: none; }
    .imgTxtFloorBox .txtBox {
      width: 100%; }
      .imgTxtFloorBox .txtBox .title,
      .imgTxtFloorBox .txtBox .detail {
        font-size: 1.4rem;
        line-height: 1.5; }
      .imgTxtFloorBox .txtBox .detail {
        font-size: 1.2rem; }
    .imgTxtFloorBox.no2 .imgBox {
      padding-bottom: 242px; }
      .imgTxtFloorBox.no2 .imgBox img {
        width: 96px;
        height: 242px; }
    .imgTxtFloorBox.no3 .imgBox {
      padding-bottom: 265px; }
      .imgTxtFloorBox.no3 .imgBox img {
        right: -9px;
        width: 233px;
        height: 265px; }
    .imgTxtFloorBox.no4 .imgBox {
      padding-bottom: 292px; }
      .imgTxtFloorBox.no4 .imgBox img {
        right: -34px;
        width: 256px;
        height: 292px; } }
@media only screen and (max-width: 375px) {
  .imgTxtFloorBox.no2 .imgBox {
    padding-bottom: calc((242 / 390) * 100vw); }
    .imgTxtFloorBox.no2 .imgBox img {
      width: calc((96 / 390) * 100vw);
      height: calc((242 / 390) * 100vw); }
  .imgTxtFloorBox.no3 .imgBox {
    padding-bottom: calc((265 / 390) * 100vw); }
    .imgTxtFloorBox.no3 .imgBox img {
      right: calc((-9 / 390) * 100vw);
      width: calc((233 / 390) * 100vw);
      height: calc((265 / 390) * 100vw); }
  .imgTxtFloorBox.no4 .imgBox {
    padding-bottom: calc((292 / 390) * 100vw); }
    .imgTxtFloorBox.no4 .imgBox img {
      right: calc((-34 / 390) * 100vw);
      width: calc((256 / 390) * 100vw);
      height: calc((292 / 390) * 100vw); } }

.floorFlexBox2 {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .floorFlexBox2 .imgBox {
    width: 428px; }
  .floorFlexBox2 .txtBox {
    width: calc(100% - 464px); }
    .floorFlexBox2 .txtBox .title {
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.583; }
    .floorFlexBox2 .txtBox .detail {
      font-size: 2rem;
      line-height: 1.5; }
  .floorFlexBox2.reverse {
    flex-direction: row-reverse; }
  .floorFlexBox2.no8 .imgBox, .floorFlexBox2.no9 .imgBox {
    width: 436px; }
  @media only screen and (max-width: 767px) {
    .floorFlexBox2 {
      flex-wrap: wrap; }
      .floorFlexBox2 .imgBox {
        width: calc((188 / 390) * 100vw); }
      .floorFlexBox2 .txtBox {
        width: calc(100% - ((202 / 390) * 100vw)); }
        .floorFlexBox2 .txtBox .title {
          font-size: 1.4rem;
          font-weight: 700;
          line-height: 1.214; }
        .floorFlexBox2 .txtBox .detail {
          font-size: 1.2rem;
          line-height: 1.5; }
      .floorFlexBox2.no8 .imgBox, .floorFlexBox2.no9 .imgBox {
        width: calc((188 / 390) * 100vw); } }

.endCommentBox p {
  font-size: 2rem;
  line-height: 1.6; }
@media only screen and (max-width: 767px) {
  .endCommentBox p {
    font-size: 1.4rem;
    line-height: 1.714; } }

.creatorsBox {
  padding-top: 30px;
  border-top: 1px solid #707070; }
  @media only screen and (max-width: 767px) {
    .creatorsBox {
      padding-top: 15px; } }

.creatorData {
  display: flex;
  justify-content: space-between; }
  .creatorData + .creatorData {
    margin-top: 15px; }
  .creatorData dt,
  .creatorData dd {
    font-size: 1.4rem;
    line-height: 1.5; }
  .creatorData dt {
    width: 8em; }
  .creatorData dd {
    width: calc(100% - 8em); }
  @media only screen and (max-width: 767px) {
    .creatorData + .creatorData {
      margin-top: 10px; }
    .creatorData dt,
    .creatorData dd {
      font-size: 1rem; } }