@charset "UTF-8";
/* CSS Document */

/*===============================================
index
===============================================*/

#index .greeting { padding: 20px;}
#index .greeting img { width: 300px; padding: 0px 50px; margin-top: 4px; float: left;}
#index .greeting p { padding: 10px 0px 10px; font-weight: 500; font-size: 1.5rem;}

/*===============================================
list
===============================================*/

ul.list { display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.list li { width: 32.5%; border: 3px solid #153980; border-radius: 5px; padding: 10px; box-sizing: border-box; margin-bottom: 20px; }
ul.list li .thumImage { position: relative; margin-bottom: 5px;}
ul.list li .thumImage .areaTag { position: absolute; left: 6px; top: 6px; background: #fff; border-radius: 5px; padding: 3px 5px; line-height: 1; color:#153980; min-width: 50px; text-align: center; font-size: 1.2rem;}
ul.list li .goodTag { position: absolute; right: 2px; top: -10px; width: 100px; }

ul.list li h3 { text-align:center; 0 0 8px 0; font-size: 1.7rem; color:#153980; font-weight: 600; line-height: 1.5; margin-bottom: 10px;}
ul.list li h3 a { color:#153980; font-size: 1.7rem;}
/*point*/
div.point {  line-height: 0; font-size:0; padding: 0; margin: 0;}
div.point img { width: 110px; }
/*score*/
div.score > div { width: 38px; display:inline-block;}
div.score > div:not(:first-child) { margin-left: 3px;}
div.score > span { display: inline-block; font-size: 1.8rem; line-height: 0;  font-weight: 600; padding: 0 0 0 15px;  position: relative; top: -5px;}

ul.list::after { content: ""; display: block; width: 32.5%;}


/*===============================================
blog
===============================================*/

.blog .areaTag,.category_list .areaTag {color:#fff!important; background: #000!important;}
.blog .children,.category_list .children {color:#fff!important; background: #3a8825!important;}
.blog .hobby,.category_list .hobby {color:#fff!important; background: #a01560!important;}
.blog .travel,.category_list .travel {color:#fff!important; background: #326eb4!important;}
.blog .neko,.category_list .neko {color:#fff!important; background: #cf6610!important;}
.blog .soliloquy,.category_list .soliloquy {color:#fff!important; background: #333!important;}

.blog .date { text-align: center; color: #666!important;}

#detail.blog .tag { font-size: 1.2rem; padding: 2px 10px; border-radius: 10px;}
#detail.blog .content { margin-bottom: 30px;}

#detail.blog .content a { color:#326eb4; text-decoration: underline;}

#detail.blog .content .iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*===============================================
category
===============================================*/
ul.category_list { display: flex; justify-content:center; margin-bottom: 30px; }
ul.category_list li { width: 18%; }
ul.category_list li a { display: block; text-align: center; border-radius: 5px; margin: 0 10px; padding: 8px 0px;}

.category_side_list li { width: 100%; text-align: center;}
.category_side_list li a { display: block; border-radius: 5px; padding: 7px 0; margin-bottom: 7px;}

/*===============================================
team
===============================================*/

ul.team  { display: flex; flex-wrap: wrap; }
ul.team li { border-bottom: 4px solid #eee; padding: 20px 0; margin-bottom: 20px; }
ul.team li .image { width: 30%; float: left; text-align: center;}
ul.team li .image img { width: 50%;}
ul.team li .image p {  font-size: 2.0rem; color:#153980; font-weight: 600;}
ul.team li .info { width: 70%; float: right;}
ul.team li .info p { font-weight: 400; font-size: 1.5rem; line-height: 2.0;}

/*===============================================
detail
===============================================*/

#detail .sec_l { width: 75%;}
#detail .sec_r { width: 20%;}

#detail .sec_l .title .area { text-align: center; background: #153980; color: #fff; padding: 1px 10px; border-radius: 5px; min-width: 50px; display: inline-block; }
#detail .sec_l .title .day { padding-left: 6px; color: #153980;font-size: 1.5rem;}
#detail .sec_l .ttl { text-align: left; font-size: 2.8rem; margin-bottom: 10px;}
#detail  ul.list li .thumImage .areaTag {  left: 3px; top: 3px;  padding: 2px 3px;min-width: 30px;  font-size: 0.9rem;}

#detail .sec_l .main { margin-bottom: 10px;}

#detail .sec_l .point_sec { padding: 0px 20px 20px 20px;}

#detail .sec_r .sub_ttl { font-size: 1.5rem; text-align: center; background: #153980; color: #fff; padding: 3px 0; margin-bottom: 10px;}
#detail .sec_r ul.list li { width: 100%; border: 2px solid #153980; padding: 6px 6px 2px 6px;  margin-bottom: 6px; }
#detail .sec_r h3 { font-size: 1.2rem; margin: 0; padding: 0;}
#detail .sec_r h3 a {font-size: 1.2rem;}
#detail .ttl02 { font-size: 2.0rem; color:#153980; font-weight: 600; background: linear-gradient(transparent 80%, #d5ecfb 20%); padding:3px 4px; margin-bottom: 20px;}
#detail .ttl02 span { width: 80px; display: inline-block; position: relative; bottom: -10px; margin-right: 10px; }

#detail .content p { margin-bottom: 1em;}
#detail .content p strong { background:linear-gradient(transparent 70%, #d5ecfb 0%);  color:#153980!important;}
#detail .content .img_sec { max-width:600px;}
#detail .content i a { font-size: 1rem!important; color: #999;}

#detail .content ul.gallery { display: flex; justify-content:space-between; flex-wrap: wrap;}
#detail .content ul.gallery li { width: 32.5%; text-align: center; font-size: 1.1rem; margin-bottom: 20px;}
#detail .content ul.gallery li p { }
#detail .content ul.gallery::after { content: ""; display: block; width: 32.5%;}

#detail .check_list dl dd ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 5px 15px 0 0;}
#detail .check_list dl dd ul li { width: 30%; vertical-align: middle;}
#detail .check_list dl dd ul li span { display: inline-block; width: 60%; font-weight: bold;color:#153980!important;}
#detail .check_list dl dd ul li div { display: inline-block; width: 38%; vertical-align: middle;}

.link {
  position: fixed;
  width: 60%;
  max-width: 500px;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0 auto;
  background-color: #fe6e0e;
  box-shadow: 0 5px 0  #933f08;
  border-radius: 10px;
  z-index: 100;
}
.link a {
  display: block;
  color: #fff;
  padding: 12px 30px;
  font-weight: bold;
  font-size: min(2vw,15px);
}

.link img {
  height: 0;
  line-height: 0;
  display: none;
 }

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

    /*point*/
    div.point img { width: 80px; }
    /*score*/
    div.score > div { width: 26px;}
    div.score > span { display: inline-block; font-size: 1.6rem; l}
    
    /*===============================================
    list
    ===============================================*/

    ul.list li { width: 100%;padding: 8px; margin-bottom: 12px;}
    ul.list li .thumImage { width: 48%; float: left;}
    ul.list li .info { width: 51%; float: right;}
    ul.list li .thumImage .areaTag {  left: 4px; top: 4px; padding: 2px 4px; min-width: 30px;font-size: 0.8rem;}
    div.score > span { display: block; text-align: center; margin-top: 5px; line-height: 1;}
    ul.list li .goodTag { right: 2px; top: -10px; width: 70px; }
    ul.list li h3 { margin-bottom: 15px;}
    ul.list li h3 a {  font-size: 1.5rem;}
    
    /*===============================================
    index
    ===============================================*/

    #index .greeting { padding: 20px; margin-top: 20px;}
    #index .greeting img { width: 220px; display: inline; padding: 0; margin-top: 4px;  margin: 0 auto; padding: 10px 20px 15px 0;}
    #index .greeting p {font-size: 1.4rem; padding: 0; margin: 0; text-align:justify; line-height: 1.4;}
    #index .greeting br { display: none;}
    
    /*===============================================
    blog
    ===============================================*/

    ul.list.blog li .thumImage { padding-right: 10px;}

    /*===============================================
    category
    ===============================================*/
    ul.category_list {  justify-content:space-between; flex-wrap: wrap; }
    ul.category_list li { width: 23%; }
    ul.category_list li a { margin: 0;}

    .category_side_list { display: flex; flex-wrap: wrap; justify-content: space-between;}
    .category_side_list li { width: 49%; text-align: center;}

    /*===============================================
    team
    ===============================================*/
    ul.team li .image { width: 40%; }
    ul.team li .image img { width: 80%;}
    
    /*===============================================
    detail
    ===============================================*/

    #detail .sec_l { width: 100%; float: none;}
    #detail .sec_r { width: 100%; float: none;}
    
    #detail .sec_r ul.list li { width: 33%; padding: 3px 3px 2px 3px;}
    #detail .sec_r ul.list li .thumImage { width: 100%; float: left; }
    #detail .sec_r h3  { text-align: center; line-height: 1.3;}
    #detail .sec_r h3 a {font-size: 1.0rem;}
    
    #detail .sec_l .title .area { padding: 1px 5px;  min-width: 40px;  }
    #detail .sec_l .title .day { padding-left: 6px; color: #153980; font-size: 1.3rem; position: relative; top: 2px;}
    #detail .sec_l .ttl { font-size: 2.0rem;}
    
    #detail .sec_l .point_sec { padding: 0px 10px 10px 10px;}
    #detail .content .img_sec { max-width:90%; margin: 0 auto;}
    
    #detail .ttl02 { font-size: 1.7rem;}
    #detail .ttl02 span { width: 60px; display: inline-block; position: relative; bottom: -10px; margin-right: 10px; }
    
    #detail .content ul.gallery li { width: 49%;}
    #detail .content ul.gallery::after { content: ""; display:none; width:auto;}
    
    #detail .check_list dl dd ul li { width: 48%; vertical-align: middle;}

    .link {
      width: 90%;
      bottom: 10px;
    }
    .link a {
      font-size: min(2.2vw,15px);
    }
    
    
}