/*!
Theme Name: pt1
Theme URI: https://selfee.co.jp
Author: Selfee Team
Author URI: https://selfee.co.jp
カーポーツテンプレート
Version: 0.6
*/
@font-face {
	font-family: YuGothicMedium;
	src: local("Yu Gothic Medium");
}

@font-face {
	font-family: "Helvetica Neue";
	font-weight: 100;
	src: local("Helvetica Neue Regular");
}

@font-face {
	font-family: "Helvetica Neue";
	font-weight: 200;
	src: local("Helvetica Neue Regular");
}

html {
	line-height: 1.7;
}

body {
	background-color: #f8f8f8;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic", YuGothic, YuGothicMedium, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	line-height: 1.7;
}

/*
* 表示コントロール
*/

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: inherit;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 0.625rem;
}

h1,
.h1 {
	font-size: 2.375rem;
}

h2,
.h2 {
	font-size: 1.875rem;
}

h3,
.h3 {
	font-size: 1.625rem;
}

h4,
.h4 {
	font-size: 1.375rem;
}

h5,
.h5 {
	font-size: 1.125rem;
}

h6,
.h6 {
	font-size: 0.875rem;
}

.lead {
	font-size: 1.125rem;
}

.lead-bold {
	font-size: 1.125rem;
	font-weight: bold;
}

.blockquote {
	font-size: 1.25rem;
}

p {
	margin-block-end: 1em;
	margin-block-start: 1em;
}

