.group-container01{
    width: 100%;
    margin-top: 50px;
}
.com-box01{
    display: flex;
    flex-wrap:wrap;
    width:100%;
    margin: 0 auto;
    justify-content:flex-start;
}
.com-b01{
    width:60%;
    height: 300px;
    background: linear-gradient(to bottom, #fff, #b6d7ff, #76b4ff, #4aa2ee);
    
    animation-name:fadeLeftAnime;
    animation-duration:4s;
    animation-fill-mode:forwards;
    opacity:0;
    z-index: 2;
}
/*--アニメーション動き--*/
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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

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

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
#com-title01{
    font-family: "小塚ゴシック Pr6N";
    color: #dbefff;
    font-size: 38px;
    letter-spacing: 0.2rem;
    vertical-align: middle;
    text-align: right;
    padding-right: 70px;
    padding-top: 100px;
}
.com-b02{
    width:40%;
    animation-name:fadeLeftAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
}
.com-b02 img{
    width:100%;
    position: relative;
    left: -50px;
    top: 100px;
    z-index: -1;
}
#com-title02{
    font-family: "小塚ゴシック Pr6N";
    color: #695f5f;
    font-size: 20px;
    text-align: right;
    padding-right:70px;
    padding-top:30px;
    letter-spacing: 0.2rem;
}
.group-container02{
    width:100%;
    margin-top:180px;
}
.group-container03{
    width:85%;
    margin: 100px auto;
    letter-spacing: 0.2rem;
    animation-name: fadeUpAnime;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 2;
}
}
.rinen{
    width:100%;
    margin: 0px auto 20px;
    font-family: "小塚ゴシック Pr6N";
    font-size:18px;
    letter-spacing: 0.1rem;
}
#rinen-title{
    font-size: 25px;
    color: #695f5f;
    letter-spacing: 0.5rem;
    text-align: center;
    margin: 30px 30px 30px 0;
    width:200px;
    border-bottom:2px solid #e7e7e7;
    text-align: center;
    padding-bottom: 5px;
}
.rinen-box{
    width:100%;
    margin: 0 auto;
    background: none;
    line-height: 4rem;
    font-size: 18px;
}
.rinen-text{
    margin-left:30px;
    margin-top: 50px;
}
.rinen-img{
    width:35%;
    max-width:512px;
    min-width:253px;
    margin:50px auto 100px;
}
.rinen-img img{
    width:100%;
}
.rinen-text p{
    margin-bottom: 20px;
    background: linear-gradient(to right, #ffd472, #fffbdf, #fff, #fff);
    padding-left: 40px;
    border-radius:2rem;
}
.greeting{
    margin:30px auto;
    width:85%;

}
.greeting-box{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    width:85%;
    margin: 0 auto;
}
.greet-text{
    width:65%;
    font-size: 18px;
    line-height: 2.5rem;
    letter-spacing: 0.2rem;
    animation-name:fadeUpAnime;
    animation-duration:4s;
    animation-fill-mode:forwards;
    opacity:0;
    z-index: 2;
}
.greet-img{
    width:30%;
}
.greet-img img{
    width:100%;
    max-width:570px;
}
#theme-text{
    font-size:28px;
    font-family: "Shippori Mincho B1", serif;
    font-weight: 400;
    font-style: normal;
    line-height:3rem;
}
#theme{
    margin-top:20px;
    font-family: "Nothing You Could Do", cursive;
    font-weight: 300;
    font-size:35px;
    color: #ff8400;
}
#sign{
    margin-top:30px;
    text-align: right;
    font-family: "HGS行書体";
    font-size:28px;
}
.group-container04{
    width:85%;
    margin: 0 auto;
    animation-name: fadeUpAnime;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 2;
}
.Credo{
    width:100%;
}
#credo-title{
    font-size: 25px;
    color: #695f5f;
    letter-spacing: 0.5rem;
    text-align: center;
    margin: 30px;
    width:300px;
    border-bottom:2px solid #e7e7e7;
    text-align: center;
    padding-bottom: 5px;
}
.credo-lineup{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    width:100%;
    margin: 50px auto;
}
.credo-box{
    width:45%;
    height:20vh;
    text-align: center;
    border-radius:10rem;
    vertical-align: text-bottom;
    background:radial-gradient(circle, #92ffbe 30%, #fff);
    position: relative;
    overflow:hidden;
    margin-bottom: 50px;
}
.credo-boxtitle{
    margin-top: 60px;
    font-family: "Shippori Mincho B1", serif;
    font-weight: 700;
    font-size: 28px;
    color:#491c02;
    letter-spacing: 0.3rem;
}
.credo-text{
    text-align: center;
    font-family: "Shippori Mincho B1", serif;
    font-size: 20px;
    position: absolute;
}
.credo-box .credo-text {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0px;
	left:			0;
    background:radial-gradient(circle,  #ffd472 30%, #fff);
	/*background-color:#ffd472;*/
    color:#491c02;
    font-weight: 700;
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
	-webkit-transform:	scale(0);	/* 大きさを０にして表示しない */
	transform:		scale(0);
}
.credo-box:hover .credo-text {
	-webkit-transform:	scale(1);	/* 大きさを１にして表示する */
	transform:		scale(1);
    padding:60px 20px 0px;
}
.lh{
    display:block;
}
.group-container05{
    width:85%;
    margin: 100px auto 50px;
    animation-name: fadeUpAnime;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 2;
}
.group-container06{
    width:100%;
    margin: 120px auto;
}
.group-history{
    width:100%;
    margin: 0 auto;
}
.gh{
    width:85%;
    margin: 0 auto;
}
.history-con{
    padding: 30px 0;
    background:#b3d4fc6e;
}
.history-contitle{
    width: 85%;
    margin: 0 auto;
}
#history-title01{
    font-size: 25px;
    color: #695f5f;
    letter-spacing: 0.5rem;
    text-align: center;
    margin: 30px 30px 30px 0;
    width:250px;
    border-bottom:2px solid #e7e7e7;
    text-align: center;
    padding-bottom: 5px;
}
#history-title02{
    font-size: 25px;
    color: #695f5f;
    letter-spacing: 0.5rem;
    text-align: center;
    margin: 30px 30px 30px 0;
    width:300px;
    border-bottom:2px solid #e7e7e7;
    text-align: center;
    padding-bottom: 5px;
}
#history-text{
    font-size:25px;
    font-family: "Shippori Mincho B1", serif;
    font-weight: 400;
    font-style: normal;
    line-height:3rem;
    padding-left: 30px;
}
.gr-table{
    width:100%;
    letter-spacing: 0.2rem;
}
.gr-table table{
    width:100%;
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
}
.gr-table tr{
    width: 100%;
}
.gr-table th{
    width: 30%;
    padding: 20px 0;
    font-weight: 200;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}
