@charset "UTF-8";
*,*::before,*::after{box-sizing:border-box;}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{width: 100%; height: auto; max-width: 100%;vertical-align: bottom;}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* change min-width to suit your needs */
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, textarea{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,textarea {
	display: block;
}
nav ul {
	list-style: none;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	table-layout:fixed;
}
/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}
input[type="submit"]{
	cursor:pointer;
	border:none;
	}
textarea{
	resize:vertical;
	overflow:hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
}
li {
	list-style:none;
}
address{
	font-style:normal;
}
select,input {
-webkit-appearance: none;/* ベンダープレフィックス(Google Chrome、Safari用) */
-moz-appearance: none; /* ベンダープレフィックス(Firefox用) */
appearance: none; /* 標準のスタイルを無効にする */
}

button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
.pc{display: block !important;}
.sp{ display: none !important;}
@media only screen and (max-width: 768px){
	.pc{display: none !important;}
	.sp{display: block !important;}
}

.block_link{
    position:relative;
}
.block_link a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-999px;
	background: transparent url("../img/common/link_bg.png") 0 0 repeat;
	z-index: 10;
}

/* ========================================
 * flex box 
  ========================================*/

.flex-center{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: center; /* Safari */
    align-items: center;
}
.flex-start{
	display: -webkit-flex; /* Safari */ 
	display: flex;
}
.flex-end{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: flex-end; /* Safari */
    align-items: flex-end;
}
/* pcのみ　*/
.flex-center-pc{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: center; /* Safari */
    align-items: center;
}
.flex-start-pc{
	display: -webkit-flex; /* Safari */ 
	display: flex;
}
.flex-end-pc{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: flex-end; /* Safari */
    align-items: flex-end;
}
/* spのみ　*/
.flex-center-sp{
	display: block;
}
.flex-start-sp{
	display: block;
}
.flex-end-sp{
	display: block;
}
.flex-row-reverse{
	-webkit-flex-direction: row-reverse; /* Safari */
  	flex-direction:         row-reverse;
}
.flex-row-reverse-pc{
	-webkit-flex-direction: row-reverse; /* Safari */
  	flex-direction:         row-reverse;
}
.flex-space{
	-webkit-justify-content: space-between; /* Safari */
    justify-content:         space-between;
}
.flex-space-end{
	-webkit-justify-content: flex-end; /* Safari */
    justify-content:         flex-end;
}
.flex-space-start{
	-webkit-justify-content: flex-start; /* Safari */
    justify-content:         flex-start;
}
.flex-space-center{
	-webkit-justify-content: center; /* Safari */
    justify-content:         center;
}
.flex-wrap {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
@media only screen and (max-width: 768px){
	.flex-center-pc{
		display: block;
	}
	.flex-start-pc{
		display: block;
	}
	.flex-end-pc{
		display: block;
	}
	.flex-center-sp{
		display: -webkit-flex; /* Safari */ 
		display: flex;
		-webkit-align-items: center; /* Safari */
		align-items: center;
	}
	.flex-start-sp{
		display: -webkit-flex; /* Safari */ 
		display: flex;
		-webkit-align-items: flex-start; /* Safari */
		align-items: flex-start;
	}
	.flex-end-sp{
		display: -webkit-flex; /* Safari */ 
		display: flex;
		-webkit-align-items: flex-end; /* Safari */
		align-items: flex-end;
	}
	.flex-row-reverse-pc{
		-webkit-flex-direction: row; /* Safari */
		flex-direction:         row;
	}
}

/* ========================================
 *  天地中央
  ========================================*/

.center_layout{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}
.top_center{
	top: 50%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);
}
.left_center{
	left: 50%;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}

/* ========================================
 *  animation
  ========================================*/

.fadein {
  opacity: 0;
  transform: translate(0, 5px);
  transition: .8s linear;}

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.delay-100 {
  transition-delay: 100ms; }

.delay-200 {
  transition-delay: 200ms; }

.delay-300 {
  transition-delay: 300ms; }

.delay-400 {
  transition-delay: 400ms; }

.display-none {
  display: none; }

.opacity-0 {
  opacity: 0; }

.linkanime,
.linkanime::after {
  -webkit-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1); }


.opacity-0{
	opacity: 0;
}

.css-fade1 {
	animation-name: fade-in1;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@keyframes fade-in1 {
	0% {
	  opacity: 0;
	  transform: translate(0, 5px);
	}
	100% {
	  opacity: 1;
	  transform: translate(0, 0);
	}
}

.css-fade2 {
	animation-name: fade-in1;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

.css-fadein1 {
	animation-name: fade-in2;
	animation-duration: 0.6s;
	animation-timing-function: ease-out;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes fade-in2 {
	0% {
	  opacity: 0;
	  transform: translate(0, 20px);
	}
	100% {
	  opacity: 1;
		transform: translate(0, 0);
	}
}
.css-fadein2 {
	animation-name: fade-in2;
	animation-duration: 1.1s;
	animation-timing-function: ease-out;
	animation-delay: 0.6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.css-fadein3{
	animation-name: fade-in2;
	animation-duration: 1s;
	animation-timing-function: easeInOutExpo;
	animation-delay: 0.9s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.css-fadein4{
	animation-name: fade-in2;
	animation-duration: 1s;
	animation-timing-function: easeInOutExpo;
	animation-delay: 0.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.css-fadein5{
	animation-name: fade-in2;
	animation-duration: 1s;
	animation-timing-function: easeInOutExpo;
	animation-delay: 0.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.css-fadein6{
	animation-name: fade-in2;
	animation-duration: 1s;
	animation-timing-function: easeInOutExpo;
	animation-delay: 0.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


/* ========================================
 *  animation
  ========================================*/
a {
    text-decoration: none;
    outline: none;
}
a:hover {
    outline: none;
}


.link {
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    color: var(--color-text);
}

.link::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::after {
    content: '';
}
.link--metis::after {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

@media only screen and (min-width: 769px){
	.link--metis:hover::after {
		transform-origin: 0% 50%;
		transform: scale3d(1, 1, 1);
	}
}
.link--metis_active::after{
	transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}