@charset   "UTF-8";
@media all and (min-width:1024px){

 
body{
    margin: 0;    
}
    
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9998;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値では非表示 */
  -webkit-transition: opacity 1.5s ease;  /* アニメーション時間は 0.8秒 */
 -ms- transition: opacity 1.5s ease;
 -moz- transition: opacity 1.5s ease;
  transition: opacity 1.5s ease;
}

 
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
 
body.fadeout::after {
  opacity: 1;
} 
 
/*お好みで、.fadeoutセレクタ以下の他の要素にもアニメーション用のCSSを定義します*/
/*DEMOではページ遷移時にarticle要素のスケールもアニメーションさせています*/
 
body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
    
}   

#page_top{
  width: 100px;
  height: 60px;
  position: fixed;
  right: 20;
  bottom: -100;
  background: #6a8477;
  opacity: 0.7;
  border-radius: 15px;
    z-index: 100;
}
#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '↑';
  font-size: 15px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#s-menu{
  display: none;
}
/* --- 全体のフレーム----- */    
#contents{
  width: 100%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  overflow: hidden;        
}

.p-20{
  width: 10%;
}
.p-85{
  width: 85%;
}
.p-90{
  width: 90%;
}
.p-100{
  width: 100%;
}
        
/* --- 右側 ----- */
#r-contents{
  float: right;
  width: 100vw;
  object-fit: cover;
  margin-right: -14.5%;
  padding-right: 14.5%;
  box-sizing: border-box;
  z-index: 1;
}
.box {
  position   : relative;
  max-width  : 100%;
  min-height: 700px;
  margin     : auto;
  overflow   : hidden;
}

#houjin-top{
  width: 100%;
}
#houjin-moji{
  width: 100%;
  padding-bottom: 40;
  color: #fff;
  background-color: #403a3a; 
  overflow: hidden;  
}
.h-t{
   width: 92%;
   margin-top: 30;
   padding: 10px 2% 10px 6%;/* 設定順番:上・右・下・左; */ 
   font-size: 26pt;
   font-weight: 600;
}
.h-m{
  width: 80%;
  margin: auto;
  padding: 20px;
  font-size: 13pt;
  text-indent: 1em;
  line-height: 40px;    
}
.h-m p{
  text-align: left;
  display: block; 
}
.h-gazo{
  width: 60%;
  padding: 0 20% 40 20%;/* 設定順番:上・右・下・左; */ 
}
/*** もなみ会の主な活動 ***/	
#monaimg {
   width: calc(100%-40px);
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 50;
   padding-top: 40;
   text-align: center;
   border-left: solid 0px #cb8989;
   border-right: solid 0px #516752;
   border-bottom: solid 0px #516752;
   background-color: #e8e8e8;
   overflow: hidden;
}
.jigyou {
   float: left;
   width: 21%;
   margin: 2%;
   font-size: 11pt;
   text-align: left;
}
.tomakomai {
   background-attachment: fixed;
   background-image: url("../img/tomakomi.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   height: 480;
}
.tomakomai2 {
   background-attachment: fixed;
   background-image: url("../img/tomakomai2.jpg");
   background-repeat: no-repeat;
   background-size: 100%;
   height: 500;
}
.tomakomai3 {
   background-attachment: fixed;
   background-image: url("../img/tomakomai3.jpg");
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: top center;
   height: 480;
}
.tomakomai4 {
   background-attachment: fixed;
   background-image: url("../img/tomakomai4.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   height: 500;
}

/* 法人概要 背景色 */
#gaiyo-back{
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #d9d6d1;
  color: #000;
}
/* 法人概要・ロゴ 親BOX*/
#houjin-fream{
  width:80%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 70px;
  padding-top: 20px;
  overflow: hidden;
}
/* 法人概要 親BOX */
#houjin-gaiyo{
  width: 54%;
  height: auto;
  float: left;
  margin-left: 2%;
  margin-right: auto;
}
/* 法人概要(table) 親BOX */
.houjin-box{
  width: 98%;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-spacing: 0;
}
/* 法人概要(table) 文字左寄せ */
.houjin-p{
  display: inline-block;
  text-align: left;
}
/* 法人概要(table・左側) */
.h-midashi{
  color: #fff;
  width: 30%;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: dashed 1px #c2c6be;
  vertical-align: middle;
  background-color: #586760;
}
/* 法人概要(table・左側)事業内容 */
.h-midashi-b{
  color: #fff;
  width: 30%;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  background-color: #586760;
}
/* 法人概要(table・右側)法人名称 */
.h-naiyo-t{
  width: 63%;
  padding-left: 20px;
  padding-right: 10px;
  line-height: 2em;  
  vertical-align: top;
  background-color: ;
  border-top: solid 1px #4f5748;
  border-right: solid 1px #4f5748; 
  border-bottom: dashed 1px #4f5748;
}
/* 法人概要(table・右側)所在地～法人設立日 */
.h-naiyo{
  width: 63%;
  padding-left: 20px;
  padding-right: 10px;
  line-height: 2em; 
  vertical-align: top;
  background-color: ;
  border-right: solid 1px #4f5748; 
  border-bottom: dashed 1px #4f5748;
}
/* 法人概要(table・右側)事業内容 */
.h-naiyo-b{
  width: 63%;
  padding-left: 20px;
  padding-right: 10px;
  line-height: 2em; 
  vertical-align: top;
  background-color: ;
  border-right: solid 1px #4f5748; 
  border-bottom: solid 1px #4f5748;
}
ul.jigyou-naiyou{
  list-style-type: circle; 
  margin-left: -15px;
  display: inline-block;
  text-align: left;
}

