@charset"utf-8"  


@media screen and (max-width: 768px ){
  .h3 { font-size: 0.8rem; }
  .p { font-size: 0.8rem; }
  .sp { font-size: 0.8rem; }
  .doc { font-size: 0.8rem; }
  .re  { font-size: 0.8rem; }
  .resizeimage { width: 30%; height: auto;}
  .info {font-size: 0.8rem; }
} 
 

/* head index */
.body { width: 100%; font-family: "hiragino kaku gothicvpro","serif"; font-size: 18px; margin: 10px; padding: 10px;}
.h1 { width: 100%; text-align: center; margin-top: 10px; padding: 10px; background-color: black;}
.wrapper { overflow: hidden; } 

/*update*/
.service { width: 100%; height: auto; margin-bottom: 10px; display: flex; flex-direction: row; gap: 20px; position: relative;  background-color: aqua;}
.service::after {content: ""; position: absolute; top: -100%; left: 0; background-color: var(--primary); 
  width: 100%; height: 100%; opacity: 0;
  transition: all 0.35s ease; z-index: -1;}
.survice:hover::after{ opacity: 1; top: 0;}

.open { width: 100%; height: auto; margin: 0px 20px 10px; font-size: 18px; padding: 20px; border: solid 2px;
   background-color: rgb(110, 200, 200);}
.open ul li { text-indent: 2em;}
.sp { font-size: 18px; }
.toku{ font-style: red;}
.sp:hover { color: white; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; }
#messp { font-size: 18px;}
.info { width: 100%; margin: 20px 20px 20px 0px; padding: 20px; font-size: 18px; border: solid 2px; background-color: rgb(110, 200, 200);;}

.column { width: 100%; height: auto; margin-top: -10px;  font-size: 18px; padding: 20px;border: solid 2px;
  background-color: rgb(110, 200, 200);}

/*infomation index*/
.container { width: 100%; height: auto; margin-top: 20px; border-spacing: 20px;}
.row { height: auto; font-size: 18px; margin-top: 10px; display: flex; justify-content: space-between; gap: 20px; background-color: aqua;}
.col { height: auto; font-size: 18px; padding: 20px; background-color: rgb(110, 200, 200);} 
.col-lg-4{ width: 100%;  height: auto; padding: 20px; background-color: rgb(110, 200, 200);}
.h3 { font-size: 18px; }
.resizeimage img { width: 50%; height: auto; background-size: cover; }

/*link*/
.rela { height: auto; margin-top: 20px; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; font-size: 18px ; background-color: aqua;}
.relaa { height: auto; margin-top: 20px; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; font-size: 18px ; background-color: aqua;}
.relac { height: auto; margin-top: 20px; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; font-size: 18px ; background-color: aqua;}
.re { width: 50%; font-size: 16px; background-color: brown; border: solid 2px; border-radius: 10px;}
.re { transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.1s;}
.re:hover {background-color: white; color: red; background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.1s;}

/*guide*/
.container-md { width: 100%; height: auto; font-size: 18px; margin-top: 20px; padding: 30px;  background-color:rgb(110, 200, 200) ; }
.container-md p { font-size: 18px; padding-left: 30px;}

/*kmdchr-mess*/
.message { width: 100%; height: auto; margin-top: 20px; padding: 0; }
.message h1 { font-size: 18px; text-align: center; }
#line1 { color: red; }
#line2 { color: red; }
.message p { font-size: 18px; padding: 0; }
.message a { display: block; width: 200px; font-size: 18px; }
.doc { width: 250px; height: auto; margin-left: 10px; }
.doc li a { width: 250px; height: auto; font-size: 16px; margin-left: 10px; }
.doc1 { font-size: 16px; padding-left: 0; }
.doc1:hover { color: white; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.1s;}

/*kmdchr-stor*/
.stor { width: 100%; height: auto; margin-top: 20px; padding: 10px;}
.stor h1 { font-size: 18px; text-align: center; }
.stor p { font-size: 18px; padding: 0px; }
.stor a { display: block; width: 200px; font-size: 18px; }
.bible { width: 500px; height: auto; margin-left: 10px; }

/*footer*/
.footer { width: 100%; height: 50px; margin: 10px 0 20px 0; padding: 20px; background-color: skyblue; }
.copy { margin-left: auto; padding: auto; color:rgb(80, 15, 190); }
/*  */
@page { margin: 10mm; size: 210mm 297mm; }
@media print { body { -webkit-print-color-adjust: exact; width: 100%; zoom: 1.0; }}