@charset "UTF-8";
body {
  background-color: #122a88; }

.btnMore {
  display: inline-block;
  color: #FFF;
  text-align: center;
  font-size: 100%;
  border: 2px solid #FFF;
  border-radius: 100px;
  letter-spacing: .1em;
  vertical-align: middle;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  margin-top: 24px; }
  .btnMore:hover {
    background-color: #f2c700;
    color: #031350; }
  .btnMore::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f105";
    margin-left: 16px;
    color: #FFF;
    font-size: 120%;
    line-height: 1;
    vertical-align: middle; }

/*________________________________________________________

	メインイメージ
	________________________________________________________
*/
.main-visual {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  color: #FFF;
  text-align: center;
  text-shadow: #666 2px 2px 2px; }
  .main-visual .din {
    font-family: 'Lato'; }
  .main-visual .scrollDown {
    font-size: 80%;
    z-index: 10; }
    .main-visual .scrollDown::before {
      display: block;
      font-size: 400%;
      line-height: 1;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: '\f103'; }
  @media only screen and (min-width: 750px) {
    .main-visual {
      height: 720px; }
      .main-visual .brand-text .din {
        margin: 200px 0 72px 0;
        font-size: 600%;
        line-height: 1.1; }
      .main-visual .brand-text .ja {
        font-size: 150%;
        letter-spacing: .2em; }
      .main-visual .brand-text .scrollDown {
        margin-top: 160px; } }
  @media only screen and (max-width: 749px) {
    .main-visual {
      height: 320px; }
      .main-visual .din {
        margin: 40px 0 24px 0;
        font-size: 250%;
        line-height: 1.2;
        font-weight: bold; } }

@media only screen and (min-width: 1200px) {
  #container .main-visual {
    height: 800px; } }

.bg-video {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  margin: auot;
  z-index: -100;
  opacity: .6;
  background: url(../img/top/bg_main.jpg) center center no-repeat;
  background-size: cover; }

.topMain {
  color: #FFF; }
  .topMain a {
    color: #FFF; }
  .topMain section {
    background-size: cover;
    text-align: center; }
  .topMain h2 {
    border-bottom: 1px solid #FFF; }
  .topMain h3::after {
    background-color: #FFF; }
  @media only screen and (min-width: 750px) {
    .topMain h2 {
      margin: 40px auto; } }

/*________________________________________________________

	ABOUT
	________________________________________________________
*/
@media only screen and (min-width: 750px) {
  .about {
    padding: 1px 0 80px 0; }
    .about p {
      margin: 24px 0;
      font-size: 200%;
      letter-spacing: .1em; } }

@media only screen and (min-width: 750px) {
  .about {
    background: url(../img/top/bg_about.jpg) bottom right no-repeat; } }

@media only screen and (max-width: 749px) {
  .about {
    padding: 8px 0 32px 0;
    background: url(../img/top/bg_about_sp.jpg) bottom right no-repeat; } }

/*________________________________________________________

	NEWS
	________________________________________________________
*/
.news {
  background: url(../img/top/bg_news.jpg) bottom right no-repeat;
  /* SNS */ }
  .news .newsList li {
    border-bottom: 1px solid #c1cfe2;
    text-align: left;
    list-style: none; }
    .news .newsList li a {
      display: block;
      line-height: 2.3;
      font-size: 110%; }
      .news .newsList li a span {
        display: block;
        font-size: 90%; }
        .news .newsList li a span strong {
          display: inline-block;
          margin-left: 8px;
          padding: 2px 12px;
          letter-spacing: .1em;
          line-height: 1.2;
          font-size: 85%;
          font-weight: normal;
          border: 1px solid #FFF; }
  .news .sns .snsBox {
    width: 100%;
    height: 220px;
    background-color: #FFF;
    overflow-y: scroll; }
  .news .sns .facebook {
    background-color: #4b72ba; }
  .news .sns .twitter {
    background-color: #1fa0e4; }
  .news .sns .instagram {
    background: -webkit-linear-gradient(305deg, #fa9411 10%, #C92BB7 70%) no-repeat;
    background: -o-linear-gradient(305deg, #fa9411 10%, #C92BB7 70%) no-repeat;
    background: linear-gradient(145deg, #fa9411 10%, #C92BB7 70%) no-repeat; }
    .news .sns .instagram ul {
      padding-top: 16px; }
    .news .sns .instagram li {
      display: inline-block;
      width: 88px;
      height: 88px;
      margin: 0 4px 4px 0; }
      .news .sns .instagram li:nth-child(3n) {
        margin-right: 0; }
      .news .sns .instagram li a {
        display: block;
        width: 88px;
        height: 88px; }
        .news .sns .instagram li a img {
          width: 100%;
          height: auto; }
  .news .sns .sns_bnr a {
    display: block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s; }
    .news .sns .sns_bnr a img {
      width: 100%; }
    .news .sns .sns_bnr a:hover {
      -webkit-filter: brightness(120%);
      filter: brightness(120%); }
  @media only screen and (min-width: 750px) {
    .news {
      padding: 16px 0 80px 0; }
      .news ul.newsList {
        width: 720px;
        margin: 0 auto 24px auto; }
        .news ul.newsList a {
          padding: 16px; }
      .news h3 {
        font-family: 'Lato'; }
      .news .sns {
        width: 1024px;
        margin: 56px auto 0px auto; }
      .news .facebook, .news .twitter, .news .instagram {
        display: inline-block;
        width: 29.5%;
        padding: 24px 16px 16px 16px; }
      .news .sns_bnr {
        display: inline-block;
        width: 29.5%;
        margin: 16px 8px 0px 8px; } }
  @media only screen and (max-width: 749px) {
    .news {
      padding: 8px 8px 32px 8px; }
      .news ul {
        margin-bottom: 8px; }
        .news ul li a {
          padding: 8px;
          font-size: 90%; }
      .news .sns {
        margin-top: 40px; }
      .news .facebook, .news .twitter, .news .instagram {
        margin-bottom: 8px;
        padding: 24px 8px 8px; } }

/*________________________________________________________

	FLOW
	________________________________________________________
*/
.flow {
  background: url(../img/top/bg_flow.jpg) bottom right no-repeat; }
  .flow .flowBox {
    position: relative;
    padding: 48px 8px 10px 8px;
    border: 1px solid #FFF;
    background-color: #FFF; }
    .flow .flowBox span {
      position: absolute;
      display: block;
      top: -40px;
      left: 0;
      right: 0;
      margin: auto;
      padding: 16px 0;
      width: 72px;
      border-radius: 100px;
      font-size: 85%;
      line-height: 1;
      -webkit-box-shadow: 2px 2px 0px rgba(30, 30, 30, 0.2);
      box-shadow: 2px 2px 0px rgba(30, 30, 30, 0.2); }
      .flow .flowBox span strong {
        display: block;
        font-size: 250%;
        font-weight: normal; }
    .flow .flowBox.step1 h4 {
      color: #1d9b3b; }
    .flow .flowBox.step1 span {
      background-color: #7cae88; }
    .flow .flowBox.step2 h4 {
      color: #34949f; }
    .flow .flowBox.step2 span {
      background-color: #7ca9ae; }
    .flow .flowBox.step3 h4 {
      color: #2d6dc1; }
    .flow .flowBox.step3 span {
      background-color: #7b99c1; }
    .flow .flowBox.step4 h4 {
      color: #9b3fac; }
    .flow .flowBox.step4 span {
      background-color: #a67cae; }
    .flow .flowBox.step5 h4 {
      color: #aa3d53; }
    .flow .flowBox.step5 span {
      background-color: #ae7c86; }
    .flow .flowBox.step6 h4 {
      color: #aa5b3f; }
    .flow .flowBox.step6 span {
      background-color: #ae897c; }
    .flow .flowBox.step7 h4 {
      color: #ab9c19; }
    .flow .flowBox.step7 span {
      background-color: #aea97c; }
    .flow .flowBox h4 {
      font-weight: normal;
      letter-spacing: .2em; }
    .flow .flowBox p {
      font-size: 90%;
      line-height: 2;
      color: #031350;
      text-align: left; }
  @media only screen and (min-width: 750px) {
    .flow {
      padding: 8px 0 80px 0; }
      .flow .flowWrapper {
        width: 1024px;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .flow .flowWrapper .flowBox {
          margin: 40px 8px 24px 16px;
          width: 232px;
          min-height: 240px; }
          .flow .flowWrapper .flowBox.step1 h4, .flow .flowWrapper .flowBox.step5 h4, .flow .flowWrapper .flowBox.step7 h4 {
            padding: 18px 0; }
          .flow .flowWrapper .flowBox::before {
            position: absolute;
            left: -18px;
            top: 0;
            bottom: 0;
            width: 0px;
            height: 0px;
            margin: auto;
            content: '';
            border-color: #FFF;
            border-style: solid;
            border-width: 17px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            opacity: .6; }
          .flow .flowWrapper .flowBox.step1 {
            margin-left: 132px; }
          .flow .flowWrapper .flowBox.step1::before {
            border: none; }
          .flow .flowWrapper .flowBox.step3::after {
            position: absolute;
            right: -35px;
            top: 0;
            bottom: 0;
            width: 0px;
            height: 0px;
            margin: auto;
            content: '';
            border-color: #FFF;
            border-style: solid;
            border-width: 17px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            opacity: .6; } }
  @media only screen and (max-width: 749px) {
    .flow {
      padding: 8px 0 40px 0; }
      .flow .flowBox {
        margin: 64px 16px 0 16px; }
        .flow .flowBox::after {
          position: absolute;
          left: 0;
          right: 0;
          bottom: -34px;
          width: 0px;
          height: 0px;
          margin: auto;
          content: '';
          border-color: #FFF;
          border-style: solid;
          border-width: 17px;
          border-left-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
          opacity: .6; }
        .flow .flowBox.step7::after {
          border: none; } }