@charset "UTF-8";

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0;}


/* 要素の見た目消し */
a{
  text-decoration:none;
}
ul{
  list-style: none;
    margin: 0;
    padding: 0;
}
ol{
  list-style: none;
    margin: 0;
    padding: 0;
}




body {
  background-color:rgba(255, 255, 130, 0.6);
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  line-height: 1;
  color: #333;
}

.return-top-p{
  display: flex;
  justify-content: flex-end;
}

.img-fit{
  width:auto;
  height:500px;
  overflow:hidden;
  border-radius:30px;
  
  margin-right:200px;
  padding:0;

 

  z-index:1;
}


/* top */

.top-div{
  margin-left:-50px;
}


.top-img{
  height:auto;
  width:150px; 
}

.top-img-2{
  height:50px;
  width:auto;

}

/* header */

.wid-grid-5-header{width:20%; min-width:100px;}

.sb-header{ 
 width:20%;
 min-width:100px;
 height:40px;
 justify-content: center;
 align-items: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:13px;
 background-color: rgb(220,220,220);
 border-radius: 30px;

 margin:20px 30px;
}



/* お知らせ */
.notification{
  display: block;
  background-color: rgb(240,240,240);
   
  width:100%;
  height:130px;

/* このpaddingをほかの要素の左端の基準にしたい */
  padding-left:7%;
  border: 2px solid rgb(120,230,255);
  
  
  overflow-y: auto;
  overflow-x: hidden;
}


.notification-ol{
  padding-left:20px;
  list-style-type:circle
}

.img-header {
  margin:0px;
  padding:0px;
  width:100%;
  height:auto;
}



/* main-1 */

.h2-header{
  justify-content: center;
  text-align: center;
  align-items: center;
  text-shadow: 0 10px 20px rgba(200,200,200,5);

  font-size:80px;
  color: yellow;
  
  margin-top: -900px;
  
}

/* 見積もりポップアップ */


.ads-h2{

  

 font-size:50px;
 
}

.sb-ads{
  
  font-weight:bold;
 padding:60px;
 border-radius: 200px;
 border: 2px solid rgb(30,170,255);
 background-color:rgb(60,190,255);

 box-shadow:
    0px 0px 0px rgb(30,80,255),
   -1px -1px 2px rgb(30,80,255),
    5px -1px 3px rgb(30,80,255),
   5px 5px 3px rgb(30,80,255); 
}

.sb-ads2{
  
  font-weight:bold;
 padding:60px;
 border-radius: 200px;
 border: 2px solid rgb(255,230,150);
 background-color:rgb(255,200,100);

 box-shadow:
    0px 0px 0px rgb(255,255,200),
   -1px -1px 2px rgb(255,255,200),
    5px -1px 3px rgb(255,255,200),
   5px 5px 3px rgb(255,255,200); 
}

.mg-bot-ads{
 margin-bottom:100px;
}





/* 本体の宣伝文 main2 */
.sb-main2{
  width:95%;
  height:auto;
  margin-top:50px;
  
  padding:20px;
 
 font-size:18px;
 font-weight:normal;
 background-color: rgb(255,255,90);
 border-radius: 80px;
 border: 8px solid rgb(255,50,50);
}

.main2-em{
  font-size:25px;
  font-weight:900;
}

.strong{
  font-size:35px;
  font-weight:900;
  color:rgb(100,100,50);
}

.main2-ul{
  display:flex;
  overflow-x: scroll;
}

.main2-ul-2{
  display:flex;
  overflow-x: scroll;
}



.main2-em{
  font-weight:bold;
}

.sb-main2-2{
  width:95%;
  height:auto;
  overflow-x: hidden;
  margin-top:50px;
  
  
 
 font-size:18px;
 font-weight:normal;
 background-color: rgb(100,230,255);
 border-radius: 80px;
 border: 8px solid rgb(50,150,255);
}





/* 料金表 */


#pricelist {
  max-width: 1500px;
  margin: 0 auto;

}


.sb-pricelist-ul{
  width:90%;
  height:auto;
  margin-top:50px;
  
  padding:80px;
 
 font-size:18px;
 font-weight:normal;
 background-color: white;
 padding:20px;
 border-radius: 50px;
 border: 5px solid rgb(255,170,0);
}


.sb-pricelist1{
  margin-top:20px; 
  width:80%;
  
  padding:80px;
 
 font-size:30px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 20px;
 border: 4px solid rgb(255,170,0);
}