.text-shadow-nomal {
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.width-100 {
	height: auto;
	width: 100% !important;
}

.obj-fit-cover {
	-o-object-fit: cover;
	object-fit: cover;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.position-relative {
	position: relative;
}

.block-center {
	display: flex;
	justify-content: center;
}

.block-left {
	display: flex;
	justify-content: start;
}

.block-right {
	display: flex;
	justify-content: flex-end;
}

img {
	width: 100%;
}

img.width-auto {
	width: auto;
}

/* レポンシブテーブル*/

table.responsive {
	width: 100%;
}

table.responsive th,
table.responsive td {
	display: block;
	width: 100%;
}

/* ドットリスト
-----------------------------------------------------*/

ul.dot li {
	line-height: 1.5; /*文の行高*/
	padding: 0.5rem 0 0.5rem 1rem; /*前後の文との余白*/
	position: relative;
}

ul.dot li:before {
	background: #1d1d1d;
	border-radius: 50%;
	content: "";
	counter-increment: list;
	display: block;
	height: 10px;
	left: 0px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
}

/* 箇条書きリスト
-----------------------------------------------------*/

ul.label {
	align-content: center;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

ul.label li {
	line-height: 1.5; /*文の行高*/
	padding: 0.5rem 0 0.5rem 1rem; /*前後の文との余白*/
}

.display-inline {
	display: inline;
}

.display-block {
	display: block;
}

.display-inline-block {
	display: inline-block;
}

.sf-display1 {
	font-size: calc(1.7325em + 0.9vw);
	font-weight: 300;
}

.sf-display2 {
	font-size: 9vw;
	font-weight: 300;
}

.sf-display3 {
	font-size: 8vw;
	font-weight: 300;
}

.sf-display4 {
	font-size: 7vw;
	font-weight: 300;
}

.sf-display5 {
	font-size: 6vw;
	font-weight: 300;
}

/* Google Mapを囲う要素 */

.ggmap {
	height: 0; /*padding-top: 75%; /* 比率を4:3に固定 */
	padding-top: 44%;
	position: relative;
	width: 100%;
}

/* Google Mapのiframe */

.ggmap iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.row-center {
	justify-content: center;
}

.row.reverse {
	flex-wrap: wrap-reverse;
}

.row-1-1 {
	width: 100%;
}

.row-1-2 {
	width: 50%;
}

.row-1-3 {
	width: 33.3333333333%;
}

.row-1-4 {
	width: 25%;
}

.row-1-5 {
	width: 20%;
}

.row-1-6 {
	width: 16.6666666667%;
}

.row-1-7 {
	width: 14.2857142857%;
}

.row-1-8 {
	width: 12.5%;
}

.row-1-9 {
	width: 11.1111111111%;
}

.row-1-10 {
	width: 10%;
}

.row-1-11 {
	width: 9.0909090909%;
}

.row-1-12 {
	width: 8.3333333333%;
}

/* 2-12 */

.row-2-3 {
	width: 66.6666666667%;
}

.row-2-4 {
	width: 50%;
}

.row-2-5 {
	width: 40%;
}

.row-2-6 {
	width: 33.3333333333%;
}

.row-2-7 {
	width: 28.5714285714%;
}

.row-2-8 {
	width: 25%;
}

.row-2-9 {
	width: 22.2222222222%;
}

.row-2-10 {
	width: 20%;
}

.row-2-11 {
	width: 18.1818181818%;
}

.row-2-12 {
	width: 16.6666666667%;
}

/* 3-12 */

.row-3-4 {
	width: 75%;
}

.row-3-5 {
	width: 60%;
}

.row-3-6 {
	width: 50%;
}

.row-3-7 {
	width: 42.8571428571%;
}

.row-3-8 {
	width: 37.5%;
}

.row-3-9 {
	width: 33.3333333333%;
}

.row-3-10 {
	width: 30%;
}

.row-3-11 {
	width: 27.2727272727%;
}

.row-3-12 {
	width: 25%;
}

/* 4-12 */

.row-4-5 {
	width: 80%;
}

.row-4-6 {
	width: 66.6666666667%;
}

.row-4-7 {
	width: 57.1428571429%;
}

.row-4-8 {
	width: 50%;
}

.row-4-9 {
	width: 44.4444444444%;
}

.row-4-10 {
	width: 40%;
}

.row-4-11 {
	width: 36.3636363636%;
}

.row-4-12 {
	width: 33.3333333333%;
}

/* 5-12 */

.row-5-6 {
	width: 83.3333333333%;
}

.row-5-7 {
	width: 71.4285714286%;
}

.row-5-8 {
	width: 62.5%;
}

.row-5-9 {
	width: 55.5555555556%;
}

.row-5-10 {
	width: 50%;
}

.row-5-11 {
	width: 45.4545454545%;
}

.row-5-12 {
	width: 41.6666666667%;
}

/* 6-12 */

.row-6-6 {
	width: 100%;
}

.row-6-7 {
	width: 85.7142857143%;
}

.row-6-8 {
	width: 75%;
}

.row-6-9 {
	width: 66.6666666667%;
}

.row-6-10 {
	width: 60%;
}

.row-6-11 {
	width: 54.5454545455%;
}

.row-6-12 {
	width: 50%;
}

/* 7-12 */

.row-7-8 {
	width: 87.5%;
}

.row-7-9 {
	width: 77.7777777778%;
}

.row-7-10 {
	width: 70%;
}

.row-7-11 {
	width: 63.6363636364%;
}

.row-7-12 {
	width: 58.3333333333%;
}

/* 8-12 */

.row-8-9 {
	width: 88.8888888889%;
}

.row-8-10 {
	width: 80%;
}

.row-8-11 {
	width: 72.7272727273%;
}

.row-8-12 {
	width: 66.6666666667%;
}

/* 9-12 */

.row-9-10 {
	width: 90%;
}

.row-9-11 {
	width: 81.8181818182%;
}

.row-9-12 {
	width: 75%;
}

/* 10-12 */

.row-10-11 {
	width: 90.9090909091%;
}

.row-10-12 {
	width: 83.3333333333%;
}

/* 11-12 */

.row-11-12 {
	width: 91.6666666667%;
}

/*
* 表示コントロール
* $breakpoint-up: (
*   's': 'screen and (min-width: 520px)',
*   'm': 'screen and (min-width: 960px)',
* ) !default;
*/

.visible {
	display: initial !important;
}

.hidden {
	display: none !important;
}

/*
* 表示コントロール
* $breakpoint-up: (
*   's': 'screen and (min-width: 520px)',
*   'm': 'screen and (min-width: 960px)',
* ) !default;
*/

.margin-none {
	margin: 0 !important;
}

.margin-top-none {
	margin-top: 0;
}

.margin-top-xs {
	margin-top: 8px;
}

.margin-top-s {
	margin-top: 16px;
}

.margin-top-m {
	margin-top: 32px;
}

.margin-top-l {
	margin-top: 128px;
}

.margin-top-xl {
	margin-top: 128px;
}

.margin-right-none {
	margin-right: 0;
}

.margin-right-xs {
	margin-right: 8px;
}

.margin-right-s {
	margin-right: 16px;
}

.margin-right-m {
	margin-right: 32px;
}

.margin-right-l {
	margin-right: 128px;
}

.margin-right-xl {
	margin-right: 128px;
}

.margin-bottom-none {
	margin-bottom: 0;
}

.margin-bottom-xs {
	margin-bottom: 8px;
}

.margin-bottom-s {
	margin-bottom: 16px;
}

.margin-bottom-m {
	margin-bottom: 32px;
}

.margin-bottom-l {
	margin-bottom: 128px;
}

.margin-bottom-xl {
	margin-bottom: 128px;
}

.margin-left-none {
	margin-left: 0;
}

.margin-left-xs {
	margin-left: 8px;
}

.margin-left-s {
	margin-left: 16px;
}

.margin-left-m {
	margin-left: 32px;
}

.margin-left-l {
	margin-left: 128px;
}

.margin-left-xl {
	margin-left: 128px;
}

/*
* 表示コントロール
* $breakpoint-up: (
*   's': 'screen and (min-width: 520px)',
*   'm': 'screen and (min-width: 960px)',
* ) !default;
*/

.padding-none {
	margin: 0 !important;
}

.padding-top-none {
	padding-top: 0 !important;
}

.padding-top-xs {
	padding-top: 0.25rem !important;
}

.padding-top-s {
	padding-top: 0.5rem !important;
}

.padding-top-m {
	padding-top: 1rem !important;
}

.padding-top-l {
	padding-top: 1.25rem !important;
}

.padding-top-xl {
	padding-top: 1.5rem !important;
}

.padding-none {
	padding: 0 !important;
}

.padding-xs {
	padding: 0.25rem !important;
}

.padding-s {
	padding: 0.5rem !important;
}

.padding-m {
	padding: 1rem !important;
}

.padding-l {
	padding: 1.25rem !important;
}

.padding-xl {
	padding: 1.5rem !important;
}

.padding-right-none {
	padding-right: 0 !important;
}

.padding-right-xs {
	padding-right: 0.25rem !important;
}

.padding-right-s {
	padding-right: 0.5rem !important;
}

.padding-right-m {
	padding-right: 1rem !important;
}

.padding-right-l {
	padding-right: 1.25rem !important;
}

.padding-right-xl {
	padding-right: 1.5rem !important;
}

.padding-bottom-none {
	padding-bottom: 0 !important;
}

.padding-bottom-xs {
	padding-bottom: 0.25rem !important;
}

.padding-bottom-s {
	padding-bottom: 0.5rem !important;
}

.padding-bottom-m {
	padding-bottom: 1rem !important;
}

.padding-bottom-l {
	padding-bottom: 1.25rem !important;
}

.padding-bottom-xl {
	padding-bottom: 1.5rem !important;
}

.padding-left-none {
	padding-left: 0 !important;
}

.padding-left-xs {
	padding-left: 0.25rem !important;
}

.padding-left-s {
	padding-left: 0.5rem !important;
}

.padding-left-m {
	padding-left: 1rem !important;
}

.padding-left-l {
	padding-left: 1.25rem !important;
}

.padding-left-xl {
	padding-left: 1.5rem !important;
}

/*タイムライン全体の設定*/

.timeline {
	margin: 50px auto;
	max-width: 700px;
	padding: 0 30px;
	width: 100%;
}

.timeline > li {
	list-style: none;
	padding: 0 0 20px 0; /*タイムラインの見出し横の丸の位置と形状*/
	position: relative; /*線の起点とするためrelativeを設定*/
}

.timeline > li::after {
	background: #0d6efd;
	border-radius: 50%;
	content: "";
	height: 20px;
	left: -5px;
	position: absolute;
	top: 10px;
	width: 20px;
}

.timeline dl {
	margin: 0 0 20px 3em;
}

.timeline dd strong {
	display: block;
	padding: 10px 0;
}

/*絶対配置で線を設定*/

.border-line {
	background: #ccc;
	height: 0; /*はじめは高さを0に*/
	left: 0.2em;
	position: absolute; /*線の位置*/
	top: 0;
	width: 2px; /*線の太さ*/
}

.btn,
.web-btn,
a.web-btn,
a.btn,
button.btn {
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	line-height: 1.5;
	margin: 20px;
	padding: 1rem 2rem;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	background-color: #5ab2ff;
	border-radius: 0.5rem;
	color: #fff;
	letter-spacing: 0.1rem;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	user-select: none;
	vertical-align: middle;
}

.btn:hover,
.web-btn:hover,
a.btn:hover,
button.btn:hover {
	background: #0d6efd;
	color: #fff;
}

/*
* 改行タイプ(左画像挿入)
**********************************/

.tel-btn,
a.tel-btn {
	background-color: #fff;
	color: #000;
	margin-bottom: 20px;
	margin-top: 20px;
}

.tel-btn:hover,
a.tel-btn:hover {
	background: #a9b5bd;
	color: #fff;
}

.fa-position-left {
	left: 0.5rem;
	position: absolute;
	top: calc(50% - 0.5em);
}

/*
* 改行タイプ2（右画像挿入）
**********************************/

.web-btn,
a.web-btn {
	background-color: #e64114;
	color: #fff;
	position: relative;
}

.web-btn:hover,
a.web-btn:hover {
	background: #f07756;
	color: #fff;
}

.fa-position-right {
	position: absolute;
	right: 0.5rem;
	top: calc(50% - 0.5em);
}

/*
* 改行タイプ3(左画像挿入)
**********************************/

.point-btn,
a.point-btn {
	background-color: #BDD9BF;
	color: #000;
	margin-bottom: 20px;
	margin-top: 20px;
}

.point-btn:hover,
a.point-btn:hover {
	background: #a9b5bd;
	color: #fff;
}

.fa-position-left {
	left: 0.5rem;
	position: absolute;
	top: calc(50% - 0.5em);
}

/*スマホ表示の時のみ改行*/

.sp-only {
	display: none;
}

/*スマホ表示の時のみ改行*/

/* 通常のスタイル（PCなどで適用される） */

.mobile-large {
	font-size: 16px; /* 通常のサイズ */
}

/* スマホ（モバイル）の時のみ適用するスタイル */

.anime-bgextend {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-name: bgextendAnimeBase;
	opacity: 0;
	overflow: hidden;
	position: relative;
}

.anime-bgextend .anime-bgappear {
	animation-delay: 0.6s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-name: bgextendAnimeSecond;
	opacity: 0;
}

/*
* 左から右
*
*/

.anime-bgLRextend::before {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-name: bgLRextendAnime;
	background-color: #ececec;
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
}

/*
* 右から左
*
*/

.anime-bgRLextend::before {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-name: bgRLextendAnime;
	background-color: #ececec;
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
}

/* お知らせ用 */

.anime-fadeUp-serial {
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-name: fadeUpAnime;
	opacity: 0;
}

/* 下から */

.anime-fadeUp-trigger {
	opacity: 0;
}

.anime-fadeUp {
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-name: fadeUpAnime;
	opacity: 0;
}

/* 上から */

.anime-fadeDown-trigger {
	opacity: 0;
}

.anime-fadeDown {
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-name: fadeDownAnime;
	opacity: 0;
}

/* 左下から */

.anime-fadeLeftUp-trigger {
	opacity: 0;
}

.anime-fadeLeftUp {
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-name: fadeLeftUpAnime;
	opacity: 0;
}

/* 右上から */

.anime-fadeRightDown-trigger {
	opacity: 0;
}

.anime-fadeRightDown {
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-name: fadeRightDownAnime;
	opacity: 0;
}

#header {
	align-items: center;
	background: #0d6efd; /*background: #fff;*/
	display: flex;
	min-height: 65px;
	text-align: center;
}

.anime-slide-in {
	display: inline-block;
	overflow: hidden;
}

.anime-slide-in_inner {
	display: inline-block;
}

/*左右のアニメーション*/

.anime-flowing-left {
	opacity: 0; /*事前に透過0にして消しておく*/
}

.anime-flowingLeftRight {
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-name: slideTextX100;
	opacity: 0;
}

.anime-flowingRightLeft {
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-name: slideTextX-100;
	opacity: 0;
}

/*アコーディオン全体*/

.accordion-area {
	list-style: none;
	margin: 0 auto;
	max-width: 900px;
	width: 96%;
}

.accordion-area li {
	margin: 10px 0;
}

.accordion-section {
	border: 1px solid #ccc;
}

/*アコーディオンタイトル*/

.accordion-title {
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	padding: 3% 3% 3% 50px;
	position: relative; /*+マークの位置基準とするためrelative指定*/
	transition: all 0.5s ease;
}

/*アイコンの＋と×*/

.accordion-title::before,
.accordion-title::after {
	background-color: #333;
	content: "";
	height: 2px;
	position: absolute;
	width: 15px;
}

.accordion-title::before {
	left: 15px;
	top: 48%;
	transform: rotate(0deg);
}

.accordion-title::after {
	left: 15px;
	top: 48%;
	transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/

.accordion-title.accordion-close::before {
	transform: rotate(45deg);
}

.accordion-title.accordion-close::after {
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/

.accordion-box {
	background: #f3f3f3;
	display: none; /*はじめは非表示*/
	margin: 0 3% 3% 3%;
	padding: 3%;
}

.global-nav {
	position: absolute;
	right: 0;
	top: 10px;
}

.global-nav li {
	display: inline-block;
	padding: 10px;
}

.global-nav a {
	color: #fff;
}

/* ハンバーガーメニューボタン
**********************************************/

.hamburger-outer {
	display: flex;
	display: -ms-flexbox;
	justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	flex-wrap: nowrap;
	height: 100%;
	-ms-flex-wrap: wrap;
	align-content: center;
	-ms-flex-line-pack: center;
}

.hamburger {
	cursor: pointer;
	display: block; /*position: fixed;*/
	height: 42px;
	padding: 20px;
	position: sticky;
	text-align: center;
	width: 42px;
	z-index: 3; /*
  right : 20px;
  top   : 20px;
  */
}

.hamburger span {
	background: #FFF;
	display: block;
	height: 2px;
	left: 6px;
	position: absolute;
	transition: 0.3s ease-in-out;
	width: 30px;
}

.hamburger span:nth-child(1) {
	top: 10px;
}

.hamburger span:nth-child(2) {
	top: 20px;
}

.hamburger span:nth-child(3) {
	top: 30px;
}

.hamburger.active { /* スマホメニューを開いてる時のボタン */
}

.hamburger.active span:nth-child(1) {
	background: #FFF;
	left: 6px;
	top: 16px;
	transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
	background: #FFF;
	top: 16px;
	transform: rotate(45deg);
}

/* メニュー背景　*/

nav.global-nav-mobile {
	background: #0d6efd; /*動き*/
	height: calc(100vh - 52px); /*ナビの高さ*/
	left: 0;
	position: fixed; /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	top: -120%;
	transition: all 0.6s;
	width: 100%;
	z-index: 99999; /*ナビのスタート位置と形状*/
}

/*アクティブクラスがついたら位置を0に*/

nav.global-nav-mobile.active {
	top: 0;
}

/*ナビゲーション*/

nav.global-nav-mobile ul {
	left: 50%;
	position: absolute; /*ナビゲーション天地中央揃え*/
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 999;
}

/*リストのレイアウト設定*/

nav.global-nav-mobile li {
	list-style: none;
	text-align: center;
}

nav.global-nav-mobile li a {
	color: #fff;
	display: block;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding: 10px;
	text-decoration: none;
	text-transform: uppercase;
}

/*
  nav.global-nav-mobile {
		position: fixed;
		z-index : 2;
		top  : 0;
		left : 0;
		color: variables.$global-nav-mobile-text-color;
		background: variables.$global-nav-mobile-background-color;
		text-align: center;
		width: 100%;
		transform: translateX(-100%);
		transition: all 0.6s;
		z-index: 99999;

		ul {
			margin: 0 auto;
			padding: 0;
			width: 100%;
			// height: calc(100vh - 49.98px - 73.191px);
			height: calc( calc( var(--vh, 1vh) * 100 ) - 52px - 80px - 12px );
			// height: 100vh;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			li {
				list-style-type: none;
				padding: 0;
				width: 100%;
				height: 100%;
				min-height: 50px;
				transition: .4s all;
				border-top: 0.05rem solid variables.$global-nav-mobile-boder-color;
    		margin: 0;

				display: flex;
				align-items: center;

				&::last-child {
					padding-bottom: 0;
				}

				&::hover{
					background :variables.$global-nav-mobile-link-hover-text-color;
					background:#FFF;
				}

				a {
					display: inline-block;
					color: variables.$global-nav-mobile-text-color;
					padding-left: 1rem;
					text-decoration :none;
					width: 100%;
					text-align: left;
				}
			}
		}
  }
*/

/* クリックでjQueryで追加・削除 */

nav.global-nav-mobile.active {
	display: block;
	opacity: 100;
	transform: translateX(0%);
}

.global-footer-nav li {
	display: inline-block;
	padding: 0.6rem;
}

.global-footer-nav-mobile {
	background-color: #0a0a0a;
	bottom: 0;
	height: 52px;
	position: fixed;
	width: 100%;
	z-index: 10;
}

.global-footer-nav-mobile li {
	align-items: center;
	border-right: 1px solid #FFF;
	font-size: 14px;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.global-footer-nav-mobile li a {
	color: #FFF;
	display: block;
	padding: 0.6rem;
	text-align: center;
	width: 100%;
}

.global-footer-nav {
	text-align: right;
}

/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.global-nav li a,
.global-footer-nav li a {
	padding-bottom: 6px;
	position: relative; /*線の基点とするためrelativeを指定*/
}

.global-nav li.current a,
.global-nav li a:hover,
.global-footer-nav li.current a,
.global-footer-nav li a:hover {
	color: #FFF;
}

.global-nav li a::after,
.global-footer-nav li a::after {
	background: #FFF; /*アニメーションの指定*/
	bottom: 0;
	content: ""; /*絶対配置で線の位置を決める*/
	height: 2px;
	left: 10%; /*線の形状*/
	position: absolute;
	transform: scale(0, 1); /*X方向0、Y方向1*/
	transform-origin: center top; /*上部中央基点*/
	transition: all 0.3s;
	width: 90%;
}

/*現在地とhoverの設定*/

.global-nav li.current a::after,
.global-nav li a:hover::after,
.global-footer-nav li.current a::after,
.global-footer-nav li a:hover::after {
	transform: scale(1, 1); /*X方向にスケール拡大*/
}

.formlist dt {
	align-items: center;
	display: flex;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 0.8rem;
	padding-top: 1.6rem;
}

.formlist dd {
	line-height: 1.4;
	padding-bottom: 1.6rem;
}

.formlist__icon {
	background: #B3B3B3;
	color: #fff;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: normal;
	margin-right: 0.8rem;
	padding: 0.3em;
	text-align: center;
	width: 3em;
}

.formlist__icon.is-required {
	background: #e64114;
}

.formlist__checklist li:not(:last-child) {
	margin-bottom: 0.8rem;
}

.formlist__checklist label {
	border: 1px solid #CED1D2;
	border-radius: 6px;
	display: block;
	padding: 1rem;
}

.formlist__radiolist li:not(:last-child) {
	margin-bottom: 1.6rem;
}

input,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #F9FAFA;
	border: 1px solid #CED1D2;
	border-radius: 6px;
	box-sizing: border-box;
	color: inherit;
	font-family: inherit;
	font-size: 1.6rem;
	line-height: 1.6;
	max-width: 100%;
	outline: none;
}

input[type=text],
input[type=number],
input[type=tel],
input[type=email],
input[type=password] {
	padding: 0.3rem 1.2rem;
	width: 14em;
}

textarea {
	height: 10em;
	padding: 0.3rem 1.2rem;
	width: 100%;
}

input[type=text].is-error,
input[type=number].is-error,
input[type=tel].is-error,
input[type=email].is-error,
input[type=password].is-error,
select.is-error,
textarea.is-error {
	background: #FEF2F0;
	border: 1px solid #F58271;
}

select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225.532%22%20height%3D%2214%22%20viewBox%3D%220%200%2025.532%2014%22%3E%3Cpath%20d%3D%22M82.249%2C82.431l.875.851%2C12.25-11.915h0l.875-.851-.875-.851h0L83.124%2C57.75l-.875.851L94.5%2C70.516Z%22%20transform%3D%22translate(83.282%20-82.249)%20rotate(90)%22%20fill%3D%22%23999%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
	background-position: calc(100% - 8px) center;
	background-repeat: no-repeat;
	background-size: 14px 8px;
	padding: 0.3rem 3.6rem 0.3rem 1.2rem;
}

select::-ms-expand {
	display: none;
}

input::-ms-clear {
	visibility: hidden;
}

:-ms-input-placeholder {
	color: #9EA3A5;
}

::-webkit-input-placeholder {
	color: #9EA3A5;
}

input[type=checkbox],
input[type=radio] {
	display: none;
}

label {
	cursor: pointer;
}

.c-checkbox {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	line-height: 1.2;
	text-align: left;
}

.c-checkbox:before {
	background: #F9FAFA;
	border: 1px solid #CED1D2;
	border-radius: 3px;
	content: "";
	display: block;
	flex: 1 0 auto;
	height: 22px;
	margin-right: 0.6rem;
	width: 22px;
}

:checked + .c-checkbox {
	position: relative;
}

:checked + .c-checkbox:before {
	background: #e64114;
	border: 1px solid #e64114;
}

:checked + .c-checkbox:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20enable-background%3D%22new%200%200%2024%2016%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m24%202.8-14.1%2013.2-9.9-9.3%202.6-2.8%207.2%206.8%2011.5-10.7z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	bottom: 0;
	content: "";
	display: inline-block;
	height: 17px;
	left: 3px;
	margin: auto;
	position: absolute;
	top: 0;
	width: 17px;
}

.c-radio {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	line-height: 1.2;
	text-align: left;
}

.c-radio:before {
	background: #F9FAFA;
	border: 1px solid #CED1D2;
	border-radius: 50%;
	content: "";
	display: block;
	flex: 1 0 auto;
	height: 22px;
	margin-right: 0.6rem;
	width: 22px;
}

:checked + .c-radio {
	position: relative;
}

:checked + .c-radio:after {
	background: #e64114;
	border-radius: 50%;
	bottom: 0;
	content: "";
	display: block;
	height: 10px;
	left: 7px;
	margin: auto;
	position: absolute;
	top: 0;
	width: 10px;
}

/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/

#page-top a {
	align-items: center;
	color: #0d6efd; /*color: $scroll-color;*/
	display: flex;
	font-size: 2.8rem;
	height: 60px;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	width: 60px;
}

#page-top a:hover { /*background: #777;*/
}

