/*
Theme Name: lsf_theme
Author: Tada
License: Tada
*/

/* ------------------------------------------------------------------
reset
------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
input, textarea,{
  margin: 0;
  padding: 0;
}
ol, ul{
    list-style: none;
}
caption, th{
    text-align: left;
}
/* clearfix */
.cf {
  zoom: 1;
}
.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
html,body {
  width: 100%;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
}
input[type="text"], textarea, input[type="submit"]{
  -webkit-appearance: none;
}
.mt_0 {
  margin-top: 0 !important;
}
.color_g {
  color: #00b9a4;
}

.bg_view {
  background: #fff;
  color: #444;
}
a {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
img {
  height: auto;
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
}
a:hover {
  opacity: 0.8;
}


/* ------------------------------------------------------------------
320px 〜 1023px
------------------------------------------------------------------*/
@media screen and (min-width:320px) {

  .top {
    height: 100vh;
  }
  .inner {
    padding: 0 4%;
  }
  .top_img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width:250px;
    height:225px;
  }
  .top_img img {
    width: 100%;
  }

  /* bnr */
  .sy_img {
    margin-top: 8%;
  }
  .bnr_crosse h3 {
    margin: 8% 0 3%;
    font-size: 1.3rem;
    font-weight: bold;
    color: #16263e;
    border-bottom: solid 1px #16263e;
  }
  .bnr_sns {
    width: 40%;
    margin: 3% auto 8%;
    border-top: solid 1px #ccc;
    padding-top: 1%;
  }
  .bnr_sns ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
  }
  .bnr .bnr_sns a {
    font-size: 3rem;
  }
  .bnr .bnr_sns a:link {
    color: #444;
    text-decoration: none;
  }
  .bnr .bnr_sns a:visited {
    color: #444;
    text-decoration: none;
  }
  .bnr .bnr_sns a:hover {
    opacity: 0.8;
  }
  .bnr_t {
    margin-top: 8%;
  }

  .title {
    position: relative;
    background: #16263e;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 2%;
  }
  .title:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
  }

  /* news */
  .ttl_en {
    font-family: 'Anton', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 1.5px;
    color: #444;
    margin-bottom: 0;
    text-align: center;
    margin-top: 11%;
  }
  .news {
    margin-top: 8%;
    border-top: solid 1px #ccc;
    overflow: hidden;
    padding-bottom: 15%;
  }
  .news ul {
    margin-bottom: 5%;
  }
  .news ul li {
    overflow: hidden;
    border-bottom: solid 1px #ccc;
  }
  .news ul li a {
    display: block;
    padding: 3% 0;
    overflow: hidden;
  }
  .news .date {
    font-size: 0.9rem;
    width: 30%;
    float: left;
    padding-top: 1%;
  }
  .news .label {
    font-size: 1rem;
    float: left;
    width: 70%;
  }
  .news ul li a {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
  }
  .news ul li a:link {
    color: #444;
    text-decoration: none;
  }
  .news ul li a:visited {
    color: #444;
    text-decoration: none;
  }
  .news ul li a:hover {
    background: #fafafa;
    color: #444;
    text-decoration: none;
  }
  .news_area_btn a {
    display: block;
    width: 72%;
    height: 40px;
    line-height: 40px;
    margin: 5% auto 0;
    text-align: center;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
  }
  .news_area_btn a:link {
    background: #f9cc1d;
    color: #fff;
    border: solid 1px #f9cc1d;
    text-decoration: none;
  }
  .news_area_btn a:visited {
    background: #f9cc1d;
    color: #fff;
    border: solid 1px #f9cc1d;
    text-decoration: none;
  }
  .news_area_btn a:hover {
    background: #fff;
    color: #f9cc1d;
    border: solid 1px #f9cc1d;
    text-decoration: none;
  }

  .chrono {
    margin-top: 8%;
    margin-bottom: 10%;
  }
  .chrono table {
    box-sizing: border-box;
    border: solid 1px #f2f2f2;
    border-collapse: collapse;
    margin-bottom: 2%;
    width: 100%;
  }
  .chrono table thead th {
    background: #1c476d;
  }
  .chrono table th {
    background: #fafafa;
    width: 32%;
    border: solid 1px #f2f2f2;
    padding: 2%;
    vertical-align: middle;
    text-align: left;
    letter-spacing: 1.5px;
  }
  .chrono table td {
    border: solid 1px #f2f2f2;
    padding: 3%;
    vertical-align: middle;
    background: #fff;
    letter-spacing: 1.5px;
  }
  .chrono ul li {
    padding: 3% 0;
    border-bottom: dotted 1px #ccc;
  }
  .chrono .info {
    margin-top: 3%;
  }
  /* sponsor */
  .sponsor {
    margin-bottom: 10%;
  }
  .sponsor ul {
    margin-top: 10%;
  }
  .sponsor ul li {
    max-width: 320px;
    margin: 5% auto 0;
  }
  .sponsor ul li img {
    width: 100%;
  }
  .copy {
    background: #16263e;
    color: #fff;
    padding: 5px 0;
    text-align: center;
  }

  /* header */
  #header {
    border-bottom: solid 1px #ccc;
  }
  header {
    padding: 4% 0;
    overflow: hidden;
  }
  /* logo */
  .logo {
    max-width: 64px;
    float: left;
  }
  header nav {
    overflow: hidden;
  }
  header ul {
    float: right;
    margin-top: 4%;
  }
  header ul li a:link {
    color: #909090;
    text-decoration: none;
  }
  header ul li a:visited {
    color: #909090;
    text-decoration: none;
  }
  header ul li a:hover {
    color: #909090;
    text-decoration: underline;
  }
  header .fa-home {
    font-size: 3rem;
  }

  /* post */
  .post_ttl {
    font-size: 2rem;
    color: #333;
    text-align: center;
    margin-top: 10%;
  }
  .post_date {
    text-align: center;
    color: #666;
    margin-bottom: 10%;
  }
  #post p {
    margin-bottom: 3%;
  }
  .blog_main {
    margin-bottom: 10%;
  }
	.blog_main a:link {
		color: #2980b9;
	}
	.blog_main a:visited {
		color: #2980b9;
	}
	.blog_main a:hover {
		color: #3498db;
		text-decoration: none;
	}
  .side {
    margin-bottom: 16%;
  }
  .side .side_ttl {
    border-bottom: dotted 1px #969696;
    font-size: 1.1rem;
    padding-bottom: 2%;
    color: #16263e;
    font-weight: bold;
  }
  .side ul {
    margin-bottom: 8%;
  }
  .side ul li {
    border-bottom: dotted 1px #969696;
  }
  .side ul li a {
    display: block;
    padding: 3% 2%;
  }
  .side ul li a:link {
    color: #444;
    text-decoration: none;
  }
  .side ul li a:visited {
    color: #444;
    text-decoration: none;
  }
  .side ul li a:hover {
    background: #f2f2f2;
    text-decoration: none;
  }

  /* cross crosse */
  .cross_in {
    margin-top: 10%;
  }
  .cross_box {
    border: solid 1px #ececec;
    padding: 4%;
    margin-bottom: 8%;
  }
  .cross_ttl {
    text-align: center;
    margin: 4% 0;
    font-size: 1.4rem;
  }
  .cross_ttl a {
    font-weight: bold;
  }
  .cross_ttl a:link {
    color: #444;
    text-decoration: none;
  }
  .cross_ttl a:visited {
    color: #444;
    text-decoration: none;
  }
  .cross_ttl a:hover {
    opacity: 0.8;
  }
  .txt_bottom {
    overflow: hidden;
    margin-top: 10%;
  }
  .txt_bottom .date {
    float: left;
  }
  .txt_bottom .category {
    float: right;
  }
  .txt_bottom .category a:link {
    color: #444;
    text-decoration: none;
  }
  .txt_bottom .category a:visited {
    color: #444;
    text-decoration: none;
  }
  .txt_bottom .category a:hover {
    color: #444;
    text-decoration: underline;
  }
  
  /* pager */
  .pager {
    text-align: center;
    margin-bottom: 5%;
  }
  .pager a:link,
  .pager a:visited {
    background: #f9cc1d;
    color: #fff;
    border: solid 1px #f9cc1d;
    display: inline-block;
    text-decoration: none;
    padding: 2%;
  }
  .pager a:hover {
    background: #fff;
    color: #f9cc1d;
    border: solid 1px #f9cc1d;
    text-decoration: none;
  }
  
  /* ----- .pagination ----- */
  .pagination {
    text-align: center;
    width: 100%;
    display: block
  }
  .pagination a {
    background: #f6f6f6;
    border: solid 1px #f6f6f6;
    color: #333;
    text-decoration: none;
  }
  .pagination a:hover {
    background: #fff;
    color: #f9cc1d;
    border: solid 1px #f9cc1d;
    text-decoration: none;
  }
  @media only screen and (max-width: 766px) {
    .pagination .page_inner {
      width: 100%;
      margin: 0 0 8%;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      height: 46px
    }
    .pagination .page-of {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
      position: absolute;
      left: 37%;
      width: 26%;
      color: #fff;
      background: #f9cc1d;
      height: 46px;
      line-height: 46px;
    }
    .pagination .m-prev {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: 0;
      -webkit-order: 0;
      order: 0;
      width: 15%;
      position: absolute;
      left: 0%
    }
    .pagination .pn-prev {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
      width: 22%;
      position: absolute;
      left: 15%
    }
    .pagination .pn-next {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
      width: 22%;
      position: absolute;
      left: 63%
    }
    .pagination .m-next {
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 4;
      -webkit-order: 4;
      order: 4;
      width: 15%;
      position: absolute;
      left: 85%
    }
    .pagination .current, .pagination .pn-numbers {
      display: none;
      background: #f9cc1d;
    color: #fff;
    border: solid 1px #f9cc1d;
    }
    .pagination a {
      line-height: 46px;
      height: 46px;
    }
  
}

