.tabCont {
  padding-top: 100px;
  background: #f0f4f5;
  padding-bottom: 150px; }
  @media screen and (max-width: 750px) {
    .tabCont {
      padding-top: 30px;
      padding-bottom: 100px; } }
  .tabCont .tab {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 750px) {
      .tabCont .tab {
        flex-wrap: wrap;
        padding-bottom: 30px; } }
    .tabCont .tab li {
      width: 380px;
      text-align: center; }
      @media screen and (max-width: 750px) {
        .tabCont .tab li {
          width: 48%; }
          .tabCont .tab li:nth-child(n+3) {
            margin-top: 15px; } }
      .tabCont .tab li a {
        display: block;
        padding: 20px 10px;
        font-size: 1.8rem;
        border-bottom: 1px solid #0f7a9e;
        background: #fff;
        box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.1);
        position: relative;
        transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .tabCont .tab li a::before {
          content: "";
          width: 20px;
          height: 1px;
          background: #0f7a9e;
          display: block;
          position: absolute;
          top: 50%;
          right: 20px;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .tabCont .tab li a::after {
          content: "";
          width: 6px;
          height: 6px;
          border-left: 1px solid #0f7a9e;
          border-top: 1px solid #0f7a9e;
          display: block;
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
          position: absolute;
          top: 50%;
          right: 20px;
          margin-top: -3px;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        @media print, screen and (min-width: 751px) {
          .tabCont .tab li a:hover::before {
            width: 30px;
            right: 12px;
            background: #fff; }
          .tabCont .tab li a:hover::after {
            right: 12px;
            border-left: 1px solid #fff;
            border-top: 1px solid #fff; } }
        .tabCont .tab li a:hover {
          color: #fff !important;
          background: #0f7a9e;
          box-shadow: none; }
      .tabCont .tab li.active a {
        color: #fff !important;
        background: #0f7a9e;
        box-shadow: none; }
        .tabCont .tab li.active a::before {
          content: none; }
        .tabCont .tab li.active a::after {
          content: none; }
        .tabCont .tab li.active a:hover::before {
          content: none; }
        .tabCont .tab li.active a:hover::after {
          content: none; }
  .tabCont .tabInner {
    background: #fff;
    margin-top: 40px;
    padding: 80px 80px 120px 80px; }
    @media screen and (max-width: 750px) {
      .tabCont .tabInner {
        margin: 0 -20px 0;
        padding: 40px 20px 60px 20px; } }
    .tabCont .tabInner .ttl {
      text-align: center;
      margin-bottom: 100px;
      border-bottom: 1px solid #cadbe0;
      padding-bottom: 50px; }
      @media screen and (max-width: 750px) {
        .tabCont .tabInner .ttl {
          padding-bottom: 30px;
          margin-bottom: 50px; } }
      .tabCont .tabInner .ttl h2 {
        font-size: 3.6rem;
        color: #0f7a9e;
        margin-bottom: 30px; }
    .tabCont .tabInner .box {
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 750px) {
        .tabCont .tabInner .box {
          display: block; } }
      .tabCont .tabInner .box figure {
        width: 540px; }
        @media screen and (max-width: 750px) {
          .tabCont .tabInner .box figure {
            width: 100%; } }
        .tabCont .tabInner .box figure img {
          border: 1px solid #efefef; }
    .tabCont .tabInner .txtArea {
      width: 440px; }
      @media screen and (max-width: 750px) {
        .tabCont .tabInner .txtArea {
          width: 100%;
          margin-top: 20px; } }
      .tabCont .tabInner .txtArea h3 {
        font-size: 3.2rem;
        margin-bottom: 40px;
        color: #333;
        line-height: 1.4; }
        @media screen and (max-width: 750px) {
          .tabCont .tabInner .txtArea h3 {
            font-size: 2.6rem;
            margin-bottom: 20px; } }
        .tabCont .tabInner .txtArea h3 span {
          display: block;
          font-weight: normal;
          font-size: 1.2rem;
          color: #999;
          margin-bottom: 15px; }
          @media screen and (max-width: 750px) {
            .tabCont .tabInner .txtArea h3 span {
              margin-bottom: 5px; } }
      .tabCont .tabInner .txtArea .txt {
        font-size: 1.4rem;
        text-align: justify; }
      .tabCont .tabInner .txtArea .btn {
        margin-top: 60px; }
        @media screen and (max-width: 750px) {
          .tabCont .tabInner .txtArea .btn {
            margin-top: 40px; } }
        .tabCont .tabInner .txtArea .btn a::before {
          content: "";
          width: 20px;
          height: 1px;
          background: #000;
          display: block;
          position: absolute;
          top: 50%;
          right: 20px;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .tabCont .tabInner .txtArea .btn a::after {
          content: "";
          width: 6px;
          height: 6px;
          border-left: 1px solid #000;
          border-top: 1px solid #000;
          display: block;
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
          position: absolute;
          top: 50%;
          right: 20px;
          margin-top: -3px;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        @media print, screen and (min-width: 751px) {
          .tabCont .tabInner .txtArea .btn a:hover::before {
            width: 30px;
            right: 12px;
            background: #fff; }
          .tabCont .tabInner .txtArea .btn a:hover::after {
            right: 12px;
            border-left: 1px solid #fff;
            border-top: 1px solid #fff; } }
        .tabCont .tabInner .txtArea .btn a[target="_blank"]::before {
          content: "";
          position: absolute;
          right: 20px;
          border: 1px solid #000;
          width: 8px;
          height: 8px;
          transform: none;
          margin-top: -2px;
          background: #fff;
          z-index: 2;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .tabCont .tabInner .txtArea .btn a[target="_blank"]::after {
          content: "";
          position: absolute;
          right: 15px;
          border: 1px solid #000;
          width: 8px;
          height: 8px;
          transform: none;
          margin-top: -6px;
          background: #fff;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        @media print, screen and (min-width: 751px) {
          .tabCont .tabInner .txtArea .btn a[target="_blank"]:hover::before {
            border: 1px solid #fff;
            background: #0f7a9e;
            transform: translateY(-4px); }
          .tabCont .tabInner .txtArea .btn a[target="_blank"]:hover::after {
            border: 1px solid #fff;
            background: #0f7a9e;
            transform: translateY(4px); } }
    .tabCont .tabInner section + section {
      margin-top: 100px;
      border-top: 1px solid #eee;
      padding-top: 100px; }
      @media screen and (max-width: 750px) {
        .tabCont .tabInner section + section {
          margin-top: 60px;
          padding-top: 60px; } }

.photo .box ul {
  width: 100%; }
  .photo .box ul li {
    width: 100%; }
    .photo .box ul li .img {
      width: 640px;
      float: left; }
      @media screen and (max-width: 750px) {
        .photo .box ul li .img {
          width: 100%;
          float: none; } }
      .photo .box ul li .img a {
        display: block;
        position: relative; }
        .photo .box ul li .img a::before {
          content: "";
          width: 100px;
          height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          background: url("../img/common/icon_ loupe.svg") no-repeat center;
          background-size: 100% auto;
          z-index: 2;
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
          @media print, screen and (min-width: 751px) {
            .photo .box ul li .img a::before {
              cursor: pointer; } }
        .photo .box ul li .img a::after {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.6);
          z-index: 1;
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
        @media print, screen and (min-width: 751px) {
          .photo .box ul li .img a:hover::before {
            width: 50px;
            height: 50px;
            opacity: 1; }
          .photo .box ul li .img a:hover::after {
            opacity: 1; } }
        @media screen and (max-width: 750px) {
          .photo .box ul li .img a {
            cursor: default; } }
    .photo .box ul li .txt {
      width: 360px;
      float: right; }
      @media screen and (max-width: 750px) {
        .photo .box ul li .txt {
          width: 100%;
          float: none;
          margin-top: 20px; } }
      .photo .box ul li .txt dt {
        font-size: 1.6rem;
        color: #999;
        margin-bottom: 5px; }
      .photo .box ul li .txt dd {
        font-size: 1.2rem;
        color: #999; }
    @media print, screen and (min-width: 751px) {
      .photo .box ul li:nth-child(odd) .txt {
        margin-left: 40px; }
      .photo .box ul li:nth-child(even) .img {
        float: right; }
      .photo .box ul li:nth-child(even) .txt {
        float: left;
        margin-right: 40px; }
      .photo .box ul li.vertical:nth-child(odd) .txt {
        float: left; }
      .photo .box ul li.vertical:nth-child(even) .txt {
        float: right; } }
    .photo .box ul li.vertical .img {
      width: 500px; }
      @media screen and (max-width: 750px) {
        .photo .box ul li.vertical .img {
          width: 100%; } }
    .photo .box ul li + li {
      margin-top: 150px; }
      @media screen and (max-width: 750px) {
        .photo .box ul li + li {
          margin-top: 75px; } }

.other .tabCont .tabInner .txtArea h3 {
  font-size: 2.4rem !important; }
.other .tabCont .tabInner .txtArea .btn.music a {
  position: relative; }
  .other .tabCont .tabInner .txtArea .btn.music a::before, .other .tabCont .tabInner .txtArea .btn.music a::after {
    content: none; }
  .other .tabCont .tabInner .txtArea .btn.music a .fas {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%); }