/*リンクを右下に固定*/

#page-top {
	bottom: 10px;
	opacity: 0;
	position: fixed;
	right: 10px;
	transform: translateY(100px);
	z-index: 2; /*はじめは非表示*/
}

/*　上に上がる動き　*/

#page-top.TopScrollUpMove {
	animation: TopScrollUpAnime 0.5s forwards;
}

/*　下に下がる動き　*/

#page-top.TopScrollDownMove {
	animation: TopScrollDownAnime 0.5s forwards;
}

.img-width-initial {
	width: initial !important;
}

.logo-image {
	max-height: 75px;
	width: 55%;
}

.top-header-image-inner .slick-track,
.top-header-image-inner .slick-list {
	height: 100vh !important;
}

.top-header-image-outer,
.top-header-image-inner {
	height: 100vh;
	position: relative;
	width: 99vw;
}

.top-header-image {
	height: 100vh;
	width: 100vw;
}

.top-hero-message {
	color: #FCEEF4;
	left: 8%; /*color: variables.$top-hero-message-text-color;*/
	position: absolute; /*top: 24%;*/
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	top: 50%;
}

.top-hero-message h2,
.top-hero-message h3 {
	font-size: 1.125rem;
}

.top-news-list {
	list-style: none outside;
	margin: 0 0 20px 0;
	padding: 0;
}

