@charset "UTF-8";
/* ==================================
レスポンシブ設計
===================================*/
.pc {
  display: block; }
  @media screen and (max-width: 897px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 897px) {
    .sp {
      display: block; } }

.inner {
  max-width: 1140px;
  margin: auto; }

/* ================================
BASE
================================ */
.wrapper {
  max-width: 1140px;
  margin: auto;
  font-size: 1.7rem;
  line-height: 1.7; }
  @media screen and (max-width: 897px) {
    .wrapper {
      font-size: 1.5rem;
      line-height: 1.6; } }
  .wrapper img {
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    width: 100%; }
  .wrapper a:hover {
    opacity: 0.6; }

/* ================================
mainview
================================ */
.mainview {
  text-align: center;
  max-width: 1600px;
  margin: auto; }
  @media screen and (max-width: 897px) {
    .mainview {
      padding: 30px 0 0 0;
      margin: 0 20px; } }
  .mainview__box .img img {
    width: 100%; }
  .mainview__caution {
    text-align: center;
    font-size: 2.0rem;
    line-height: 2.0;
    font-weight: 700;
    margin: 0 0 60px 0;
    padding: 30px;
    border: 2px solid #0899e0;
    background: #FFF2F2;
    border-radius: 15px; }
    @media screen and (max-width: 897px) {
      .mainview__caution {
        text-align: left;
        font-size: 1.8rem;
        padding: 15px;
        margin: 0 0 30px 0; } }

