html {
  cursor: url("IMG/cursor.gif"), auto;
}

body{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  background-image:url("IMG/background.png");
  background-size:90%;
  background-color:#191B22;
  background-position:center top;
  background-repeat:repeat;
  min-height:100vh;
  display:flex;
  justify-content:center;
  cursor: url("IMG/cursor.gif"), default;
}

body{
  opacity: 0;
  animation: fadeIn 0.4s forwards;
  cursor: url("IMG/cursor.gif"), default;
}

@keyframes fadeIn{
  to{
    opacity:1;
  }
}

@font-face{
  font-family: "Jacquard12";
  src: url("font/Jacquard12-Regular.ttf");
}

.brawler-regular {
  font-family: "Brawler", serif;
  font-weight: 400;
  font-style: normal;
}

.brawler-bold {
  font-family: "Brawler", serif;
  font-weight: 700;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6{
  font-family: "Jacquard12", sans-serif;
  font-style: normal;
  text-decoration: none;
  font-weight: 400;
  line-height: 0;
  cursor: url("IMG/cursor.gif"), default;
}

a, p, ul, li, table{
  font-family: "Brawler", serif;
  font-size: 12px;
  line-height: 1.5;
  color: #C00000;
  margin: 0.5px;
  text-decoration: none;
}

a, p, ul, li, button, image {
  cursor: url("IMG/cursor.gif"), default;
}

a:hover, p:hover, ul:hover, li:hover, button:hover, image:hover {
  cursor: url("IMG/cursor.gif"), default;
}

.main{
  width: 100%;
  display: flex;
  margin: auto;
  gap: 0px;
  align-items: stretch;
}

.aside1{
  width: 18.8%;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.aside2{
  width: 21.2%;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.aside1, .aside2, main{
  height: 100%;
}

main{
  width: 60%;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.windown{
  border: 2px solid #740A03;
  background: #BF4646;
  padding: 4px;
  padding-bottom: 0px;
  box-shadow: 4px 4px #191B22;
  display: block;
  unicode-bidi: isolate;
  margin-bottom: 10px;
  image-rendering: pixelated;
}

.tittle-home, .tittle-navi, .tittle-contact, .tittle-blog, .tittle-img{
  border: 2px solid #740A03;
  background: white;
  padding: 4px;
  height: 22px;
  pointer-events: none;
  margin-bottom: 4px;
}

.tittle-home:before, .tittle-navi:before, .tittle-contact:before, .tittle-blog:before, .tittle-img:before{
  float: left;
  margin-top: 2px;
  margin-right: 2px;
  margin-left: 2px;
  padding-right: 2px;
}

.tittle-home:before{
  content: url("icon/house.png");
}

.tittle-navi:before{
  content: url("icon/menus.png");
}

.tittle-contact:before{
  content: url("icon/chat.png");
}

.tittle-blog:before{
  content: url("icon/blog.png");
}

.tittle-img:before{
  content: url("icon/picture.png");
}

.tittle-home:after{
  content: url("icon/window_buttons.png");
  float: right;
  pointer-events: all;
  margin-top: -19px;
}

.tittle-navi:after{
  content: url("icon/window_buttons.png");
  float: right;
  pointer-events: all;
  margin-top: -19px;
}

.tittle-contact:after{
  content: url("icon/window_buttons.png");
  float: right;
  pointer-events: all;
  margin-top: -19px;
}

.tittle-blog:after{
  content: url("icon/window_buttons.png");
  float: right;
  pointer-events: all;
  margin-top: -19px;
}

.tittle-img:after{
  content: url("icon/window_buttons.png");
  float: right;
  pointer-events: all;
  margin-top: -19px;
}

.content, .content-blog{
  border: 2px solid #740A03;
  background: white;
  color: #191B22;
  margin-top: 4px;
  padding: 4px;
}

.content-img{
  border: 2px solid #740A03;
  background: white;
  color: #191B22;
  padding: 0;
  display: flex;
}

.content-blog{
  height: 510px;
  overflow: auto;
  scroll-behavior: smooth;
}

.content-blog::-webkit-scrollbar{
  width: 6px;
}

.content-blog::-webkit-scrollbar-track{
  background: #191B22;
  padding-left: 5px;
  padding-right: 5px;
}

.content-blog::-webkit-scrollbar-thumb{
  background: linear-gradient(#C00000,#6b0000);
  border-radius: 10px;
  
}

.windown:after{
  content: url("icon/rose.png");
  display: block;
  margin-top: 1px;
  margin-bottom: 1px;
}

.logo{
  width: 100%;
  cursor: url("IMG/cursor.gif"), default;
}

.div-navi{
  display: flex;
  flex-direction: column;
}

.btn-navi{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 2px;
  margin-left: 5px;
}

.div-social{
  width: 100%;
  display: inline-block;
  background: none;
  border: none;
  padding: 4px;
}

.btn-navi a:hover, .btn-social:hover{
  color: white;
  background-color: #C00000;
  width: max-content;
  padding: 2px;
}

.h1-styling1{
  color: #740A03;
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

.h1-styling2{
  color: #740A03;
  font-size: 25px;
  line-height: 1;
  margin: 0;
}

.ava{
    width: 8.5%;
    border-radius: 100%;
    border: 2px solid #740A03;
    cursor: url("IMG/cursor.gif"), default;
}

.ava:hover{
    filter: brightness(60%);
    cursor: url("IMG/cursor.gif"), default;
}

.symbol{
  font-size:15px;
  margin-left: -2px;
  margin-right: 0px;
}

.body-1{
  display: block;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  margin-left: 0px;
  margin-right: 0px;
}

.body-2{
  display: block;
  line-height: 1;
  font-size: 10px;
}

.blog-frame{
    border: 2px solid #740A03;
    margin-bottom: 10px;
    padding: 5px;
}

.blog-tittle{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
}

.blog-tittle-detail{
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0px;
}

.blog-content{
    padding: 10px;
}

.tos-2col{
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;;
}

.policy-table{
  width: 295px;
  border-collapse:collapse;
  color:#740A03;
}

.policy-table th{
  border:1px solid #740A03;
  background-color: #740A03;
  padding:2px;
  text-align:center;
  color: white;
}

.tos-heading{
  font-size: 20px;
  line-height: 0;
}

.policy-table td{
  border:1px solid #740A03;
  padding:4px;
  text-align:left;
}

@media (max-width:768px){
  .main{
    flex-direction: column;
  }
  .aside1,
  .aside2,
  main{
    width:100%;
  }
}