.small-pricelist{
  color:rgb(255,50,50)
}

.sb-pricelist2{
   width:100%;
  height:auto;
  margin-top:50px; 
  
  padding:80px;
 
 font-size:30px;
 font-weight:bold;
 background-color: rgb(150,200,255);
 padding:20px;
 border-radius: 80px;
 border: 8px solid rgb(230,230,230);
}

.sb-pricelist3{
   width:100%;
  height:auto;
  margin-top:50px; 
  
  padding:80px;
 
 font-size:30px;
 font-weight:bold;
 background-color: rgb(255,150,0);
 padding:20px;
 border-radius: 80px;
 border: 8px solid rgb(230,230,230);
}

.sb-pricelist4{
   width:100%;
  height:auto;
  margin-top:50px;
  
  padding:80px;
 
 font-size:30px;
 font-weight:bold;
 background-color: rgb(255,70,70);
 padding:20px;
 border-radius: 80px;
 border: 8px solid rgb(230,230,230);
}

.sb-pricelist5{
  width:80%;
  height:auto;
  margin: 0 auto;
  margin-top: 30px;
  
  padding:50px;
 
 font-size:20px;
 font-weight:bold;
 background-color: rgb(250,250,240);
 padding:20px;
 border-radius: 80px;
 border: 4px solid rgb(180,180,180);
}



/* 引っ越しガイド */
.guidance{


  width:90%;
  height:auto;
  justify-content: center;
  text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
   
}

.guidance-ul{
  display:inline;
  margin-top:50px;
  padding:80px;
}


.guidance-h1{
  font-size: 35px;
  font-weight:bold;
  padding:30px;
  
  position:absolute;
  margin-left:5%;
}

.guidance-h3-0{
  display: flex;
  justify-content: flex-end;

  height:auto;
 justify-content: center;
  margin-left:70%;
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
}

.guidance-ol-1{
  list-style: none;
    margin: 0;
    padding: 0;
}

.guidance-h2-0{
  margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 


 font-size:30px;
 font-weight:bold;
}

.guidance-h2-1{
margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
  margin-left:5%;
 margin-top: 30px;
}

.guidance-p-1{
  font-size:40px;
  font-weight:bold;

}

.guidance-h2-2{
  margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
 margin-top: 30px;
}

.guidance-p-2{
  font-size:40px;
  font-weight:bold;

  width:90%;
 height:auto;
 justify-content: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
  
 margin-left:5%;
 margin-top: 30px;

}



.guidance-h2-3{
  margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid  rgb(255,170,0);
 margin-top: 30px;
}

.guidance-p-3-1{
font-size:40px;
  font-weight:bold;

  display: inline-block;
  margin-right:20%; 
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
}

.guidance-p-3-2{
font-size:40px;
  font-weight:bold;

  display: inline-block;
  margin-left:10%; 
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
}

.guidance-h2-4-1{
 margin-right:3%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 padding-top:40px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
}

.guidance-h2-4-2{
 margin-left:3%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 text-align:center; /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
}

.guidance-h2-4-3{
 margin-right:0%;
 margin-top: 30px;

 width:100%;
 height:auto;
 justify-content: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:25px;
 font-weight:bold;
 background-color: white;
 padding:30px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
}


.guidance-p-4-1{
font-size:40px;
  font-weight:bold;

  margin-right:0%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
}
.guidance-p-4-2{
  font-size:40px;
  font-weight:bold;

  margin-left:10%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 text-align:center;   /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 color: rgba(0,0,0,0);

}

.guidance-h2-5{
 margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);

}

.guidance-p-5{
font-size:40px;
  font-weight:bold;
}

.guidance-h2-6{
 margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);

}

.guidance-p-6{
font-size:40px;
  font-weight:bold;
}

.guidance-h2-7{
 margin-left:5%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
 
 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);

  
}

.guidance-p-7{
font-size:40px;
  font-weight:bold;
}


.div-backdesign-1{

  margin-left:10%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: rgb(80,210,255);
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);

 
}
.div-backdesign-2{
  margin-left:10%;
 margin-top: 30px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: rgb(255,200,50);
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);

  margin-bottom:80px;
  padding-bottom:30px;

}

 .guidance-strong{
  margin-top: 0%;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  align-items: center;
  color: rgb(255,55,55);
  font-size:20px;
 }

.div-1{
  display:flex;

  width:100%;
 height:auto;
 justify-content: center;
  text-align:center  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

}