.top-news-list .top-news-list-item a {
	border-bottom: 1px solid #CCC;
	color: #333333;
	display: flex;
	flex-wrap: wrap;
	flex-wrap: nowrap;
	padding: 20px 20px;
	text-decoration: none;
}

.top-news-list .top-news-list-item a:hover .top-news-list-title {
	color: #00F;
}

.top-news-list .top-news-list-item:first-child a {
	border-top: 1px solid #CCC;
}

.top-news-list .top-news-list-item .top-news-list-date {
	color: #999;
	font-size: 16px;
	margin: 0;
	min-width: 140px;
	padding: 0 20px 0 0;
}

.top-news-list .top-news-list-item .top-news-list-date:hover {
	color: #00F;
}

.top-news-list .top-news-list-item .top-news-list-category {
	margin: 0;
	min-width: 140px;
	padding: 0 20px 0 0;
}

.top-news-list .top-news-list-item .top-news-list-category span.info,
.top-news-list .top-news-list-item .top-news-list-category span.important,
.top-news-list .top-news-list-item .top-news-list-category span.press {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	padding: 5px 20px;
	text-align: center;
	width: 100%;
}

.top-news-list .top-news-list-item .top-news-list-category span.info {
	background: #bae2f8;
	color: #333333;
}

.top-news-list .top-news-list-item .top-news-list-category span.important {
	background: #ffd2e6;
	color: #333333;
}

.top-news-list .top-news-list-item .top-news-list-category span.press {
	background: #fff;
	color: #333333;
}

.top-news-list .top-news-list-item .top-news-list-title {
	margin: 0;
	width: 100%;
}

.top-news-list .top-news-list-item a {
	flex-wrap: wrap;
}

.top-news-list .top-news-list-item .top-news-list-date {
	min-width: 140px;
}

.top-news-list .top-news-list-item .top-news-list-title {
	margin-top: 10px;
}

.top-service-image {
	width: 100%; /*height: 360px;*/
	-o-object-fit: cover;
	object-fit: cover;
}

/*Facebook センタリング*/

.top-fb-plugin-responsive {
	display: flex;
}

.top-fb-plugin-responsive iframe {
	margin: 0 auto;
}

/* scrollDown Start  */

/*Scrollテキストの描写*/

.scrolldown1 {
	bottom: 36%;
	left: 50%;
	position: absolute;
	z-index: 9999;
}

.scrolldown1 span {
	color: #eee;
	font-size: 0.8rem;
	font-weight: bold;
	left: -15px;
	letter-spacing: 0.05em;
	position: absolute; /*描画位置*/
	top: -15px; /*テキストの形状*/
}

/* 線の描写 */

.scrolldown1::after {
	animation: pathmove 1.4s ease-in-out infinite;
	background: #eee; /*線の動き1.4秒かけて動く。永遠にループ*/
	content: ""; /*描画位置*/
	height: 30px;
	opacity: 0;
	position: absolute;
	top: 0; /*線の形状*/
	width: 2px;
}

/*高さ・位置・透過が変化して線が上から下に動く*/

/* scrollDown end  */

.title-h1 {
	color: #fff;
	margin-bottom: 2rem;
	text-align: center;
}

.title-h1 span {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 18px;
	justify-content: center;
	text-transform: uppercase;
}

.title-h1 span:before {
	background-color: #fff;
	content: "";
	display: inline-block;
	height: 1px;
	margin-right: 10px;
	width: 15px;
}

.title-h1 span:after {
	background-color: #fff;
	content: "";
	display: inline-block;
	height: 1px;
	margin-left: 10px;
	width: 15px;
}

.sub-header-image-outer,
.sub-header-image-inner {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 20vh;
	width: 100vw;
}

.sub-header-image-outer h1,
.sub-header-image-inner h1 {
	color: #fff;
	text-align: center;
}

.sub-header-image-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}

.insp-header-image-inner {
	background-image: url(../user_images/page1/page1.jpg);
}

.insp-step-img1 {
	border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
	left: 54%;
	max-width: 188px;
	position: absolute;
	top: 10px;
	transform: rotate(-12deg);
}

.insp-step-img2 {
	border-radius: 90% 30% 70% 30%/90% 70% 30% 30%;
	left: 64%;
	max-width: 118px;
	position: absolute;
	top: 48%;
}

.insp-step-img3 {
	border-radius: 30% 30% 70% 70%/70% 30% 30% 70%;
	left: 45%;
	max-width: 118px;
	position: absolute;
	top: 51%;
	transform: rotate(17deg);
}

.insp-step-img4 {
	border-radius: 128% 39% 105% 63%/67% 129% 49% 70%;
	left: 54%;
	max-width: 118px;
	position: absolute;
	top: 79%;
	transform: rotate(-14deg);
}

.metal-header-image-inner {
	background-image: url(./user_images/page2/page2.jpg);
}

.insurance-header-image-inner {
	background-image: url(./user_images/page3/page3.jpg);
}

.company-header-image-inner {
	background-image: url(./user_images/company/comphead.jpg);
}

.page4-header-image-inner {
	background-image: url(../user_images/page4/page4.jpg);
}

.page5-header-image-inner {
	background-image: url(../user_images/page5/page5.jpg);
}

.attention {
	border: solid 1px #d30808;
	color: #d30808;
	font-size: 30px;
	margin: 0 auto 40px;
	max-width: 940px;
	text-align: center;
}

.trapezoid {
	border-bottom: 60px solid #000;
	border-right: 30px solid transparent;
	color: #fff;
	height: 0px;
	margin-top: 30px;
	width: 180px;
}

.trapezoid .trapezoid-inner {
	padding-top: 16px;
	text-align: center;
}

.title-outer {
	background-color: #212529;
	display: flex;
	justify-content: center;
	padding-bottom: 16px;
	padding-top: 32px;
}

.arrow_contents {
	margin: 0 auto;
	max-width: 1248px;
	padding: 3.5rem 0.8rem;
	position: relative;
}

.arrow_contents:before {
	background-color: #212529;
	border-bottom: 1px solid #e8e8e8;
	border-right: 1px solid #e8e8e8;
	content: "";
	height: 36px;
	left: 50%;
	margin-left: -18px;
	position: absolute;
	top: -18px;
	transform: scaleY(0.7) rotate(45deg);
	width: 36px;
}

.contents {
	margin: 0 auto;
	max-width: 1248px;
	padding: 20px 0.8rem;
	position: relative;
}

main {
	margin-top: pxrem(19.2);
}

main .article {
	padding-bottom: 20px;
	padding-top: 0;
}

footer {
	background-color: #0d6efd;
	color: #fff;
}

.card {
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	color: #333;
	margin: 10px auto;
	max-width: 600px;
	min-height: 300px;
	padding: 15px;
	width: 94%;
}

.card h2 {
	margin-bottom: pxrem(16);
	position: relative;
}

