@charset "UTF-8";
/* Scss Document */
/*-------------------------------------------------
    common
=================================================*/
body {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  line-height: 2;
  background: #fff;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  min-width: 320px;
  font-family: "Noto Sans JP", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
  letter-spacing: 0.1em;
  margin: 0;
  padding: 45px 0 0;
  font-feature-settings: "palt";
  background: url(../images/bg1_sp.png) repeat fixed center top/100%; }
  @media (min-width: 768px) {
    body {
      background: url(../images/bg1_pc.png) repeat fixed center top;
      padding-top: 80px;
      font-size: 18px; } }
  body.preload * {
    transition: none !important; }

a {
  color: #000;
  text-decoration: underline;
  transition: all 0.5s;
  backface-visibility: hidden; }

a:hover {
  text-decoration: none; }

a:visited {
  color: #000; }

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

.tal {
  text-align: left !important; }

.tar {
  text-align: right !important; }

.tac {
  text-align: center !important; }

.fl {
  float: left; }

.fr {
  float: right; }

.mt0 {
  margin-top: 0 !important; }

.mb0 {
  margin-bottom: 0 !important; }

@media (min-width: 768px) {
  .pc_tal {
    text-align: left !important; }

  .pc_tar {
    text-align: right !important; }

  .pc_tac {
    text-align: center !important; }

  .pc_fl {
    float: left; }

  .pc_fr {
    float: right; } }
@media (max-width: 767px) {
  .sp_tal {
    text-align: left !important; }

  .sp_tar {
    text-align: right !important; }

  .sp_tac {
    text-align: center !important; }

  .sp_fl {
    float: left; }

  .sp_fr {
    float: right; } }
section,
nav,
header,
footer,
article,
figure {
  margin: 0;
  padding: 0; }

p {
  margin: 20px 0; }

/*------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: top; }

mark {
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, rgba(240, 192, 217, 0.6) 56%, rgba(240, 192, 217, 0.6) 100%);
  font-weight: bold; }

@media (min-width: 768px) {
  .inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 5vw;
    box-sizing: border-box; }

  .inner2 {
    max-width: 720px;
    margin: 0 auto;
    box-sizing: border-box; }

  .inner3 {
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box; }

  .sp_only {
    display: none !important; } }
@media (max-width: 767px) {
  .inner {
    width: 100%;
    padding: 0 5vw;
    box-sizing: border-box; }

  .inner2,
  .inner3 {
    width: 100%;
    box-sizing: border-box; }

  .pc_only {
    display: none !important; } }
@media (min-width: 1280px) {
  .inner,
  .inner2 {
    padding: 0; } }
/*-- スマホメニュー ----------------------------------------*/
.menubtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 45px;
  cursor: pointer; }
  @media (min-width: 768px) {
    .menubtn {
      width: 120px;
      height: 80px; } }
  .menubtn .icon {
    width: 40px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    @media (min-width: 768px) {
      .menubtn .icon {
        width: 60px;
        height: 20px; } }
    .menubtn .icon span {
      background: #000;
      width: 40px;
      height: 2.5px;
      display: block;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      transition: all 0.3s ease 0s; }
      @media (min-width: 768px) {
        .menubtn .icon span {
          width: 60px;
          height: 3px; } }
      .menubtn .icon span:nth-of-type(1) {
        top: 0; }
      .menubtn .icon span:nth-of-type(2) {
        top: 7px; }
        @media (min-width: 768px) {
          .menubtn .icon span:nth-of-type(2) {
            top: 10px; } }
      .menubtn .icon span:nth-of-type(3) {
        top: 14px; }
        @media (min-width: 768px) {
          .menubtn .icon span:nth-of-type(3) {
            top: 20px; } }
  .menubtn.active .icon span:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(-155deg);
    top: 50%; }
  .menubtn.active .icon span:nth-of-type(2) {
    opacity: 0;
    left: 100%; }
  .menubtn.active .icon span:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(155deg);
    top: 50%; }