/* もなみ会(地図) */
#monamikai-all{
  width: 40%;
  max-width: 450px;
  height: auto;
  float: right;
  margin-top: 0px;
  margin-left: auto;
  margin-right: 2%;
}
#map{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#jimukyoku {
   background-color: #f4ebe1;
}
/* もなみ会(電話番号・メール) */
.tel-box {
   widows: 95%;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
}
.tel-t {
   padding-top: 20;
   padding-bottom: 20;
   margin: 0;
   text-align: center;
}
.tel {
   width: 100%;
   padding-top: 20;
   padding-bottom: 20;
   text-align: center;
   background-color: #678178;
   overflow: hidden;
}
.tel-number{
	float: left;
	width: 55%;
	margin-left: 17%;
	margin-right: 2%;
}
.tel-mail{
	float: right;
	width: 5%;
	margin-top: 5px;
	margin-left: 2%;
	margin-right: 17%;
    transition: 0.3s;
}
.tel-mail:hover{ 
    transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
}

/* もなみ会・会員募集 */
#monamikaiin {
   padding: 20; 
   overflow: hidden;
}
.bosyu-t {
   width: 100%;
   padding: 10px;
   font-size: 26pt;
   color: 586760;
}
.bosyu-m {
  width: 80%;
  margin: auto;
  padding: 10px;
  font-size: 13pt;
  text-indent: 1em;
  line-height: 2;
}
.bosyu-s{
  margin-left: 80px;
  font-size: 12pt;
}
.bosyu-kome{
   padding-left: 1em;
   text-indent: -1em;
   display: inline-block;
}
.kaiin-all{
  width: 80%;
  max-width: 1000px;
  text-align: center;
  margin: auto; 
  display: block;
}
.kaiin-l{
  float: left;
  width: 40%;
  margin-left: 6%;
  margin-right: 1%;
  text-align: left;
  font-size: 14pt;
  display: block;
 }
.kaiin-r{
  float: right;
  width: 40%;
  margin-left: 1%;
  margin-right: 6%;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center; 
  border: 1px solid #586760;
  display: block;
  color: #586760;
}
.kaiin-r p{
  text-align: left;
  font-size: 13pt;
  display: inline-block;
}
.kaiin-r ul{
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  text-align: left;
  font-size: 14pt;;
  font-weight: 600;	
  display: inline-block;
}

/***【法人概要】タイトル ***/
 .category-title {
  width: 100%;
  padding-top: 40;
  margin-bottom: 30;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15;
  font-size: 1.6vw;
  letter-spacing:0.6em;
  color: #fff;
  text-align: center;
  border-bottom: double #000 0px;
}

/***【沿革】タイトル ***/
 .category-title2 {
  width: 70%;
  padding-top: 40;
  margin-bottom: 30;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15;
  font-size: 22pt;
  letter-spacing:0.4em;
  color: #fff;
  text-align: left;
  border-bottom: double #fff 1px;
}
/* 沿革 大親 */
#enkaku-contents{
    width: 100%;
    overflow: hidden;
    color: #fff;
    background-image: url(../img/e-back.jpg)    ;
    background-size: cover;
}
/* 沿革 背景 */
#enkaku-back{
    width: 80%;
    max-width: 1200;
    margin-top: 100;
    margin-bottom: 40;
    margin-left: auto;
    margin-right: auto;
    background:rgb(88, 103, 96);
    filter:alpha(opacity=80);
    background:rgba(88, 103, 96,0.8);   
    background-image:radial-gradient(#6f9591 1px, transparent 1px);
	background-size: 20px 20px;
    box-shadow: 2px 2px 4px -2px gray inset;
}
/* 沿革 親*/
#enkaku{
   width: 80%;
   min-width: 560px;
   margin:  auto; 
   padding-top: 20px;
   padding-bottom: 30px;

}
/* 各・沿革 */
.enkaku-box{
   width: 90%;
   margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
   font-size: 1.5vmin;
   overflow: hidden;
}
/* 沿革 (円) */
.e-year{
  width: 100px;
  height: 100px;
  margin: 15%;
  padding: 0;
  text-align: center;
  font-size: 11pt;
  line-height: 100px;
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  border: solid 8px #ffffff;
  background-color: #678178;
}
/* 沿革 /* 沿革 (白タテ太線) */
.e-midashi{
   width:1%;
   height: auto;
   margin-left: 0%;
   margin-right: 7.5%;
   padding-left: 0%;
   border-right: 40px solid #ffffff;
}
/* 沿革 (内容) */
.e-naiyo{
  width: 60%;
  margin: 0;
  padding-left: 8%;
  padding-right: 7%;
  vertical-align: middle;
  text-align: left;
  font-size: 12pt;
  line-height: 20px;
  color: #fff;
  border: 2px solid #fff; 
}

#copyright{
  width: 100%;
  height: 25px;
  padding-top: 5px;
  font-size: 10pt;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  background-color: #9f445c;
  position: relative;
  z-index: 60;
}    

/* ローディングアニメーション */   
body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
} 
.anime {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #fff;
 position: relative;
} 
.anime img {
 display: block;
 position: absolute;
 top: 30%;
 left: 45%;
 animation-name: fadein;
 animation-duration: 2s;    
}
@keyframes fadein {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
} 
.mainSite {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #FC6;
 position: relative;
 animation: fadeIn 2s ease 0s 1 normal;
 -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
    
}      
 
.fuwatto-wrap [class*='fuwatto'] {
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 0.9s; 
}
.fuwatto-wrap [class*='fuwatto'].f-act {
  opacity: 1;
  transform: translate(0, 0); 
}
    
    
}