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

ul { list-style: none; }


.sp_font {
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0px;
}
.sp_font2 {
   font-family: "M PLUS Rounded 1c";
	font-style: normal
}
.sp_font3 { 
	font-family: "Sawarabi Mincho";
	font-style: normal;
}

.sp_font4 {
	font-family: 'Tangerine', serif;
	letter-spacing: 2px;
}
.sp_font5 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	letter-spacing: 2px;
}


.shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

p {
	font-size:0.8em !important;
    line-height: 1.8 !important;
    margin: 1em 0;
    color: #071920;
}


h2 {
    font-size: 20px;
	margin: 20px 0;
    line-height: 1.0;
}
@media only screen and (min-width: 768px) {
  h2 {
    font-size: 35px;
    line-height: 1.0;
  }
}

	
h3 {
	font-size: 20px;
}
.chen3 {
	font-size: 15px;
	line-height: 2;
}
	
@media only screen and (min-width: 768px) {
  h3 {
    font-size: 25px;
  }
.chen3 {
	font-size: 25px;
}
  
}

h4 {
	font-size: 14px;
	font-style: normal;
}
@media only screen and (min-width: 768px) {
  h4 {
    font-size: 16px;
  }
}
h5 {
	font-size: 20px;
	margin: 30px 0;
}
@media only screen and (min-width: 768px) {
  h5 {
    font-size: 25px;
  }
}
hr {
	border: 0;
	border-bottom: solid 2px rgba(255, 255, 255, 0.35);
	margin: 1em 0;
}

hr.bk {
	border-bottom: solid 1px #161616;
}

hr.bk2 {
	border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

hr.style9 {
	height: 6px;
	background: url(../images/hr-9.png) repeat-x 0 0;
    border: 0;
}

.none {
	display: none;
}

.shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.text {
	margin: 15px 0;
	padding-left: 20px;
	border-left: 1px solid #DBDBDB;
}
@media only screen and (max-width: 980px) {
	.text {
		padding-left: 15px;
		border-left: 0px solid #DBDBDB;
	}
}
.text2 {
	margin: 30px 0;
	padding-left: 20px;
}

.space {
	margin-top: 30px;
}
.wh {
	color: #fff;
}
.bk {
	color: #777;
}
.gray {
	color: #777;
}.gray2 {
	color: #777;
	font-weight: 400;
}

.red {
	color: #e94c45;
}
.blu {
	color: #071920;
}
.blu2 {
	color: #0072E3;
}

.orng {
	color: #DC7A19;
}

.gold {
	color: #d0a964;
}

.al_center-left {
	text-align: center;
}
@media only screen and (max-width: 980px) {
	.al_center-left {
		text-align: left;
	}
}
.heiter {
	line-height: 2;
}

.bitt {
	font-size: 0.8em !important;
}
.bold {
	font-weight: bold;
}
.bold2 {
	font-weight:500;
}

.large {
    font-size: 40px;
}
.large2{
    font-size: 50px;
}

.middle {
	font-size: 1.5em;
	font-weight: 100;
}

.small_x {
	font-size: 0.6em !important;
}
@media only screen and (max-width: 980px) {
	.small_x {
		font-size: 0.8em !important;
	}
}
.small_1 {
	font-size: 0.8em !important;
}
.small_2 {
	font-size: 0.9em !important;
}

.space {
	width: 1px;
	height: 20px;
}



	@media screen and (max-width:980px) {
		.sp777 {
			padding-left: 60px;
			padding-right: 60px;
		}
		
}



.color-0 {
  background-color:  rgba(255, 255, 255, 0.0) !important;
}
.color-1 {
  background-color: #fff !important;
}
.color-2 {
  background-color: #4C4C4C;
}
.color-3 {
  background-color: #808080;
  color: #fff;
}
.color-3 p {
  color: #fff;
}
.color-4 {
  background-color: #E3C9C9;
}
.color-5 {
  background-color: #f5f5f5;
}
.color-6 {
  background-color: #161616;
}
.color-7 {
  background-color: #89b8c2;
}
.color-8 {
  background-color: #ff9900;
}
.color-9 {
  background-color: #f9f7f2;
}

.space {
	margin-top: 20px;
}
.boderer-1 {
	border: 10px solid #F4E6CE;
}

.kai-box7 {
 margin: 0em auto;
 padding: 1em;
 width: 100%;
	max-width: 700px;
 border-top: 3px dotted #eee;
 border-bottom: 3px dotted #eee;
 border-radius: 1px;
}
.kai-box9 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
	max-width: 700px;
 border-top: 3px dotted #eee;
 border-bottom: 3px dotted #eee;
 border-radius: 1px;
}


/* box21 */
.box21 {
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 8px 15px;
  background: #aaa;
  border-radius: 30px;
}

.box21::before{
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 15px;
  left: -45px;
  bottom: 0;
  color: #aaa;
}

.box21::after{
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 23px;
  left: -28px;
  bottom: 0;
  color: #aaa;
}

/* box22 */
.box22{
  border-top: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  padding: 2em 0;
  position: relative;
	max-width: 500px;
	margin: 0 auto;
}

.box22:before, .box22:after{
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #aaa;
}

.box22:before {
  left: 10px;
}

.box22:after {
  right: 10px;
}

.box22 p {
  padding-right: 40px;
  padding-left: 40px;
}

