@charset "UTF-8";
#beltbnr {
 display: none;
}
.h_bar{
  display: none;
}
#mainArea{
    letter-spacing: 0;
    line-height: 2;
    overflow: hidden;
    margin: 0 auto;
    font-family: "yu-mincho-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
	 font-size: 1.3rem;
}
#mainArea div {
    font-family: "yu-mincho-pr6n", sans-serif;
}
#mainArea p {
    font-family: "yu-mincho-pr6n", sans-serif;
}
.bnr_ {
	width: 900px;
	margin: 0 auto;
}
section {
   width: 840px;
   margin: 6em auto;
}
.w900 {
   width: 900px !important;
}
.f-y {
    font-family: "yu-mincho-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
}
/*///*/
.lead {
	width: 100%;
    margin: 0em auto 4em;
    font-size: 1.3rem;
	position: relative;
}
.top_sec {
   background: #f0ecdb;
    width: 100% !important;
    height: 400px;
    position: relative;
}
.top_sec-cap {
  width: 390px !important;
  position: absolute;
  left: 34%;
  top: 20%;
}
.lead-inner {
	width: 400px;
    margin: 0em auto;
	padding: 6em 0;
}
.lead-img {
	width: 100%;
	display: block;
	margin: 0 0 3em 0;
}
h3-sub {
	font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    margin: 0 0 0.5em 0;
}
h3 {
	font-size: 1.8rem;
    text-align: center;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
}
.lead-text {
	display: block;
	line-height: 2.2;
}
/*///*/
h4{
	font-size: 2.0rem;
    text-align: center;
    font-weight: 400;
}
.h4-sub {
	font-size: 1.4rem;
	text-align: center;
}
.item_sec {
	border-top: solid 1px #222;
	border-bottom: solid 1px #222;
	position: relative;
	padding: 3em 0;
	width: 900px !important;
}
.stamp_ {
    position: absolute;
    width: 12%;
    top: -25%;
    right: 13%;
}
.stamp_ img {
    width: 100%;
}
.item_sec-img {
	width: 340px;
	margin: 0 auto 2.2em;
}
.item_sec-cap {
	text-align: center;
}
/*///*/
.main-img {
	width: 54%;
    display: inline-block;
    margin: 0px 3em 0 0;
    vertical-align: middle;
}
.main-text {
	width: 40%;
    display: inline-block;
	font-size: 1.3rem;
	vertical-align: middle;
}
.img-1-1 {
	display: block;
    width: 92% !important;
    margin: 0 auto 5em;
}
.img-1-2 {
	display: block;
    margin: 4em auto 5em;
}
.img-2-1 {
	width: 500px !important;
	display: block;
    margin: 4em auto 5em;
}
.img-2-2 {
	width: 500px !important;
	display: inline-block;
    float: right;
    margin: 0 0 5em;
}
.style_ {
	display: block;
	width: 20% !important;
	margin: 0 0 1em 0;
}
h6 {
	font-size: 1.4rem;
}
h6 span {
	font-family: "fot-tsukuardgothic-std", sans-serif;
    background: linear-gradient(transparent 53%, #f0ecdb 30%);
}
.midashi {
	width: 270px !important;
	margin: 0 0 2em 0;
}
.midashi2 {
	width: 250px !important;
	margin: 0 0 2em 0;
}
.cap_ {
	margin: 0 0 2em 0;
}
/*///*/
.img-c img {
	width: 100%;
	-webkit-backface-visibility: hidden;
}
/*////*/
.crdit_ {
	margin-bottom: 15px;
}
.button_crdit {
	display: inline-block;
	width: 66%;
	vertical-align: middle;
	font-size: 1.1rem;
}
.button_ {
	display: inline-block;
    width: 31%;
    height: 41px;
	line-height: 40px;
    border-radius: 50%;
    border: solid 1px #4a4a4a;
    background: #fff;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    color: #4a4a4a;
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 400;
    text-decoration: none;
    font-family: "yu-mincho-pr6n", sans-serif;
}
.button_:hover{
    background: #4a4a4a;
	border: solid 1px #4a4a4a;
	color: #fff !important; 
	transition : .3s;
}
/*////*/
.fade {
	opacity: 0;
	transition: all 1600ms;
}
.fade.active {
	opacity: 1;
}
/*//時間差ver//*/
.fadein {
    opacity: 0;
    transition: all 2000ms;
}
.fadein.scrollin {
	opacity: 1;
}
/*枠線が伸びて出現*/
.lineTrigger{
  position: relative;
  opacity:0;
}
.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
#archive {
  width: 800px;
  margin: 0 auto;
}
.archive_title {
  font-size: 2.4rem;
  text-align: center;
  margin: 0 0 0.5em;
}
.archive_bnr {
   width: 33%;
   display: inline-block;
   padding: 0 3%;
}
.archive_bnr p {
  font-size: 88%;
  margin: 0.5em 0 0 0;
  line-height: 1.7;
}
@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}
/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}
.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}
/*右線*/
.line2::before{ 
  top:0;
  right:0;
}
.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}
/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}
.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}
/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}
.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}
@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}
@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}
@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}
/* アニメーションの回数を決めるCSS*/
.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}
.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05{  
  animation-delay: 0.5s;
}
.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}
.lineTrigger{
    width: 700px;
    margin: 0em auto;
    box-sizing: border-box;
}
/*///*/
.columnArea {
	width: 78%;
    margin: 0 auto;
    padding: 4em 0;
}
.c-text {
	width: 485px;
	margin: 0 0 2em 0;
}
/*///*/
#staffcredit {
	width: 100%;
	background: #f0ecdb;
	padding: 5em 0;
}
#staffcredit-inner {
	width: 240px;
	margin: 0 auto;
	font-size: 90%;
}
.m-0 {
	margin: 0!important;
}
/*左から右テキストエフェクト*/
.leftAnime{
    opacity: 0;
  	overflow: hidden;
    display: inline-block;
}
.leftAnimeInner {
	display: inline-block;
}
.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}
.element {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 2s;
  }
  .is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  .eachTextAnime span{opacity: 0;}
  .eachTextAnime.appeartext span{
  animation:text_anime_on 1s ease-out forwards;
  transition: all 200s;
  }
  @keyframes text_anime_on {
    0% {opacity:0;}
    20% {opacity:.2;}
    50% {opacity:.5;}
    100% {opacity:1;}
  }