.card h2:after {
	bottom: -5px;
	content: "";
	height: 5px; /*background-color: variables.$card-h2-underline-color;*/
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 70px;
}

.card-type {
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	color: #333;
	margin: 10px auto;
	padding: 15px;
}

.card-type h2 {
	margin-bottom: pxrem(16);
	position: relative;
}

table {
	width: 100%;
}

table tr,
table td,
table th {
	padding: 5px;
	text-align: left;
}

table th {
	background-color: #0d6efd;
	color: #fff;
	vertical-align: middle;
	white-space: nowrap;
	width: auto;
}

.table-line {
	border-left: solid 1px #333;
	border-top: solid 1px #333;
}

.table-line td,
.table-line th {
	border-bottom: solid 1px #333;
	border-right: solid 1px #333;
}

.table-text-center th,
.table-text-center td {
	text-align: center;
	vertical-align: middle;
}

.company-table {
	width: 100%;
}

.company-table tr,
.company-table td,
.company-table th {
	display: block;
	padding: 5px;
}

.company-table th {
	background-color: #333;
	color: #FFF;
	vertical-align: top;
	white-space: nowrap;
	width: auto;
}

/*
	線と背景色で染めるテーブル
	class="table table-background-line"
*/

.table-background-line {
	border-bottom: solid 16px #fadce4 !important;
	border-collapse: collapse;
	border-top: solid 16px #fadce4 !important;
}

.table-background-line th,
.table-background-line td {
	background-color: #FFF;
	border-left: solid 16px #fadce4;
	border-right: solid 16px #fadce4;
	color: #254451;
	text-align: left;
}

.table-background-line th {
	border-bottom: solid 5px #fadce4;
}

.table-background-line td {
	border-bottom: solid 16px #fadce4;
}

.table-background-line {
	padding: 10px;
}

.responsive {
	border: solid 1px #ddd;
	overflow: auto;
	white-space: nowrap;
}

.responsive table {
	margin: 0;
}

.top-news-slider-outer {
	background: color #BDD9BF; /*	background-color: variables.$top-news-slider-background-color;*/
	bottom: 10px;
	padding: 10px;
	right: 10px;
	width: 100%;
}

.top-news-slider-outer h2 {
	color: #333333;
	font-size: 1.375rem;
}

.top-news-slider-outer li:after {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
}

.top-news-slider-outer a {
	color: #333333;
}

.marker-primary {
	display: inline;
	padding-bottom: 0.3rem;
	position: relative;
}

.marker-primary::after {
	animation: borderAnime 0.5s forwards;
	background: #333; /*アニメーションの指定*/
	bottom: 0;
	content: ""; /*絶対配置で線の位置を決める*/
	height: 4px;
	left: 0; /*線の形状*/
	position: absolute;
	transform: scale(0, 1); /*X方向0、Y方向1*/
	transform-origin: left top; /*左上基点*/
	transition: all 0.3s;
	width: 100%;
}

.text-red {
	color: #d30808;
}

.kome {
	color: #e60012;
	font-size: 0.9rem;
	line-height: 1.5;
	padding-left: 1.5rem;
}

.kome li::before {
	color: #e60012;
	content: "※";
	display: inline-block;
	margin-left: -1.5rem;
	width: 1.5rem;
}

/*
ページタイトルの写真斜め切り
*/

.slanting {
	display: none;
}

/*==================================================
レイアウト
===================================*/

.container {
	margin: 0 auto;
	max-width: 1248px;
	padding: 3.5rem 0.8rem;
	position: relative;
}

/*==================================================
タイトル
===================================*/

.title1 {
	background-color: #a9b5bd;
	border-radius: 5px;
	color: #fff; /*background-color:variables.$title-outer-background-color;*/
	padding: 5px;
	text-align: center;
}

/*==================================================
文章と画像
===================================*/

.media-sentence ul {
	position: relative;
}

.media-sentence ul li {
	line-height: 1.5;
	list-style-type: none !important;
	padding: 0.5rem 0 0.5rem 3rem;
}

.media-sentence ul li:before {
	color: #1f88ff; /*アイコン色*/
	content: "\f00c"; /*アイコンの種類*/
	font-family: "FontAwesome"; /*疑似要素*/
	font-size: 1.3rem;
	left: 1rem; /*左端からのアイコンまでの距離*/
	position: absolute;
}

/*==================================================
ボックス
===================================*/

.box1 {
	background-color: #FAFAFA;
	padding: 3%;
}

.box1 .box1-inner {
	background-color: #fff;
	padding: 10px;
}

.box2 {
	background-color: #FFF; /*  background-color:variables.$box-background-color;*/
	border: solid 1.3px #93442A;
	border-radius: 5px; /*  border:solid 1.3px variables.$box-border-color;*/
	margin: 20px;
	padding: 30px;
}

/* タイトル付きボックス*/

.box3 {
	border: solid 3px #93442A;
	border-radius: 8px;
	margin: 2rem 0;
	padding: 1.5em 1.5em; /*border: solid 3px variables.$box-border-color;*/
	position: relative;
}

.box3 .box-title {
	background: #f8f8f8; /* color: variables.$box-border-color;*/
	color: #93442A;
	display: inline-block;
	font-size: 1.7rem;
	font-weight: bold;
	left: 10px;
	line-height: 1;
	padding: 0 9px;
	position: absolute;
	top: -13px;
}

.box3 p {
	margin: 0;
	padding: 0;
}

.box3 ul li {
	line-height: 1.5;
	list-style-type: none !important;
	padding: 0.5rem 0 0.5rem 1.5rem;
}

.box3 ul li:before {
	color: #1f88ff; /*アイコン色*/
	color: #93442A; /*アイコン色*/
	content: "\f00c"; /*アイコンの種類*/
	font-family: "FontAwesome"; /*疑似要素*/
	font-size: 1.3rem;
	left: 1rem; /*左端からのアイコンまでの距離*/
	position: absolute;
}

/* ポイントボックス*/

.box4 {
	border: solid 2px #1f88ff;
	margin-top: 3rem;
	padding: 1.5em 1.5em;
	position: relative;
}

.box4 p {
	margin: 0;
	padding: 0;
}

.box4 li {
	border-bottom: dashed 1px silver;
	line-height: 1.7;
	list-style-type: none !important;
	padding: 0.5rem 0 0.5rem 1.4rem;
}

.box4 li:last-of-type {
	border-bottom: none;
}

.box4 li:before {
	color: #1f88ff; /*アイコン色*/
	content: "\f138"; /*アイコン種類*/
	font-family: "FontAwesome"; /*リスト内のアイコン*/
	font-size: 1.3rem;
	left: 0.5rem; /*左端からのアイコンまで*/
	position: absolute;
}

.box4 li:after {
	background: #1f88ff;
	bottom: 100%;
	color: #fff;
	content: "POINT!!  \f0eb"; /*タブの文字*/
	font-family: "FontAwesome";
	font-size: 1.3rem; /*タイトルタブ*/
	font-weight: bold;
	left: -2px;
	letter-spacing: 0.2rem; /*字間*/
	padding: 1px 7px;
	position: absolute;
}

/*==================================================
ギャラリーのためのcss
===================================*/

.gallery {
	-moz-columns: 2;
	columns: 2; /*段組みの数*/
	-moz-column-fill: auto;
	column-fill: auto;
	margin: 0;
	padding: 0 15px; /*ギャラリー左右に余白をつける*/
}

.gallery div {
	margin-bottom: 20px; /*各画像下に余白をつける*/
}

/*ギャラリー内のイメージは横幅100%にする*/

.gallery img {
	height: auto;
	vertical-align: bottom; /*画像の下にできる余白を削除*/
	width: 100%;
}

/*　横幅900px以下の段組み設定　*/

/*　横幅900px以下の段組み設定　*/

/* 管理者画面用 */

.top-menu-slider {
	display: flex;
	list-style: none;
}

.box2 {
	background: fff; /* 背景色 */
	border: 1px solid #eaeaea; /*枠線*/
	box-shadow: 1px 1px 0 #ccc; /*囲み枠に影を付ける*/
	margin: 56px 16px 32px; /*外側の余白*/
	margin: 10px;
	max-width: 400px;
	padding: 30px 16px 16px; /*内側の余白*/
	position: relative; /*必須*/ /*【div】囲み枠部分*/
}

.box2 .box-title {
	background: #fff9d0; /*背景色*/
	border-radius: 40px; /*角丸*/
	font-size: 24px; /* 文字のサイズ */
	left: 16px; /*囲み枠の左を基準として内側（右）に16px移動*/
	line-height: 48px; /*行の高さ*/
	padding: 7px 50px;
	position: absolute; /*必須*/ /*【span】タイトル部分*/
	text-align: center; /*文字の配置*/
	top: -24px; /*囲み枠の上を基準として外側（上）に24px移動*/
}

.box2 p {
	margin: 0; /*【p】本文部分*/
	padding: 0;
}