/*------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: #FFD9C5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 5vw;
  box-sizing: border-box;
  z-index: 1000; }
  @media (min-width: 768px) {
    header {
      height: 80px;
      padding: 0 0 0 20px; } }
  header .logo {
    margin: 0;
    padding: 0;
    font-size: 1px; }
    header .logo img {
      width: 92px; }
      @media (min-width: 768px) {
        header .logo img {
          width: 223px; } }
  header .entry {
    position: absolute;
    top: 0;
    right: 120px; }
    header .entry a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160px;
      height: 80px;
      background: url("../images/entry_bg.jpg") repeat center center/300px; }
      header .entry a::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: 0;
        transition: .5s; }
      header .entry a:hover::before {
        opacity: 1; }
    header .entry img {
      width: 97px;
      position: relative; }
  header #headnavi {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    background: #FFD9C5;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 45px;
    height: calc(100vh - 45px); }
    @media (min-width: 768px) {
      header #headnavi {
        top: 80px;
        width: 683px;
        height: auto;
        padding: 0 0 70px;
        max-height: calc(100vh - 80px); } }
    header #headnavi ul {
      margin: 0;
      padding: 5vw;
      overflow: auto;
      box-sizing: border-box;
      max-height: calc(100vh - 45px - 45px); }
      @media (min-width: 768px) {
        header #headnavi ul {
          padding: 50px;
          max-height: calc(100vh - 80px - 70px); } }
      header #headnavi ul li {
        margin: 0 0 35px;
        padding: 0;
        list-style: none; }
        header #headnavi ul li:last-child {
          margin-bottom: 0; }
      header #headnavi ul a {
        display: block; }
        @media (min-width: 768px) {
          header #headnavi ul a {
            text-decoration: none;
            display: flex;
            justify-content: flex-start;
            align-items: center; } }
        header #headnavi ul a:hover {
          opacity: .6; }
      header #headnavi ul img {
        height: 40px; }
        @media (min-width: 768px) {
          header #headnavi ul img {
            border-image: 50px; } }
      header #headnavi ul span {
        font-weight: bold;
        display: block;
        margin-top: 15px; }
        @media (min-width: 768px) {
          header #headnavi ul span {
            margin: 0 0 0 30px; } }
        header #headnavi ul span img {
          height: 16px; }
          @media (min-width: 768px) {
            header #headnavi ul span img {
              height: 24px; } }
    header #headnavi .corporate {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #BC000B;
      text-decoration: none;
      line-height: 1.2;
      box-sizing: border-box;
      padding: 0 10px;
      color: #fff;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: bold; }
      @media (min-width: 768px) {
        header #headnavi .corporate {
          height: 70px;
          font-size: 23px;
          padding: 0 20px; } }
      header #headnavi .corporate:hover {
        background: #000; }
      header #headnavi .corporate img {
        height: 13px; }
        @media (min-width: 768px) {
          header #headnavi .corporate img {
            height: 21px; } }

/*------------------------------------------*/
footer {
  text-align: center;
  padding: 13vw 0 calc(5vw + 45px) 0; }
  @media (min-width: 768px) {
    footer {
      padding: 80px 0 50px; } }
  footer .logo {
    max-width: 500px;
    width: 85%;
    margin: 0 auto 13vw; }
    @media (min-width: 768px) {
      footer .logo {
        margin-bottom: 70px; } }

     .copyright{
        width: 370px;
	    height:auto;
        margin:0 auto;}

    @media (max-width: 768px) {
		     .copyright{
        width: 100%;
	    height:auto;
		margin:0 auto;}
   }

.bottom_entry {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  z-index: 990; }
  .bottom_entry a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    background: url("../images/entry_bg.jpg") repeat center center/300px; }
  .bottom_entry img {
    width: 58px; }

/*------------------------------------------*/
#kv {
  height: 135vw;
  position: relative; }
  @media (min-width: 768px) {
    #kv {
      height: 768px; } }
  #kv .bg {
    animation-timing-function: linear;
    animation-duration: 150s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    background: url("../images/top/kv_bg.jpg") repeat-x 0 0/auto 100%;
    width: 100%;
    position: absolute;
    left: 0;
    height: 45vw; }
    @media (min-width: 768px) {
      #kv .bg {
        background-size: 5000px;
        height: 256px; } }
  #kv .bg1 {
    top: 0;
    animation-name: kv_bg1_sp; }
    @media (min-width: 768px) {
      #kv .bg1 {
        animation-name: kv_bg1_pc; } }
  #kv .bg2 {
    top: 45vw;
    animation-name: kv_bg2_sp; }
    @media (min-width: 768px) {
      #kv .bg2 {
        top: 256px;
        animation-name: kv_bg2_pc; } }
  #kv .bg3 {
    top: 90vw;
    animation-name: kv_bg3_sp; }
    @media (min-width: 768px) {
      #kv .bg3 {
        top: 512px;
        animation-name: kv_bg3_pc; } }
  #kv .text {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 640px;
    width: 85%;
    transform: translate(-50%, -50%); }
  #kv .scroll {
    position: absolute;
    bottom: 5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 16vw; }
    @media (min-width: 768px) {
      #kv .scroll {
        width: 66px;
        bottom: 40px; } }
    #kv .scroll img {
      width: 100%; }

