@charset "UTF-8";
/*----------------------------------
鉄舟コレクション
---------------------------------- */
@import url(https://db.onlinewebfonts.com/c/2c6d794b5cfbe2958da38a4c6aeddde9?family=flexslider-icon);

body {
  margin: 0;
}

.tessyu {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 65px 0 130px 0;
}

.tessyu h1 {
  margin: 0 auto 30px;
}

.border {height: 400px;}
.border:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 0;
	border-left: solid 1px #fff;
	transform: translateX(-50%);
	animation: border_anim 0.5s linear forwards;
}

@keyframes border_anim {
	0%{
		height: 0px;
	}
	100%{
		height: 400px;
	}
}

.year_num {
  font-family: 'Roboto', sans-serif;
  font-size: 65px;
  font-weight: 500;
  padding-top: 20px;
}
.main_topics {font-size: 22px; line-height: 1.5;}
.main_topics .brsp {padding: 0 12px;}

.txt_area {
  max-width: 615px;
  width: 86%;
  margin: 0 auto;
  text-align: justify;
  font-family: 'Shippori Mincho', serif;
  color: #ddd;
  line-height: 1.8;
}

.flexslider {background: #000;}

.area2003 {
  background: url("../tesshyu/images/tesshyu.jpg") no-repeat right top;
}
.cont2003 {margin: 190px auto 100px;}
.cont2003 img {margin-bottom: 50px;}
.cont2003 .tesshyu_photo {display: none;}

.area2003_item {margin: 0 auto 25px;}
.area2006_item {margin: 20px auto 25px;}
.area2003_item .txt_area {padding-top: 65px;}
.area2006_item .txt_area {padding-top: 65px;}

.area2023 .txt_area {padding-top: 30px; text-align: center;}

.area_entry {
  max-width: 840px;
  width: 90%;
  margin: 80px auto 0;
  border: 1px #666 solid;
  padding: 35px 5% 30px 5%;
  box-sizing: border-box;
  color: #ddd;
  font-size: 0.85rem;
  line-height: 1.7;
  background: #222;
}
.area_entry h2 {font-size: 18px; line-height: 1.5; padding-bottom: 20px;}

.bt_entry {
  width: 100%;
  max-width: 340px;
  display: block;
  margin: 20px auto 0;
  border: 1px #a69e76 solid;
  border-radius: 5px;
  padding: 12px 0;
}
.bt_entry:hover {opacity: 0.85; background: #a69e76; border: 1px #ccc solid;}
.area_entry a:link {color: #a69e76;}
.area_entry a:visited {color: #a69e76;}
.area_entry a:hover {color: #fff; text-decoration: none;}
.area_entry a:active {color: #fff;}

.fadeup {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

@media (max-width:767px) {
  .border {height: 250px;}
  .year_num {padding-top: 0px;}
  .main_topics {font-size: 20px;}
  .main_topics .brsp {padding: 0 0;}
  .txt_area {font-size: 14px;}
  .cont2003 {margin: 30px auto 80px;}
  .area2003 {background: none;}
  .cont2003 .tesshyu_photo {display: block; text-align: center;}
  .cont2003 .tesshyu_photo img {width: 90%; max-width: 364px; height: auto;}
  
  @keyframes border_anim {
	0%{
		height: 0px;
	}
	100%{
		height: 250px;
	}
}
}

@media (max-width:525px) {
  .area_entry {text-align: left; padding: 30px 5%;}
  .area_entry h2 {text-align: center;}
  .bt_entry {text-align: center;}
}