@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: 9999;  /* 一番手前に */
   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{
  transform:scale(1.2);
  -webkit-transform:scale(1.2);   
  opacity: 0;
}  
    
/*** スマートフォン用アイコン ***/
 
#s-menu{
  display: none;
}
/*** ふわっと表示 ***/
.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); 
}
    
/* スクロール時に出るトップへのアイコン */
#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;
}    
    
/* --- 全体のフレーム----- */    
#contents{
  width: 100%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  overflow: hidden;
}

/*** 画像サイズの調整 ***/
.p-100{
  width: 100%;
}
 .p-20{
  width: 10%;
}
.p-85{
  width: 85%;
}
.p-90{
  width: 90%;
  min-width: 110px;
}

.monami-kai{
  float: left;
  width: 50%;
  height: auto;
  position:	relative;
  overflow: hidden;
}
.monami-kai .a-caption {
  font-size: 130%;
  color: #fff;
  position: absolute;
  left: 0;
  padding-top: 80px;
}
.monami-kai .a-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;/* 表示させない */
  background-color: rgba(0,0,0,0.4);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.monami-kai:hover .a-mask {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 1;/* ホバーで表示する */
}  
.monami-kai .a-captiont-title{
  width: 90%;  
  padding: 10px 5% 0 5%;/* 設定順番:上・右・下・左; */
  text-align: center;
  font-size:	16pt;
  color: #fff; 
}
.monami-kai .a-caption-moji{
  width: 60%;  
  padding: 10px 20% 0 20%;/* 設定順番:上・右・下・左; */
  text-align: left;
  font-size:	12pt;
  color: #fff;  
  display: inline-block;
}    
.asoshie{
  float: right;
  width: 50%; 
  height: auto;
  overflow: hidden;
} 
	