@keyframes kv_bg1_pc {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -5000px 0; } }
@keyframes kv_bg1_sp {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -500vw 0; } }
@keyframes kv_bg2_pc {
  0% {
    background-position: 1500px 0; }
  100% {
    background-position: 6500px 0; } }
@keyframes kv_bg2_sp {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 500vw 0; } }
@keyframes kv_bg3_pc {
  0% {
    background-position: 2750px 0; }
  100% {
    background-position: -2250px 0; } }
@keyframes kv_bg3_sp {
  0% {
    background-position: 308vw 0; }
  100% {
    background-position: -192vw 0; } }
/*------------------------------------------*/
#lead {
  background: url(../images/bg2_sp.png) repeat center top/100%;
  padding: 10vw 3vw; }
  @media (min-width: 768px) {
    #lead {
      background: url(../images/bg2_pc.png) repeat center top;
      padding: 80px 0; } }
  @media (min-width: 768px) {
    #lead img {
      width: 730px; } }

/*------------------------------------------*/
#contentnavi {
  background: #FFD9C5;
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #contentnavi {
      padding: 80px 0 80px; } }
  #contentnavi ul {
    margin: -3vw 0 0;
    padding: 0; }
    @media (min-width: 768px) {
      #contentnavi ul {
        margin: 0;
        position: relative;
        width: 100%;
        padding-top: 50.44405%; } }
    #contentnavi ul li {
      margin: 3vw 0 0;
      padding: 0;
      list-style: none;
      /*
      &:nth-of-type(1){
        a {
          pointer-events: none;
          background: url("../images/linkbtn0_sp.png") no-repeat center center / cover;
          @media (min-width:$breakpoint){
            background-image: url("../images/linkbtn0_pc.png");
          }
          img {
            opacity: 0 !important;
          }
        }
      }
      */ }
      @media (min-width: 768px) {
        #contentnavi ul li {
          margin: 0;
          width: 49.2895%;
          position: absolute; }
          #contentnavi ul li:nth-of-type(1) {
            top: 0;
            left: 0; }
          #contentnavi ul li:nth-of-type(2) {
            top: 25.5282%;
            left: 0; }
          #contentnavi ul li:nth-of-type(3) {
            top: 0;
            right: 0; }
          #contentnavi ul li:nth-of-type(4) {
            top: 51.4085%;
            left: 0; }
          #contentnavi ul li:nth-of-type(5) {
            top: 51.4085%;
            right: 0; }
          #contentnavi ul li:nth-of-type(6) {
            top: 77.1127%;
            right: 0; } }
    #contentnavi ul a {
      display: block;
      position: relative; }
      #contentnavi ul a .hover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: .5s; }
      @media (min-width: 768px) {
        #contentnavi ul a:hover .hover {
          opacity: 1; } }

/*------------------------------------------*/
#movie {
  position: relative;
  overflow: hidden;
  padding: 10vw 0 0;
  text-align: center; }
  @media (min-width: 768px) {
    #movie {
      padding: 80px 0 0; } }
  #movie .bg {
    max-width: 720px;
    margin: 0 auto;
    position: relative; }
    #movie .bg::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 100vw;
      height: 100%;
      background: #FFD9C5;
      transform: translateX(-50%); }
  #movie h2 {
    margin: 0 0 10px;
    font-size: 1pz; }
    @media (min-width: 768px) {
      #movie h2 {
        margin: 0 0 30px; } }
    #movie h2 img {
      height: 14px; }
      @media (min-width: 768px) {
        #movie h2 img {
          height: 27px; } }

