@charset "utf-8";
/* ======================================================================
  entry.css
====================================================================== */


/* entey
================================================== */
#main #entey { padding:35px 5% 35px; background:#fff; border-radius:10px; }
#main #entey .cate { padding:0 0 6px; /*font-family:'Noto Sans JP',sans-serif; font-weight:700;*/ font-size:16px; line-height:1.4; letter-spacing:.04em; }
#main #entey .title { padding:0 0 20px; /*font-family:'Noto Sans JP',sans-serif; font-weight:700;*/ font-size:24px; line-height:1.4; letter-spacing:.04em; }

#main #entey .tags { padding:0 0 15px; }
#main #entey .tags p { padding:4px 4px 4px 0; display:inline-block; font-size:13px; line-height:1.3; }
#main #entey .tags p a { position:relative; display:inline-block; padding:3px 10px 3px 18px; background:#f0f6f7; border-radius:12px; color:#1d26f9; opacity:1; transition:all .3s ease; }
#main #entey .tags p a:after { position:absolute; content:"#"; top:3px; left:8px; }
#main #entey .tags p a:hover { opacity:.6; }

#main #entey .sns { padding:0 0 20px; }
#main #entey .sns:after { content:""; display:block; clear:both; }
#main #entey .sns li { display:block; float:left; padding:0 14px 0 0; }
#main #entey .sns li a { display:block; width:26px; height:26px; border-radius:50%; text-indent:-9999px; overflow:hidden; opacity:1; transition:all .3s ease; }
#main #entey .sns li a:hover { opacity:.6; }
#main #entey .sns .fb a { background:url('../images/sns_facebook.png') no-repeat center #3b579d; background-size:contain; }
#main #entey .sns .tw a { background:url('../images/sns_twitter.png') no-repeat center #1da1f2; background-size:contain; }
#main #entey .sns .li a { background:url('../images/sns_line.png') no-repeat center #00b900; background-size:contain; }
#main #entey .sns .in a { background:url('../images/sns_linkedin.png') no-repeat center #007ab7; background-size:contain; }
#main #entey .sns .pk a { background:url('../images/sns_pocket.png') no-repeat center #ef4056; background-size:contain; }

#main #entey .notice { padding:16px 20px; border:1px solid #1d26f9; border-radius:8px; }
#main #entey .notice p { font-size:14px; line-height:1.6; color:#1d26f9; }

#main #entey .cate_pic { padding:24px 0; }
#main #entey .cate_pic img { width:100%; vertical-align:bottom; }

#main #entey .intro { padding:0 0 30px; }
#main #entey .intro p { font-size:18px; line-height:2.1; }
#main #entey .intro .pic { padding:20px 0 45px; text-align:center; }
#main #entey .intro .pic img { max-width:100%; vertical-align:bottom; }
#main #entey .intro .pic figcaption{ margin-top: 10px; line-height: 1.8; color: #666}

#main #entey .pagination {}
#main #entey .pagination ul { padding:10px 20px; background:#f0f6f7; border-radius:8px; }
#main #entey .pagination li { position:relative; margin:10px 0; padding:0 0 0 30px; font-size:18px; line-height:1.4; opacity:1; transition:all .3s ease; }
#main #entey .pagination li:before { content:''; position:absolute; top:0; left:0; background:#1d26f9; width:22px; height:22px; border-radius:50%; }
#main #entey .pagination li:after { position:absolute; top:5px; left:0;  width:22px; border-radius:50%; font-size:11px; line-height:1; font-weight:bold; color:#fff; text-align:center; }
#main #entey .pagination li:hover { opacity:.6; }
#main #entey .pagination li:nth-child(1):after { content:'1'; }
#main #entey .pagination li:nth-child(2):after { content:'2'; }
#main #entey .pagination li:nth-child(3):after { content:'3'; }
#main #entey .pagination li:nth-child(4):after { content:'4'; }
#main #entey .pagination li:nth-child(5):after { content:'5'; }
#main #entey .pagination li:nth-child(6):after { content:'6'; }
#main #entey .pagination li:nth-child(7):after { content:'7'; }
#main #entey .pagination li:nth-child(8):after { content:'8'; }
#main #entey .pagination li:nth-child(9):after { content:'9'; }
#main #entey .pagination li:nth-child(10):after { content:'10'; }