/* --- 右側 ----- */  
#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） ----- */	
#grid-box{
  width: 100%;
  height: auto;
  overflow: hidden;
}
/* --- メインスライド ----- */ 
.mo-as-box{
   float: left;
   width: 66.6%;
   height: auto;
   overflow: hidden;
}  
.bg-1 .sl-slide-inner h2{
   font-size: 2.2vw;
   letter-spacing: 0.1em;
   line-height: 1.2em;
    text-shadow: 2px 2px 1px rgba(21,20,20,0.33);
}
    
    

    
.bg-1 .sl-slide-inner p{
   font-size: 1.4vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -35%;
   padding-bottom: -35%;
}
.bg-2 .sl-slide-inner h2{
   font-size: 2.2vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;
}
.bg-2 .sl-slide-inner p{
   font-size: 1.4vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -35%;
   padding-bottom: -35%;
}
.bg-3 .sl-slide-inner h2{
   font-size: 2.2vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;		
}
.bg-3 .sl-slide-inner p{
   font-size: 1.4vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -35%;
   padding-bottom: -35%;
}
.bg-4 .sl-slide-inner h2{
   font-size: 2.2vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;		
}
.bg-4 .sl-slide-inner p{
   font-size: 1.4vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -35%;
   padding-bottom: -35%;
}
.bg-5 .sl-slide-inner h2{
   font-size: 2.2vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;	
}
.bg-5 .sl-slide-inner p{
   font-size: 1.4vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -35%;
   padding-bottom: -35%;
}
/* --- サブスライド（親BOX）----- */  
.c-1-2{
  float: right; 
  width: 25.5VW;
  height: 51vw;
  overflow:	hidden;	 
}
/* --- サブスライド（回転画像） ----- */
#stage{
  height: 25.5vw;
  text-align: center;
  display: block; 
}
img.b-s{
  width: 150px;
  height: auto;
}
/* --- サブスライド（仕事依頼） ----- */ 
.c-2 {
  position:	relative;
  height: 25.5vw;
  text-align: center;
  display: block; 
}
.c-2 .captiont-title{
  width: 98%;  
  padding: 5px 1% 0 1%;/* 設定順番:上・右・下・左; */
  text-align: center;
  font-size: 2vw;
  color: #fff;   
}
.c-2 .caption-moji{
  width: 90%;  
  padding: 5px 5% 0 5%;/* 設定順番:上・右・下・左; */
  text-align: left;
  font-size: 1vw;
  color: #fff;  
  text-indent: 1em;
  display: inline-block;     
}
.c-2 .mask {
  width: 100%;
  height: 100%;
  position:	absolute;
  top: 0;
  left:	0;
  opacity: 0;	/* マスクを表示しない */
  background-color:	rgba(0,0,0,0.5);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.c-2:hover .mask {
  opacity:	1;	/* マスクを表示する */
  padding-top:	5%;	/* ホバーで下にずらす */
}

/* --- ニュース ----- */  	
#news-box{
  position: relative;
  width: 100%;
  height: 1000px;
  margin: 0;/* 設定順番:上・右・下・左; */
  padding-top: 20px;
  padding-bottom: 200px;
  background : url(news.jpg) no-repeat center center;
  background-size: cover; 
}  
#news-title{
 width: 30%;
 height: auto;
 margin: 50px 63% 30px 7%;/* 設定順番:上・右・下・左; */  
 text-align: left;
 font-size: 3vw;
 font-weight: 800;
 color: #38383c;
 border-bottom: solid 2px #6a8477;
 text-decoration: none; 
 line-height: 1;
 display: inline-block; 
}
/* ニュース・マウスオーバー */   
.button::before,
.button::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
  border-radius: 30px 0px 0px 0px;/* 設定順番:左上・右上・右下・左下; */
}
.button::before {
  background: #e6f0bb;
}
.button::after {
  width: 180px;
  height: 180px;
  border-radius: 50%; 
  box-shadow: /* 複数の影を指定 *//* x, yともに位置をずらす *//* rgbaで透過 */
    180px 15px 0 rgba( 160,186,116 , 0.2 ), 
    300px -20px 0 rgba( 160,186,116 , 0.3 ), 
    500px 25px 0 rgba( 160,186,116 , 0.2 ),
    600px -90px 0 rgba( 160,186,116 , 0.3 ),
    800px 30px 0 rgba( 160,186,116 , 0.2 ),
    1100px -30px 0 rgba( 160,186,116 , 0.3 ),
    1400px 20px 0 rgba( 160,186,116 , 0.2 );
 content: "";
}
.button:hover::before,
.button:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.button:hover::after {
  transition-delay: .3s; 
}

/* ニュース（日付・アイコン・内容）親BOX */
ul.n-all li{
  width: 80%;
  height: auto;
  margin: 20px 8% 20px 12%;/* 設定順番:上・右・下・左; */
  padding-top: 30px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #6a8477;
  display: block;
  overflow: hidden;
  background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(208,87,0 , 0.28) 50%);
  background-position: 0 0;
  background-size: auto 200%;
  transition: 0.3s;
}
/* ニュース（日付） */
.n-ymd{
  float: left;
  width: 12%;
  height: auto;
  padding-left: 2%;
  text-align: center;
  font-weight: 400;
  font-size: 14pt;
  color: #000000;
  overflow: visible;
}
/* ニュース・アイコン（new-icon・no-icon） */
.n-icon{
   float: left;
   width: 12%;
   height: auto;
   padding-left: 3%;
   font-weight: 400;
   text-align: center;
   overflow: visible;
}
/* ニュース（アイコンnew） */
.new-icon{
  width: 45px;
  padding: 3px 6px;/* 設定順番:上下・左右; */
  margin-left: 25px;
  font-size: 80%;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #6a8477;
  border: solid 1px #6a8477;
  border-radius: 5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
  display: block;
}
/* ニュース（アイコン無し） */
.no-icon{
  width: 45px;
  padding: 3px 6px;/* 設定順番:上下・左右; */
  margin-left: 25px;
  display: block;
}
/* ニュース（題名） */
.n-midashi{
   width: 76%;
   height: auto;
   float: left;
   margin: 0px;
   font-size: 14pt;
   text-align: left; 
   text-decoration : none; 
   text-indent: 1em;
   line-height: 2em;
   letter-spacing: 0.1em;
   color: #484b4e;
   overflow: hidden;
}