/* ================================
theme
================================ */
.theme {
  padding: 90px 0; }
  @media screen and (max-width: 897px) {
    .theme {
      padding: 40px 20px; } }
  .theme__headline {
    text-align: center;
    padding: 0 0 60px 0; }
    @media screen and (max-width: 897px) {
      .theme__headline {
        padding: 0 0 20px 0; } }
    .theme__headline span {
      color: #ccc;
      font-size: 3.0rem;
      font-weight: 700; }
      @media screen and (max-width: 897px) {
        .theme__headline span {
          font-size: 2.5rem; } }
    .theme__headline h2 {
      font-size: 1.8rem; }
  .theme__box .img {
    text-align: center; }
    .theme__box .img h3 {
      font-size: 3.2rem;
      padding: 0 0 15px 0; }
      @media screen and (max-width: 897px) {
        .theme__box .img h3 {
          font-size: 2.5rem; } }
    .theme__box .img ul {
      display: flex;
      justify-content: center; }
      @media screen and (max-width: 897px) {
        .theme__box .img ul {
          justify-content: space-between; } }
      .theme__box .img ul li {
        padding: 0 10px; }
        @media screen and (max-width: 897px) {
          .theme__box .img ul li {
            padding: 0; } }
  .theme__box .txt {
    padding: 20px 0;
    text-align: center; }
    @media screen and (max-width: 897px) {
      .theme__box .txt {
        padding: 10px 0;
        text-align: left; } }
    .theme__box .txt p span {
      font-weight: 700;
      background: linear-gradient(transparent 60%, #ff6 60%); }
  .theme__box .date {
    margin: auto;
    font-weight: 600;
    text-align: center; }
    .theme__box .date .inbox {
      display: flex;
      justify-content: center;
      align-items: center; }
    .theme__box .date__ttl {
      border: 1px solid #eee;
      padding: 15px 30px;
      background: #222;
      color: #fff;
      letter-spacing: 0.2rem; }
      @media screen and (max-width: 897px) {
        .theme__box .date__ttl {
          padding: 15px; } }
    .theme__box .date__num {
      border: 1px solid #eee;
      padding: 14px 30px;
      background: #f7f7f7; }
      @media screen and (max-width: 897px) {
        .theme__box .date__num {
          padding: 14px 15px; } }
      .theme__box .date__num span {
        font-size: 2.6rem;
        line-height: 1; }
        @media screen and (max-width: 897px) {
          .theme__box .date__num span {
            font-size: 2.2rem; } }

/* ================================
terms
================================ */
.terms {
  padding: 90px 0 30px 0;
  border-top: 1px solid #DEDEDE; }
  @media screen and (max-width: 897px) {
    .terms {
      padding: 30px 20px 20px 20px; } }
  .terms__headline {
    text-align: center;
    padding: 0 0 60px 0; }
    @media screen and (max-width: 897px) {
      .terms__headline {
        padding: 0 0 38px 0; } }
    .terms__headline span {
      color: #ccc;
      font-size: 3.0rem;
      font-weight: 700; }
      @media screen and (max-width: 897px) {
        .terms__headline span {
          font-size: 2.5rem; } }
    .terms__headline h2 {
      font-size: 1.8rem; }
  .terms__box {
    max-width: 900px;
    margin: 0 auto 60px auto; }
    @media screen and (max-width: 897px) {
      .terms__box {
        margin: 0 auto 30px auto; } }
    .terms__box h3 {
      font-weight: 700;
      text-align: center;
      margin: 0 0 45px 0; }
      @media screen and (max-width: 897px) {
        .terms__box h3 {
          margin: 0 0 25px 0; } }
      .terms__box h3 span {
        border-bottom: 3px double #222; }
        @media screen and (max-width: 897px) {
          .terms__box h3 span {
            font-size: 1.7rem; } }
    .terms__box ul li {
      position: relative;
      padding-left: 25px; }
      .terms__box ul li::before {
        content: "〇";
        position: absolute;
        left: 0;
        top: 0; }
      .terms__box ul li:not(:last-of-type) {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #E4E4E4; }
        @media screen and (max-width: 897px) {
          .terms__box ul li:not(:last-of-type) {
            padding-bottom: 10px;
            margin-bottom: 10px; } }
      .terms__box ul li ol {
        margin: 15px 0 10px 0;
        background: #F7F7F7;
        border-radius: 10px;
        padding: 15px; }
        @media screen and (max-width: 897px) {
          .terms__box ul li ol {
            padding: 10px; } }
        .terms__box ul li ol li {
          font-size: 1.6rem !important;
          border-bottom: none !important;
          padding: 0 0 5px 0;
          margin: 0; }
          @media screen and (max-width: 897px) {
            .terms__box ul li ol li {
              font-size: 1.4rem !important; } }
          .terms__box ul li ol li::before {
            content: ""; }
          .terms__box ul li ol li:not(:last-of-type) {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: none; }
  .terms .caution2 {
    margin: -30px auto 0 auto;
    max-width: 900px;
    text-align: right; }
    .terms .caution2 p {
      text-align: left;
      padding: 15px;
      font-size: 1.5rem;
      display: inline-block;
      background: #f4f4f4;
      border-radius: 10px; }

/* ================================
flow 
================================ */
#flow {
  border-top: 1px solid #DEDEDE;
  position: relative;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding-top: 90px; }
  @media screen and (max-width: 897px) {
    #flow {
      max-width: inherit;
      padding: 40px 20px; } }
  #flow .flow__headline {
    text-align: center;
    padding: 0 0 60px 0; }
    @media screen and (max-width: 897px) {
      #flow .flow__headline {
        margin-bottom: 38px; } }
    #flow .flow__headline span {
      color: #ccc;
      font-size: 3.0rem;
      font-weight: 700; }
    #flow .flow__headline h2 {
      font-size: 1.8rem; }
  #flow .timeline-start {
    display: table;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 15px 23px;
    color: #fff;
    max-width: 5%;
    width: 100%;
    text-align: center;
    margin: 0 auto; }
  #flow .timeline-end {
    display: table;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    background: #0899e0;
    padding: 15px 23px;
    color: #fff;
    max-width: 5%;
    width: 100%;
    text-align: center;
    margin: 0 auto; }
  #flow .flow-center-line {
    position: absolute;
    width: 1px;
    height: 90%;
    /*top: 240px;*/
    left: 50%;
    transform: translateX(-50%);
    background: #ccc;
    z-index: -1; }