/* お客様の声 */
.reviews{
  background-color: rgb(150,255,110);
  width:100%;
  height:auto;
  margin-top:50px;
  padding:80px;
}
.reviews-div{
  
 margin-top: 30px;

 width:100%;
 height:auto;
 justify-content: center;
 text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(255,170,0);
}


.reviews-p{
  font-size: 30px;
  font-weight:bold;
  padding:30px

}


/* よくある質問 */



.faq-th{
  font-size: 25px;
  font-weight:bold;
  
}

.sb-faq{
  margin: 0px auto;

 width:25%;
 height:auto;
 justify-content: center;
 /* text-align:center; */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:10px;
 border-radius: 20px;
 border: 4px solid rgb(255,170,0);

  
}

.bl{
  margin:20px;
   display: block;
}

.mg-bot{
  margin-bottom: 80px;
}

.faq{
  width:100%;
  background-color: rgb(120,240,120);
  
  margin-top:-30px;
}
  
.faq-h2{
  font-size:30px;
  padding:50px;
  padding-bottom: 0%;
}

.faq-table{
  width:90%;
  height:auto;
  justify-content: center;
  text-align:center;  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */
   
  margin-left:5%;
  margin-right:5%;
}

.faq-h3{
  font-size:30px;
  padding:50px;
  padding-bottom: 0%;
}


.inquiry-div{
  margin-left:5%;
 margin-top: 30px;

 width:90%;
 
 justify-content: center;

 font-size:20px;
}


.inquiry-ul{

 width:100%;
 height:auto;
 justify-content: center;
 /* text-align:center; */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 0px;
 border-top: 2px solid rgb(150,150,255);
 border-bottom: 2px solid rgb(150,150,255);
}


.inquiry-call-div{
  margin-left:5%;
 margin-top: 30px;

 width:90%;
 max-width:1200px;
 height:auto;
 justify-content: center;
 /* text-align:center; */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: yellowgreen;
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(150,150,255);
}



.inquiry-mail-div{
  margin-left:5%;
 margin-top: 30px;
 

 width:90%;
 max-width:1200px;
 height:auto;
 justify-content: center;
 /* text-align:center; */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: rgb(255,80,80);
 padding:20px;
 border-radius: 30px;
 border: 2px solid rgb(150,150,255);
}


/* 予約フォーム */
.bkcolor{
  background-color: rgb(255,255,200);
}

.rev-sb{
  margin: 0px auto;
  max-width:1000px;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center; */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 20px;
 border: 4px solid rgb(255,170,0);

  
}

.rev-sb-div{
 margin: 20px auto;

 width:90%;
 height:auto;
 justify-content: center;
 /* text-align:center; */  /* セクションデザインの中の文字を中央に配置したいときこれ有効にして */

 font-size:20px;
 font-weight:bold;
 color: rgb(150,180,255,);
 padding:20px;
 border-radius: 40px;
 border: 4px solid rgb(100,100,100);

}

.rev-h2{
  width:100%;
  height:auto;

  border: 2px solid rgb(226, 56, 26);
  border-radius: 20px;
  padding: 20px 30px;

  font-size:24px;
 
}

#calendar {
  background: #f8f8f8;
  background-color: azure;
  
}

#calendar table{
  margin: 20px auto;
  width:80%;
  height:500px;
  font-size: 40px;

  margin: 0px auto;
  max-width:1500px;

 font-size:20px;
 font-weight:bold;
 background-color: white;
 border: 4px solid rgb(255,160,0);
}

.font-rev{
  font-size:25px;
}

.mg-rev{
  margin-bottom:40px;
}

#confirmation {
  font-size:20px;
  padding:10px;
}

.rsv-p{
  color:rgb(255,100,100);
}

#date-result {
  font-size: 35px;
}

.prev{
  margin-top:40px;
  height: 130px;
  width: 250px;
  padding-left:100px;

  background-color: rgb(240,150,0) ;
  border:none;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  border-radius: 40px;
  

  font-size:30px;
  font-weight:750;

}

.next{
  margin-top:40px;
  height: 130px;
  width: 250px;
  padding-right:100px;

  background-color: rgb(240,150,0) ;
  border:none;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  border-radius: 40px;
  

  font-size:30px;
  font-weight:750;

}

.prev:hover {
  background: rgb(150,255,110);
  transform: scale(1.05);
}

.next:hover {
  background: rgb(150,255,110);
  transform: scale(1.05);
}

.click:hover{
  background-color: rgb(150,255,110);
  transform: scale(1.2);
}