.step-text {
	font-size: 20px;
}

.step-title {
	font-size: 16px;
}

.note-text {
	color: #FF0000;
	font-size: 16px;
}

.contact-image {
	width: 60%;
}

.h3-hold {
	min-height: 4.2rem;
}

.comparison {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.comparison__item {
	list-style: none;
	position: relative;
	width: 100%;
}

.comparison__item_outer {
	border: 1px solid #eaeaea;
	box-shadow: 2px 2px #CCCCCC;
	margin: 0 5px;
	padding: 30px 16px 16px;
}

.comparison__item_title {
	background-color: #BDD9BF;
	border-radius: 1rem;
	color: #292929;
	font-size: 1.3rem;
	left: 50%;
	padding: 0.2rem 2rem;
	position: absolute;
	text-align: center;
	top: -1rem;
	transform: translateX(-50%);
	width: 74%;
}

.comparison__item_detail {
	padding: 1rem;
}

@media all and (-ms-high-contrast: none) {

body {
	font-family: Verdana, Meiryo, sans-serif;
}

}

@media all and (-ms-high-contrast: active) {

body {
	font-family: Verdana, Meiryo, sans-serif;
}

}

@media screen and (min-width: 1px) {

.visible\@s {
	display: none;
}

.visible\@m {
	display: none;
}

}

@media screen and (min-width: 520px) {

.text-center\@s {
	text-align: center;
}

.text-left\@s {
	text-align: left;
}

.text-right\@s {
	text-align: right;
}

.block-right\@s {
	display: flex;
	justify-content: flex-end;
}

.block-center\@s {
	display: flex;
	justify-content: center;
}

.block-left\@s {
	display: flex;
	justify-content: start;
}

img.width-auto\@s {
	width: auto;
}

table.responsive {
	width: initial;
}

table.responsive th,
table.responsive td {
	display: blotable-cellck;
	width: initial;
}

.row.reverse-none\@s {
	flex-wrap: wrap;
}

.row-1-1\@s {
	width: 100%;
}

.row-1-2\@s {
	width: 50%;
}

.row-1-3\@s {
	width: 33.3333333333%;
}

.row-1-4\@s {
	width: 25%;
}

.row-1-5\@s {
	width: 20%;
}

.row-1-6\@s {
	width: 16.6666666667%;
}

.row-1-7\@s {
	width: 14.2857142857%;
}

.row-1-8\@s {
	width: 12.5%;
}

.row-1-9\@s {
	width: 11.1111111111%;
}

.row-1-10\@s {
	width: 10%;
}

.row-1-11\@s {
	width: 9.0909090909%;
}

.row-1-12\@s {
	width: 8.3333333333%;
}

.row-2-3\@s {
	width: 66.6666666667%;
}

.row-2-4\@s {
	width: 50%;
}

.row-2-5\@s {
	width: 40%;
}

.row-2-6\@s {
	width: 33.3333333333%;
}

.row-2-7\@s {
	width: 28.5714285714%;
}

.row-2-8\@s {
	width: 25%;
}

.row-2-9\@s {
	width: 22.2222222222%;
}

.row-2-10\@s {
	width: 20%;
}

.row-2-11\@s {
	width: 18.1818181818%;
}

.row-2-12\@s {
	width: 16.6666666667%;
}

.row-3-4\@s {
	width: 75%;
}

.row-3-5\@s {
	width: 60%;
}

.row-3-6\@s {
	width: 50%;
}

.row-3-7\@s {
	width: 42.8571428571%;
}

.row-3-8\@s {
	width: 37.5%;
}

.row-3-9\@s {
	width: 33.3333333333%;
}

.row-3-10\@s {
	width: 30%;
}

.row-3-11\@s {
	width: 27.2727272727%;
}

.row-3-12\@s {
	width: 25%;
}

.row-4-5\@s {
	width: 80%;
}

.row-4-6\@s {
	width: 66.6666666667%;
}

.row-4-7\@s {
	width: 57.1428571429%;
}

.row-4-8\@s {
	width: 50%;
}

.row-4-9\@s {
	width: 44.4444444444%;
}

.row-4-10\@s {
	width: 40%;
}

.row-4-11\@s {
	width: 36.3636363636%;
}

.row-4-12\@s {
	width: 33.3333333333%;
}

.row-5-6\@s {
	width: 83.3333333333%;
}

.row-5-7\@s {
	width: 71.4285714286%;
}

.row-5-8\@s {
	width: 62.5%;
}

.row-5-9\@s {
	width: 55.5555555556%;
}

.row-5-10\@s {
	width: 50%;
}

.row-5-11\@s {
	width: 45.4545454545%;
}

.row-5-12\@s {
	width: 41.6666666667%;
}

.row-6-7\@s {
	width: 85.7142857143%;
}

.row-6-8\@s {
	width: 75%;
}

.row-6-9\@s {
	width: 66.6666666667%;
}

.row-6-10\@s {
	width: 60%;
}

.row-6-11\@s {
	width: 54.5454545455%;
}

.row-6-12\@s {
	width: 50%;
}

.row-7-8\@s {
	width: 87.5%;
}

.row-7-9\@s {
	width: 77.7777777778%;
}

.row-7-10\@s {
	width: 70%;
}

.row-7-11\@s {
	width: 63.6363636364%;
}

.row-7-12\@s {
	width: 58.3333333333%;
}

.row-8-9\@s {
	width: 88.8888888889%;
}

.row-8-10\@s {
	width: 80%;
}

.row-8-11\@s {
	width: 72.7272727273%;
}

.row-8-12\@s {
	width: 66.6666666667%;
}

.row-9-10\@s {
	width: 90%;
}

.row-9-11\@s {
	width: 81.8181818182%;
}

.row-9-12\@s {
	width: 75%;
}

.row-10-11\@s {
	width: 90.9090909091%;
}

.row-10-12\@s {
	width: 83.3333333333%;
}

.row-11-12\@s {
	width: 91.6666666667%;
}

.visible\@s {
	display: initial !important;
}

.hidden\@s {
	display: none !important;
}

.margin-top-none\@s {
	margin-top: 0;
}

.margin-top-xs\@s {
	margin-top: 8px;
}

.margin-top-s\@s {
	margin-top: 16px;
}

.margin-top-m\@s {
	margin-top: 32px;
}

.margin-top-l\@s {
	margin-top: 128px;
}

.margin-top-xl\@s {
	margin-top: 128px;
}

.margin-right-none\@s {
	margin-right: 0;
}

.margin-right-xs\@s {
	margin-right: 8px;
}

.margin-right-s\@s {
	margin-right: 16px;
}

.margin-right-m\@s {
	margin-right: 32px;
}

.margin-right-l\@s {
	margin-right: 128px;
}

.margin-right-xl\@s {
	margin-right: 128px;
}

.margin-bottom-none\@s {
	margin-bottom: 0;
}

.margin-bottom-xs\@s {
	margin-bottom: 8px;
}

.margin-bottom-s\@s {
	margin-bottom: 16px;
}

.margin-bottom-m\@s {
	margin-bottom: 32px;
}

.margin-bottom-l\@s {
	margin-bottom: 128px;
}

.margin-bottom-xl\@s {
	margin-bottom: 128px;
}

.margin-left-none\@s {
	margin-left: 0;
}

.margin-left-xs\@s {
	margin-left: 8px;
}

.margin-left-s\@s {
	margin-left: 16px;
}

.margin-left-m\@s {
	margin-left: 32px;
}

.margin-left-l\@s {
	margin-left: 128px;
}

.margin-left-xl\@s {
	margin-left: 128px;
}

.padding-top-none\@s {
	padding-top: 0 !important;
}

.padding-top-xs\@s {
	padding-top: 0.25rem !important;
}

.padding-top-s\@s {
	padding-top: 0.5rem !important;
}

.padding-top-m\@s {
	padding-top: 1rem !important;
}

.padding-top-l\@s {
	padding-top: 1.25rem !important;
}

.padding-top-xl\@s {
	padding-top: 1.5rem !important;
}

.padding-none\@s {
	padding: 0 !important;
}

.padding-xs\@s {
	padding: 0.25rem !important;
}

.padding-s\@s {
	padding: 0.5rem !important;
}

.padding-m\@s {
	padding: 1rem !important;
}

.padding-l\@s {
	padding: 1.25rem !important;
}

.padding-xl\@s {
	padding: 1.5rem !important;
}

.padding-right-none\@s {
	padding-right: 0 !important;
}

.padding-right-xs\@s {
	padding-right: 0.25rem !important;
}

.padding-right-s\@s {
	padding-right: 0.5rem !important;
}

.padding-right-m\@s {
	padding-right: 1rem !important;
}

.padding-right-l\@s {
	padding-right: 1.25rem !important;
}

.padding-right-xl\@s {
	padding-right: 1.5rem !important;
}

.padding-bottom-none\@s {
	padding-bottom: 0 !important;
}

.padding-bottom-xs\@s {
	padding-bottom: 0.25rem !important;
}

.padding-bottom-s\@s {
	padding-bottom: 0.5rem !important;
}

.padding-bottom-m\@s {
	padding-bottom: 1rem !important;
}

.padding-bottom-l\@s {
	padding-bottom: 1.25rem !important;
}

.padding-bottom-xl\@s {
	padding-bottom: 1.5rem !important;
}

.padding-left-none\@s {
	padding-left: 0 !important;
}

.padding-left-xs\@s {
	padding-left: 0.25rem !important;
}

.padding-left-s\@s {
	padding-left: 0.5rem !important;
}

.padding-left-m\@s {
	padding-left: 1rem !important;
}

.padding-left-l\@s {
	padding-left: 1.25rem !important;
}

.padding-left-xl\@s {
	padding-left: 1.5rem !important;
}

.logo_image {
	margin: 1vw;
	width: auto;
}

.logo-image {
	width: auto;
}

.top-hero-message {
	left: 8%;
	top: 50%; /*top: 32%;*/
}

.top-hero-message h2,
.top-hero-message h3 {
	font-size: 1.625rem;
}

.top-news-list .top-news-list-item a {
	flex-wrap: unset;
}

.top-news-list .top-news-list-item .top-news-list-date {
	min-width: 100px;
}

.top-news-list .top-news-list-item .top-news-list-title {
	margin-top: 0;
}

.head_title_photo1 {
	display: initial;
	left: auto;
	position: absolute;
	right: 4rem;
	top: -19rem; /*width: 25%;*/
}

.head_title_photo2 {
	display: initial;
	position: absolute;
	right: -1rem; /*width: 25%;*/
	top: -21rem;
}

.gallery {
	-moz-columns: 2;
	columns: 2;
}

.comparison__item {
	width: 33.3333333333%;
}

}

@media screen and (min-width: 960px) {

.text-center\@m {
	text-align: center;
}

.text-left\@m {
	text-align: left;
}

.text-right\@m {
	text-align: right;
}

.block-right\@m {
	display: flex;
	justify-content: flex-end;
}

.block-center\@m {
	display: flex;
	justify-content: center;
}

.block-left\@m {
	display: flex;
	justify-content: start;
}

img.width-auto\@m {
	width: auto;
}

table.responsive {
	width: initial;
}

table.responsive th,
table.responsive td {
	display: table-cell;
	width: initial;
}

.row.reverse-none\@m {
	flex-wrap: wrap;
}

.row-1-1\@m {
	width: 100%;
}

.row-1-2\@m {
	width: 50%;
}

.row-1-3\@m {
	width: 33.3333333333%;
}

.row-1-4\@m {
	width: 25%;
}

.row-1-5\@m {
	width: 20%;
}

.row-1-6\@m {
	width: 16.6666666667%;
}

.row-1-7\@m {
	width: 14.2857142857%;
}

.row-1-8\@m {
	width: 12.5%;
}

.row-1-9\@m {
	width: 11.1111111111%;
}

.row-1-10\@m {
	width: 10%;
}

.row-1-11\@m {
	width: 9.0909090909%;
}

.row-1-12\@m {
	width: 8.3333333333%;
}

.row-2-3\@m {
	width: 66.6666666667%;
}

.row-2-4\@m {
	width: 50%;
}

.row-2-5\@m {
	width: 40%;
}

.row-2-6\@m {
	width: 33.3333333333%;
}

.row-2-7\@m {
	width: 28.5714285714%;
}

.row-2-8\@m {
	width: 25%;
}

.row-2-9\@m {
	width: 22.2222222222%;
}

.row-2-10\@m {
	width: 20%;
}

.row-2-11\@m {
	width: 18.1818181818%;
}

.row-2-12\@m {
	width: 16.6666666667%;
}

.row-3-4\@m {
	width: 75%;
}

.row-3-5\@m {
	width: 60%;
}

.row-3-6\@m {
	width: 50%;
}

.row-3-7\@m {
	width: 42.8571428571%;
}

.row-3-8\@m {
	width: 37.5%;
}

.row-3-9\@m {
	width: 33.3333333333%;
}

.row-3-10\@m {
	width: 30%;
}

.row-3-11\@m {
	width: 27.2727272727%;
}

.row-3-12\@m {
	width: 25%;
}

.row-4-5\@m {
	width: 80%;
}

.row-4-6\@m {
	width: 66.6666666667%;
}

.row-4-7\@m {
	width: 57.1428571429%;
}

.row-4-8\@m {
	width: 50%;
}

.row-4-9\@m {
	width: 44.4444444444%;
}

.row-4-10\@m {
	width: 40%;
}

.row-4-11\@m {
	width: 36.3636363636%;
}

.row-4-12\@m {
	width: 33.3333333333%;
}

.row-5-6\@m {
	width: 83.3333333333%;
}

.row-5-7\@m {
	width: 71.4285714286%;
}

.row-5-8\@m {
	width: 62.5%;
}

.row-5-9\@m {
	width: 55.5555555556%;
}

.row-5-10\@m {
	width: 50%;
}

.row-5-11\@m {
	width: 45.4545454545%;
}

.row-5-12\@m {
	width: 41.6666666667%;
}

.row-6-7\@m {
	width: 85.7142857143%;
}

.row-6-8\@m {
	width: 75%;
}

.row-6-9\@m {
	width: 66.6666666667%;
}

.row-6-10\@m {
	width: 60%;
}

.row-6-11\@m {
	width: 54.5454545455%;
}

.row-6-12\@m {
	width: 50%;
}

.row-7-8\@m {
	width: 87.5%;
}

.row-7-9\@m {
	width: 77.7777777778%;
}

.row-7-10\@m {
	width: 70%;
}

.row-7-11\@m {
	width: 63.6363636364%;
}

.row-7-12\@m {
	width: 58.3333333333%;
}

.row-8-9\@m {
	width: 88.8888888889%;
}

.row-8-10\@m {
	width: 80%;
}

.row-8-11\@m {
	width: 72.7272727273%;
}

.row-8-12\@m {
	width: 66.6666666667%;
}

.row-9-10\@m {
	width: 90%;
}

.row-9-11\@m {
	width: 81.8181818182%;
}

.row-9-12\@m {
	width: 75%;
}

.row-10-11\@m {
	width: 90.9090909091%;
}

.row-10-12\@m {
	width: 83.3333333333%;
}

.row-11-12\@m {
	width: 91.6666666667%;
}

.visible\@m {
	display: initial !important;
}

.hidden\@m {
	display: none !important;
}

.margin-top-none\@m {
	margin-top: 0;
}

.margin-top-xs\@m {
	margin-top: 8px;
}

.margin-top-s\@m {
	margin-top: 16px;
}

.margin-top-m\@m {
	margin-top: 32px;
}

.margin-top-l\@m {
	margin-top: 128px;
}

.margin-top-xl\@m {
	margin-top: 128px;
}

.margin-right-none\@m {
	margin-right: 0;
}

.margin-right-xs\@m {
	margin-right: 8px;
}

.margin-right-s\@m {
	margin-right: 16px;
}

.margin-right-m\@m {
	margin-right: 32px;
}

.margin-right-l\@m {
	margin-right: 128px;
}

.margin-right-xl\@m {
	margin-right: 128px;
}

.margin-bottom-none\@m {
	margin-bottom: 0;
}

.margin-bottom-xs\@m {
	margin-bottom: 8px;
}

.margin-bottom-s\@m {
	margin-bottom: 16px;
}

.margin-bottom-m\@m {
	margin-bottom: 32px;
}

.margin-bottom-l\@m {
	margin-bottom: 128px;
}

.margin-bottom-xl\@m {
	margin-bottom: 128px;
}

.margin-left-none\@m {
	margin-left: 0;
}

.margin-left-xs\@m {
	margin-left: 8px;
}

.margin-left-s\@m {
	margin-left: 16px;
}

.margin-left-m\@m {
	margin-left: 32px;
}

.margin-left-l\@m {
	margin-left: 128px;
}

.margin-left-xl\@m {
	margin-left: 128px;
}

.padding-top-none\@m {
	padding-top: 0 !important;
}

.padding-top-xs\@m {
	padding-top: 0.25rem !important;
}

.padding-top-s\@m {
	padding-top: 0.5rem !important;
}

.padding-top-m\@m {
	padding-top: 1rem !important;
}

.padding-top-l\@m {
	padding-top: 1.25rem !important;
}

.padding-top-xl\@m {
	padding-top: 1.5rem !important;
}

.padding-none\@m {
	padding: 0 !important;
}

.padding-xs\@m {
	padding: 0.25rem !important;
}

.padding-s\@m {
	padding: 0.5rem !important;
}

.padding-m\@m {
	padding: 1rem !important;
}

.padding-l\@m {
	padding: 1.25rem !important;
}

.padding-xl\@m {
	padding: 1.5rem !important;
}

.padding-right-none\@m {
	padding-right: 0 !important;
}

.padding-right-xs\@m {
	padding-right: 0.25rem !important;
}

.padding-right-s\@m {
	padding-right: 0.5rem !important;
}

.padding-right-m\@m {
	padding-right: 1rem !important;
}

.padding-right-l\@m {
	padding-right: 1.25rem !important;
}

.padding-right-xl\@m {
	padding-right: 1.5rem !important;
}

.padding-bottom-none\@m {
	padding-bottom: 0 !important;
}

.padding-bottom-xs\@m {
	padding-bottom: 0.25rem !important;
}

.padding-bottom-s\@m {
	padding-bottom: 0.5rem !important;
}

.padding-bottom-m\@m {
	padding-bottom: 1rem !important;
}

.padding-bottom-l\@m {
	padding-bottom: 1.25rem !important;
}

.padding-bottom-xl\@m {
	padding-bottom: 1.5rem !important;
}

.padding-left-none\@m {
	padding-left: 0 !important;
}

.padding-left-xs\@m {
	padding-left: 0.25rem !important;
}

.padding-left-s\@m {
	padding-left: 0.5rem !important;
}

.padding-left-m\@m {
	padding-left: 1rem !important;
}

.padding-left-l\@m {
	padding-left: 1.25rem !important;
}

.padding-left-xl\@m {
	padding-left: 1.5rem !important;
}

.btn,
.web-btn,
a.web-btn,
a.btn,
button.btn {
	padding: 1rem 4rem;
}

.fa-position-left {
	left: 0.5rem;
}

.fa-position-right {
	right: 0.5rem;
}

.fa-position-left {
	left: 0.5rem;
}

#header {
	align-items: center;
	color: #fff;
	display: flex;
	height: 80px;
	justify-content: space-between;
	position: fixed; /*fixedで上部固定*/
	text-align: center; /*padding: 20px;*/
	width: 100%;
	z-index: 999; /*以下はレイアウトのためのCSS*/ /*最前面へ*/
}

/*　上に上がる動き　*/

#header.UpMove {
	animation: UpAnime 0.5s forwards;
}

