@charset   "UTF-8";
@media screen and (max-width:1023px){

body{
  margin: 0;
} 

/* --- スマホ用アイコン---- */

#s-menu{
  border-bottom: 1px solid #b9a4a4;
}
#s-rogo{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20;
  padding-bottom: 30;
  text-align: center;
}
.p-30{
  width: 20%;
  min-width: 120px;
  max-width: 200px;
}
.s-icon{
  text-decoration: none;
  color: #fff;
}
.s-icon-n{
  padding: 5px 5px 5px 30px;/* 設定順番:上・右・下・左; */
  font-size: 10pt;
  text-align: left;
  text-decoration: none;
  color: #fff; 
  display: block;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(115,84,72,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
.s-icon-n:hover {
  background-position: -100% 0;
  color: #fff;
}
.sample-accordion {
  min-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.sample-accordion .ac-content {
  margin: 0;
  padding: 0;
}
.sample-accordion input {
  display: none;
}
.sample-accordion label {
  display: block;
  cursor: pointer;
  text-align: left;
  text-indent: 3em;
  padding: 5;
  background: linear-gradient(to bottom, #5a5454, #403a3a);
  color: #fff;
  border-bottom: 1px double #fff;
  box-sizing: border-box;
}
.sample-accordion label:hover {
  background: #746e6e;
}
.sample-accordion .ac-cont {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #9f887f, #806a61);
  box-sizing: border-box;
  transition: 0.2s;
}
.sample-accordion input:checked + .ac-cont {
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}	

	/* --- スクロール時に出るトップへのアイコン---- */  
#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;
} 

/* --- デスクトップ左側ナビゲーションメニュー非表示 ----- */
#sidebar{
display: none;
}
	
#r-contents{
  width: 100%;
  z-index: 1;
}
	
/* --- トップスライド（メイン・サブ親BOX） ----- */	
#grid-box{
  width: 100%;
  height: auto;
}  	
/* --- メインスライド ----- */ 
.mo-as-box{
  width: 100%;
  height: 100vw;
} 
.bg-1 .sl-slide-inner h2{
   font-size: 4vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;
}
.bg-1 .sl-slide-inner p{
   font-size: 2.6vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -45%;
   padding-bottom: -45%;
}
.bg-2 .sl-slide-inner h2{
   font-size: 4vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;
}
.bg-2 .sl-slide-inner p{
   font-size: 2.6vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -45%;
   padding-bottom: -45%;
}
.bg-3 .sl-slide-inner h2{
   font-size: 4vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;		
}
.bg-3 .sl-slide-inner p{
   font-size: 2.6vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -45%;
   padding-bottom: -45%;
}
.bg-4 .sl-slide-inner h2{
   font-size: 4vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;		
}
.bg-4 .sl-slide-inner p{
   font-size: 2.6vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -45%;
   padding-bottom: -45%;
}
.bg-5 .sl-slide-inner h2{
   font-size: 4vw;	
   letter-spacing: 0.1em;
   line-height: 1.2em;	
}
.bg-5 .sl-slide-inner p{
   font-size: 2.6vw;
   line-height: 1.5em;
   text-shadow:0 0 5px #000;
   margin-bottom: -45%;
   padding-bottom: -45%;
}
/* --- サブスライド（親BOX）----- */  
.c-1-2{
   border-top: 1px solid #fff;
   width: 100%;
   overflow: hidden;
}
/* --- サブスライド（回転画像） ----- */
#stage {
   margin-left: 1px;
}
img.b-s{
   width: 100px;
   height: auto;
 }    
