@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: 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{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
    
}   


.test1{ text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding: 50px;;
}
   
/* --- 全体のフレーム----- */    
#contents{
  width: 100%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  overflow: hidden;        
}
.p-100{
  width: 100%;
}  
  
#s-menu{
  display: none;
}
#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;
}
       
/* --- 右側 ----- */  

#r-contents{
  float: right;
  width: 100vw;
  object-fit: cover;
  margin-right: -14.5%;
  padding-right: 14.5%;
  box-sizing: border-box;   
  z-index: 1;
  background-color: #f2eeea;
}

#work-top{
  width: 100%;
 }
    
#work-icon{
  z-index: 10;
  position: absolute;
  bottom: 0;  
  width: 100%;
  min-width: 1024px;
  height: 180;
  max-height: 300px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  text-align: center;
  border-top-right-radius: 100% 200px;
  border-top-left-radius: 100% 200px;
  background-color: #f2eeea;   
  background : repeating-linear-gradient(315deg,
                                         #666600,
                                         #666600 5px,
                                         #ffffff 0,
                                         #ffffff 9px);
}
#work-icon img {
  position: relative;
  width: 100%;
  z-index: 101;
}
#work-icon a{
  position: absolute;
}
/* --- 画像・B型とは？ --- */ 
.wi-bg{
  position: absolute;
  left: 0;
  bottom: 135%;
  width: 25%;
}
/* --- 画像・利用するには？ --- */ 
.wi-ri{
  position: absolute;
  left: 18%;
  bottom: 120%;
  width: 25%;
}
/* --- 画像・あそしえの仕事 --- */ 
.wi-sa{
  position: absolute;
  right: 40%;
  bottom: 120%;
  width: 25%; 
}
/* --- 画像・よくある質問 --- */ 
.wi-ta{
  position: absolute;
  right: 20%;
  bottom: 138%;
  width: 25%;
}
    
.ms {
   text-align: center;
   font-size: 20px;
   padding-left: 50;
   padding-top: 40;
   padding-bottom: 25;
   text-align: left;
   letter-spacing: 0.2em;
}
    
/*** B型とは？ ***/
#category-b-gata {
   width: 100%;
   padding-top: 60;
   padding-bottom: 50px;
   color: #fff;
   background-color: #403a3a;
   background: url(back.jpg) no-repeat;
   background-size: 100%;
   overflow: hidden;
}    
    
/***【B型・利用・作業・その他】タイトル ***/
.category-title {
   width: 90%;
   max-width: 1300px;
   margin-left: auto;
   margin-right: auto;
   font-size: 1.8vw;
   text-align: left;
   border-bottom: dotted 3px;
}
    
/***【B型・利用・作業・その他】説明 ***/
.setsumei {
   
   width: 88%;
   max-width: 1180;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 15px;
   margin-top: 20px;
   text-align: left;
   text-indent: 1em;
   font-size: 1.2vw;
   line-height: 2.5vw;   
}
	
/***【B型・利用・作業・その他】説明・太字***/
.setsumei-b{
  font-size: 1.25vw;
  font-weight: 600;
  color: #a53148;
}

#osusume{
  overflow: hidden;
}
	
.b-gata-left{
  float: left;
  width: 29%;
  margin-left: 19%;
  margin-right: 0%;

}
.b-gata-right{
  float: right;
  width: 47%;
  margin-right: 5%;

  
}
.osusume{
  text-align: left;
  font-size: 1.35vw;
  font-weight: 600;
  color: #fff;
}   
ul.b-gata-list{
   width: 90%;
   margin: auto;
   text-align: center;
}
ul.b-gata-list li{
   text-align: left;
   font-size:13pt;   
}

.p-omo{
  width: 50%;
}  

#omoi {
   width: 98%;
   margin-right: auto;
   margin-left: auto;
   text-align: center; 
   letter-spacing: 0.5em;
   background: #fff;
   background-color: #a5546d;
   position: relative;
} 

.omoi-t {
   width: 100%;
   font-size: 1.4vw;
   line-height: 60px;
   vertical-align: middle;
   display: inline;
}
    
.p-omoi{
   width: 49%;
}  
    
.p-g{   
   z-index: 150;
   position: absolute;
   top: 38%;
   left: 38%;
   width: 24%;
   
}  

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

.mendan{
   width: auto;
   padding: 40;
   text-align: center;
}
.mendan img{
   width: 70%;
   max-width: 680px;
   border: solid 6px #fff;
    
}

.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);
}

.kengaku {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   padding: 20px;
   text-align: left;
   font-size: 16pt;
   color: #000;
}

#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: 80%;
   margin: 15px 10% 15px 10%;/* 設定順番:上・右・下・左; */       
}
    
/*** 作業内容 ***/
#category-sagyou{
  width: 100%;
  padding-bottom: 30px;
  overflow: hidden;
}
.sagyou-group{
  width: 100%;
  min-width: 480px;
  margin: auto;
  padding-top: 15px;
  text-align: center; 
  overflow: hidden;
} 
.s-g-gazo-moji{
  float: left;
  width: 50%;
  display: block;
  position: relative;
}
.s-g-gazo-moji img{
  width: 100%; 
} 
.s-g-gazo-moji .mask {
   width: 100%;
   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: 100%;
   opacity: 1;
   padding-top: 5px;
}
.s-g-moji{
    padding: 10 10 10 10;
    font-size: 1.3vw;
    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: 1.5vw;
   text-align: left;
   border-bottom: solid 1px;
}
/*** 写真・文字 親BOX***/
.c-pic-moji{
   width: 80%;
   margin: 20px auto;/* 設定順番:上下・左右; */
   overflow: hidden;
}
/*** 写真 ***/
.c-pic{
   float: left;
   width: 48%;
   margin-right: 2%
}
/*** 文字 ***/
.c-moji{
   float: right;
   width: 48%;
   margin-left: 2%;
   text-align: left;
   font-size: 12pt;
}
/*** 頭文字（大文字） ***/
.c-moji:first-letter {
   float: left;
   margin-right: 6px;
   margin-top: 6px;
   font-size: 30pt;
   line-height: 1;
}
/*** ↑↑↑ あそしえ・ぷるみえ・共通 ↑↑↑ ***/


/*** その他 ***/
#category-sonota{
  width: calc(100%-40px);
  padding-top: 50px;
  padding-bottom: 80px;
  border: solid 20px #6a8477;
}    
  
.qabox {
   width: 90%;
   margin-top: 30;
   margin-left: auto;
   margin-right: auto;
   font-size: 16pt;
   overflow: hidden;
}


.qset{
   float: left;
   width: 45%;
   overflow: hidden;
}
  
.qset2{
   float: left;
   width: 45%;
   overflow: hidden;
}

.qa{
   float:left;
   width:20%;   
}
.ans{
   float: right;
   width: 80%;   
   text-indent: 1em;
}
    
.qa-q{
    float:left;
    width: 40px;
    height: 40px;
    padding: 8;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    color: #6a8477; 
    border: 1px #6a8477 solid;   
}

.qa-a {
   float: left;
   width: 40px;
   height: 40px;
   padding: 8;
   padding-left: 8;
   padding-right: 8;
   font-size: 22;
   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); 
}
    
    
}