/* ニュース（アイコン一覧はこちら） */
.news-ichiran {
  position: absolute;
  bottom: 14%;
  right: 10%;
  cursor: pointer;
  width: 120px;
  margin: 0 auto;
  padding: 12px 8px;/* 設定順番:上下・左右; */
  line-height: 10px;
  font-size: 10pt;
  vertical-align: middle;
  text-align:center;
  text-decoration: none;
  color:#ffffff;
  background: #70542c;  
  border-radius: 40px;
  -webkit-border-radius: 40;
  -moz-border-radius: 40;
  transition: .3s;
  display:block;
}
.news-ichiran:hover {
  background: #c09a61;
  text-decoration: none;
  cursor: pointer;
  display: block;
}
/* ニュース・リンク通常時 色指定 */
.news-ichiran a:link{
  text-decoration: none;
  color:#fff;
}
/* ニュース・リンク訪問済み 色指定 */
.news-ichiran a:visited{
  text-decoration: none;
  color: #fff;
}

/* もなみ会メッセージ */
#message{
  position: relative;
  width: 100%;
  height: 1020px;
  margin-top: 0%;
  background-color: #403a3a;  
  color: #fff;
  display: inline-block;

}
#message::before {
  display: block;
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
  background-image: url(rogo-b.png);
  background-repeat: no-repeat;
  background-position: center;
  opacity: .5; 
  z-index: 5;
}
.m-t{
display: block;
padding-top: 5.5%;
padding-bottom: 40;
padding-left: 100;  
font-size: 2vw;
font-weight: 600;
}
.m-j{
 display: inline-block;
 padding-left: 60;
 padding-right: 60;
 padding-bottom: 20px;
 line-height: 50px;
 font-size: 1.2vw;
}

.person{
  position: absolute;
  left: 2;
  bottom: 0;
  width: 15%;
  min-width: 220px;
  margin-left: 15%;
  float:left;
  z-index: 50;  
}    
.person2{
  position: absolute;
  right: 2;
  bottom: 0;
  width: 45%;
  max-width: 380px;
  margin-right: 15%;
  float:right;
  z-index: 50;
}
    
/* サポートセンターあそしえの紹介 */
#B-gata {
  width: 100%;
  height: 1080px;
  background-color: #586760;
  background-image: radial-gradient(#6f9591 1px, transparent 1px);
  background-size: 20px 20px;
  position: relative;
  border-bottom: solid 80px;
  border-color: #d7e0e8;
}
#b-contents{
  width: 90%;
  max-width: 1300px;
  padding: 5%;
  margin-left: auto;
  margin-left: auto;
  text-align: left;

}

.work{
  width:30%;
  max-width: 381px;
  margin-bottom: 30px;
}

.workmoji {
  padding-top: 10px;
  text-indent: 1em;
  width: 50%;
  max-width: 450px;
  min-width: 330px;
  font-size: 12pt;
  color: #fff;
  margin-bottom: 30px;
}

.work-b{
  width:35%;
  min-width: 320px;
  max-width: 470px;
  margin-left: 20px;
  margin-top: 50px;
}
.work-b a{
  display: block;
}

/* --- 画像・製パン作業 --- */
.work1 {
  position: absolute;
  bottom: 10%;
  width: 30%;
  max-width: 300px;
  min-width: 290px;
}
/* --- 画像・パソコン作業 ----- */
.work2 {
  position: absolute;
  top: 5%;
  left: 57%;
  width: 20%;
  max-width: 300px;
  min-width: 240px;
}
 /* --- 画像・軽作業 ----- */
.work3 {
  position: absolute;
  top: 40%;
  left: 68%;
  width: 17%;
  max-width: 250px;
  min-width: 220px;
}

.workimg {
  position: absolute;
  top: 83%;
  left: 77%;
  width: 50%;
  max-width: 130px;
}