/* --- サブスライド（仕事依頼） ----- */   
.c-2 {
  float: right;
  position:	relative;
  width: 50%;
  height: 50vw;
  text-align: center;
  background: #000; 
}
.c-2 .captiont-title{
  width: 98%;  
  padding: 2px 1% 0 1%;/* 設定順番:上・右・下・左; */
  text-align: center;
  font-size: 4.5vw;
  color: #fff;   
}
.c-2 .caption-moji{
  width: 94%;  
  padding: 2px 3% 0 3%;/* 設定順番:上・右・下・左; */
  text-align: left;
  font-size: 2.1vw;
  color: #fff;  
  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: auto;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 50px;
  background : url(news.jpg) no-repeat center center;
  background-size: cover; 
}
#news-title{
 width: 40%;
 height: auto;
 margin: 20px 3% 0 3%;/* 設定順番:上・右・下・左; */
 text-align: left;
 font-size: 20pt;
 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: 130px;
  height: 130px;
  border-radius: 50%; 
  box-shadow: /* 複数の影を指定 *//* x, yともに位置をずらす *//* rgbaで透過 */
    180px 15px 0 rgba( 160,186,116 , 0.2 ), 
    290px -20px 0 rgba( 160,186,116 , 0.3 ), 
    450px 25px 0 rgba( 160,186,116 , 0.2 ),
    600px -90px 0 rgba( 160,186,116 , 0.3 ),
	810px 10px 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: 94%;
  height: auto;
  margin: 10px 3% 10px 3%;/* 設定順番:上・右・下・左; */ 
  padding-top: 10px;
  padding-bottom: 10px;
  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: 18%;
  height: auto;
  padding-left: 2%;
  text-align: center;
  font-weight: 400;
  font-size: 10.5pt;
  letter-spacing: 0.2;
  color: #000000;
  overflow: visible;
}
/* ニュース・アイコン（new-icon・no-icon） */
.n-icon{
   float: left;
   width: 18%;
   height: auto;
   font-size: 75%;
   font-weight: 400;
   text-align: center;
   overflow: visible;
}
/* ニュース（アイコンnew） */
.new-icon{
  width: 38px;
  padding: 3px;
  margin-left: 30px;
  margin-right: 8px;
  white-space: nowrap;
  color: #6a8477;
  border: solid 1px #6a8477;
  border-radius: 5px;
  display: block;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/   
}
/* ニュース（アイコン無し） */
.no-icon{
  width: 40px;
  padding: 3px 6px;/* 設定順番:上下・左右; */
  margin-left: 12px;
  margin-right: 8px;
  display: block;
}
/* ニュース（題名） */
.n-midashi{
   width: 60%;
   height: auto;
   padding-top: 4px;
   float: left;
   font-size: 10.5pt;
   text-align: left; 
   text-decoration : none; 
   text-indent: 1em;
   line-height: 1.5em;
   color: #484b4e;
   overflow: hidden;
}
/* ニュース（アイコン一覧はこちら） */
.news-ichiran {
  position: absolute;
  bottom: 2%;
  right: 5%;
  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: 840px;
  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-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .5;  
  z-index: 5;
}
.m-t{
  display: block;
  padding-top: 5.5%;
  padding-bottom: 20;
  padding-left: 5%;  
  font-size: 14pt;
  font-weight: 600;
}
.m-j{
  display: inline-block;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 30px;
  line-height: 23px;
  font-size: 10.5pt;
}
	
.person{
   position: absolute;
   left: -10;
   bottom: 0;
   float:left;
   width: 30%;   
   margin-left: 6%;
   margin-right: 2%;
   z-index: 50;
}  
    
.person2{
   position: absolute;
   right: -10;
   bottom: 0;
   float:right;
   width: 50%;   
   margin-left: 2%;
   margin-right: 6%;
   z-index: 50;
}  

/* --- あそしえの仕事 ----- */  
#B-gata {
   padding-top: 30;
   width: 100%;
   height: 900px;
   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: 96%;
    padding: 2%;
    margin-left: auto;
    margin-left: auto;
    text-align: left;  
}
    
.work{
  width:40%;
  max-width: 281px;
  min-width: 240px;
}
.workmoji {
  text-indent: 1em;
  width:92%;
  min-width: 230px;
  padding: 15px 4% 20px 4%;
  font-size: 10.5pt;
  color: #fff;
}

.work-b{
  width:35%;
  min-width: 230px;
  max-width: 470px;
}
.work-b a{
  display: block;
}

/* --- 画像・製パン作業 ----- */      
.work1 {
   position: absolute;
   bottom: 4%;
   left: 5%;
   width: 45%;
   max-width: 260px;
   min-width: 160px;
}
 
/* --- 画像・パソコン作業 ----- */   
.work2 {
   position: absolute;
   bottom: 38%;
   right: 20%;
   width: 30%;
   max-width: 225px;
   min-width: 130px;
}
/* --- 画像・軽作業 ----- */   
.work3 {
   position: absolute;
   bottom: 17%;
   right: 5%;
   width: 26%;
   max-width: 200px;
   min-width: 125px;
}

.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%);
  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%);
  transform  : translate(-50%,-50%);
  z-index: 500;
}  
     
.box-blog{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  top        : 55%; 
  left       : 83%;
  transform  : translate(-50%,-50%);
  transform  : translate(-50%,-50%);
  z-index: 500;
}   
    