.gr-table td{
    width: 30%;
    padding: 20px 0 20px 30px;
    border-bottom: 1px solid #e5e5e5;
}
.history-table{
    width: 85%;
    margin: 50px auto;
}
.history-table table{
    width: 100%;
}
.com-table02{
    width: 85%;
    margin: 0 auto;
}
#kouji{
    width: 200px;
    border-radius: 3rem;
}
.history-table tr{
    width: 100%;
}
.history-table th{
    width: 400px;
    padding: 20px 0;
    font-weight: 200;
    vertical-align: text-top;
}
.history-table td {
    width: ;
    padding: 20px 0 20px 30px;
    line-height: 4rem;
}

#smilehomelogo,#smilehoikulogo{
    width:300px;
}
#smilehomelogo:hover,#smilehoikulogo:hover,#vitylogo:hover{
    
    opacity:0.5;
}
.br840{
    display:none;
} 

.company-container03{
    width:85%;
    margin: 150px auto;
    font-family: "小塚ゴシック Pr6N";
    font-size:18px;
    letter-spacing: 0.1rem;
    animation-name: fadeUpAnime;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 2;
}
.comcon03-title{
    font-size: 25px;
    color: #695f5f;
    letter-spacing: 0.5rem;
    text-align: center;
    margin: 30px 30px 30px 0;
    width:200px;
    border-bottom:2px solid #e7e7e7;
    text-align: center;
    padding-bottom: 5px;
}
.com-table02{
    width:100%;
}
.com-table02 table{
    width:100%;
    border-top: 1px solid #efefef;
}
.com-table02 tr{
    width: 100%;
}
.com-table02 th{
    width: 30%;
    background: #efefef;
    padding: 20px 0;
    font-weight: 200;
}
.com-table02 td{
    width:70%;
    padding: 20px 0 20px 30px;
    border-bottom: 1px solid #efefef;
}

.underline-before {

	background: linear-gradient(#b7d3f98c, #b7d3f98c) 0 100%/0 10px no-repeat;
	/*左から、カラー（始点と終点それぞれ同じものを指定）、position / サイズ横縦 繰り返しの有無 */

	transition: background 8s;
	/*トランジションの設定。下線を引く動きをアニメーションにするのに必要 */

	text-decoration: none;
	/*テキストの装飾の設定 */
}
.underline-after {
	background-size: 100% 10px;
  /* 変化後のスタイル。横サイズを0から100%に変えることで指定の文字列に下線を引く */
}

#spgreet{
    font-family:"Yu Mincho";
    font-size:22px;
    font-weight:500;
    color:#6b261f;
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}