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

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);    
} 
	
/* --- スマホ用アイコン---- */    

#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;
}
.ac-cont p{
  margin-top: 5;
  margin-bottom: 5;
}
.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: 500;
}
#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%;
}
         
/* --- デスクトップ左側ナビゲーションメニュー非表示 ----- */
#sidebar{
  display: none;
}
#r-contents{
  width: 100%;
  z-index: 1;
  background-color: #f2eeea;
}
.box {
  position   : relative;
  max-width  : 100%;
  height     : 70%;
  max-height: 400px;
  min-height: 300px;
  margin     : auto;
  overflow   : hidden;
}
#work-top{
  width: 100%;
 }

.p-bs{
  width: 100%;
  min-width: 120px;
  display: none;
 }

#work-icon{
  z-index: 10;
  position: absolute;
  top: 60;
  width: 100%;
  height: 90%;
  min-height: 60%;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  text-align: center;
}
#work-icon img {
  position: relative;
  width: 100%;
  min-width: 130px;
}
#work-icon a{
  position: absolute;
}
/* --- 画像・B型とは？ --- */ 
.wi-bg{
  position: absolute;
  left: 5%;
  bottom: 100%;
  width: 30%;
}
/* --- 画像・利用するには？ --- */ 
.wi-ri{
  position: absolute;
  left: 11%;
  bottom: 55%;
  width: 30%;
}
/* --- 画像・あそしえの仕事 --- */ 
.wi-sa{
  position: absolute;
  right: 31%;
  bottom: 100%;
  width: 30%; 
}
/* --- 画像・よくある質問 --- */ 
.wi-ta{
  position: absolute;
  right: 34%;
  bottom: 64%;
  width: 30%;
}
    
.ms {
   text-align: center;
   font-size: 13pt;
   margin-left: auto;
   margin-right: auto;
   padding: 25px 20px;/* 設定順番:上下・左右; */
   text-align: left;
   text-indent: 1em;
   letter-spacing: 0.2em; 
}
    
/*** B型とは？ ***/
#category-b-gata {
   width: 100%;
   padding-top: 30px;
   padding-bottom: 40px;
   color: #fff;
   background-color: #403a3a;
   background: url(back.jpg) no-repeat;
   background-size: cover;
   overflow: hidden;
}    
    
/***【B型・利用・作業・その他】タイトル ***/
.category-title {
   width: 90%;
   max-width: 1300px;
   margin-left: auto;
   margin-right: auto;
   font-size: 16pt;
   text-align: left;
   border-bottom: dotted 3px;
}
    
/***【B型・利用・作業・その他】説明 ***/
.setsumei {   
   width: 80%;
   max-width: 1180;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   padding: 2px 10%;/* 設定順番:上下・左右; */
   font-size: 10.5pt;
   text-indent: 1em;
   line-height: 30px;
}
	
/***【B型・利用・作業・その他】説明・太字***/
.setsumei-b{
  font-size: 10.5pt;
  font-weight: 600;
  color: #a53148;
}
#osusume{
  overflow: hidden;
}	
.b-gata-left{
  display: none;
}
.b-gata-right{ 
  width: 90%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  text-align: center;
  font-size: 11pt;
}
.osusume{
  padding-left: 20px;
  text-align: left;
  font-size: 16pt;
  font-weight: 600;
  color: #fff;
}   
ul.b-gata-list{
   font-size:12pt;
   text-align: left; 
   display: inline-block;   
}

.p-omo{
  width: 50%;
}  
#omoi {
   width: 98%;
   margin-right: auto;
   margin-left: auto;
   padding-bottom: 20px;
   text-align: center; 
   
   background: #fff;
   background-color: #a5546d;
   position: relative;
} 
.omoi-t {
   padding: 10px 5%;/* 設定順番:上下・左右; */
   font-size: 4vw;
   line-height: 1.5em;  
   text-align: left;
   vertical-align: middle;
   display: inline-block;
}    
.p-omoi{
   width: 94%;
   padding-top: 5px;
   padding-bottom: 5px;
}  
    
.p-g{   
  width: 70%;
  padding-top: 20px;  
}  

/*** 利用するには？ ***/
#category-riyou{
  width: 100%;
  margin-top: 50;
  margin-bottom: 30;
  padding-bottom: 30px;
  overflow: hidden;
}

.mendan{
   width: auto;
   padding: 2%;
   text-align: center;
}
.mendan img{
   width: 90%;
   max-width: 480px;
   border: solid 6px #fff;
}

/* もなみ会(電話番号・メール) */
.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%;
    margin-top: 40;
	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);
}

