﻿body{
font-family:"メイリオ","Meiryo","ＭＳ ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",sans-serif;
color:#3e3e3e;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu {
  margin:10px 0 0 50;
  font-size:22px;
  font-weight:normal;
  color:#ffffff;
  text-shadow: 0px 2px 1px #be8a90;
}

.menufooter {
  margin:10px 0 0 5;
  font-size:18px;
  font-weight:normal;
  color:#ffffff;
  text-shadow: 0px 2px 1px #be8a90;
}

.underline {
  display: inline-block;
  padding-bottom: 0px;
  position: relative;
  color: #ffffff;
}

a {
  text-decoration: none;
}

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

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

.whiteline {
  text-align:center;
  border: none;
  border-bottom:
  1px solid #ffffff;
  width:96%;
}

.whiteline02 {
  border: none;
  border-bottom: 1px solid #ffffff;
  width:433px;
}

.titleline {
  margin-top:90px;
  border: none;
  border-bottom:37px solid #ffaeb9;
  width:100%;
}

.titleline02 {
  margin-top:90px;
  border: none;
  border-bottom:37px solid #ffaeb9;
  width:100%;
}

.title01 {
font-size:33px;
  color:#ffffff;
  text-align:center;
  font-weight:bold;
  text-shadow: 0px 3px 2px #fc97a5;
  margin-top:-59px;
}

.title02 {
  font-size:21px;
  color:#ffffff;
  text-align:center;
  text-shadow: 0px 2px 1px #fc97a5;
  margin-top:-7px;
}

.title03 {
  font-size:30px;
  color:#ffffff;
  text-align:center;
  font-weight:bold;
  text-shadow: 0px 3px 2px #fc97a5;
}

.title04 {
  font-size:22px;
  color:#ffffff;
  text-align:center;
  font-weight:bold;
  text-shadow: 0px 3px 2px #fc97a5;
}

.font01 {
  font-size:22px;
  margin:
  line-height:35px;
}

.font02 {
  font-size:20px;
  line-height:35px;
}

.font03 {
  font-size:20px;
  color:#ff5c77;
  line-height:35px;
}

.font04 {
  font-size:19px;
  line-height:35px;
}

.font05 {
  font-size:33px;
  line-height:48px;
}

.redline {
  text-align:center;
  border: none;
  border-bottom:
  1px solid #f17184;
  width:96%;
}

h1 {
  border-bottom: solid 3px skyblue;
  position: relative;
}

.haikei {
  background: no-repeat url("img/logo_haikei.gif");
  background-position:top;
  margin:top:50px;
}

.haikei02 {
  background: no-repeat url("img/health/haikei.jpg");
}

.haikeis {
  background: no-repeat url("img/service/haikei.jpg");
}

/*スライドショーここから*/
.content {
  width: 232px;
  height: 172px;
  margin-right:10px;
}
.content:nth-child(1) {}
.content:nth-child(2) {}
.content:nth-child(3) {}
.content:nth-child(4) {}
.content:nth-child(5) {}
.content:nth-child(6) {}

.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
width: 1000px;
}

.slideshow {
  display: flex;
  -webkit-animation: loop-slide 20s infinite linear 1s both;
  animation: loop-slide 20s infinite linear 1s both;
animation-duration: 35s;
}

@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
/*スライドショーここまで*/

.tenpo {
  font-size:36px;
  font-weight:bold;
  color:#ffffff;
  text-shadow: 0px 3px 2px #fc97a5;
}

/*問い合わせフォームここから*/
input, textarea ,select {
  background-color: #ffc3c9;
  border: none;
  border-radius: 3px;
  padding: 0px 0px;
  font-size: 21px;
  color: #333;
  flex-grow: 1;
  outline: none;
}
/*問い合わせフォームここまで*/

/*mail.phpのCSS*/

/* 自由に編集下さい */
#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}

/*　項目の均等割り　*/
.words {
  display: flex;
  flex-direction: column;
}

.word {
  flex: 1;
  text-align: center; /* テキストを中央揃えにする */
  border: 1px solid black; /* デモ用にボーダーを追加 */
}
/*　項目の均等割り　*/

/*　画像のフェードイン　*/
.fadeInBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* ブロックの共通CSS */
.block {
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    padding: 0px 0px;
}
/* 下から上に移動しながらフェードイン */
.fadeInUp {
    opacity: 0;
    transform: translateY(100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* 上から下に移動しながらフェードイン エステPCで使用*/
.fadeInDown {
    opacity: 0;
    transform: translateY(-20px);
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    font-size:33px;
    line-height:48px;
}

/* 右から左に移動しながらフェードイン */
.fadeInLeft {
    opacity: 0;
    transform: translateX(-100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/* その場でフェードイン エステで使用*/
.fadeInRight {
    opacity: 0;
    transform: translateX(0px);
    animation-name: fadeIn;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/*　画像のフェードイン　*/