#main #entey .inner { padding:30px 0 30px; }
#main #entey .inner h3 { margin:0 0 1.5em; padding:1.5em 0 .8em; border-bottom:1px solid #1d26f9; /*font-family:'Noto Sans JP',sans-serif; font-weight:700;*/ font-size:20px; line-height:1.5; }
#main #entey .inner p { margin:0 0 2em; font-size:18px; line-height:2.1;}
#main #entey .inner .pic { padding:20px 0 45px; }
#main #entey .inner .pic img { max-width:100%; vertical-align:bottom; }
#main #entey .inner .pic figcaption{ font-size: 14px; margin-top: 10px; line-height: 1.8; color: #666}
#main #entey .inner .pic figcaption p { font-size: 14px; margin-top: 10px; line-height: 1.8; color: #666}
#main #entey .inner .pic figcaption p br{ display: none; }

#main #entey .entry-section { margin-top: -110px; padding-top: 110px; }
#main #entey .js--entry-section__hidden { display: none; }
#main #entey .loading { display: none; }
#main #entey .loader { position:relative; margin:30px auto; width:4em; height:4em; font-size:10px; text-indent:-9999em; border-radius:50%; background:#1d26f9; background:-moz-linear-gradient(left, #1d26f9 10%, rgba(255, 255, 255, 0) 42%); background:-webkit-linear-gradient(left, #1d26f9 10%, rgba(255, 255, 255, 0) 42%); background:-o-linear-gradient(left, #1d26f9 10%, rgba(255, 255, 255, 0) 42%); background:-ms-linear-gradient(left, #1d26f9 10%, rgba(255, 255, 255, 0) 42%); background:linear-gradient(to right, #1d26f9 10%, rgba(255, 255, 255, 0) 42%); -webkit-animation: load3 1s infinite linear; animation: load3 1s infinite linear; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); }
#main #entey .loader:before { content:''; position:absolute; top:0; left:0; width:50%; height:50%; background:#1d26f9; border-radius:100% 0 0 0; }
#main #entey .loader:after { content:''; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:75%; height:75%; background:#fff; border-radius:50%; }

/* Drupal use add kikuchi Start*/
#main #entey .vocabulary-basic-knowledge-category h2{display: none;}
#main #entey .vocabulary-basic-knowledge-category .content .field--name-field-category-img { padding:24px 0; }
#main #entey .vocabulary-basic-knowledge-category .content .field--name-field-category-img img { width:100%; height: 400px; vertical-align:bottom; }
#main #entey .vocabulary-trivia-technology-category h2{display: none;}
#main #entey .vocabulary-trivia-technology-category .content .field--name-field-category-img { padding:24px 0; }
#main #entey .vocabulary-trivia-technology-category .content .field--name-field-category-img img { width:100%; height: 400px; vertical-align:bottom; }
#main #entey .node--type-section-detail h2 {display: none;}
/* Full screen throbber */
.ajax-progress-fullscreen {
  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
  left: 49%; /* LTR */
  position: fixed;
  top: 48.5%;
  z-index: 1000;
  background-color: #232323;
  background-image: url(../images/gif-load.gif);
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 7px;
  height: 35px;
  opacity: 0.9;
  padding: 4px;
  width: 35px;
}
[dir="rtl"] .ajax-progress-fullscreen {
  left: auto;
  right: 49%;
}
/* Drupal use add kikuchi End*/

@-webkit-keyframes load3 {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}