/* --- 画像・人物（左）wide用 ----- */
.box-hito{
  display: none;
}  
/* --- 画像・人物（右） ----- */   
.box-hito2{
  position   : absolute;
  display    : inline-block;
  top        : 83%; 
  left       : 73%;  
  width      : 55%;
  max-width  : 300px;
  min-width  : 100px;
  transform  : translate(-50%,-50%);
}  
/* --- 画像・人物（左）smart用 ----- */
.box-hito3{
  position   : absolute;
  display    : inline-block;
  top        : 85%; 
  left       : 23%;
  width      : 45%;
  max-width  : 210px;
  min-width  : 70px;
  transform  : translate(-50%,-50%);
  z-index: 160;
}  
/* --- 画像・文字（右） ----- */  
.box-moji1{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  top        : 35%; 
  left       : 22%;
  width      : 20%;
  max-width  : 100px;
  min-width  : 70px;
  transform  : translate(-50%,-50%);
} 
/* --- 画像・文字（左） ----- */ 
.box-moji2 {
   position  : absolute;
   display   : inline-block;
   padding   : 20px;
   top       : 35%;
   left      : 8%;
   width     : 20%;
   max-width : 100px;
   min-width : 70px;
   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: 20px;
    padding-right: 20px;
  	margin-left: auto;
  	margin-right: auto;
    margin-bottom: 40px;
    overflow: hidden;
}
/*** 店舗外観・写真 ***/
.shop-gaikan {
  	float: left;
  	width: 60%;
    margin-left: 2%;
	margin-right: 1%;
}
/*** 店舗内・写真 ***/
.shop-nai {
  	float: right;
  	width: 34%;
  	margin-left: 2%;
	margin-right: 1%; 
}
.shop-img2 {
	float: right;
  	width: 83%;
  	margin: 0 1% 5% 10%;/* 設定順番:上・右・下・左; */  	
}
.shop-img3 {
	float: right;
  	width: 83%;
  	margin: 5% 1% 0 10%;/* 設定順番:上・右・下・左; */  
}
.shop-moji {
	float: left;
	margin-top: 10px;
  	font-size: 10.5pt;
}
/*** 頭文字（大文字） ***/
.shop-moji:first-letter {
	float: left;
  	margin-right: 3px;
  	margin-top: 3px;
  	font-size: 20pt;
  	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;
	font-size: 10.5pt;
	margin-top: 10px;
 }
    
/*** オンラインショップ ***/
.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: 76%;
    margin: 0 12% 35px 12%;	/* 設定順番:上・右・下・左; */
    text-align: center;
    margin: auto;
    overflow: hidden;
}
.on-shop-t{
    width: auto;
    height: auto;
    margin:  0 0 5px 0;/* 設定順番:上・右・下・左; */  
    padding: 15px 5% 5px 5%;/* 設定順番:上・右・下・左; */ 
    line-height: 1;
    text-align: center;
    font-size: 14pt;
    border-bottom: solid 1px #000;
}
.on-gazo-moji-ho {
    float: left;
    width: 42%;
	margin-right: 2%;
    text-align: center;
}
.on-gazo-moji-ya {
     float: right;
     width: 42%;
	 margin-left: 2%;
     text-align: center;
 }
/*** オンラインショップ・説明文 ***/
.onlineshop p {
     display: inline-block;
     text-align: left;
     text-indent: 1em;
	 font-size: 10.5pt;
     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: 100%;
    margin-top: 40;
   	padding: 5% 2% 0 2%;/* 設定順番:上・右・下・左; */
	font-size: 11pt;
    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: 9.5pt;
    text-align: center;  
    background-color: #678178;
}
/*** 作業種 ***/
.midashi1{
    width; 27%;
	padding-top: 5px;
    color: #fff;
}   
/*** 料金/単価 ***/
.midashi2{
    width: 23%;
	padding-top: 5px;
    color: #fff;
 }
/*** 詳細 ***/
.midashi3{
    width:50%;
	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;   
	background-color: #678178;
	overflow: hidden;
}
.tel-number{
	float: left;
	width: 87%;
	margin-left: 1%;
}
.tel-mail{
	float: right;
	width: 8%;
	margin-top: 5px;
	margin-right: 1%;
    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:			480px;
  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;	/* マスクを表示する */  
}
/*** もなみ日記・左 ***/
.Recreation1{
  width: 50%;
  float: left;
} 
/*** もなみ日記・右 ***/
.Recreation2{
  width: 50%;
  float: right;
} 
/*** Diary ***/
.st2{
  font-size: 6vw; 
  margin-left: 5%;
  padding-left: 5%; 
  color: #fff;
}
/*** Memories ***/
.st3{
  font-size: 6vw;
  margin-right: 10%;
  padding-right: 10%;
  color: #fff;
  overflow: hidden;
}
	
.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 {
   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;
}    
 
.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); 
}

img {
-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}
    
}