@font-face {
  font-family: "Noto Serif Japanese";
	   src:url("fonts/NotoSerifCJKjp-Light.woff") format('woff');
}
/**
 * Variables
 */
/**
 * Base
 */
* {
  box-sizing: border-box;
}

html {
  color: #888;
  font-family: sans-serif;
}

body {
  margin: 0;
  line-height: 1.8;
  font-size: 13px;
   font-family:'Noto Serif Japanese';
  background: #90a1a9;
  background: linear-gradient(50deg, #90a1a9 0%, #d2dbe4 25%, #d2dbe4 75%, #d6b6b2 100%) fixed;
}
.section{
	background:#ccc;
	padding:0px;
}
h1, h2, h3, h4, h5, h6, a {
  color: #20242d;
}

/**
 * Canvas
 */
.canvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

/**
 * Instruction label
 */
.instruction-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -3em);
          transform: translate(-50%, -3em);
  padding-bottom: 1em;
  color: #fff;
  text-align: center;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  z-index: 3;
}
.instruction-label::after {
  content: '';
  height: 3em;
  border-left: 1px solid;
  position: absolute;
  top: 100%;
  left: 50%;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.fp-viewing-a-section-1-a-slide-0 .instruction-label {
  opacity: 1;
  -webkit-transition-delay: 3s;
          transition-delay: 3s;
}
.fp-viewing-a-section-1-a-slide-0 .instruction-label::after {
  -webkit-transform: none;
          transform: none;
  -webkit-transition-delay: 3.5s;
          transition-delay: 3.5s;
}

/**
 * Menu
 */
#fullpage__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: end;
          justify-content: flex-end;
  margin: 0;
  padding: 3% 0 3% 3%;
  list-style: none;
  z-index: 3;
}

/* Menu item */
.fullpage__menu__item {
  -webkit-box-flex: 0;
          flex: 0 0 auto;
  height: 4em;
  line-height: 4em;
  width: 4em;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  color: #777;
  -webkit-transition: color .3s, background .3s, box-shadow .3s, -webkit-transform .3s;
  transition: color .3s, background .3s, box-shadow .3s, -webkit-transform .3s;
  transition: color .3s, background .3s, box-shadow .3s, transform .3s;
  transition: color .3s, background .3s, box-shadow .3s, transform .3s, -webkit-transform .3s;
  /** Link **/
  /*** Tooltip ***/
}
.fullpage__menu__item a {
  display: block;
  text-decoration: none;
  color: currentColor;
}
.fullpage__menu__item [data-menuanchor-tooltip]::after {
  content: attr(data-menuanchor-tooltip);
  position: absolute;
  left: 100%;
  white-space: nowrap;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
  -webkit-transform: translateX(1.5em);
          transform: translateX(1.5em);
}