/*------------------------------------------*/
#pagetitle {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #pagetitle {
      padding: 80px 0 100px 0; }
      #pagetitle .inner {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        height: 15vw;
        max-height: 180px; } }
  .page-about #pagetitle {
    background: #C77118; }
  .page-people #pagetitle {
    background: #65A548; }
  .page-others #pagetitle {
    background: #449294; }
  .page-crosstalk #pagetitle {
    background: #C12688; }
  .page-project #pagetitle {
    background: #0180C3; }
  #pagetitle h1 {
    margin: 0;
    padding: 0; }
    @media (min-width: 768px) {
      #pagetitle h1 {
        display: flex;
        align-items: flex-end; } }
    #pagetitle h1 img {
      height: 90px;
      object-fit: contain;
      object-position: left bottom; }
      @media (min-width: 768px) {
        #pagetitle h1 img {
          height: 15vw;
          max-height: 180px; } }
  #pagetitle p {
    margin: 30px 0 0; }
    @media (min-width: 768px) {
      #pagetitle p {
        margin: 0 0 0 50px;
        display: flex;
        align-items: flex-end;
        max-width: 50%; } }
    #pagetitle p img {
      height: 50px;
      object-fit: contain;
      object-position: left bottom; }
      @media (min-width: 768px) {
        #pagetitle p img {
          height: auto;
          max-height: 98px; } }
      .page-crosstalk #pagetitle p img {
        height: 32px; }
        @media (min-width: 768px) {
          .page-crosstalk #pagetitle p img {
            height: auto;
            max-height: 59px; } }
      .page-about #pagetitle p img, .page-project #pagetitle p img {
        height: 11px; }
        @media (min-width: 768px) {
          .page-about #pagetitle p img, .page-project #pagetitle p img {
            height: auto;
            max-height: 19px; } }

/*------------------------------------------*/
#people_index {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #people_index {
      padding: 80px 0; } }
  #people_index h2 {
    font-size: 1px;
    margin: 0 0 20px; }
    @media (min-width: 768px) {
      #people_index h2 {
        margin: 0 0 30px; } }
    #people_index h2 img {
      height: 20px; }
      @media (min-width: 768px) {
        #people_index h2 img {
          height: 28px; } }
  #people_index ul {
    margin: -5vw 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media (min-width: 768px) {
      #people_index ul {
        justify-content: flex-start;
        column-gap: 16px;
        margin-top: -16px; } }
    #people_index ul li {
      margin: 5vw 0 0;
      padding: 0;
      list-style: none;
      width: calc(50% - 1vw); }
      @media (min-width: 768px) {
        #people_index ul li {
          width: calc((100% - 48px) / 4);
          margin-top: 16px; } }
    #people_index ul a {
      display: block;
      position: relative; }
      #people_index ul a .hover {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: .5s; }
      #people_index ul a:hover .hover {
        opacity: 1; }

/*------------------------------------------*/
#peopletitle h1 {
  font-size: 1px;
  margin: 0;
  padding: 0; }
  #peopletitle h1 img {
    width: 100%; }

/*------------------------------------------*/
#people_profile {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #people_profile {
      padding: 80px 0; } }
  #people_profile .frame {
    position: relative; }
    #people_profile .frame::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      box-sizing: border-box;
      border: 5px solid #000000; }
      @media (min-width: 768px) {
        #people_profile .frame::after {
          border-width: 10px; } }

/*------------------------------------------*/
#people_interview h2 {
  font-size: 1px;
  margin: 0 0 20px; }
  @media (min-width: 768px) {
    #people_interview h2 {
      margin: 0 0 30px; } }
  #people_interview h2 img {
    height: 48px; }
    @media (min-width: 768px) {
      #people_interview h2 img {
        height: 30px; } }
#people_interview h3 {
  font-size: 1px;
  margin: 0 0 20px; }
  @media (min-width: 768px) {
    #people_interview h3 {
      margin: 0 0 30px; } }
  #people_interview h3 img {
    height: 54px; }
    @media (min-width: 768px) {
      #people_interview h3 img {
        height: 73px; } }
#people_interview .label {
  margin: 0 0 20px; }
  #people_interview .label img {
    height: 38px; }
    @media (min-width: 768px) {
      #people_interview .label img {
        height: 60px; } }
#people_interview p {
  margin: 0; }
#people_interview .lead {
  margin: 0 -5vw 30px 5vw;
  padding: 0 5vw 0 0; }
  @media (min-width: 768px) {
    #people_interview .lead {
      margin: 0 0 40px 0; } }
#people_interview .photo {
  margin: 40px -5vw 40px 5vw;
  padding: 0 0 0 0; }
  @media (min-width: 768px) {
    #people_interview .photo {
      margin: 60px 0; } }
#people_interview .frame {
  margin: 0 -5vw 30px 5vw;
  padding: 20px 5vw 20px 5vw;
  background: #fff; }
  @media (min-width: 768px) {
    #people_interview .frame {
      margin: 0px 0 40px 40px;
      padding: 30px; } }