/* ------------------------------------------------------------------
769px 〜 959px
------------------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:959px) {

}

/* ------------------------------------------------------------------
1024px〜
------------------------------------------------------------------*/
@media screen and (min-width:1023px) {

  .inner {
    max-width: 1024px;
    margin: 0 auto;
  }
  h2 {
    padding: 1% 2%;
  }
  .title {
    padding: 1% 2%;
  }

  /* bnr */
  .bnr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
  }
  .bnr_sy {
    width: 48%;
  }
  .bnr_crosse {
    width: 48%;
  }
  .bnr_crosse h2 {
    padding: 1.6% 2%;
  }
  .sy_img {
    margin-top: 5%;
  }
  .bnr_crosse .bnr_t {
    margin-top: 5%;
  }
  .bnr_crosse h3 {
    margin: 3% 0 1%;
  }
  .bnr_sns {
    width: 28%;
    margin-bottom: 0;
  }
  .bnr_crosse .bnr_sns {
    width: 28%;
  }

  /* news */
  .ttl_en {
    margin-top: 4%;
    font-size: 3.6rem;
  }
  .area_news {
    padding-bottom: 2%;
  }
  .news {
    width: 880px;
    margin: 2% auto;
    padding-bottom: 0;
  }
  .news ul li a {
    padding: 3% 1%;
  }
  .news_area_btn a {
    margin-top: 2%;
    width: 32%;
    height: 50px;
    line-height: 50px;
  }
  .news .date {
    width: 15%;
    padding-top: 0;
  }
  .news .label {
    width: 84%;
  }

  /* info */
  .info {
    margin-top: 5%;
  }
  .chrono {
    margin-top: 3%;
    margin-bottom: 5%;
  }
  .chrono table th {
    width: 15%;
  }
  .chrono table td {
    padding: 2%;
  }
  /* sponsor */
  .sponsor {
    margin-bottom: 5%;
  }
  .sponsor ul {
    margin: 4% auto 0;
    overflow: hidden;
    width: 320px;
  }
  .sponsor ul li {
    max-width: 320px;
  }
  .sponsor ul li:first-child {
    margin-left: 0;
  }

  /* header */
  header {
    padding: 2% 0;
  }
  header ul {
    margin-top: 1%;
  }

  /* post */
  .post_ttl {
    margin-top: 8%;
  }
  .post_date {
    margin-bottom: 8%;
  }
  .blog_area {
    overflow: hidden;
  }
  .blog_main {
    margin-bottom: 0;
    width: 68%;
    float: left;
  }
  .side {
    width: 27%;
    float: right;
  }
  .side ul {
    margin-bottom: 10%;
  }
  .side ul li a {
    padding: 4% 2%;
  }

  /* cross crosse */
  .cross_in {
    margin-top: 4%;
  }
  .cross_box {
    padding: 2%;
    overflow: hidden;
    margin-bottom: 5%;
  }
  .cross_img {
    width: 34%;
    float: left;
  }
  .cross_txt {
    width: 62%;
    float: right;
  }
  .cross_ttl {
    text-align: left;
    font-size: 1.6rem;
    margin: 0 0 2% 0;
  }
  .txt_bottom {
    margin-top: 15%;
  }
  
  /* ----- .pagination ----- */
  .pagination {
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 8%;
  }
  .pagination .page-of {
      display: block;
      width: 100%;
      font-size: 108%;
      color: #333;
      text-align: center;
      margin-bottom: 2%;
  }
  .pagination a, .pagination .current {
      display: inline-block;
      padding: 0 1.5em;
      font-weight: bold;
      line-height: 50px;
      height: 50px
  }
  .pagination .current {
    background: #f9cc1d;
    border: solid 1px #f9cc1d;
    color: #fff
  }
  .pagination a:hover {
    background: #fff;
    border: solid 1px #f9cc1d;
    color: #f9cc1d;
  }
    
  
}