/* Tablet and below */
@media screen and (max-width: 767px) {
  .last p{
  	margin-bottom:0px;
  	padding-bottom:0px;
  }
  /* Menu */
  #fullpage__menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: start;
            justify-content: flex-start;
  }

  /** Menu item **/
  .fullpage__menu__item {
    /*** Active item ***/
    /*** Tooltip ***/
  }
  .fullpage__menu__item:nth-child(1) {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  .fullpage__menu__item:nth-child(2) {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .fullpage__menu__item:nth-child(3) {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  .fullpage__menu__item:nth-child(4) {
    -webkit-transform: translateY(300%);
            transform: translateY(300%);
  }
  .fullpage__menu__item:nth-child(5) {
    -webkit-transform: translateY(400%);
            transform: translateY(400%);
  }
  .fullpage__menu__item:nth-child(6) {
    -webkit-transform: translateY(500%);
            transform: translateY(500%);
  }
  .fullpage__menu__item:nth-child(7) {
    -webkit-transform: translateY(600%);
            transform: translateY(600%);
  }
  .fullpage__menu__item.active {
    box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.15);
    z-index: 1;
  }
  .fullpage__menu__item [data-menuanchor-tooltip]::after {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: none;
            transform: none;
  }

  /* Menu active */
  #fullpage__menu.is-active {
    /** Menu item **/
  }
  #fullpage__menu.is-active .fullpage__menu__item {
    box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.15);
    -webkit-transform: none;
            transform: none;
    /*** Active item ***/
    /*** Tooltip ***/
  }
  #fullpage__menu.is-active .fullpage__menu__item:not(:last-child) {
    margin-top: 1em;
  }
  #fullpage__menu.is-active .fullpage__menu__item.active {
    color: #fff;
    background: #20242d;
  }
  #fullpage__menu.is-active .fullpage__menu__item [data-menuanchor-tooltip]::after {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(1.5em);
            transform: translateX(1.5em);
    -webkit-transition: visibility .3s, opacity .3s;
    transition: visibility .3s, opacity .3s;
  }

  #fullpage {
    -webkit-transition: -webkit-filter .3s;
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s, -webkit-filter .3s;
  }
  #fullpage.menu-is-active {
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
/* Tablet and above */
@media screen and (min-width: 768px) {
  /* Menu */
  #fullpage__menu {
    -webkit-box-pack: center;
            justify-content: center;
  }

  /** Menu item **/
  .fullpage__menu__item {
    background: none;
    border: 2px dotted;
    /*** Active item ***/
    /** Appearing animation **/
    /**** Tooltip ****/
  }
  .fullpage__menu__item:not(:last-child) {
    margin-bottom: 1em;
  }
  .fullpage__menu__item.active {
    border-color: transparent;
    background: #fff;
    box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.15);
  }
  @-webkit-keyframes menu-animation {
    from {
      opacity: 0;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    to {
      opacity: 1;
    }
  }
  @keyframes menu-animation {
    from {
      opacity: 0;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    to {
      opacity: 1;
    }
  }
  .fp-enabled .fullpage__menu__item {
    -webkit-animation: menu-animation .5s 2s both;
            animation: menu-animation .5s 2s both;
  }
  .fp-enabled .fullpage__menu__item:nth-child(1) {
    -webkit-animation-delay: 1.75s;
            animation-delay: 1.75s;
  }
  .fp-enabled .fullpage__menu__item:nth-child(2) {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
  }
  .fp-enabled .fullpage__menu__item:nth-child(3) {
    -webkit-animation-delay: 2.25s;
            animation-delay: 2.25s;
  }
  .fp-enabled .fullpage__menu__item:nth-child(4) {
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
  }
  .fp-enabled .fullpage__menu__item:nth-child(5) {
    -webkit-animation-delay: 2.75s;
            animation-delay: 2.75s;
  }
  .fp-enabled .fullpage__menu__item:nth-child(6) {
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
  }
  .fp-enabled .fullpage__menu__item:nth-child(7) {
    -webkit-animation-delay: 3.25s;
            animation-delay: 3.25s;
  }
  .fullpage__menu__item [data-menuanchor-tooltip]::after {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: none;
            transform: none;
    -webkit-transition: visibility .3s, opacity .3s, -webkit-transform .3s;
    transition: visibility .3s, opacity .3s, -webkit-transform .3s;
    transition: visibility .3s, opacity .3s, transform .3s;
    transition: visibility .3s, opacity .3s, transform .3s, -webkit-transform .3s;
  }
  .fullpage__menu__item:hover [data-menuanchor-tooltip]::after {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(1.5em);
            transform: translateX(1.5em);
  }
}
/**
 * Fullpage
 */
/**
 * Slide
 */
.slide {
  position: relative;
}

/* Naviguation */
.fp-slidesNav.bottom {
  bottom: 0;
}
.fp-slidesNav ul li a span {
  background: #20242d;
}

/**
 * Section
 */
/* Title */
.section__title {
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 6em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
  line-height: 1.2;
  text-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  padding-top: inherit;
  z-index: 1;
}
.grid_in{
    height: 100vh;
    padding: 30px;
    width: calc(100vw);
    background:#eee
}
.section__grid {
	height:100%;
	width:100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    background:#fff;
}

/** Cell **/
.section__grid__cell {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-box-flex: 0;
          flex: 0 1 auto;
}

.section__grid__cell--sm {
  flex-basis: 340px;
}

.section__grid__cell--md {
  flex-basis: 420px;
}
 .card--image.card--image500{
 	max-width:500px;
 }

/**
 * Cards
 */
.card > *:first-child {
  margin-top: 0;
}
.card > *:last-child {
  margin-bottom: 0;
}

/* Card's options */
.card--image {
  max-width: 800px;
  height: auto;
  z-index: 1;
}

.card--text,
.card--text-transparent {
  z-index: 2;
  position: relative;
}
.card--text::after,
.card--text-transparent::after {
  content: "";
  display: table;
  clear: both;
}

.card--text {
  padding: 0% 5%;
  background: #fff;
  font-size: 16px;
}

.card--text-transparent {
  padding: 0 15%;
  text-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
}
.card--text-transparent,
.card--text-transparent .card__title,
.card--text-transparent .card__cta {
  color: #fff;
}

/* Tablet and above */
@media screen and (max-width: 767px) {
  .card--text {
    line-height: 1.2;
  }
}
/* Card's components */
/** Title **/
.card__title {
  font-size: 2em;
  text-transform: uppercase;
  line-height: 1;
}

/** Lead **/
/** Call to action **/
.card__cta {
  float: right;
  margin-top: 1em;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  /*** Back ***/
}
.card__cta::after {
  content: '';
  position: absolute;
  bottom: -1em;
  left: 0;
  height: 1px;
  width: 200%;
  background: currentColor;
}
.card__cta.card__cta--back {
  float: none;
}
.card__cta.card__cta--back::after {
  left: auto;
  right: 0;
  width: 130%;
}

/**
 * Section appearing animation
 */
@-webkit-keyframes animate--fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes animate--fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes animate--slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes animate--slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes animate--slideInRight {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes animate--slideInRight {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes animate--slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes animate--slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes animate--slideInLeft {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes animate--slideInLeft {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.section.active:not(.section-has-slide) .animate--fadeSlideInUp,
.section.active:not(.section-has-slide) .animate--fadeSlideInRight,
.section.active:not(.section-has-slide) .animate--fadeSlideInDown,
.section.active:not(.section-has-slide) .animate--fadeSlideInLeft,
.section.active.section-has-slide .slide.active .animate--fadeSlideInUp,
.section.active.section-has-slide .slide.active .animate--fadeSlideInRight,
.section.active.section-has-slide .slide.active .animate--fadeSlideInDown,
.section.active.section-has-slide .slide.active .animate--fadeSlideInLeft {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.section.active:not(.section-has-slide) .animate--fadeSlideInUp,
.section.active.section-has-slide .slide.active .animate--fadeSlideInUp {
  -webkit-animation-name: animate--fadeIn, animate--slideInUp;
          animation-name: animate--fadeIn, animate--slideInUp;
}
.section.active:not(.section-has-slide) .animate--fadeSlideInRight,
.section.active.section-has-slide .slide.active .animate--fadeSlideInRight {
  -webkit-animation-name: animate--fadeIn, animate--slideInRight;
          animation-name: animate--fadeIn, animate--slideInRight;
}
.section.active:not(.section-has-slide) .animate--fadeSlideInDown,
.section.active.section-has-slide .slide.active .animate--fadeSlideInDown {
  -webkit-animation-name: animate--fadeIn, animate--slideInDown;
          animation-name: animate--fadeIn, animate--slideInDown;
}
.section.active:not(.section-has-slide) .animate--fadeSlideInLeft,
.section.active.section-has-slide .slide.active .animate--fadeSlideInLeft {
  -webkit-animation-name: animate--fadeIn, animate--slideInLeft;
          animation-name: animate--fadeIn, animate--slideInLeft;
}

/**
 * Views
 */
/* Section 1 */
/** Slide 1 **/
/*
#section-1__slide-1__card-1 {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: translateX(5%) rotateY(10deg);
          transform: translateX(5%) rotateY(10deg);
}

#section-1__slide-1__card-2 {
  -webkit-transform: translate(-5%, 25%);
          transform: translate(-5%, 25%);
}

/** Slide 2 **/
#section-1__slide-2__card-1 {
  border-radius: 50%;
}

/* Section 2 */
#section-2__card-1 {
  -webkit-transform: translate(5%, 25%);
          transform: translate(5%, 25%);
}

#section-2__card-2 {
}
*/
/**
 * Extra
 */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
#section-1,#section-2,#section-3,#section-4{
	padding:30px;
}
.inner{
	width:100vw;
	height:100vh;
	background:#fff;
}
.w-70{
	flex-basis: 70% !important;
	padding-right:30px;
}
h3{
	font-size:23px;
}
.main {
  position: relative;
}

.pager {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0;
}
.pager li {
  display: block;
  margin: 10px;
}
.pager li a {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}
.pager .is-current a {
  background: #232323;
}

.section {
    width: 100%;
    overflow: hidden;
    background:#eee;
}

.section-content {
  max-width: 300px;
  margin: 0 auto;
  padding: 40px 60px;
  text-align: center;
}

h2 {
  color: #232323;
}
h2:first-child {
  margin-top: 0;
}

h3 {
  color: #232323;
}

p {
  color: #232323;
}

.section-red {
  background-color: #ff6363;
}

.section-blue {
  background-color: #8fbbff;
}

.section-green {
  background-color: #fff;
}

.w-70{
	flex-basis: 70% !important;
	padding-right:0px;
}
.card{
	border:none;
}
.sec02{
	background:#fff;
}

@media screen and (max-width: 768px){
	.section__grid{
		flex-flow: column;
	}
	.section__grid__cell{
		height:50%;
		padding:15px;
	}
	.card {
    	border: none;
    	max-height: 100%;
    	max-width: 100%;
	}
	.section__grid__cell--md{
		flex-basis:100%;
	}
	#section-2__card-1{
	/*
		-webkit-transform: translate(5%, 25%);
    	transform: translate(5%, 25%);
    */
		-webkit-transform: translate(0%, 0%);
    	transform: translate(0%, 0%);
	}
}