/* box22_w */
.box22_w{
  border-top: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  padding: 2em 0;
  position: relative;
	background: #fff;
	max-width: 500px;
	margin: 0 auto;
}

.box22_w:before, .box22_w:after{
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #aaa;
}

.box22_w:before {
  left: 10px;
}

.box22_w:after {
  right: 10px;
}

.box22_w p {
  padding-right: 40px;
  padding-left: 40px;
}

/* box23 */
.box23{
  border-top: 0px solid #aaa;
  border-bottom: 0px solid #aaa;
  padding: 2em 0;
  position: relative;
}


.box23:before {
  left: 10px;
}

.box23:after {
  right: 10px;
}

.box23 h2,p {
  padding-right: 40px;
  padding-left: 40px;
}



.fixed-bg0 {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  z-index: 1;
}


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

video-background

-------------------------------- */
.video-bg__media {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.video-bg__media video {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  min-height: 100vh;
  min-width: 100%;
  height: auto;
  width: auto;
  max-width: none;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .video-bg__media video {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100vh;
    width: 100%;
  }
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) and (-ms-ime-align: auto) {
  .video-bg__media video {
    height: auto;
    width: auto;
  }
}
.video-bg__media img {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .video-bg__media video {
    visibility: hidden;
  }
  .video-bg__media img {
    display: block;
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100vh;
    width: 100%;
  }
}		


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

video-background2

-------------------------------- */
.video-bg2__media {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.video-bg2__media video {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  max-width: none;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .video-bg2__media video {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
  }
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) and (-ms-ime-align: auto) {
  .video-bg2__media video {
    height: auto;
    width: auto;
  }
}
.video-bg2__media img {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .video-bg2__media video {
    visibility: hidden;
  }
  .video-bg2__media img {
    display: block;
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
  }
}		

/*.overlay {
  position: absolute;
  width: 100%; height: 100%;

  background: url('images/night.png') no-repeat;
  background-size: cover;
  background-position: center;
  z-index:1;
}*/	
.overlay {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
/*  background: rgba(0,0,0,0.5);*/
  background-image: -webkit-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
  background-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 100%);	
  z-index:1;
}


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

text-anim__wrapper

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

.text-anim__wrapper {
  position: relative;
  display: inline-block;
}

.js .text-anim__word {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
}
.js .text-anim__word--in {
  position: relative;
  z-index: 2;
}

.js .text-anim--rotate {
  --text-anim-duration: 0.85s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--rotate .text-anim__wrapper {
  -webkit-perspective: 300px;
          perspective: 300px;
}
.js .text-anim--rotate .text-anim__word {
  opacity: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
  transition: opacity calc(var(--text-anim-duration) / 3) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 3) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 3) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
}
.js .text-anim--rotate .text-anim__word--in {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.js .text-anim--rotate .text-anim__word--out {
  opacity: 0;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  transition: opacity calc(var(--text-anim-duration) / 6) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 6) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 6) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
}

.js .text-anim--loader {
  --text-anim-duration: 2.5s;
  --text-anim-pause: 0s;
}
.js .text-anim--loader .text-anim__word {
  color: transparent;
  transition: color 0.2s;
}
.js .text-anim--loader .text-anim__word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: translateY(100%) scaleX(0);
          transform: translateY(100%) scaleX(0);
  transition: -webkit-transform var(--text-anim-duration) var(--ease-out);
  transition: transform var(--text-anim-duration) var(--ease-out);
  transition: transform var(--text-anim-duration) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out);
}
.js .text-anim--loader .text-anim__word--in {
  color: currentColor;
}
.js .text-anim--loader .text-anim__word--in::after {
  -webkit-transform: translateY(100%) scaleX(1);
          transform: translateY(100%) scaleX(1);
}
.js .text-anim--loader .text-anim__word--out {
  color: transparent;
}
.js .text-anim--loader .text-anim__word--out::after {
  transition: none;
  -webkit-transform: translateY(100%) scaleX(0);
          transform: translateY(100%) scaleX(0);
}