/*------------------------------------------*/
#people_comment {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #people_comment {
      padding: 80px 0; } }
  #people_comment h2 {
    margin: 0;
    position: relative; }
    #people_comment h2 img {
      height: 100px;
      object-fit: contain;
      object-position: left top; }
      @media (min-width: 768px) {
        #people_comment h2 img {
          height: 160px; } }
  #people_comment .frame {
    border: 5px solid #000;
    background: #fff;
    margin: -20px 0 0 5vw;
    padding: 25px 5vw 20px 5vw; }
    @media (min-width: 768px) {
      #people_comment .frame {
        border-width: 10px;
        margin: -30px 0 0 40px;
        padding: 40px 30px 30px; } }
    #people_comment .frame p {
      margin: 0; }

/*------------------------------------------*/
.anchor {
  margin: 10vw 0 5vw;
  position: relative;
  z-index: 2; }
  @media (min-width: 768px) {
    .anchor {
      margin: 80px 0 0; } }
  .anchor ul {
    margin: -30px 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    .anchor ul li {
      margin: 30px 0 0;
      padding: 0;
      list-style: none;
      width: calc(50% - 2vw); }
      @media (min-width: 768px) {
        .anchor ul li {
          width: calc((100% - 45px) / 4); } }
    .anchor ul a {
      display: block;
      position: relative;
      padding: 0 0 10px 0;
      border-bottom: 3px solid #000;
      font-size: 1px; }
      @media (min-width: 768px) {
        .anchor ul a {
          border-bottom-width: 5px; } }
      .anchor ul a:hover {
        opacity: .7; }
      .anchor ul a::after {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        top: 0;
        right: 0;
        background: url(../images/arrow.svg) no-repeat center center/contain; }
        @media (min-width: 768px) {
          .anchor ul a::after {
            width: 22px;
            height: 22px; } }
      .anchor ul a img {
        height: 16px;
        vertical-align: top; }
        @media (min-width: 768px) {
          .anchor ul a img {
            height: 22px; } }

/*------------------------------------------*/
.page-others h2 {
  font-size: 1px;
  margin: 0 0 20px; }
  @media (min-width: 768px) {
    .page-others h2 {
      margin: 0 0 30px; } }
  .page-others h2 img {
    height: 20px; }
    @media (min-width: 768px) {
      .page-others h2 img {
        height: 30px; } }
.page-others section {
  padding: calc(5vw + 45px) 0 5vw;
  margin: -45px 0 0; }
  @media (min-width: 768px) {
    .page-others section {
      padding: 160px 0 0;
      margin: -80px 0 0; } }
.page-others .frame {
  border: 5px solid #000;
  padding: 5vw; }
  @media (min-width: 768px) {
    .page-others .frame {
      border-width: 10px;
      padding: 60px; } }
  .page-others .frame h3 {
    display: table;
    line-height: 1.2;
    font-size: 1px;
    margin: 0 0 20px;
    padding: 0 0 5px;
    border-bottom: 3px solid #000;
    font-size: 20px;
    font-weight: bold; }
    @media (min-width: 768px) {
      .page-others .frame h3 {
        font-size: 20px;
        border-bottom-width: 5px;
        padding: 0 0 8px;
        margin: 0 0 30px; } }
.page-others ul.note {
  margin: 10px 0 0 0;
  padding: 0; }
  @media (min-width: 768px) {
    .page-others ul.note {
      margin: 20px 0 0; } }
  .page-others ul.note li {
    margin: 0;
    padding: 0 0 0 1em;
    list-style: none;
    text-indent: -1em;
    font-size: 12px; }
    @media (min-width: 768px) {
      .page-others ul.note li {
        font-size: 14px; } }

/*------------------------------------------*/
#outline dl,
#flow dl,
#company dl {
  margin: 0;
  padding: 0; }
  #outline dl > div,
  #flow dl > div,
  #company dl > div {
    margin: 0 0 15px; }
    @media (min-width: 768px) {
      #outline dl > div,
      #flow dl > div,
      #company dl > div {
        margin-bottom: 30px; } }
    #outline dl > div:last-child,
    #flow dl > div:last-child,
    #company dl > div:last-child {
      margin: 0; }
    @media (min-width: 768px) {
      #outline dl > div,
      #flow dl > div,
      #company dl > div {
        display: flex;
        justify-content: space-between; } }
  #outline dl dt,
  #flow dl dt,
  #company dl dt {
    margin: 0 0 5px;
    padding: 0;
    font-weight: bold; }
    @media (min-width: 768px) {
      #outline dl dt,
      #flow dl dt,
      #company dl dt {
        width: 150px;
        margin: 0; } }
  #outline dl dd,
  #flow dl dd,
  #company dl dd {
    margin: 0;
    padding: 0;
    line-height: 1.4; }
    @media (min-width: 768px) {
      #outline dl dd,
      #flow dl dd,
      #company dl dd {
        width: calc(100% - 150px);
        line-height: 2; } }
    #outline dl dd ul,
    #flow dl dd ul,
    #company dl dd ul {
      margin: -5px 0 0;
      padding: 0; }
      #outline dl dd ul li,
      #flow dl dd ul li,
      #company dl dd ul li {
        margin: 10px 0 0;
        padding: 0;
        list-style: none; }
    #outline dl dd a[target="_blank"],
    #flow dl dd a[target="_blank"],
    #company dl dd a[target="_blank"] {
      text-decoration: none;
      display: inline-block;
      padding: 0 15px 0 0;
      background: url(../images/external.svg) no-repeat center right/11px; }

