/* 全ページフォント指定 */
body {
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  color: #454545
}

/* フォント01 */
.font01 {
  font-size: 22px:
  line-height: 50px;
}

/* View more */
.playfair01 {
font-family: "playfair-display", serif;
font-weight: 400;
font-style: italic;
color:#454545;
}

.Quasimoda01 {
font-family: "miller-banner-ex-condensed", sans-serif;
font-weight: 300;
font-style: normal;
color:#454545;
}

.Quasimoda01 {
font-family: "quasimoda", sans-serif;
font-weight: 500;
font-style: normal;
color:#454545;
}

.Hanserif{
font-family: "source-han-serif-tc", sans-serif;
font-weight: 500;
font-style: normal;
color:#454545;
}

.underline01 {
  border-bottom: 1px solid #000;
  display: inline-block;
  padding-bottom: 3px;
}

/* 英字フォント */
.playfair01 {
font-family: "playfair-display", serif;
font-weight: 400;
font-style: italic;
color:#454545;
}

/* ヘッダーメニューアンダーライン */
.underline {
  display: inline-block;
  padding-bottom: 0px;
  position: relative;
}

a {
  color:#454545;
  text-decoration: none;
}

.underline::after {
  background-color: #000000;
  bottom: 55px;
  content: '';
  display: block;
  height: 1px;
  left: -2px;
  position: absolute;
  transition: .5s all;
  width: 0px;
}

.underline:hover::after {
  width: 105%;
}

/* ヘッダーメニューアンダーライン View more */
.underline02 {
  display: inline-block;
  padding-bottom: 0px;
  position: relative;
}

.underline02::after {
  background-color: #000000;
  bottom: 0px;
  content: '';
  display: block;
  height: 1px;
  left: -2px;
  position: absolute;
  transition: .5s all;
  width: 0px;
}

.underline02:hover::after {
  width: 105%;
}


/* ヘッダー固定 */
.site-header{
    background: #fff;
    display: flex;
    padding: 0px 0px;
    position: fixed;
    justify-content: space-between;
}

/* フェードイン */

.fadein {
  animation: fadein 5s;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* フェードイン */
.fadein02 {
  animation: fadein 7s;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* アバウト背景 */
.bg_about {
  background: no-repeat url("../img/top/about02.jpg");
  animation: fadein 5s;
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 各フェードインここから */
/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 2s ease-out;

	cursor: pointer;
	overflow: hidden;
 }

.slide-top img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.slide-top:hover img {
  transform: scale(1.1); /* 拡大 */
}

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 2s ease-out;

	cursor: pointer;
	overflow: hidden;
 }

.slide-bottom img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.slide-bottom:hover img {
  transform: scale(1.1); /* 拡大 */
}

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 2s ease-out;

	cursor: pointer;
	overflow: hidden;
 }

.slide-left img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.slide-left:hover img {
  transform: scale(1.1); /* 拡大 */
}

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 2s ease-out;

	cursor: pointer;
	overflow: hidden;
 }

.slide-right img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.slide-right:hover img {
  transform: scale(1.1); /* 拡大 */
}
/* 各フェードインここまで */

/* スクロールしたら画像表示 */
/*----------------------------
scroll_non ｜その場フェードイン
----------------------------*/
.scroll_non {
  transition: 3s ease-in-out;
  transform: translateY(0px);
  opacity: 0;
}
.scroll_non.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 2s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_down ｜上から出現
----------------------------*/
.scroll_down {
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
    transform: translateY(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_down.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

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

/*--線中央100px--*/
.uline100{
    border-bottom: 1px solid #454545;
    width: 100px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
/*------------------------*/


/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/* フェードインアニメーション */
.fade-in {
  opacity: 0;
  transform: translateY(0px); /* 下から上に動く */
  animation: fadeIn 1s ease forwards;
  animation-delay: var(--delay);
}

/* アニメーションキー */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* マウスオーバー文字切り替え */
.switch_text {
    display: inline-block;
    position: relative;
    color: #000;
    transition: 0.5s;
}
.switch_text::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: transparent;
    text-align: center;
    white-space: nowrap;
    transition: 0.5s;
    content: attr(data-hover-text);
    font-size:14px;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
.switch_text:hover {
    color: transparent;
}
.switch_text:hover::before {
    color: #000;
}

/* 確認ボタンなど */
.btn-a,
a.btn-a {
  color: #454545;
  background-color: #fff5ee;
  padding:15px 30px 15px 30px;
  border-radius:7px;
}
.btn-a:hover,
a.btn-a:hover {
  color: #454545;
  background: #ffe6d5;
}

.btn-b,
a.btn-b {
  color: #454545;
  background-color: #fff5ee;
  padding:15px 30px 15px 30px;
  border-radius:40px;
}
.btn-b:hover,
a.btn-b:hover {
  color: #454545;
  background: #ffe6d5;
}

/* フォーム確認ボタンなど */
.submit {
background-color:#fff5ee;
color:#333333;
font-size:22px;
margin:15px;
padding:10px;
border:0px;
}

.submit:hover {
background:#FFE8D9
}