/* recommend
================================================== */
#main #recommend { padding:30px 0 0; }
#main #recommend h2 { padding:0 0 30px; font-family:'Raleway',sans-serif; font-weight:600; font-size:22px; line-height:1.3; color:#1d26f9; letter-spacing:.08em; text-align:center; }
#main #recommend h2 span { display:block; padding:3px 0 0; font-size:14px; font-weight:400; letter-spacing:.02em; }
#main #recommend li { margin:0 0 20px; }
#main #recommend .block { padding:20px; background:#fff; border-radius:10px; overflow:hidden; }
#main #recommend .block:after { content:''; display:block; clear:both; }
#main #recommend .block a { color:#222; }
#main #recommend .block .pic { float:left; width:32%; background:#fff; }
#main #recommend .block .pic a { display:block; }
#main #recommend .block .pic a div { height:100%; min-height:190px; background-repeat:no-repeat; background-position:center; background-size:cover; opacity:1; transition:all .3s ease; }
#main #recommend .block .pic a:hover div { opacity:.6; }
#main #recommend .block .pic a .fit-cover { position:relative; overflow:hidden; height:190px; }
#main #recommend .block .pic a .fit-cover img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; }
#main #recommend .block .txt { overflow:hidden; padding:12px 0 12px 25px; }
#main #recommend .block .date { font-size:12px; line-height:1.3; color:#1d26f9; letter-spacing:.04em; }
#main #recommend .block .cate { padding:8px 0 2px; /*font-family:'Noto Sans JP',sans-serif; font-weight:700;*/ font-size:16px; line-height:1.5; letter-spacing:.02em; }
#main #recommend .block .title { /*font-family:'Noto Sans JP',sans-serif; font-weight:700;*/ font-size:18px; line-height:1.5; letter-spacing:.02em; }
#main #recommend .block .tags { padding:10px 0 0; }
#main #recommend .block .tags p { padding:4px 1px 4px 0; display:inline-block; font-size:13px; line-height:1.3; }
#main #recommend .block .tags p a { position:relative; display:inline-block; padding:3px 10px 3px 18px; background:#f0f6f7; border-radius:12px; color:#1d26f9; opacity:1; transition:all .3s ease; }
#main #recommend .block .tags p a:after { position:absolute; content:"#"; top:3px; left:8px; }
#main #recommend .block .tags p a:hover { opacity:.6; }




@media screen and (max-width:1000px) {

}





@media screen and (max-width:800px) {


  #main #entey { padding:20px 4% 20px; }
  #main #entey .cate { padding:0 0 4px; font-size:14px; }
  #main #entey .title { padding:0 0 15px; font-size:20px; }
  #main #entey .tags p { display:inline-block; padding:0 15px 0 0; }
  #main #entey .tags p a { position:relative; display:inline-block; padding:0 0 0 12px; }
  #main #entey .tags p a:after { position:absolute; content:"#"; top:0; left:0; }

  #main #entey .sns { margin:0 auto; padding:0 0 15px; width:114px; }
  #main #entey .sns li { padding:0 6px; }

  #main #entey .notice { padding:11px 13px; }

  #main #entey .cate_pic { padding:24px 0; }

  #main #entey .intro { padding:0 0 20px; }
  #main #entey .intro p { font-size:16px; line-height:2; }
  #main #entey .intro .pic { padding:10px 0 35px; }

  #main #entey .pagination ul { padding:10px 13px; }
  #main #entey .pagination li { font-size:16px; }

  #main #entey .inner { padding:20px 0 20px; }
  #main #entey .inner h3 { font-size:18px; }
  #main #entey .inner p { margin:0 0 1.8em; font-size:16px; line-height:2; }
  #main #entey .inner .pic { padding:10px 0 35px; }

  #main #entey .entry-section { margin-top: -60px; padding-top: 60px; }

  /* recommend
  ================================================== */
  #main #recommend { padding:25px 0 0; }
  #main #recommend h2 { padding:0 0 25px; font-size:20px; }
  #main #recommend h2 span { font-size:14px; }
  #main #recommend li { margin:0 0 12px; }
  #main #recommend .block .pic { width:86px; }
  #main #recommend .block .pic a div { min-height:86px; }
  #main #recommend .block .txt { padding:4px 0 4px 14px; }
  #main #recommend .block .date { font-size:11px; }
  #main #recommend .block .cate { padding:4px 0 1px; font-size:12px; }
  #main #recommend .block .title { font-size:14px; }
  #main #recommend .block .tags { padding:6px 0 0; }
  #main #recommend .block .tags p { padding:3px 1px 3px 0; font-size:12px; }
  #main #recommend .block .tags p a { padding:3px 10px 3px 17px; background:#f0f6f7; border-radius:12px; color:#1d26f9; opacity:1; transition:all .3s ease; }


}


@media print{
header,
.head_visual,
#sub{display: none}
#container #main{width: 100%;}
}