/*------------------------------------------*/
#flow .lead {
  margin: 0 0 5vw; }
  @media (min-width: 768px) {
    #flow .lead {
      margin: 0  0 30px;
      display: flex;
      column-gap: 80px;
      align-items: center; } }
  #flow .lead p {
    font-weight: bold; }
    @media (min-width: 768px) {
      #flow .lead p {
        margin: 0; } }
@media (min-width: 768px) {
  #flow .grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: min(120px, 10vw); }
    #flow .grid::before {
      content: "";
      width: 0;
      position: absolute;
      top: 30px;
      left: 50%;
      bottom: 0;
      border-right: 1px dashed #000; } }
#flow .grid .col {
  border-top: 1px dashed #000;
  margin-top: 15px; }
  @media (min-width: 768px) {
    #flow .grid .col {
      border: none;
      margin: 0; } }
  @media (max-width: 1050px) {
    #flow .grid .col dl > div {
      display: block; }
      #flow .grid .col dl > div dt, #flow .grid .col dl > div dd {
        width: auto; } }
#flow .grid strong {
  display: block;
  margin: 15px 0 15px; }
  @media (min-width: 768px) {
    #flow .grid strong {
      margin: 30px 0; } }

/*------------------------------------------*/
#faq dl {
  margin: 0 0 20px;
  padding: 0; }
  @media (min-width: 768px) {
    #faq dl {
      margin-bottom: 50px; } }
  #faq dl:last-child {
    margin: 0; }
  #faq dl > div {
    margin: 0 0 15px; }
    #faq dl > div:last-child {
      margin: 0; }
  #faq dl dt {
    margin: 0;
    padding: 10px 25px 10px 25px;
    line-height: 1.4;
    font-weight: bold;
    position: relative;
    background: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer; }
    @media (min-width: 768px) {
      #faq dl dt {
        padding: 15px 50px 15px 60px;
        font-size: 20px; } }
    #faq dl dt::before {
      content: "";
      background: url(../images/q.png) no-repeat center center/contain;
      width: 10px;
      height: 15px;
      position: absolute;
      top: 15px;
      left: 10px; }
      @media (min-width: 768px) {
        #faq dl dt::before {
          width: 19px;
          height: 31px;
          top: 13px;
          left: 30px; } }
    #faq dl dt::after {
      content: "";
      background: url(../images/open.png) no-repeat center center/contain;
      width: 6.5px;
      height: 6.5px;
      position: absolute;
      top: 19px;
      right: 10px; }
      @media (min-width: 768px) {
        #faq dl dt::after {
          width: 13px;
          height: 13px;
          top: 20px;
          right: 30px; } }
    #faq dl dt.active::after {
      background-image: url(../images/close.png); }
  #faq dl dd {
    display: none;
    margin: 0;
    padding: 10px 25px 0 25px;
    line-height: 1.4;
    position: relative; }
    @media (min-width: 768px) {
      #faq dl dd {
        padding: 15px 50px 15px 60px;
        line-height: 2; } }
    #faq dl dd::before {
      content: "";
      background: url(../images/a.png) no-repeat center center/contain;
      width: 10px;
      height: 15px;
      position: absolute;
      top: 13.5px;
      left: 10px; }
      @media (min-width: 768px) {
        #faq dl dd::before {
          width: 19px;
          height: 31px;
          top: 16px;
          left: 30px; } }