/* --- アソシエベーグル背景スクロールイメージ上の画像 ----- */
.box4String{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;  
  color      : #fff;
  font-size: 40pt;
  top        : 35%; 
  left       : 50%;
  transform  : translate(-50%,-50%);
}    
    
.box-insta{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;  
  color      : #fff;
  font-size  : 40pt;
  top        : 15%;  
  left       : 83%;
  transform  : translate(-50%,-50%);
  z-index: 500;
}  
        
.box-fb{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  color      : #fff;
  font-size  : 40pt;
  top        : 35%; 
  left       : 83%;
  transform  : translate(-50%,-50%);
  z-index: 500;
}
  
.box-blog{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  top        : 55%; 
  left       : 83%;
  transform  : translate(-50%,-50%);
  z-index: 500;
}

/* --- 画像・人物（左）wide用 ----- */
.box-hito{
  position   : absolute;
  display    : inline-block;
  top        : 83%; 
  left       : 25%;
  width      : 55%;
  max-width  : 380px;
  transform  : translate(-50%,-50%);
  z-index: 160;
}  
 /* --- 画像・人物（右） ----- */   
.box-hito2{
  position   : absolute;
  display    : inline-block;
  top        : 85%; 
  left       : 75%;
  width      : 55%;
  max-width  : 380px;
  transform  : translate(-50%,-50%);
}  
/* --- 画像・人物（左）smart用 ----- */   
.box-hito3{
  display: none;	
}
/* --- 画像・文字（右） ----- */   
.box-moji1{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  top        : 37%; 
  left       : 19%;
  transform  : translate(-50%,-50%);
} 
/* --- 画像・文字（左） ----- */ 
.box-moji2{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  top        : 35%; 
  left       : 13%;
  transform  : translate(-50%,-50%);
}  

/* ベーグルショップの紹介 */