.js .text-anim--slide {
  --text-anim-duration: 0.5s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--slide .text-anim__wrapper {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  padding: 0.1em 0;
}
.js .text-anim--slide .text-anim__word {
  height: 100%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.js .text-anim--slide .text-anim__word--in,
.js .text-anim--slide .text-anim__word--out {
  -webkit-animation-duration: var(--text-anim-duration);
          animation-duration: var(--text-anim-duration);
  -webkit-animation-timing-function: var(--ease-out-back);
          animation-timing-function: var(--ease-out-back);


}
.js .text-anim--slide .text-anim__word--in {
  -webkit-animation-name: text-anim-slide-in;
          animation-name: text-anim-slide-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.js .text-anim--slide .text-anim__word--out {
  -webkit-animation-name: text-anim-slide-out;
          animation-name: text-anim-slide-out;
}

@-webkit-keyframes text-anim-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes text-anim-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes text-anim-slide-out {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes text-anim-slide-out {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.js .text-anim--zoom {
  --text-anim-duration: 0.85s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--zoom .text-anim__wrapper {
  -webkit-perspective: 300px;
          perspective: 300px;
}
.js .text-anim--zoom .text-anim__word {
  opacity: 0;
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
  transition: opacity var(--text-anim-duration), -webkit-transform var(--text-anim-duration) var(--ease-out);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out);
}
.js .text-anim--zoom .text-anim__word--in {
  opacity: 1;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.js .text-anim--zoom .text-anim__word--out {
  opacity: 0;
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px);
}

.js .text-anim--push {
  --text-anim-duration: 0.65s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--push .text-anim__word {
  opacity: 0;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
  transition: none;
}
.js .text-anim--push .text-anim__word--in,
.js .text-anim--push .text-anim__word--out {
  transition: opacity var(--text-anim-duration), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
}
.js .text-anim--push .text-anim__word--in {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.js .text-anim--push .text-anim__word--out {
  opacity: 0;
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}

.js .text-anim--clip {
  --text-anim-duration: 0.7s;
  --text-anim-pause: 2s;
  --text-anim-border-width: 2px;
}
.js .text-anim--clip .text-anim__wrapper {
  overflow: hidden;
  vertical-align: top;
}
.js .text-anim--clip .text-anim__wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 0.7em);
  height: 1.4em;
  width: var(--text-anim-border-width);
  background-color: var(--color-accent);
}
.js .text-anim--clip .text-anim__wrapper--pulse::after {
  -webkit-animation: text-anim-pulse 0.8s infinite;
          animation: text-anim-pulse 0.8s infinite;
}
.js .text-anim--clip .text-anim__word {
  opacity: 0;
  padding-right: var(--text-anim-border-width);
}
.js .text-anim--clip .text-anim__word--in {
  opacity: 1;
}

@-webkit-keyframes text-anim-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes text-anim-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Banner */

	#banner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		cursor: default;
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		min-height: 35em;
		overflow: hidden;
		position: relative;
		text-align: center;
	}

		#banner h2 {
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
			display: inline-block;
			font-size: 1.75em;
			opacity: 1;
			padding: 0.8em 1em;
			line-height: 1.5;
			position: relative;
			z-index: 1;
				top: -50px;
				left: 0;
		}

			#banner h2:before, #banner h2:after {
				-moz-transition: width 0.85s ease;
				-webkit-transition: width 0.85s ease;
				-ms-transition: width 0.85s ease;
				transition: width 0.85s ease;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				background: #fff;
				content: '';
				display: block;
				height: 2px;
				position: absolute;
				width: 100%;
			}

			#banner h2:before {
				top: 0;
				left: 0;
			}

			#banner h2:after {
				bottom: 0;
				right: 0;
			}

		#banner p {
			letter-spacing: 0.225em;
			text-transform: uppercase;
		}

			#banner p a {
				color: inherit;
			}

		#banner .more {
			-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
			-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
			transition: transform 0.75s ease, opacity 0.75s ease;
			-moz-transition-delay: 0.0s;
			-webkit-transition-delay: 0.0s;
			-ms-transition-delay: 0.0s;
			transition-delay: 0.0s;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			border: none;
			bottom: 2%;
			color: inherit;
			font-size: 0.8em;
			height: 8.5em;
			left: 50%;
			letter-spacing: 0.225em;
			margin-left: -8.5em;
			opacity: 1;
			outline: 0;
			padding-left: 0.225em;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			width: 16em;
			z-index: 2 !important;
		}

			#banner .more:after {
				background-image: url("../images/arrow_sc.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				content: '';
				display: block;
				width: 3.5em;
				height: 4.5em;
				left: 44%;
				bottom: 5em;
				margin: 0 0 0 -0.75em;
				position: absolute;
			}

		#banner:after {
			pointer-events: none;
			-moz-transition: opacity 3s ease-in-out;
			-webkit-transition: opacity 3s ease-in-out;
			-ms-transition: opacity 3s ease-in-out;
			transition: opacity 3s ease-in-out;
			-moz-transition-delay: 1.25s;
			-webkit-transition-delay: 1.25s;
			-ms-transition-delay: 1.25s;
			transition-delay: 1.25s;
			content: '';
			background: none;
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}

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

			#banner {
				height: auto;
			}
			#banner .more:after {
				width: 3.5em;
				height: 4.5em;
				bottom: 4.7em;
			}

				#banner h2 {
					font-size: 1.25em;
					margin-top: 20px;
				}
		}

	body.is-preload #banner h2 {
		-moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		transform: scale(0.95);
		opacity: 0;
	}

		body.is-preload #banner h2:before, body.is-preload #banner h2:after {
			width: 0;
		}

	body.is-preload #banner .more {
		-moz-transform: translateY(8.5em);
		-webkit-transform: translateY(8.5em);
		-ms-transform: translateY(8.5em);
		transform: translateY(8.5em);
		opacity: 0;
	}

	body.is-preload #banner:after {
		opacity: 1;
	}		
		


/* logo_s2 */

.logo_s2 h2{
  position: absolute;
  margin-top: 0px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 700px !important;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 3;

}
@media screen and (max-width: 1600px) {
	.logo_s2 h2{
	  position: absolute;
	  margin-top: 0px;
	  left: 50%;
	  top: 50%;
	  bottom: auto;
	  right: auto;
	  -webkit-transform: translateX(-50%) translateY(-50%);
	  -moz-transform: translateX(-50%) translateY(-50%);
	  -ms-transform: translateX(-50%) translateY(-50%);
	  -o-transform: translateX(-50%) translateY(-50%);
	  transform: translateX(-50%) translateY(-50%);
	  width: 100%;
	  max-width: 500px;
	  text-align: center;
	  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	  font-size: 25px !important;
	}
}

@media screen and (max-width: 980px) {
	.logo_s2 h2{

  max-width: 500px !important;
	  left: 50%;
	  top: 50%;
	  font-size: 20px !important;
	}
}