/*------------------------------------------*/
#contact {
  padding-bottom: 10vw; }
  @media (min-width: 768px) {
    #contact {
      padding-bottom: 80px; } }
  #contact strong {
    display: block;
    margin: 0 0 10px; }
    @media (min-width: 768px) {
      #contact strong {
        margin: 0  0 20px; } }
  #contact span {
    display: inline-block; }

/*------------------------------------------*/
#crosstalk_index {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #crosstalk_index {
      padding: 80px 0; } }
  #crosstalk_index ul {
    margin: 0 -2vw;
    padding: 0; }
    @media (min-width: 768px) {
      #crosstalk_index ul {
        margin: 0; } }
    #crosstalk_index ul li {
      margin: 0 0 10vw;
      padding: 0;
      list-style: none;
      text-align: center; }
      @media (min-width: 768px) {
        #crosstalk_index ul li {
          margin: 0 0 80px; } }
      #crosstalk_index ul li:last-child {
        margin: 0; }
    #crosstalk_index ul a {
      position: relative;
      display: block; }
      #crosstalk_index ul a .more {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 270px; }
        #crosstalk_index ul a .more .hover {
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          transition: .5s; }
      #crosstalk_index ul a:hover {
        filter: brightness(1.1); }
        #crosstalk_index ul a:hover .more .hover {
          opacity: 1; }

/*------------------------------------------*/
#talktitle {
  padding: 10vw 0 0; }
  @media (min-width: 768px) {
    #talktitle {
      padding: 80px 0 0; } }
  #talktitle h1 {
    margin: 0 -5vw;
    padding: 0; }
    @media (min-width: 768px) {
      #talktitle h1 {
        margin: 0; } }

/*------------------------------------------*/
.talk_content {
  padding: 10vw 0 0; }
  @media (min-width: 768px) {
    .talk_content {
      padding: 80px 0 0; } }
  .talk_content h2 {
    margin: 0 0 20px;
    padding: 0 0 0 15px;
    line-height: 1.6;
    font-weight: bold;
    position: relative;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer; }
    @media (min-width: 768px) {
      .talk_content h2 {
        padding: 0 0 0 23px;
        margin: 0 0 40px;
        font-size: 24px; } }
    .talk_content h2::before {
      content: "";
      background: url(../images/q.png) no-repeat center center/contain;
      width: 10px;
      height: 15px;
      position: absolute;
      top: 7px;
      left: 0px; }
      @media (min-width: 768px) {
        .talk_content h2::before {
          width: 14px;
          height: 25px;
          top: 7px; } }
  .talk_content .photo {
    margin: 10vw -5vw 10vw 0; }
    @media (min-width: 768px) {
      .talk_content .photo {
        margin: 80px 0; } }
  .talk_content ul {
    margin: 0 0 30px;
    padding: 0; }
    @media (min-width: 768px) {
      .talk_content ul {
        margin: 0 0 50px; } }
    .talk_content ul li {
      margin: 0 0 20px;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: space-between; }
      @media (min-width: 768px) {
        .talk_content ul li {
          margin: 0 0 30px; } }
      .talk_content ul li figure {
        width: 50px; }
        @media (min-width: 768px) {
          .talk_content ul li figure {
            width: 80px; } }
        .talk_content ul li figure figcaption {
          text-align: center;
          font-weight: bold;
          font-size: 12px;
          letter-spacing: 0;
          line-height: 1.2;
          margin-top: 8px; }
          @media (min-width: 768px) {
            .talk_content ul li figure figcaption {
              font-size: 14px; } }
      .talk_content ul li .text {
        width: calc(100% - 65px); }
        @media (min-width: 768px) {
          .talk_content ul li .text {
            width: calc(100% - 105px); } }
        .talk_content ul li .text p {
          margin: 0 0 10px; }
          .talk_content ul li .text p:last-child {
            margin: 0; }