/*　下に下がる動き　*/

#header.DownMove {
	animation: DownAnime 0.5s forwards;
}

.top-header {
	min-height: 80px;
	position: relative;
}

.img-640 {
	max-width: 640px;
}

.top-hero-message {
	left: 160px;
	top: 100px;
}

.top-hero-message h2,
.top-hero-message h3 {
	font-size: 2.375rem;
}

.article {
	min-height: 600px;
}

.top_about {
	min-height: 500px;
	position: relative !important;
}

.top_about_image {
	display: flex;
	left: 15%;
	position: absolute;
}

.top_about_image img {
	height: 400px;
}

.top_about_text {
	background-color: #FFF;
	left: 40%;
	padding: 20px;
	position: absolute;
	top: 150px;
	width: 40%;
}

.scrolldown1 {
	bottom: 20%;
}

.insp-step-img1 {
	left: -21%;
	max-width: 378px;
	top: 10%;
	transform: rotate(-12deg);
}

.insp-step-img2 {
	left: 75%;
	max-width: 278px;
	top: 31%;
	transform: rotate(30deg);
}

.insp-step-img3 {
	left: -20%;
	max-width: 258px;
	top: 51%;
	transform: rotate(17deg);
}

.insp-step-img4 {
	left: 72%;
	max-width: 348px;
	top: 76%;
	transform: rotate(-14deg);
}