@media screen and (max-width: 500px) {
	.logo_s2 h2{
	  left: 50%;
	  top: 50%;
	  max-width: 350px !important;
	  font-size: 15px !important;
	}
}


/* scrole */

.sc1 a {
  padding-top: 60px;
}
.sc1 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 1px solid rgba(255,255,255,.0);
  border-radius: 100%;
  box-sizing: border-box;
	background: rgba(0,0,0,.0);
}
.sc1 a span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid rgba(255,255,255,.0);
  border-bottom: 1px solid rgba(255,255,255,.0);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.sc1 a span::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.0);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb 3s infinite;
  animation: sdb 3s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.3);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.3);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

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

Article Preview v2

-------------------------------- */
.story-v2__meta a {
  color: var(--color-contrast-high);
  transition: 0.2s;
}
.story-v2__meta a:hover {
  color: var(--color-primary);
}
.story-v2__meta span[role=separator] {
  display: inline-block;
  width: 6px;
  height: 0px;
  vertical-align: middle;
  background-color: var(--color-contrast-low);
  border-radius: 50%;
  margin: 0 var(--space-xxxs);
}
.story-v2__headline a {
  color: #000;
  text-decoration: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(transparent 50%, hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), 0.2) 50%);
  background-size: 0% 100%;
  will-change: background-size;
  transition: background-size 0.3s var(--ease-in-out);
}
.story-v2__headline a:hover {
  background-size: 100% 100%;
}

.story-v2__excerpt {
  color: var(--color-contrast-medium);
}

.story-v2__img {
  display: block;
  transition: opacity 0.2s;
}
.story-v2__img:hover {
  opacity: 0.85;
}
.story-v2__img img {
  display: block;
  width: 100%;
}

@media (min-width: 64rem) {
  .story-v2--featured .story-v2__excerpt {
    max-width: 70%;
    margin-left: auto;
  }
}	

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

Revealing Section

-------------------------------- */
.js .revealing-section {
  position: -webkit-sticky;
  position: sticky;
  min-height: 100vh;
  --reavealing-section-overlay-opacity: 1;
}
.js .revealing-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  background-color: var(--color-black);
  opacity: var(--reavealing-section-overlay-opacity);
}	


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

Swipe Content

-------------------------------- */
.swipe-content {
  height: 280px;
  width: 280px;
  background-color: var(--color-contrast-low);
  border-radius: var(--radius-md);
  cursor: default;
  transition: background 0.2s;
}
.swipe-content:active {
  background-color: var(--color-contrast-medium);
}	
	
	
/* -------------------------------- 

Carousel

-------------------------------- */
:root {
  --carousel-grid-gap: var(--space-xs);
  --carousel-item-auto-size: 260px;
  --carousel-transition-duration: 0.5s;
}

.carousel {
  position: relative;
}

.carousel__list {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.carousel__item {
  flex-shrink: 0;
  width: var(--carousel-item-auto-size);
  margin-right: var(--carousel-grid-gap);
  margin-bottom: var(--carousel-grid-gap);
}

.js .carousel__list--animating {
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: var(--carousel-transition-duration);
  transition-timing-function: var(--ease-out);
}
.js .carousel__item {
  opacity: 0;
  margin-bottom: 0;
}
.js .carousel--loaded .carousel__item {
  opacity: 1;
}
.js .carousel:not(.carousel--is-dragging) .carousel__list:not(.carousel__list--animating) .carousel__item[tabindex="-1"] > * {
  visibility: hidden;
}
.js .carousel[data-drag=on] .carousel__item {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.js .carousel[data-drag=on] .carousel__item img {
  pointer-events: none;
}
.carousel__item img {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.carousel__control {
  --size: 40px;
  width: 40px;
  height: 40px;
  display: flex;
  background-color: var(--color-bg-light);
  border-radius: 50%;
  box-shadow: var(--inner-glow), var(--shadow-sm);
  z-index: 1;
  transition: 0.2s;
}
.carousel__control:active {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.carousel__control:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-md);
}
.carousel__control[disabled] {
  pointer-events: none;
  opacity: 0.5;
  box-shadow: none;
}
.carousel__control .icon {
  --size: 20px;
  display: block;
  margin: auto;
}

.carousel__navigation {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 10px);
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-sm);
}