/*------------------------------------------*/
#crosstalk_recommend {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #crosstalk_recommend {
      padding: 80px 0; } }
  #crosstalk_recommend h2 {
    font-size: 1px;
    margin: 0 0 20px; }
    @media (min-width: 768px) {
      #crosstalk_recommend h2 {
        margin: 0 0 30px; } }
    #crosstalk_recommend h2 img {
      height: 20px; }
      @media (min-width: 768px) {
        #crosstalk_recommend h2 img {
          height: 28px; } }
  #crosstalk_recommend ul {
    margin: 0;
    padding: 0; }
    @media (min-width: 768px) {
      #crosstalk_recommend ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; } }
    #crosstalk_recommend ul li {
      margin: 0 0 20px;
      padding: 0;
      list-style: none; }
      @media (min-width: 768px) {
        #crosstalk_recommend ul li {
          width: calc(50% - 7.5px);
          margin: 0; } }
      #crosstalk_recommend ul li:last-child {
        margin: 0; }
      #crosstalk_recommend ul li a {
        display: block;
        overflow: hidden; }
        #crosstalk_recommend ul li a .more {
          float: right;
          margin: 15px 0 0;
          width: 270px;
          position: relative; }
          #crosstalk_recommend ul li a .more .hover {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            transition: .5s; }
        #crosstalk_recommend ul li a:hover {
          filter: brightness(1.1); }
          #crosstalk_recommend ul li a:hover .more .hover {
            opacity: 1; }

/*------------------------------------------*/
#project_index {
  padding: 10vw 0; }
  @media (min-width: 768px) {
    #project_index {
      padding: 80px 0; } }
  #project_index ul {
    margin: 0 -2vw;
    padding: 0; }
    @media (min-width: 768px) {
      #project_index ul {
        margin: 0; } }
    #project_index ul li {
      margin: 0 0 10vw;
      padding: 0;
      list-style: none;
      text-align: center; }
      @media (min-width: 768px) {
        #project_index ul li {
          margin: 0 0 80px; } }
      #project_index ul li.bnr {
        margin-top: 13vw; }
        @media (min-width: 768px) {
          #project_index ul li.bnr {
            margin-top: 120px; } }
      #project_index ul li:last-child {
        margin-bottom: 0; }
    #project_index ul a {
      position: relative;
      display: block; }
      #project_index ul a .more {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 270px;
        max-width: 36%; }
        #project_index ul a .more .hover {
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          transition: .5s; }
      #project_index ul a:hover .more .hover {
        opacity: 1; }

/*------------------------------------------*/
#project_title {
  padding: 5vw 0 10vw 0; }
  @media (min-width: 768px) {
    #project_title {
      padding: 80px 0; } }
  #project_title h1 {
    font-size: 1px;
    margin: 0; }

/*------------------------------------------*/
#project_data {
  padding: 0 0 10vw 0; }
  @media (min-width: 768px) {
    #project_data {
      padding: 0 0 80px 0; } }
  #project_data .frame {
    border: 5px solid #000;
    padding: 5vw;
    margin: 0; }
    @media (min-width: 768px) {
      #project_data .frame {
        border-width: 10px;
        padding: 35px 40px;
        margin: 0; } }
    .project1 #project_data .frame img {
      max-height: 150px; }
      @media (min-width: 768px) {
        .project1 #project_data .frame img {
          max-height: 135px; } }
    .project2 #project_data .frame img {
      max-height: 118px; }
      @media (min-width: 768px) {
        .project2 #project_data .frame img {
          max-height: 114px; } }
    #project_data .frame p {
      margin: 10px 0 0; }
      @media (min-width: 768px) {
        #project_data .frame p {
          margin-top: 15px; } }

/*------------------------------------------*/
#project_movie {
  padding: 0 0 10vw 0; }
  @media (min-width: 768px) {
    #project_movie {
      padding: 0 0 80px 0; } }

/*------------------------------------------*/
#project_talk {
  padding: 0 0 10vw 0; }
  @media (min-width: 768px) {
    #project_talk {
      padding: 0 0 80px 0; } }
  #project_talk .frame {
    border: 5px solid #000;
    padding: 5vw;
    background: #fff;
    margin: 0 0 10vw; }
    @media (min-width: 768px) {
      #project_talk .frame {
        border-width: 10px;
        padding: 20px 30px;
        margin: 0 0 50px; } }
  #project_talk .member {
    margin: 0 0 10vw; }
    @media (min-width: 768px) {
      #project_talk .member {
        margin: 0 0 80px; } }
    #project_talk .member img {
      width: 100%; }

/*------------------------------------------*/
ul.random li {
  display: none; }
  ul.random li:nth-of-type(-n + 4) {
    display: block;
    opacity: 0; }
ul.random.sorted li:nth-of-type(-n + 4) {
  opacity: 1; }

/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/