@charset "UTF-8";
/* CSS Document */
/* --------------------------------------------------

初期設定

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

hover

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

スマホサイズのフォント指定

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

breakpoint

-------------------------------------------------- */
/* Top Header
--------------------------------------------------*/
#header.mv {
  color: #fff;
  background: transparent;
}
#header.mv .logo-h a {
  color: #fff;
}
#header.mv .function-block .sub-navi li a {
  color: #fff;
}
#header.mv .btn-menu .btn-s div span {
  background-color: #fff;
}
#header.mv .btn-menu .btn-s div span:nth-of-type(2)::after {
  background-color: #fff;
}

/* Top top-news
--------------------------------------------------*/
.top-news-area{
  width: 95%;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.about-news{
  width: 100%;
  position: absolute ;
  top: auto;
  bottom: 85%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.top-news-area.display-none{
  display: none;
}
.top-news dl{
  background: #fff;
  border-radius: 15px;
  padding: 1.5em 3em;
}

.top-news2 dl{
  background: #fff;
  padding: 1.5em 3em;
  border: 1px solid #BF0000;
}
.top-news dl dt,
.top-news2 dl dt{
  font-size: 1.3rem;
  display: inline-block;
  margin-bottom: 1em;
}
.top-news dl dt span,
.top-news2 dl dt span{
  color: #fff;
  background: #BF0000;
  padding: 0 1em;
  margin-bottom: 1em;
}
.top-news dl dd ul li a,
.top-news2 dl dd ul li a{
  font-size: 1.6rem;
  display: block;
  font-weight: normal;
}
.top-news dl dd ul li span,
.top-news2 dl dd ul li span{
  color: #A7A7A7;
  font-size: 1.6rem;
  margin-right: 1em;
}
.top-news dl dd ul li:not(:last-child),
.top-news2 dl dd ul li:not(:last-child){
    margin-bottom: 0.5em;
  }

@media only screen and (max-width: 768px) {

  .about-news{
    width: 95% !important;
  }

  .top-news dl,
  .top-news2 dl{
    padding: 1em 1.5em;
  }
  .top-news dl dt,
  .top-news2 dl dt{
    margin-bottom: 0.5em;
  }
  .top-news dl dd ul li a,
  .top-news2 dl dd ul li a{
    font-size: 1.4rem;
  }
  .top-news dl dd ul li span,
  .top-news2 dl dd ul li span{
    font-size: 1.4rem;
    display: block;
    margin-right: 0;
  }
}






/* Top wrapper
--------------------------------------------------*/
.wrapper {
  padding-top: 0;
}

/* Top Page
--------------------------------------------------*/
.dg.ac {
  display: none;
}

.font_os {
  font-family: "Open Sans", sans-serif;
}

.top_page section {
  position: relative;
}

.top_page .stage {
  height: auto;
}

.top_page .stage #canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #0b0b0b;
}

.top_page .top {
  width: 100%;
  height: 120vh;
  margin-top: -100vh;
}

.top_page .top .maincopy {
  position: fixed;
  bottom: 83px;
  left: 90px;
  z-index: 1;
  pointer-events: none;
}

.top_page .top .maincopy span {
  display: block;
}

.top_page .top .maincopy .en {
  font-size: 9vw;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #fff;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 0.7s cubic-bezier(0.45, 0, 0.55, 1), -webkit-transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
  transition: opacity 0.7s cubic-bezier(0.45, 0, 0.55, 1), -webkit-transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
  transition: opacity 0.7s cubic-bezier(0.45, 0, 0.55, 1), transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
  transition: opacity 0.7s cubic-bezier(0.45, 0, 0.55, 1), transform 0.7s cubic-bezier(0.45, 0, 0.55, 1), -webkit-transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
}

.top_page .top .maincopy.show .en {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.top_page .top .maincopy .ja {
  font-size: 2.9vw;
  line-height: 1.5;
  color: #fff;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s, -webkit-transform 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s;
  transition: opacity 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s, -webkit-transform 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s;
  transition: opacity 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s, transform 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s;
  transition: opacity 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s, transform 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s, -webkit-transform 0.67s cubic-bezier(0.45, 0, 0.55, 1) 0.078s;
}

.top_page .top .maincopy.show .ja {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.top_page .tube {
  width: 100%;
  height: 280vh;
}

.top_page .about {
  width: 100%;
  height: 200vh;
  position: relative;
  color: #2f2f2f;
  padding-top: 100px;
}

@media only screen and (max-width: 768px) {
  .top_page .about {
    padding-top: 80px;
  }
}

.top_page .about .about-news.display-none{
  display: none;
}

.top_page .about .about-news dl{
  padding: 1.5em 0;
  background: unset;
}

.top_page .about .about-news dl dd ul li span{
  display: block;
}

.top_page .about .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 900px;
  height: 100vh;
  position: sticky;
  top: 0;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .top_page .about .container {
    height: 95vh;
  }
}

.top_page .about .right {
  width: 46%;
  margin-right: 20px;
  margin-left: auto;
}

.top_page .about .copy span {
  display: block;
  color: #2f2f2f;
}

.top_page .about .copy .en {
  font-size: 4.7rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.top_page .about .copy .ja {
  font-size: 1.9rem;
  font-weight: 600;
}

.top_page .about .description {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 2.21;
  margin-top: 36px;
}
.top_page .about .btn-block .btn-base {
    color: #fff;
    background: #000;
    padding: 1.1rem 4.4rem;
}

.top_page .other {
  width: 100%;
  height: 300vh;
  background-color: #eee;
}

.top_page .other .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
}

.top_page .other .box p {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
}

.top_page .height {
  position: fixed;
  z-index: -100;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}

.top_page .scroll {
  position: fixed;
  bottom: 8rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  padding-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .top_page .scroll {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 768px) {
  .top_page .scroll {
    display: none !important;
  }
}
.top_page .scroll:after {
  content: "";
  width: 1px;
  height: 5rem;
  display: block;
  position: absolute;
  top: 100%;
  right: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #fff;
  -webkit-animation-name: scrollLine;
          animation-name: scrollLine;
  -webkit-animation-duration: 3.2s;
          animation-duration: 3.2s;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
          animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes scrollLine {
  0% {
    height: 0;
    top: 100%;
  }
  5% {
    height: 0;
    top: 100%;
  }
  45% {
    height: 5rem;
    top: 100%;
  }
  55% {
    height: 5rem;
    top: 100%;
  }
  95% {
    height: 0;
    top: calc(100% + 5rem);
  }
  100% {
    height: 0;
    top: calc(100% + 5rem);
  }
}

@keyframes scrollLine {
  0% {
    height: 0;
    top: 100%;
  }
  5% {
    height: 0;
    top: 100%;
  }
  45% {
    height: 5rem;
    top: 100%;
  }
  55% {
    height: 5rem;
    top: 100%;
  }
  95% {
    height: 0;
    top: calc(100% + 5rem);
  }
  100% {
    height: 0;
    top: calc(100% + 5rem);
  }
}
.top_page .btn-skip {
  position: fixed;
  bottom: 5rem;
  right: 4rem;
  z-index: 10;
}
@media only screen and (max-width: 768px) {
  .top_page .btn-skip {
    display: none !important;
  }
}

.top_page .btn-skip a {
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #FFF;
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5em 1em;
  position: relative;
  z-index:0;
}

.top_page .btn-skip a:hover{
  background: rgba(46, 45, 45, 0.8);
}

/* animation */
.animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  z-index:-1;
}

/* ripples2 */
.ripples2 {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 border-radius: 50%;
 animation: ripples2 2s infinite;
}

@keyframes ripples2 {
 0% {
     width: 0;
     height: 0;
     border: 5px solid rgba(255, 255, 255, 0.8);
 }

 100% {
     width: 300px;
     height: 300px;
     border: 3px solid rgba(108, 192, 229, 0);
 }
}



@media screen and (max-width: 767px) {
  .top_page .top .maincopy {
    left: 35px;
  }
  .top_page .top .maincopy .en {
    font-size: 64px;
    line-height: 1.08;
  }
  .top_page .top .maincopy .ja {
    font-size: 20px;
    margin-top: 20px;
  }
  .top_page .about .container {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .top_page .about .right {
    width: 100%;
    margin-right: 0;
    padding-bottom: 14px;
  }
  .top_page .about .copy {
    text-align: center;
  }
  .top_page .about .copy .en {
    font-size: 48px;
  }
  .top_page .about .description {
    line-height: 1.93;
    margin-top: 31px;
    padding: 0 40px;
  }
  .top_page .about .description br {
    display: none;
  }
}



/* about-area-top */
.about-area-top {
  padding: 20rem 0 5em;
  position: relative;
  background: #edeff2;
  z-index: 1;
}
.about-area-top:before {
  content: "";
  display: block;
  width: 120%;
  height: 20rem;
  position: absolute;
  left: 40%;
  -webkit-transform: translateX(-50%) rotate(-5deg);
          transform: translateX(-50%) rotate(-5deg);
  bottom: -8em;
  background: #edeff2;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .about-area-top {
    padding: 14rem 0 0;
  }
}
.about-area-top .inner {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .about-area-top .inner {
    padding-bottom: 15rem;
  }
}
.about-area-top .inner:before {
  content: "";
  display: block;
  width: 120%;
  height: 120%;
  max-width: 506px;
  max-height: 649px;
  position: absolute;
  bottom: 0;
  right: -20%;
  background: url(../img/top/ph_about.png) no-repeat center bottom/contain;
  z-index: -1;
}
@media only screen and (max-width: 1100px) {
  .about-area-top .inner:before {
    width: 100%;
    height: 100%;
    max-width: 280px;
    max-height: 255px;
    right: -1%;
    top: -5%;
    bottom: auto;
    z-index: 0;
    background-position: right top;
  }
}
@media screen and (max-width: 600px) {
  .about-area-top .inner:before {
    right: -4%;
  }
}
.about-area-top:after {
  content: "";
  display: block;
  width: 120%;
  height: 20rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-5deg);
          transform: translateX(-50%) rotate(-5deg);
  top: -5em;
  background: #fff;
}
@media only screen and (max-width: 768px) {
  .about-area-top .ttl-dot {
    max-width: 57%;
  }
  .about-area-top .ttl-dot > * {
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
  .about-area-top .ttl-dot > * {
    font-size: 2.8rem;
  }
}
.about-area-top .txt-about {
  max-width: 55%;
  line-height: 2;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 1100px) {
  .about-area-top .txt-about {
    max-width: 65%;
  }
}
@media only screen and (max-width: 768px) {
  .about-area-top .txt-about {
    max-width: none;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.about-area-top .list-about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.about-area-top .list-about > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.07);
          box-shadow: 0 3px 16px rgba(0, 0, 0, 0.07);
}
.about-area-top .list-about > li >a {
    padding: 2em 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media only screen and (max-width: 1100px) {
  .about-area-top .list-about > li {
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    width: 47%;
  }
  .about-area-top .list-about > li >a {
    padding: 1em;
  }
}
.about-area-top .list-about > li h3 {
  margin-bottom: 1rem;
}
.about-area-top .list-about > li p {
  font-size: 4.1rem;
  line-height: 1.2;
}
@media only screen and (max-width: 768px) {
  .about-area-top .list-about > li p {
    font-size: 2.6rem;
  }
}
.about-area-top .list-about > li p > span {
  display: block;
}
.about-area-top .list-about > li p strong {
  font-size: 8.8rem;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .about-area-top .list-about > li p strong {
    font-size: 5rem;
  }
}
.about-area-top .list-about > li p strong > span {
  font-size: 3.6rem;
}
@media only screen and (max-width: 768px) {
  .about-area-top .list-about > li p strong > span {
    font-size: 2.8rem;
  }
}
.about-area-top .list-about > li > a > span {
  text-align: center;
  display: block;
  margin-top: auto;
}

/* topics-area-top */
.topics-area-top {
  padding-top: 15rem;
  margin-bottom: 5rem;
  position: relative;
}
.topics-area-top .inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1.2fr 3fr 1fr;
  grid-template-rows: 1.2fr 3fr 1fr;
  -ms-grid-columns: 1.5fr 3fr;
  grid-template-columns: 1.5fr 3fr;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .topics-area-top .inner {
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
.topics-area-top .inner .particle {
  position: absolute;
  width: 1000px;
  top: -600px;
  right: -550px;
  z-index: -2;
}
@media only screen and (max-width: 768px) {
  .topics-area-top .inner .particle {
    width: 700px;
    top: -420px;
    right: -380px;
  }
}
.topics-area-top .ttl-dot {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}
@media only screen and (max-width: 768px) {
  .topics-area-top .ttl-dot {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
  .topics-area-top .ttl-dot > * {
    margin-top: 0;
  }
}
.topics-area-top #news_frame{
    width: 100%;
}
.topics-area-top .tab-article {
  width: 100%;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media only screen and (max-width: 768px) {
  .topics-area-top .tab-article {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
}
.topics-area-top .tab-article > li {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 6rem;
  margin-right: 3%;
}
.topics-area-top .tab-article > li span {
  color: #737373;
  text-align: center;
  display: block;
  cursor: pointer;
}
.topics-area-top .tab-article > li span.active {
  color: #272727;
}
.topics-area-top .list-article,
.topics-area-top .iframe-block {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2/4;
}
@media only screen and (max-width: 768px) {
  .topics-area-top .list-article,
  .topics-area-top .iframe-block {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }
}
.topics-area-top .list-article li,
.topics-area-top .iframe-block li {
  margin: 2rem 0;
}
.topics-area-top .list-article li:first-child,
.topics-area-top .iframe-block li:first-child {
  margin-top: 0;
}
.topics-area-top .list-article li .date-post,
.topics-area-top .iframe-block li .date-post {
  color: #737373;
  margin-bottom: 0.8rem;
}
.topics-area-top .list-article li .date-post .category,
.topics-area-top .iframe-block li .date-post .category {
  color: #737373;
  font-size: 1.6rem;
  font-weight: normal;
  display: inline-block;
  padding: 0;
  margin: 0 1rem 0 2rem;
  border: none;
}
.topics-area-top .list-article li .ttl-post a,
.topics-area-top .iframe-block li .ttl-post a {
  padding: 0;
  border: none;
}
.topics-area-top .list-article li .ttl-post a[target="_blank"]::after,
.topics-area-top .iframe-block li .ttl-post a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 1.3rem;
    height: 1rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
    background: url(../img/common/ico_blank.svg) no-repeat center center/contain;
}
.topics-area-top .btn-block {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
@media only screen and (max-width: 768px) {
  .topics-area-top .btn-block {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin: 0;
  }
}
.topics-area-top .btn-block p {
  margin-left: 0;
  margin-right: 3rem;
}
.topics-area-top .btn-block p .btn-base {
  display: inline-block;
}

/* bnr-area-top */
@media only screen and (max-width: 768px) {
  .bnr-area-top {
    margin-bottom: 4rem;
  }
}

/* search-area-top */
.search-area-top {
  position: relative;
  padding-bottom: 20rem;
}
@media only screen and (max-width: 768px) {
  .search-area-top {
    padding-bottom: 5rem;
  }
}

/* casestudy-area-top */
.casestudy-area-top {
  position: relative;
  background: #edeff2;
}
@media only screen and (max-width: 768px) {
  .casestudy-area-top {
    padding-bottom: 10rem;
  }
}
.casestudy-area-top > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .casestudy-area-top > .inner {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .casestudy-area-top > .inner .btn-block .btn-base {
    margin-right: 0;
  }
}

/* Top Footer
--------------------------------------------------*/
#footer {
  position: relative;
}
#footer .contact-area-top {
  padding: 2rem 0 0;
  background: #EDEFF2;
  margin-bottom: 4.8rem;
}
@media only screen and (max-width: 768px) {
  #footer .contact-area-top {
    padding: 0;
  }
}
#footer .contact-area-top a {
  color: #fff;
  background: #272727;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 80%;
  margin-left: auto;
  position: relative;
  padding: 2em 14em;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  #footer .contact-area-top a {
    margin-top: 0;
    padding: 2em 2em 2em 5em;
  }
}
#footer .contact-area-top a:before {
  content: "";
  display: block;
  width: 17vw;
  height: 77vh;
  max-width: 260px;
  max-height: 288px;
  position: absolute;
  bottom: 0;
  left: -9%;
  background: url(../img/common/ph_footer.png) no-repeat center bottom/contain;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  #footer .contact-area-top a:before {
    width: 42vw;
    height: 30vh;
    left: -30%;
  }
}
#footer .contact-area-top a .ttl-contact h2 {
  font-size: 3.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  #footer .contact-area-top a .ttl-contact h2 {
    font-size: 3rem;
  }
}
#footer .contact-area-top a .ttl-contact p {
  color: #61c5e7;
  font-size: 1.9rem;
}
@media only screen and (max-width: 768px) {
  #footer .contact-area-top a .ttl-contact p {
    position: absolute;
    top: 2rem;
    right: 1rem;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
  }
}
#footer .contact-area-top a > p {
  line-height: 2;
  display: inline-block;
  margin-left: auto;
  padding-right: 5rem;
  position: relative;
}
@media only screen and (max-width: 768px) {
  #footer .contact-area-top a > p {
    padding-right: 1rem;
  }
}
#footer .contact-area-top a > p:after {
  content: "";
  width: 2em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../img/common/ico_arrow_w.svg) no-repeat center center/cover;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
#footer .contact-area-top a:hover {
  opacity: 0.7;
}
#footer .contact-area-top a:hover > p:after {
  -webkit-animation: arrowAnime 0.4s linear both;
          animation: arrowAnime 0.4s linear both;
}

/*# sourceMappingURL=top.css.map */