.carousel__nav-item {
  display: inline-block;
  margin: 0 var(--space-xxxs);
}
@supports (grid-area: auto) {
  .carousel__nav-item {
    margin: 0;
  }
}
.carousel__nav-item button {
  display: block;
  position: relative;
  font-size: 10px;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background-color: var(--color-contrast-high);
  opacity: 0.4;
  cursor: pointer;
  transition: background 0.3s;
}
.carousel__nav-item button::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  font-size: 16px;
  height: 1em;
  width: 1em;
  border-radius: inherit;
  border: 1px solid var(--color-contrast-high);
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: 3s;
}
.carousel__nav-item button:focus {
  outline: none;
}
.carousel__nav-item button:focus::before {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.carousel__nav-item--selected button {
  opacity: 1;
}

.carousel__navigation--pagination {
  grid-template-columns: repeat(auto-fit, 24px);
}
.carousel__navigation--pagination .carousel__nav-item button {
  width: 24px;
  height: 24px;
  color: var(--color-bg);
  font-size: 12px;
  line-height: 24px;
  border-radius: var(--radius-md);
  text-align: center;
}
.carousel__navigation--pagination .carousel__nav-item button:focus {
  outline: 1px solid var(--color-primary);
  outline-offset: 2px;
}

html:not(.js) .carousel__list {
  overflow: auto;
}

.carousel--hide-controls .carousel__navigation, .carousel--hide-controls .carousel__control {
  display: none;
}	

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

Button Effects

-------------------------------- */
.btn-fx-1 {
  --border-radius: 0.25em;
  --transition-duration: .3s;
  position: relative;
  display: inline-block;
  border-radius: var(--border-radius);
  line-height: 1;
  text-decoration: none;
  color: var(--color-primary);
  transition: var(--transition-duration);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}
.btn-fx-1 span, .btn-fx-1 .btn-fx-1__icon-wrapper {
  position: relative;
  z-index: 2;
}
.btn-fx-1 .icon {
  display: block;
  will-change: transform;
  transition: var(--transition-duration);
}
.btn-fx-1 .icon:first-child {
  color: var(--color-primary);
}
.btn-fx-1 .icon:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: var(--color-white);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.btn-fx-1:hover {
  color: var(--color-white);
}
.btn-fx-1:hover .icon:first-child {
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.btn-fx-1:hover .icon:last-child {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.btn-fx-1:hover .btn-fx-1__inner::after {
  -webkit-transform: skewY(0deg) scaleY(2);
          transform: skewY(0deg) scaleY(2);
}
.btn-fx-1:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 3px var(--color-primary);
}

.btn-fx-1__inner {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15);
  overflow: hidden;
  -webkit-clip-path: inset(0% 0% 0% 0% round var(--border-radius));
          clip-path: inset(0% 0% 0% 0% round var(--border-radius));
}
.btn-fx-1__inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 100%;
  background-color: var(--color-primary);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transform: skewY(10deg) scaleY(0);
          transform: skewY(10deg) scaleY(0);
  transition: -webkit-transform var(--transition-duration);
  transition: transform var(--transition-duration);
  transition: transform var(--transition-duration), -webkit-transform var(--transition-duration);
}
/* -------------------------------- 

Card v13

-------------------------------- */
.card-v13 {
  --transition-duration: .3s;
}

.card-v13 h4 {
	text-decoration: none !important;
}
.card-v13__figure-wrapper {
  display: block;
}

.card-v13__figure {
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: -webkit-clip-path var(--transition-duration) var(--ease-out);
  transition: clip-path var(--transition-duration) var(--ease-out);
  transition: clip-path var(--transition-duration) var(--ease-out), -webkit-clip-path var(--transition-duration) var(--ease-out);
}
.card-v13__figure img {
  display: block;
  width: 100%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  transition: -webkit-transform var(--transition-duration) var(--ease-out), -webkit-filter var(--transition-duration);
  transition: transform var(--transition-duration) var(--ease-out), filter var(--transition-duration);
  transition: transform var(--transition-duration) var(--ease-out), filter var(--transition-duration), -webkit-transform var(--transition-duration) var(--ease-out), -webkit-filter var(--transition-duration);
}
.card-v13__figure-wrapper:hover .card-v13__figure {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.card-v13__figure-wrapper:hover .card-v13__figure img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

.card-v13__separator {
  display: block;
  width: 40px;
  height: 3px;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
}

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

3D Drawer

-------------------------------- */
.td-drawer {
  position: fixed;
  z-index: var(--z-index-overlay, 15);
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
  transition: background-color 0.3s, visibility 0s 0.3s;
  visibility: hidden;
}
.td-drawer:focus {
  outline: none;
}

.td-drawer--is-visible {
  visibility: visible;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
  transition: background-color 0.3s, visibility 0s;
}

.td-drawer__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  max-width: 720px;
  height: 100%;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  display: flex;
  flex-direction: column;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: -webkit-transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
}
.td-drawer--left .td-drawer__content {
  right: auto;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.td-drawer--bottom .td-drawer__content {
  width: 100%;
  max-width: none;
  height: 70%;
  max-height: 720px;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  top: auto;
  bottom: 0;
}
.td-drawer--is-visible .td-drawer__content {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.td-drawer--is-visible.td-drawer--bottom .td-drawer__content {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.td-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background:  rgba(0, 0, 0, 0.0);
  border-bottom: 0px solid var(--color-contrast-lower);
}

.td-drawer__close-btn {
  display: flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  transition: 0.2s;
}
.td-drawer__close-btn:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-md);
}
.td-drawer__close-btn .icon {
  display: block;
  margin: auto;
  color: var(--color-contrast-high);
}