.table-background-line th {
	border-bottom: solid 16px #fadce4;
}

.company-table {
	margin: 0 auto;
	width: 100%;
}

.company-table tr {
	display: table-row;
}

.company-table th,
.company-table td {
	border: 1px solid #ccc;
	display: table-cell;
	padding: 20px;
}

.company-table th {
	background-color: #333;
	color: #FFF;
	font-weight: bold;
}

.top-news-slider-outer {
	background-color: #BDD9BF;
	bottom: 10px;
	padding: 10px;
	position: absolute; /*background-color: variables.$top-news-slider-background-color;*/
	right: 10px;
	width: 40%;
}

.slanting {
	display: initial;
	display: inline-block; /*background:#FDAB75;*/
	height: 411px;
	margin: 0 2%;
	overflow: hidden;
	transform: skewX(-20deg);
	width: 204px;
	-o-object-fit: cover;
	object-fit: cover;
}

.slanting .item {
	transform: skewX(20deg) scale(1) translateX(-111px); /* height: 411px;*/ /*width: 204px;*/ /*object-fit: cover;*/ /*width:auto;*/
}

/*
   ページ上部の写真2枚
  */

.head_title_photo1 {
	display: none;
	left: auto;
	position: absolute;
	right: 2rem;
	top: -7rem; /*width: 25%;*/
	z-index: 98;
}

.head_title_photo2 {
	display: none;
	position: absolute;
	right: -1rem; /*width: 25%;*/
	top: -11rem;
	z-index: 99;
}

.head_title_photo1 {
	display: initial;
	left: 82px;
	position: absolute;
	top: -174px; /*width: 50%;*/
}

.head_title_photo2 {
	display: initial;
	position: absolute;
	right: 0;
	top: -374px;
	width: 50%;
}

.gallery {
	-moz-columns: 3;
	columns: 3;
}

}

@media only screen and (min-width:1080px) {

.formlist__checklist {
	display: flex;
	flex-wrap: wrap;
}

.formlist__checklist li {
	width: 50%;
}

.formlist__checklist li:not(:nth-last-of-type(-n+2)) {
	margin-bottom: 1.6rem;
}

.formlist__checklist label {
	border: none;
	display: inline-block;
	padding: 0;
}

.formlist__radiolist {
	display: flex;
	flex-wrap: wrap;
}

.formlist__radiolist li {
	margin-right: 3.2rem;
}

.formlist__radiolist li:not(:last-child) {
	margin-bottom: 0;
}

}

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

.mobile-large {
	font-size: 20px; /* スマホで大きく表示するサイズ */
}

}

@media (max-width: 600px) {

.box2 {
	margin-bottom: 30px;
	width: 100%;
}

}

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

.sp-only {
	display: block;
}

}

@keyframes bgextendAnimeBase {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@keyframes bgextendAnimeSecond {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@keyframes bgLRextendAnime {

0% {
	transform: scaleX(0);
	transform-origin: left;
}

50% {
	transform: scaleX(1);
	transform-origin: left;
}

50.001% {
	transform-origin: right;
}

100% {
	transform: scaleX(0);
	transform-origin: right;
}

}

@keyframes bgRLextendAnime {

0% {
	transform: scaleX(0);
	transform-origin: right;
}

50% {
	transform: scaleX(1);
	transform-origin: right;
}

50.001% {
	transform-origin: left;
}

100% {
	transform: scaleX(0);
	transform-origin: left;
}

}

@keyframes fadeUpAnime {

from {
	opacity: 0;
	transform: translateY(100px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeUpAnime {

from {
	opacity: 0;
	transform: translateY(100px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeDownAnime {

from {
	opacity: 0;
	transform: translateY(-100px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeLeftUpAnime {

from {
	opacity: 0;
	transform: translate(-100px, 200px);
}

to {
	opacity: 1;
	transform: translate(0, 0);
}

}

@keyframes fadeRightDownAnime {

from {
	opacity: 0;
	transform: translate(100px, -200px);
}

to {
	opacity: 1;
	transform: translate(0, 0);
}

}

@keyframes UpAnime {

from {
	opacity: 1;
	transform: translateY(0);
}

to {
	opacity: 0;
	transform: translateY(-100px);
}

}

@keyframes DownAnime {

from {
	opacity: 0;
	transform: translateY(-100px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes slideTextX100 {

from {
	opacity: 0;
	transform: translateX(-100%); /*要素を左の枠外に移動*/
}

to {
	opacity: 1;
	transform: translateX(0); /*要素を元の位置に移動*/
}

}

@keyframes slideTextX-100 {

from {
	opacity: 0;
	transform: translateX(100%); /*要素を右の枠外に移動*/
}

to {
	opacity: 1;
	transform: translateX(0); /*要素を元の位置に移動*/
}

}

@keyframes TopScrollUpAnime {

from {
	opacity: 0;
	transform: translateY(100px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes TopScrollDownAnime {

from {
	opacity: 1;
	transform: translateY(0);
}

to {
	opacity: 1;
	transform: translateY(100px);
}

}

@keyframes pathmove {

0% {
	height: 0;
	opacity: 0;
	top: 0;
}

30% {
	height: 30px;
	opacity: 1;
}

100% {
	height: 0;
	opacity: 0;
	top: 50px;
}

}

@keyframes borderAnime {

from {
	opacity: 0;
	transform: scale(0, 1);
}

to {
	opacity: 1;
	transform: scale(1, 1); /*X方向にスケール拡大*/
}

}