#bagel {
    width: 100%;
    background: url(back-bagel.jpg) no-repeat center center;
    background-size: cover;
    padding-bottom: 70; 
}
.bagels {
  	max-width: 1200px;
   	margin-left: auto;
   	margin-right: auto;
   	background-color: #fff;
   	padding-bottom: 40px;
}
.b-img {
    margin-top: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.b-img img{
    width: 20%;
}
.shop-t{
  padding-top: 25px;
  padding-bottom: 25px;
  line-height: 65px;
  font-weight: 600;
  text-align: center;
  font-size: 40px;
  width: 96%;
  border-bottom: dotted 0px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.shop{
  max-width: 980px;
  padding-left: 10;
  padding-right: 10;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  overflow: hidden;
}
/*** 店舗外観・写真 ***/  
.shop-gaikan {
  float: left;
  width: 35%;
  margin-right: 10px;
}
/*** 店舗内・写真 ***/
.shop-nai {
  float: left;
  width: 25%;
  margin: auto;
  display: block;
}
.shop-img2 {
  width: 67.5%;
  margin-bottom: 5px;
}
.shop-img3 {
  width: 67.5%;
  margin-top: 5px;
}
.shop-moji {
  float: left;
  width: 38%;
  font-size: 16px;
}
/*** 頭文字（大文字） ***/
.shop-moji:first-letter {
  font-size: 40px;
  margin-right: 6px;
  margin-top: 6px;
  float: left;
  line-height: 1;
}

/*** ベーグル特長 ***/
.bagel-tokusho-t {
  max-width: 980px;
  padding-left: 10;
  padding-right: 10;
  margin: auto;
  text-align: center;
}
.bagel-tokusho-t p{
  margin: 30px 0 15px 0;/* 設定順番:上・右・下・左; */
  line-height: 38px;
  font-weight: 600;
  text-align: left;
  font-size: 25px;
  border-bottom: dotted 2px; 
  display: block;
}
.bagel-tokusho {
   max-width: 980px;
   padding-left: 10;
   padding-right: 10;
   text-align: center;
   margin: auto;
   overflow: hidden;
}
 .toku-gazo-moji {
   width: 29%;
   display: inline-block; /* インラインブロック化 */
   vertical-align: top;	/* 上端を揃える */
   text-align: center;
}
 /*** ベーグル特長・小麦 ***/
.tgm1{
    margin-left: 0;
    margin-right: 1%;         
 }
 /*** ベーグル特長・水 ***/
.tgm2{
    margin-left: 3%;
    margin-right: 3%;         
 }
 /*** ベーグル特長・食感 ***/
.tgm3{
    margin-left: 1%;
    margin-right: 0;        
}
.toku-gazo-moji img {
  	width: 85%;
   	margin: auto;
}
.toku-gazo-moji p {
   	display: inline-block;
   	text-align: left;
   	text-indent: 1em;
}
    
/*** オンラインショップ ***/
.onlineshop-t {
  	max-width: 980px;
   	padding-left: 10;
  	padding-right: 10;
  	margin: auto;
   	text-align: center;
}
.onlineshop-t p {
  	margin: 30px 0 15px 0; 	/* 設定順番:上・右・下・左; */
    line-height: 38px;
   	font-weight: 600;
   	text-align: left;
   	font-size: 25px;
   	border-bottom: dotted 2px;
   	display: block;
}
.onlineshop {
   	width: 70%;
   	margin: 0 15% 35px 15%; /* 設定順番:上・右・下・左; */
    text-align: center;
    overflow: hidden;
}
.on-shop-t{
     width: auto;
     min-height: 30px;
     margin:  0 0 5px 0;/* 設定順番:上・右・下・左; */  
     padding: 15px 10% 5px 10%;/* 設定順番:上・右・下・左; */     
     line-height: 1;
     text-align: center;
     font-size: 15pt;
     border-bottom: solid 1px #000;
}
.on-gazo-moji-ho {
   	float: left;
   	width: 44%;
   	text-align: center;
}
.on-gazo-moji-ya {
 	float: right;
   	width: 44%;
   	text-align: center;
}
/*** オンラインショップ・説明文 ***/
.onlineshop p{
   	display: inline-block;
   	text-align: left;
   	text-indent: 1em;
    margin-top: 5px;
}
    
    
 /*** 仕事承ります ***/  
 #shigoto {
    width: 100%;
    height: auto;
   
    margin-left: auto;
    margin-right: auto;
    background: url(shigoto.jpg) no-repeat center center;
    background-size: cover;
}
#shigoto-t{
    margin-top: 0;
    padding: 30;
    height: 380px;
    text-align: center;
}   
.shigoto-moji{
    width: 60%;
	min-width: 900px;
    margin-top: 40;
    margin-left: auto;
    margin-right: auto;
	padding-left: 2%;
	padding-right: 2%;
	font-size: 12pt;
    text-align: left;
    text-indent: 1em;
	background-color: rgba( 255,255,255 , 0.5 );
}
.shigoto-table{
    width: 95%;
    max-width: 950;
    margin-top: 10;
    margin-left: auto;
    margin-right: auto;
	font-size: 12pt;
    text-align: center;  
    background-color: #678178;
}
tr{
  vertical-align: middle;	
}
/*** 作業種 ***/
.midashi1{
    width; 24%;
	padding-top: 5px;
    color: #fff;
}   
/*** 料金/単価 ***/
.midashi2{
    width: 18%;
	padding-top: 5px;
    color: #fff;
 }
/*** 詳細 ***/
 .midashi3 {
   width: 58%;
   padding-top: 5px;
   color: #fff;
 }

 td {
   text-align: left;
   vertical-align: top;
   padding: 5;
   background-color: #ffffff;
   color: #678178;
 }

 .shigoto-kome {
   padding-left: 1em;
   text-indent: -1em;
   display: inline-block;
 }

 td.naiyo {
   text-align: left;
   text-indent: 1em;
   vertical-align: top;
   padding: 5;
   background-color: #ffffff;
   color: #678178;
 }

 .tel {
   width: 100%;
   margin-top: 45;
   margin-bottom: 45;
   padding-top: 20;
   padding-bottom: 20;
   text-align: center;
   background-color: #678178;
   overflow: hidden;
 }