.td-drawer__body {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.td-drawer-main {
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  transition: -webkit-transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
}

.td-drawer-main--drawer-is-visible {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  overflow: hidden;
}	
/* -------------------------------- 

Immersive Section Transition vtr

-------------------------------- */
.js .immerse-section-tr {
  position: relative;
  --immerse-section-tr-opacity: 0;
}
.js .immerse-section-tr__media {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.js .immerse-section-tr--disabled .immerse-section-tr__media {
  position: relative;
}
.js .immerse-section-tr__figure {
  will-change: transform;
  pointer-events: auto;
  position: relative;
  height: 0;
}
.js .immerse-section-tr__figure > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.js .immerse-section-tr__figure--16-9 {
  padding-bottom: 56.25%;
}
.js .immerse-section-tr__figure--3-4 {
  padding-bottom: 133.33%;
}
.js .immerse-section-tr__content {
  position: relative;
  z-index: 3;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.js .immerse-section-tr__content::after, .js .immerse-section-tr__content::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-bg);
  opacity: var(--immerse-section-tr-opacity, 0);
  pointer-events: none;
}
.js .immerse-section-tr__content::before {
  height: 100%;
  z-index: -1;
}
.js .immerse-section-tr__content::after {
  height: 100vh;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.js .immerse-section-tr--disabled .immerse-section-tr__content::before {
  opacity: 1;
}

html:not(.js) .immerse-section-tr__content {
  background-color: var(--color-bg);
}	


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

Feature v12

-------------------------------- */
.feature-v12, .feature-v12__offset-item, .feature-v12__bg-item {
  position: relative;
}

.feature-v12, .feature-v12__bg-item {
  z-index: 1;
}

.feature-v12__offset-item {
  z-index: 2;
}

.feature-v12--left .feature-v12__offset-item, .feature-v12--right .feature-v12__offset-item {
  width: calc(100% + var(--feature-v12-offset, 3em));
}

.feature-v12--right .feature-v12__offset-item {
  margin-left: calc(-1 * var(--feature-v12-offset, 3em));
}

.feature-v12--top .feature-v12__offset-item {
  margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
}

.feature-v12--bottom .feature-v12__offset-item {
  margin-top: calc(-1 * var(--feature-v12-offset, 3em));
}

.feature-v12--offset-xs {
  --feature-v12-offset: 2em;
}

.feature-v12--offset-sm {
  --feature-v12-offset: 3em;
}

.feature-v12--offset-md {
  --feature-v12-offset: 5em;
}

.feature-v12--offset-lg {
  --feature-v12-offset: 8em;
}

.feature-v12--offset-xl {
  --feature-v12-offset: 13em;
}

@media (min-width: 32rem) {
  .feature-v12--left\@xs .feature-v12__offset-item, .feature-v12--right\@xs .feature-v12__offset-item {
    width: calc(100% + var(--feature-v12-offset, 3em));
    margin: 0;
  }

  .feature-v12--right\@xs .feature-v12__offset-item {
    margin-left: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--top\@xs .feature-v12__offset-item,
.feature-v12--bottom\@xs .feature-v12__offset-item {
    width: auto;
    margin: 0;
  }

  .feature-v12--top\@xs .feature-v12__offset-item {
    margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--bottom\@xs .feature-v12__offset-item {
    margin-top: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--offset-xs\@xs {
    --feature-v12-offset: 2em;
  }

  .feature-v12--offset-sm\@xs {
    --feature-v12-offset: 3em;
  }

  .feature-v12--offset-md\@xs {
    --feature-v12-offset: 5em;
  }

  .feature-v12--offset-lg\@xs {
    --feature-v12-offset: 8em;
  }

  .feature-v12--offset-xl\@xs {
    --feature-v12-offset: 13em;
  }
}
@media (min-width: 48rem) {
  .feature-v12--left\@sm .feature-v12__offset-item, .feature-v12--right\@sm .feature-v12__offset-item {
    width: calc(100% + var(--feature-v12-offset, 3em));
    margin: 0;
  }

  .feature-v12--right\@sm .feature-v12__offset-item {
    margin-left: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--top\@sm .feature-v12__offset-item,
.feature-v12--bottom\@sm .feature-v12__offset-item {
    width: auto;
    margin: 0;
  }

  .feature-v12--top\@sm .feature-v12__offset-item {
    margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--bottom\@sm .feature-v12__offset-item {
    margin-top: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--offset-xs\@sm {
    --feature-v12-offset: 2em;
  }

  .feature-v12--offset-sm\@sm {
    --feature-v12-offset: 3em;
  }

  .feature-v12--offset-md\@sm {
    --feature-v12-offset: 5em;
  }

  .feature-v12--offset-lg\@sm {
    --feature-v12-offset: 8em;
  }

  .feature-v12--offset-xl\@sm {
    --feature-v12-offset: 13em;
  }
}
@media (min-width: 64rem) {
  .feature-v12--left\@md .feature-v12__offset-item, .feature-v12--right\@md .feature-v12__offset-item {
    width: calc(100% + var(--feature-v12-offset, 3em));
    margin: 0;
  }

  .feature-v12--right\@md .feature-v12__offset-item {
    margin-left: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--top\@md .feature-v12__offset-item,
.feature-v12--bottom\@md .feature-v12__offset-item {
    width: auto;
    margin: 0;
  }

  .feature-v12--top\@md .feature-v12__offset-item {
    margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--bottom\@md .feature-v12__offset-item {
    margin-top: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--offset-xs\@md {
    --feature-v12-offset: 2em;
  }

  .feature-v12--offset-sm\@md {
    --feature-v12-offset: 3em;
  }

  .feature-v12--offset-md\@md {
    --feature-v12-offset: 5em;
  }

  .feature-v12--offset-lg\@md {
    --feature-v12-offset: 8em;
  }

  .feature-v12--offset-xl\@md {
    --feature-v12-offset: 13em;
  }
}
@media (min-width: 80rem) {
  .feature-v12--left\@lg .feature-v12__offset-item, .feature-v12--right\@lg .feature-v12__offset-item {
    width: calc(100% + var(--feature-v12-offset, 3em));
    margin: 0;
  }

  .feature-v12--right\@lg .feature-v12__offset-item {
    margin-left: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--top\@lg .feature-v12__offset-item,
.feature-v12--bottom\@lg .feature-v12__offset-item {
    width: auto;
    margin: 0;
  }

  .feature-v12--top\@lg .feature-v12__offset-item {
    margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--bottom\@lg .feature-v12__offset-item {
    margin-top: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--offset-xs\@lg {
    --feature-v12-offset: 2em;
  }

  .feature-v12--offset-sm\@lg {
    --feature-v12-offset: 3em;
  }

  .feature-v12--offset-md\@lg {
    --feature-v12-offset: 5em;
  }

  .feature-v12--offset-lg\@lg {
    --feature-v12-offset: 8em;
  }

  .feature-v12--offset-xl\@lg {
    --feature-v12-offset: 13em;
  }
}
@media (min-width: 90rem) {
  .feature-v12--left\@xl .feature-v12__offset-item, .feature-v12--right\@xl .feature-v12__offset-item {
    width: calc(100% + var(--feature-v12-offset, 3em));
    margin: 0;
  }

  .feature-v12--right\@xl .feature-v12__offset-item {
    margin-left: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--top\@xl .feature-v12__offset-item,
.feature-v12--bottom\@xl .feature-v12__offset-item {
    width: auto;
    margin: 0;
  }

  .feature-v12--top\@xl .feature-v12__offset-item {
    margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--bottom\@xl .feature-v12__offset-item {
    margin-top: calc(-1 * var(--feature-v12-offset, 3em));
  }

  .feature-v12--offset-xs\@xl {
    --feature-v12-offset: 2em;
  }

  .feature-v12--offset-sm\@xl {
    --feature-v12-offset: 3em;
  }

  .feature-v12--offset-md\@xl {
    --feature-v12-offset: 5em;
  }

  .feature-v12--offset-lg\@xl {
    --feature-v12-offset: 8em;
  }

  .feature-v12--offset-xl\@xl {
    --feature-v12-offset: 13em;
  }
}	





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

Text Points

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

.text-points {
  --text-unit: 1em;
  font-size: 0.875em;
}

.text-points__item {
  color: hsl(var(--ta4-color-contrast-medium-hsl));
}
.text-points__item .ta4-text-component {
  --line-height-multiplier: 1.15;
}

.text-points--counter .text-points__title,
.text-points--letter .text-points__title,
.text-points--icon .text-points__title {
  position: relative;
  padding-left: calc(var(--text-points-bullet-size) + var(--ta4-space-3xs));
}
.text-points--counter .text-points__title::before,
.text-points--letter .text-points__title::before,
.text-points--icon .text-points__title::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(1em * var(--text-points-bullet-text-scale));
  height: calc(var(--text-points-bullet-size)/var(--text-points-bullet-text-scale));
  width: calc(var(--text-points-bullet-size)/var(--text-points-bullet-text-scale));
  line-height: calc(var(--text-points-bullet-size)/var(--text-points-bullet-text-scale));
  font-weight: medium;
  text-align: center;
  background-color: hsl(var(--ta4-color-contrast-lower-hsl));
  color: hsl(var(--ta4-color-contrast-medium-hsl));
  border-radius: 50%;
}
@media (min-width: 80rem) {
  .text-points--counter .text-points__title,
.text-points--letter .text-points__title,
.text-points--icon .text-points__title {
    padding-left: 0;
  }
  .text-points--counter .text-points__title::before,
.text-points--letter .text-points__title::before,
.text-points--icon .text-points__title::before {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    left: -8px;
  }
}

.text-points--counter .text-points__item {
  counter-increment: text-points;
}
.text-points--counter .text-points__title::before {
  content: counter(text-points);
}

.text-points--letter .text-points__title::before {
  content: "?";
}

.text-points--icon .text-points__title::before {
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm2.658,18.284c-.661.26-2.952,1.354-4.272.191a1.676,1.676,0,0,1-.59-1.318,15.978,15.978,0,0,1,.919-3.957,5.7,5.7,0,0,0,.231-1.313c0-.7-.266-.887-.987-.887a3.31,3.31,0,0,0-1.095.257l.195-.8a7.64,7.64,0,0,1,2.621-.71c1.269,0,2.2.633,2.2,1.837A5.585,5.585,0,0,1,13.7,12.96l-.73,2.582c-.151.522-.424,1.673,0,2.014a2.214,2.214,0,0,0,1.887-.071ZM13.452,8a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,13.452,8Z'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm2.658,18.284c-.661.26-2.952,1.354-4.272.191a1.676,1.676,0,0,1-.59-1.318,15.978,15.978,0,0,1,.919-3.957,5.7,5.7,0,0,0,.231-1.313c0-.7-.266-.887-.987-.887a3.31,3.31,0,0,0-1.095.257l.195-.8a7.64,7.64,0,0,1,2.621-.71c1.269,0,2.2.633,2.2,1.837A5.585,5.585,0,0,1,13.7,12.96l-.73,2.582c-.151.522-.424,1.673,0,2.014a2.214,2.214,0,0,0,1.887-.071ZM13.452,8a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,13.452,8Z'/%3E%3C/svg%3E");
  background: hsl(var(--ta4-color-contrast-lower-hsl));
}

/* utility classes */
.ta4-text-component :where(h1, h2, h3, h4) {
  line-height: var(--ta4-heading-line-height, 1.2);
  margin-top: calc(var(--ta4-space-md) * var(--ta4-space-multiplier, 1));
  margin-bottom: calc(var(--ta4-space-sm) * var(--ta4-space-multiplier, 1));
}

.ta4-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--ta4-body-line-height, 1.4);
}

.ta4-text-component :where(ul, ol, p, blockquote, .ta4-text-component__block) {
  margin-bottom: calc(var(--ta4-space-sm) * var(--ta4-space-multiplier, 1));
}

.ta4-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.ta4-text-component ul :where(ul, ol), .ta4-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.ta4-text-component ul {
  list-style-type: disc;
}

.ta4-text-component ol {
  list-style-type: decimal;
}

.ta4-text-component img {
  display: block;
  margin: 0 auto;
}

.ta4-text-component figcaption {
  margin-top: calc(var(--ta4-space-xs) * var(--ta4-space-multiplier, 1));
  font-size: var(--ta4-text-sm);
  text-align: center;}

.ta4-text-component em {
  font-style: italic;
}

.ta4-text-component strong {
  font-weight: bold;
}

.ta4-text-component s {
  text-decoration: line-through;
}

.ta4-text-component u {
  text-decoration: underline;
}

.ta4-text-component mark {
  background-color: hsla(var(--ta4-color-accent-hsl), 0.2);
  color: inherit;
}

.ta4-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--ta4-color-contrast-lower-hsl));
  font-style: italic;
}

.ta4-text-component hr {
  margin: calc(var(--ta4-space-md) * var(--ta4-space-multiplier, 1)) auto;
  background: hsl(var(--ta4-color-contrast-lower-hsl));
  height: 1px;
}

.ta4-text-component > *:first-child {
  margin-top: 0;
}

.ta4-text-component > *:last-child {
  margin-bottom: 0;
}

.ta4-text-component.ta4-line-height-xs {
  --ta4-heading-line-height: 1;
  --ta4-body-line-height: 1.1;
}

.ta4-text-component.ta4-line-height-sm {
  --ta4-heading-line-height: 1.1;
  --ta4-body-line-height: 1.2;
}

.ta4-text-component.ta4-line-height-md {
  --ta4-heading-line-height: 1.15;
  --ta4-body-line-height: 1.4;
}

.ta4-text-component.ta4-line-height-lg {
  --ta4-heading-line-height: 1.22;
  --ta4-body-line-height: 1.58;
}

.ta4-text-component.ta4-line-height-xl {
  --ta4-heading-line-height: 1.3;
  --ta4-body-line-height: 1.72;
}

.ta4-gap-y-lg {
  row-gap: var(--ta4-space-lg);
}

.ta4-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.ta4-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

@media(min-width: 64rem){
  .ta4-gap-lg\@md {
    gap: var(--ta4-space-lg);
  }

  .ta4-col-6\@md {
    grid-column-end: span 6;
  }
}
/* -------------------------------- 

Back to top

-------------------------------- */
.back-to-top {
  --size: 50px;
  width: var(--size);
  height: var(--size);
  display: flex;
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-index-fixed-element, 10);
  border-radius: 10%;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.3);
  transition: 0.2s;
}
.back-to-top:hover {
  background-color: var(--color-contrast-higher);
}
.back-to-top .icon {
  --size: 20px;
  display: block;
  margin: auto;
  color: var(--color-bg);
}

.js .back-to-top {
  visibility: hidden;
  opacity: 0;
}

.js .back-to-top--is-visible {
  visibility: visible;
  opacity: 1;
}


.xy3 {
	margin: 0px;
	padding: 0px;
	line-height: 0px;
}


/*-------------------------
 ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    list-style:none;
    text-align:center;
}
 
.social-btn li {
    display:inline-block;
    width:40px;
    height:40px;
    margin:2px;
    padding:6px 0;
    line-height:30px;
    font-size:20px;
    text-align:center;
    border-radius:50px;
}
 
.social-btn a {
    color:#fff !important;
    text-decoration:none;
}
 
/*各SNSの背景色*/
.social-btn .social-btn_twitter {
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}

.social-btn .social-btn_youtube {
    background-color:#F72528;
}
.social-btn .social-btn_youtube:hover {
    background-color:#F86C6E;
}

.social-btn .social-btn_instagram {
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
}
.social-btn .social-btn_instagram:hover {
    background: -webkit-linear-gradient(135deg, #427eff 100%, #f13f79 0%) no-repeat;
  background: linear-gradient(135deg, #427eff 100%, #f13f79 0%) no-repeat;/*グラデーション①*/
}
 
.social-btn .social-btn_discord {
    background-color:#7289da;
}
.social-btn .social-btn_discord:hover {
    background-color:#98a9e4;
}
  
.social-btn .social-btn_blog {
    background-color:#75B894;
}
.social-btn .social-btn_blog:hover {
    background-color:#98CBAF;
}

.social-btn .social-btn_Email {
    background-color:#e299dc;
}
.social-btn .social-btn_Email:hover {
    background-color:#e9b9e5;
}


ul {
  list-style: none;
}

.space {
	height: 100px;
}
.space2 {
	height: 50px;
}

/* lazyloaded */

.box-fadein img {
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}
.box-fadein.lazyloaded img.lazyloaded {
  opacity: 1;
}

/* switch */

@media screen and (max-width:1020px) {
	.pc101 {
		display: none;
	}
}
@media screen and (min-width:1020px) {
	.sp101 {
		display: none;
	}
}