@charset "utf-8";
/*===================================
All
===================================*/
body {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    color: #333;
    animation: bg-color 5s ease-out 4s infinite forwards;
}

body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background: url(../img/bkimg_sp.png) center top no-repeat;
  background-size:cover;
}

@keyframes bg-color {
  0%,100%{background-color:#fff;}
  70%{background-color:#ddd;}
}

/*--- header ---*/
.header {
  position: static;
  text-align: center;
}

.logo {
  display: inline-block;
  padding-top: .7rem;
  writing-mode: vertical-rl;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.35rem;
  font-weight: normal;
  letter-spacing: .6rem;
  margin: 0.67rem 0;
}

.logo::after {
  content: '';
  display: inline-block;
  width: 38px;
  height: 38px;
  background-image: url(../img/logo.svg);
  background-size: contain;
  vertical-align: middle;
  margin-left: -.65rem;
  margin-top: -.1rem;
}

.gnav {
  padding-bottom: 1.5rem;
  margin-left: 1.1rem;
}

.gnav-inner li {
  display: inline-block;
  margin: 0 .6rem;
  font-size: 1.2rem;
  letter-spacing: .01rem;
}

.gnav-inner li:last-child a{
  margin-left: .2rem;
  text-decoration: none;
}

.nav-here {
  font-weight: 600;
  color: #444;
}

/*--- footer ---*/
.footer {
  text-align: center;
}

.pagetop_btn {
  position: relative;
}

.pagetop_btn::before {
  position: absolute;
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  border-top: solid 2px #555;
  border-left: solid 2px #555;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 1.2rem;
}

.copy {
  display: block;
  color: #555;
}

/*--- other ---*/
.mr8 {
  margin-right: 8px;
}

.pt2 {
  padding-top: 2rem;
}

/*===================================
Activities
===================================*/
.card_wrapper {
}

.card_item {
  padding-bottom: 2.5rem;
  overflow: hidden;
}

.card_photo {
  float: left;
  width: 48%;
  margin-right: 3%;
}

.card_photo img {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(50,50,50,0.15);
  border-radius: 0 4px 4px 0;
}

.card_role {
  display: inline-block;
  margin-top: .3rem;
  margin-bottom: .3rem;
  padding: 0 6px;
  font-size: .8rem;
  color: #fff;
  background-color: rgba(60,185,211,0.6);
  letter-spacing: .07rem;
}

.card_title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.5;
}

.card_description {
  margin: 1.2rem;
}

.card_date {
  margin: 1.2rem;
  font-size: .9rem;
}

.card_btn {
  display: block;
  margin: 1.2rem;
  text-align: right;
  color: #fff;
}

.btn {
  position: relative;
  padding-right: 1.8rem;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 0 0.8em #2aa6c0, 1px 1px 2px #777;
}

.btn::before {
  position: absolute;
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  right: .3rem;
}

/*===================================
About
===================================*/
.col01 {
  margin: 0 auto;
  padding: 0 1.2rem 5rem;
  max-width: 640px;
  line-height: 1.7;
}

.title1 {
  font-size: 1.3rem;
}

/*===================================
link
===================================*/
.gnav-inner a:visited { color:#222; } 

a:link { color:#222; } 
a:visited { color:#555; } 
a:hover { color:#666; }

/*--- btn ---*/
a.btn:link { color:#fff; text-decoration: none; } 
a.btn:visited { color:#ddd; text-decoration: none; } 
a.btn:hover { color:#ccc; text-decoration: none; }

@media (min-width: 768px) { /* タブレット縦以上 */
  a.btn:link { color:#2aa6c0; text-decoration: none; } 
  a.btn:visited { color:#3cb9d3; text-decoration: none; } 
  a.btn:hover { color:#42c9db; text-decoration: none; }
}

/*===================================
@media
===================================*/
@media (min-width: 768px) { /* タブレット縦以上 */
  body:before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background: url(../img/bkimg.png) center top no-repeat;
    background-size:cover;
    width:100%;
　}

  .card_wrapper {
    max-width: 1346px;
    margin: 0 auto;
    padding: 20px;
  }

  .card_item {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 20px 25px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: dotted 1px rgba(180,180,180,0.6);
  }

  .card_photo {
    float: right;
    width: 300px;
    margin-left: 20px;
    margin-right: 0;
  }
  
  .card_photo img {
    max-width: 300px;
    height: auto;
  }

  .card_role {
    color: #2aa6c0;
    border: 1px solid #3cb9d3;
    background-color: transparent;
  }
  
  .card_title {
    font-size: 1.4rem;
  }

  .card_description,
  .card_date {
    margin: 1.2rem 0 ;
  }

  .card_btn {
    display: inline-block;
    margin: 1.2rem 0;
  }

  .btn {
    text-shadow: none;
  }

  .btn::before {
    border-top: solid 2px #3cb9d3;
    border-right: solid 2px #3cb9d3;
  }
}