.tel-number{
   float: left;
   width: 65%;
   margin-left: 12%;
   margin-right: 3%;
}
.tel-mail{
   float: right;
   width: 5%;
   margin-top: 5px;
   margin-left: 3%;
   margin-right: 12%;
   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);
 }

/*** もなみ日記 ***/   
#Recreation{
  width: 100%;
  background-color: #000;
  overflow: hidden;
  position: relative;
  z-index: 60;
}
#Recreation .caption {
  font-size: 24px;
  padding-top: 170px;
  font-weight: 600;
  color: #fff;
}
#Recreation .r-mask {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;/* 絶対位置指定 */
  opacity: 0;/* マスクを表示しない */
  background-color: rgba(0,0,0,0.6);/* マスクは半透明 */
  -webkit-transition: all 0.9s ease;
  transition: all 0.9s ease;
  }
#Recreation:hover .r-mask {
  opacity: 1;/* マスクを表示する */  
}

/*** Diary ***/
.st2{
  font-size: 4vw; 
  margin-left: 5%;
  padding-left: 5%; 
  color: #fff;
}
/*** Memories ***/
.st3{
  font-size: 4vw;
  margin-right: 5%;
  padding-right: 5%;
  color: #fff;  
}
    
.rogo2{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  text-align: center; 
}        
    
/* ローディングアニメーション */   
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}
}
    
}  
     
/*** MAP ***/ 
#map {
   background-color: #695e5b;
   width: 100%;
   background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #F9F9F9), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #F9F9F9), color-stop(.75, #F9F9F9), color-stop(.75, transparent), to(transparent));
   -webkit-background-size: 7px 7px;
   position: relative;
   z-index: 60;
}
.map-t{
   width: 100%;
   font-size: 40pt;
   text-align: center;
   font-weight: 800;
   color: #fff;
}
    
.map-p{
    width: 99%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding-bottom: 0.5%;
}
    
#copyright{
  width: 100%;
  height: 25px;
  padding-top: 5px;
  font-size: 10pt;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  background-color: forestgreen;
  position: relative;
  z-index: 60;
}     
    
}

@media screen and (min-width:1024px) and ( max-width:1300px) {
 
.m-j{
 display: inline-block;
 padding-left: 60;
 padding-right: 60;
 padding-bottom: 20px;
 line-height: 40px;
 font-size: 1.5vw;
}

}

@media screen and (min-width: 801px) {
.box2 {
  position   : relative;
  max-width  : 100%;
  height     : 480px;
  overflow   : hidden;
}
.box3 {
  position   : relative;
  max-width  : 100%;
  height     : 480px;
  overflow   : hidden;
}
/*** もなみ日記・左 ***/
.Recreation1{
  width: 50%;
  float: left;
} 
/*** もなみ日記・右 ***/
.Recreation2{
  width: 50%;
  float: right;
}

}
@media screen and (max-width: 800px) {
/*** もなみ日記・中央ロゴ ***/
#Recreation .caption {
 padding-top: 130px;
}
#Recreation .r-mask {
  width: 100%;
  height: 400px;
  text-align: center;
  position: absolute;/* 絶対位置指定 */
  opacity: 0;/* マスクを表示しない */
  background-color: rgba(0,0,0,0.6);/* マスクは半透明 */
  -webkit-transition: all 0.9s ease;
  transition: all 0.9s ease;
  }
#Recreation:hover .r-mask {
  opacity: 1;/* マスクを表示する */  
}
.box2 {
  position   : relative;
  max-width  : 100%;
  height     : 400px;
  overflow   : hidden;
}
.box3 {
  position   : relative;
  max-width  : 100%;
  height     : 400px;
  overflow   : hidden;
}
/*** もなみ日記・左 ***/
.Recreation1{
  width: 100%;  
} 
/*** もなみ日記・右 ***/
.Recreation2{
  width: 100%;
  display: none;
}
/*** Diary ***/
.st2{
  font-size: 14vw; 
  margin-left: 5%;
  padding-left: 5%; 
  color: #fff;
}

img {
  pointer-events: none; 
}

}