.select-time {
  background-color: rgb(255,255,210);
  width:40%;
  height:auto;
   
  border-radius:20px;
  padding:20px;
}

/* 予約完了画面 */
.sb-submit{
  width: 80%;
  height:500px;
  font-size: 40px;

  margin: 0px auto;
  max-width:1500px;

 font-size:20px;
 font-weight:bold;
 background-color: white;
 padding:20px;
 border-radius: 50px;
 border: 4px solid rgb(255,160,0);
}




@media (min-width: 820) {
}





@media screen and (max-width: 820px) {
  /* top */
  .lower820{display:none;}

  .lower820bl{display:block}

  .lower820fl{display:flex;}

  .lower820ftsz{font-size:35px !important;}

  .lower820wid80{width:80%!important;}

  .lower820wid100{width:100% !important;}

  .lower820hei80{height:40px;}

  .lower820bl{
    display:block;
    width:100%;
    overflow-x: scroll;
  }

  .rev-sb{
    width:100%;
  }

  .top-p{
    font-size:20px;

    align-items: center;
    justify-content: center;
    text-align: center;
  }


  /* header */
  .sb-header{
    margin:20px 0px;
    border-radius:50px;
  }

  .header-h2{
    font-size:60px;
    justify-content:center;
    text-align:start;
    
    margin-top:-1200px;
  }

  /* main2 */

  .main2-ul{
    display:block;
    width:100%;
    overflow-x: scroll;
  }

  .main2-ul-2{
    display:block;
    width:100%;
    overflow-x: scroll;
  }


  /* 料金表 */

  .grid-price{
  
  width:90%;
  height:auto;
  display:grid;
  grid-template-columns: 1fr 100px 1fr;
  overflow:hidden;
}


#calendar table{
  margin: 20px auto;
  width:100%;
  height:500px;
  font-size: 40px;

  margin: 0px auto;
  max-width:1500px;

 font-size:20px;
 font-weight:bold;
 background-color: white;
 border: 4px solid rgb(255,160,0);
}

.prev {
  margin-top:40px;
  height: 65px;
  width: 125px;
  padding-left:100px;

  background-color: rgb(240,150,0) ;
  border-radius: 40px;
  

  font-size:20px;
  font-weight:750;
}

.next {
  margin-top:40px;
  height: 65px;
  width: 125px;
  padding-right:100px;

  background-color: rgb(240,150,0) ;
  border-radius: 40px;
  

  font-size:20px;
  font-weight:750;
}


}





@media (max-width: 1500px) {
  /* header */

  .h2-header{
    font-size:60px;
    justify-content: start;
    text-align: center;
    
    margin-top:-500px;
  }

  /* 料金表 */
  
}



.marquee{
  --gap: 16px;                 /* 要素の間隔 */
  --duration: 30s;             /* 1周の時間（速さ）*/
  position: relative;
  overflow: hidden;            /* はみ出しを隠す */
  width: 100%;
}

.marquee__track{
  display: flex;
  gap: var(--gap);
  width: max-content;          /* 中身の幅に合わせる */
  animation: scroll var(--duration) linear infinite;
}

/* 右→左へ等速で流す */
@keyframes scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* コンテンツを半分(=セットA分)ずらす */
}






.mg5{margin:5px;}

.mg10{margin:10px;}

.mg20{margin:20px;}

.mg30{margin:30px;}

.mg40{margin:40px;}

.mg50{margin:50px;}

.mg60{margin:60px;}

.mg70{margin:70px;}

.mg80{margin:80px;}

.mg90{margin:90px;}

.mg100{margin:100px;}

.mg110{margin:110px;}

.mg120{margin:120px;}

.mg130{margin:130px;}

.mg140{margin:140px;}

.mg-lft{margin-left:40px;}

.mg-lft-2{margin-left:30px; list-style:circle;
}

.mg-top{margin-top:30px;}

.mg-bot{margin-bottom:40px;}

.mg-rgh{margin-right:40px;}

.mg0auto{margin: 0px auto;}


.pad-lft{
  padding-left:40px;
}


.pad-top{
  padding-top:40px;
}

.pad-bot{
 padding-bottom:40px;
}

.pad-rgh{
  padding-right:40px;
}

.fl{display:flex}

.in-bl{display:inline-block;}

.bl{display:block;}

.padauto{padding:auto;}

.pad5{padding:5px;}

.pad10{padding:10px;}

.pad20{padding:20px;}

.pad30{padding:30px;}