.kengaku {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
   padding-top: 10px;
   padding-bottom: 10px;
   text-align: left;
   font-size: 12pt;
   color: #000; 
   padding-left: 1em;
   text-indent: -1em;
   display: inline-block;
}

#map{
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}
.riyou-step{
   width: 80%;
   margin: 20px 10% 0 10%;/* 設定順番:上・右・下・左; */ 
   text-align: center;
}
.riyou-step img{
   width: 100%; 
}
    
/*** 作業内容 ***/
#category-sagyou{
   width: 100%;
   padding-bottom: 30px;
   overflow: hidden;
}    
.sagyou-group{
   width: 100%;
   min-height: 100%;
   margin: auto;
   padding-top: 15px;
   text-align: center;   
} 
.s-g-gazo-moji{
   position: relative;
   width: 100%;  
   min-width: 320px;
}
.s-g-gazo-moji img{
   z-index: 250;
   width: 100%; 
   min-height: 100%;
   margin-top: 10%;
   margin-bottom: 10%;
}	
.s-g-gazo-moji .mask {
    z-index: 300;
    width: 100%;   
    height: auto;
	min-height: 100%;
   	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
}
.s-g-gazo-moji:hover .mask {
    width: 100%;
    height: auto;
	min-height: 100%;
	opacity: 1;
	padding-top: 5px;
}      
.s-g-moji{
    margin: 10px;
    padding: 10px;
    font-size: 11pt;
    text-align: left;
    text-indent: 1em;
    vertical-align: top;
    color: #fff;  
}  
.s-g-moji-t{
  margin-bottom: 5px;
  font-size: 18pt;
  font-weight: 600;
  border-bottom: solid 1px;
}
.workimg{
   margin-bottom: 30px;
   border-top: 3px solid #fff;
   border-bottom: 3px solid #fff;
}

/*** サポートセンターあそしえ・親BOX ***/
.c-asoshie{
  width: 100%;
  margin-bottom: 40px;
  overflow: hidden;
}
/*** サポートセンターぷるみえ・親BOX ***/
.c-purumie{
  width: 100%;
  margin-bottom: 5px;
  overflow: hidden;
}
/*** ↓↓↓ あそしえ・ぷるみえ・共通 ↓↓↓ ***/
.c-title{
   width: 90%;
   max-width: 1300px;
   margin-left: auto;
   margin-right: auto;
   font-size: 14pt;
   text-align: left;
   border-bottom: solid 1px;
}
/*** 写真・文字 親BOX***/
.c-pic-moji{
   width: 80%;
   margin: 20px auto;/* 設定順番:上下・左右; */
   overflow: hidden;
}
/*** 写真 ***/
.c-pic{
   max-width: 580px;
   margin: 0 auto;
   padding-bottom: 10px;
   text-align: center;
}
/*** 文字 ***/
.c-moji{
   max-width: 580px;
   margin: 0 auto;
   text-align: left;
   font-size: 10.5pt;
}
/*** 頭文字（大文字） ***/
.c-moji:first-letter {
   float: left;
   margin-right: 6px;
   margin-top: 6px;
   font-size: 25pt;
   line-height: 1;
}
/*** ↑↑↑ あそしえ・ぷるみえ・共通 ↑↑↑ ***/


/*** その他 ***/
#category-sonota{
  width: calc(100%-40px);
  padding-top: 10px;
  padding-bottom: 20px;
  border: solid 10px #6a8477;
}    
.qabox {
   width: 80%;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   font-size: 10.5pt;
   overflow: hidden;
}
/*** 質問 ***/
.qset{
   width: 100%;
   margin-top: 3px;
   margin-bottom: 3px;
   overflow: hidden;
}  
/*** 答え ***/
.qset2{
   width: 100%;
   overflow: hidden;
}
.qa{
   float: left;
   width: 15%; 
 }
.ans{
   float: right;
   width: 85%;  
   text-indent: 1em;
}
.qa-q{
    float:left;
    width: 25px;
    height: 25px;
	padding: 4px;
    font-size: 12pt;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    color: #6a8477; 
    border: 1px #6a8477 solid;   
}
.qa-a {
   float: left;
   width: 25px;
   height: 25px;
   padding: 4px;
   font-size: 12pt;
   font-weight: 600;
   text-align: center;
   vertical-align: middle;
   color: #de4f4f;
   border: 1px #de4f4f solid;
}
.qa-kome{
   padding-left: 1em;
   text-indent: -1em;
   display: inline-block;
}
    
#copyright{
  width: 100%;
  height: 25px;
  padding-top: 5px;
  font-size: 10pt;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background-color: #a72b2b;
  background-color: #9f445c;
  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); 
}
    
    
}