@charset="utf-8";

/*required*/

* { margin: 0; padding: 0; }

html { font-size: 16px !important; }

body { font-family: sans-serif; letter-spacing: .1rem; }

img { width: 100%; }

/*global*/

a { display: inline-block; }

a:hover { text-decoration: none; }

.full-wrap { padding-top: 10rem; }

/*read more*/

.read_more a { color: #333; position: relative; }

.read_more a::after {
  position: absolute;
  bottom: 1px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  opacity: 1;
  visibility: visible;
  transition: .3s;
}

.read_more a:hover::after {
  bottom: -4px;
  opacity: 0;
  visibility: hidden;
}

/*header*/

.navbar-brand { height: 100%; width: 155px; }
.navigation { background-color: #272727; width: 100%; }
.navigation nav { white-space: nowrap; font-weight: bolder;}
.navigation-item, .navigation-item:hover { color: #fff; }
.navigation-item a { display: inline-table; max-width: 100%; }

/*pickup*/

.pickup .flex-box, .blog .flex-box, footer .flex-box { display: flex; flex-direction: row; }

/*blog*/

.blog { padding-top: 3rem; }

.detail time, .detail p { font-size: 0.875rem; }

.blog article, .archive , footer .flex-box { padding-bottom: 6rem; }

.name img { width: 130px; border-radius: 50%; }

.ranking p, .archive a, footer .flex-box a { color: #000; }

/*archive*/

.archive_date, footer .menu_link { padding: 0.85rem 1rem; border-bottom: 1px #777 solid; }
#date1, #menu1 { border-top: 1px #777 solid; }

/*footer*/
footer { background-color: #F7F7F7; }
footer .flex-box { justify-content: space-around; }

.about_table { position: relative; }

.about_link { padding-left: 1rem; padding-bottom: .35rem; }

.about_link::before {
  content: ""; 
  position: absolute; 
  width: 0px;
  left: 2%; 
  border-color: #333;
  border-style: solid;
  border-width: 6px;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/**footerの三角の位置が違う**/

/**横スクロールは、親要素を100％にして、子要素をそれ以上の大きさに
ディスプレイでは、Overflow：hiddenに、media queryでは　overhlow: scrollを
いれる。バー消したいなら::-webkit-scrollbar { display: none;｝いれる。**/
/**offsetはコラムをsecretに一つ増やす役割**/

/*etc----------------------*/

@media (max-width: 767px) {
	/*global*/
	p, li, a { font-size: 4vw; }
	/*header*/
	.navigation { overflow-x: scroll; } /**横スクロールのため**/
	
	/*pickup*/
	.pickup .flex-box, .blog .flex-box, footer .flex-box { flex-direction: column; }
}

/*Surface Duo-------------------------------------------*/
@media(min-width: 500px) and (max-device-width: 540px) {
	p, li, a { font-size: 3vw; }
}