.pad40{padding:40px;}

.pad50{padding:50px;}

.pad60{padding:60px;}

.pad70{padding:70px;}

.pad80{padding:80px;}

.pad90{padding:90px;}

.pad100{padding:100px;}

.padhlf{padding:50px;}



.heiauto{height:auto;}

.hei10{height:10%;}

.hei20{height:20%;}

.hei30{height:30%;}

.hei40{height:40%;}

.hei50{height:50%;}

.hei60{height:60%;}

.hei70{height:70%;}

.hei80{height:80%;}

.hei90{height:90%;}

.hei100{height:100%;}

.hei200{height:200px;}

.hei300{height:300px;}

.heihlf{height:50%;}

.hei-grid-3{height:33.3%;}


.wid500{width:500px;}

.widauto{width:auto;}

.wid10{width:10%;}

.wid20{width:20%;}

.wid30{width:30%;}

.wid40{width:40%;}

.wid50{width:50%;}

.wid60{width:60%;}

.wid70{width:70%;}

.wid80{width:80%;}

.wid90{width:90%;}

.wid100{width:100%;}

.widhlf{width:50%;}

.wid-grid-3{width:33.3%;}

.wid-grid-4{width:25%;}

.wid-grid-5{width:20%;}

.widfull{width:100%;}

.mxwid1500{max-width:1500px;}

.minwid500{min-width:500px;}

.maxwid1500 {
  max-width: 1500px;
  margin: 0 auto;
}

.maxwid1000{
  max-width:1000px;
  margin: 0 auto;
}
.maxwid800{
  max-width:800px;
  margin: 0 auto;
}

.maxwid500{
  max-width:500px;
  margin: 0 auto;
}



.bkcolor255{background-color:white;}

.bkcolor240{background-color:rgb(240,240,240)}

.bkcolor230{background-color:rgb(230,230,230)}

.bkcolor220{background-color:rgb(220,220,220)}

.mv-rgh{display: flex; justify-content: flex-end;}

.mv-ctr{
  justify-content: center;
  align-items: center;
  text-align: center;
}

.mg-ctr{margin: 0 auto;
}

.mv-lft{display: flex; justify-content: flex-start;}


.brdr-blc{border: 2px solid #333}

.brdr-wht{border: 2px solid #ffffff}


.fade-out-header{ 
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 80%;
}

.sb{
  background-color: rgb(150,255,110);
  width:100%;
  height:auto;
  margin-top:50px;
  
  padding:80px;
 
 font-size:18px;
 font-weight:normal;
 background-color: white;
 padding:20px;
 border-radius: 10px;
 border: 2px solid rgb(255,170,0);
}

.shadow{
   text-shadow:
    1px 1px 2px black,
   -1px -1px 2px black,
    1px -1px 2px black,
   -1px 1px 2px black;
}

.pstn-abs{position:absolute;}

.pstn-rlt{position:relative;}

.pstn-{position: fixed;}


.ftsz5{font-size:5px;}

.ftsz10{font-size:10px;}

.ftsz15{font-size:15px;}

.ftsz20{font-size:20px;}

.ftsz25{font-size:25px;}

.ftsz30{font-size:30px;}

.ftsz40{font-size:40px;}

.ftsz50{font-size:50px;}

.ftsz60{font-size:60px;}

.ftsz70{font-size:70px;}

.ftsz80{font-size:80px;}

.ftsz90{font-size:90px;}

.ftsz100{font-size:100px;}

.ftsz110{font-size:110px;}

.ftsz120{font-size:120px;}


.fwnr{font-weight:normal;}
.fwbl{font-weight:900}


.z-ind1{z-index:1;}

.z-ind2{z-index:2;}

.isolate{isolation: isolate;}


.pad0{padding:0;}
.mg0{margin:0;}




.ln-hei1-5{line-height:1.5}
.ln-hei2{line-height:2;}

.of-sc{overflow:scroll;}
.of-hd{overflow:hide;}

.brd-rd5{
  border-radius:5px;
  border: 2px solid #333;
}

.brd-rd10{
  border-radius:10px;
  border: 2px solid #333;
}

.brd-rd20{
  border-radius:20px;
  border: 2px solid #333;
}

.brd-rd30{
  border-radius:30px;
  border: 2px solid #333;
}


/* 以下カレンダーのプロパティ指定 */

  .sunday {
    color: red;
  }
  .saturday {
    color: blue;
  }

  .holiday {
    color: orange;
    font-weight: bold;
  }