@import url("root.css");

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ヘッダー

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/

header {
 /* max-width: 820px; */
 margin: 0 auto;
 width: 100%;
}

.control-links {
 text-align: right;

 >.icon {
  border-radius: 999px;
  display: inline-block;
  width: 38px;
  height: 38px;
  padding: 6px;
  background-color: var(--color-white);
 }
}


.line-control {
 input {
  width: auto;
  cursor: pointer;
 }

 .decoBtns {
  /* display: block; */

  input {}
 }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

大外枠

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.mainwrapper {
 .--2column {
  grid-template-columns: 2fr 1fr;
 }
}

@media screen and (max-width: 768px) {
 .mainwrapper {
  .--2column {
   grid-template-columns: 1fr;
  }
 }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

サブエリア

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/

.subarea {
 h4 {
  margin: 0 0 1em 0;

  svg {
   margin-right: 6px;
   vertical-align: middle;
  }
 }

 .cattree,
 .hashtaglist {
  font-size: 14px;
 }
}

/*  検索 */
.simplesearch {
 gap: 0;
 flex-wrap: nowrap;

 .searchinputs {
  display: flex;

  .queryinput {
   /* アイコンを表示するスペースを確保 */
   padding-left: 36px;

   /* Tabler Icons (search) のSVGデータを直接指定 */
   background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /%3E%3Cpath d="M21 21l-6 -6" /%3E%3C/svg%3E');

   /* 背景の設定 */
   background-repeat: no-repeat;
   background-position: 10px center;
   background-size: 20px 20px;
   outline: none;
  }

  .submitbutton {
   cursor: pointer;
  }
 }
}

/* images */
.imagelistbox {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 40px 0;

 .imagelistitem {
  width: calc(33.333% - 13.333px);
  height: auto;

  a {
   position: relative;

   &::before {
    content: "";
    display: block;
    padding-top: 100%;
    /*100%=親要素の横幅*/
   }

   img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
   }
  }
 }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

スマホ用フッターメニュー

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.mobile-submenu {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background-color: var(--color-bg);
 display: flex;
 justify-content: space-around;
 padding: 8px 0 4px;

 a {
  color: #999;
 }
}

@media screen and (min-width: 1181px),
print {
 .mobile-submenu {
  display: none;
 }
}


/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

メインエリア

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.onelogbox {
 max-width: 100%;
}

.onelogbody {
 background-color: var(--color-white);
 padding: 20px;

 .comment {
  word-break: break-all;
 }
}

.oneloginfo {
 color: #999;
 margin-top: 20px;
 display: flex;
 gap: 20px;
 justify-content: flex-end;

 .postdate a,
 .categories {
  display: flex;
  gap: 4px;
  font-size: 0.8em;
 }

 svg {
  width: 20px;
  height: 20px;
  color: #ccc;
 }
}

.onelogside {
 color: #999;
 text-align: right;
 font-size: 0.8em;
}