.timeline-article {
  width: 1140px;
  position: relative;
  overflow: hidden;
  padding: 5%;
  margin-bottom: 120px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  @media screen and (max-width: 897px) {
    .timeline-article {
      width: auto;
      padding: 60px 20px 20px;
      display: inherit;
      overflow: visible;
      margin-bottom: 60px; } }
  .timeline-article::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background: #ccc;
    top: 0;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (max-width: 897px) {
      .timeline-article::after {
        content: none; } }
  .timeline-article img {
    object-fit: cover;
    width: auto;
    height: auto;
    max-width: 95%;
    margin: 0 auto; }
    .timeline-article img.pic {
      height: auto;
      display: block; }
  .timeline-article h3 {
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.4; }
    @media screen and (max-width: 897px) {
      .timeline-article h3 {
        font-size: 1.8rem; } }
  .timeline-article .content-left-container {
    max-width: 42%;
    width: 94%; }
    @media screen and (max-width: 897px) {
      .timeline-article .content-left-container {
        max-width: inherit;
        width: auto; } }
  .timeline-article .timeline-author {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #242424;
    text-align: right; }
  .timeline-article .content-left {
    position: relative;
    width: auto; }
  .timeline-article .content-right-container {
    max-width: 42%;
    width: 94%; }
    @media screen and (max-width: 897px) {
      .timeline-article .content-right-container {
        max-width: inherit;
        width: auto; } }
  .timeline-article .content-right {
    position: relative;
    width: auto; }
  .timeline-article p {
    padding: 0;
    font-weight: 400;
    color: #242424;
    font-size: 14px;
    line-height: 24px;
    position: relative; }
    .timeline-article p span.article-number {
      position: absolute;
      font-weight: 300;
      font-size: 44px;
      top: 10px;
      left: -60px;
      color: #0899e0; }
    .timeline-article p .att {
      font-size: 1rem; }
  .timeline-article .meta-date {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    color: #fff;
    border-radius: 100%;
    z-index: 1; }
    @media screen and (max-width: 897px) {
      .timeline-article .meta-date {
        top: -20px;
        transform: translateX(-50%);
        width: 70px;
        height: 70px; } }
    .timeline-article .meta-date img {
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .timeline-article .meta-date .date {
      display: block;
      text-align: center;
      font-weight: 900;
      font-size: 30px;
      line-height: 40px; }
    .timeline-article .meta-date .month {
      display: block;
      text-align: center;
      font-weight: 900;
      font-size: 18px;
      line-height: 10px; }

#flow-01 {
  background-color: #f7f7f7; }
  #flow-01 img {
    object-fit: cover;
    width: auto;
    height: auto;
    max-width: 95%; }
    #flow-01 img.pic {
      max-width: 230px;
      height: auto;
      margin: 0 auto;
      display: block; }
      @media screen and (max-width: 897px) {
        #flow-01 img.pic {
          max-width: 150px;
          margin-top: 30px; } }

#flow-02 {
  overflow: inherit;
  margin-top: 150px;
  position: relative;
  flex-direction: row-reverse; }
  @media screen and (max-width: 897px) {
    #flow-02 {
      margin-top: 38px;
      background-color: #f7f7f7; } }
  #flow-02::before {
    content: "";
    display: inline-block;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #f7f7f7;
    border-radius: 20px;
    transform: translate(-50%, -50%); }
    @media screen and (max-width: 897px) {
      #flow-02::before {
        content: none; } }
  #flow-02 .content-right-container {
    position: relative; }
  #flow-02 img.pic {
    max-width: 441px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    @media screen and (max-width: 897px) {
      #flow-02 img.pic {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: 100%; } }

@media screen and (max-width: 897px) {
  #flow-03 {
    background-color: #f7f7f7; } }
#flow-03 img {
  object-fit: cover;
  width: auto;
  height: auto;
  max-width: 95%; }
  #flow-03 img.pic {
    max-width: 390px;
    height: auto;
    margin: 0 auto;
    display: block; }
    @media screen and (max-width: 897px) {
      #flow-03 img.pic {
        max-width: inherit;
        width: 100%; } }
#flow-03 .sns_tag {
  background-image: url("../img/flow-03_txt_bg.png");
  background-size: 100% 100%;
  padding: 45px;
  margin: 30px 0; }
  @media screen and (max-width: 897px) {
    #flow-03 .sns_tag {
      padding: 15px; } }
  #flow-03 .sns_tag p {
    font-weight: 600;
    font-size: 1.5rem; }
    #flow-03 .sns_tag p + p {
      margin-top: 5px; }
#flow-03 .txt {
  text-align: center; }

#flow-04 {
  overflow: inherit;
  position: relative;
  flex-direction: row-reverse;
  background-color: #f2f2f2; }
  #flow-04 .content-right-container {
    position: relative; }
  #flow-04 img.pic {
    max-width: 188px;
    height: auto;
    margin: 0 auto;
    display: block; }
    @media screen and (max-width: 897px) {
      #flow-04 img.pic {
        max-width: 120px;
        margin-top: 30px; } }

/*
@media only screen and (max-width: 830px) {
	#conference-timeline {
		.timeline-start {
			margin: 0;
		}
		.timeline-end {
			margin: 0;
		}
		.conference-center-line {
			margin-left: 0;
			left: 50px;
		}
	}
	.timeline-article {

		.content-left-container {
			max-width: 100%;
			width: auto;
			float: none;
		}
		.content-right-container {
			max-width: 292px;
			width: auto;
			float: none;
			margin-left: 110px;
			min-height: 53px;
		}
		.content-left {
			padding: 10px 25px;
			min-height: 65px;
		}
		.content-right {
			padding: 10px 25px;
			min-height: 65px;
			&:before {
				display: none;
			}
		
		}
	}
}
@media only screen and (max-width: 400px) {
	.timeline-article {
		p {
			margin: 0;
			span.article-number {
				display: none;
			}
		}
	}
}*/