/* ========================================== */
/* ANIMATION
/* ========================================== */

/*

点滅

*/

.u_blink{
  -webkit-animation: blink 3.2s ease-in-out infinite alternate;
          animation: blink 3.2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
  0%    { opacity:   1; }
  100%  { opacity:  .2; }
}

@keyframes blink {
  0%     { opacity:   1; }
  100%  { opacity:  .2; }
}


/*

光　　※aタグにクラスで付与

*/

.u_btn__flash{
position: relative;
display: block;
}
.u_btn__flash::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.u_btn__flash:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}



/* ========================================== */
/* JQuery・JavaScript CSS
/* ========================================== */


/* magnific-popup
--------------------------------------*/

.mfp-bg {
  background-color: #fff;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-iframe-holder .mfp-close {
	top: -45px;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  right: -30px;
  width: 40px;
  height: 40px;
  padding-right: 11px;
  border-radius: 50%;
  background: #fff;
  text-align: right;
  color: #000;
  opacity: 1;
}


/* ripple
--------------------------------------*/
/* js_ripple */
/* クリックできる要素 */
.js_ripple {
/* エフェクトに直接関係はない */
/*
  margin: 20px;
  background-color: #f7f7f7;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
*/
  /* 必須 */
  overflow: hidden;
  position: relative;
}

.js_ripple.is_over-flow__Free {
  overflow: visible;
}

/* エフェクト要素 */
.js_ripple-btn {
  /* 値の変更はエフェクト形体・サイズ・スピードに影響する */
  width: 150px;
  height: 150px;

  /* 必須 */
  position: absolute;
  border-radius: 100%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
}

/* エフェクト要素の色を指定 */
.js_ripple-btn.is_orange { background: #f1c40f;}
.js_ripple-btn.is_blue   { background: #4aa3df;}
.js_ripple-btn.is_black  { background: #999;}


/* act */
.js_ripple-btn.is_act { animation: ripple 0.75s ease-out; }

@keyframes ripple {
from { opacity: 1; }
to   { transform: scale(2); opacity: 0;}
}

/* Block Reveal Effects
--------------------------------------*/
.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}

/* sample 1 */
.contents .sample-img{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}
.contents .text-area{
  margin-bottom: 20px;
}
.sample-tit{
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}
.sample-txt{
  text-align: center;
}
.sample-link{
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 8px 0;
}
@media screen and (min-width: 768px) {
  .contents .sample-img > div{
    width: 80%;
    display: inline-block;
  }
  .contents .text-area,
  .contents .link-area{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contents .text-area > div{
    width: 500px;
    display: inline-block;
  }
  .sample-tit{
    font-size: 38px;
  }
  .sample-txt{
    font-size: 18px;
  }
  .contents .link-area > div{
    display: inline-block;
  }
  .sample-link{
    width: 300px;
    margin: 0 auto;
  }
}

/* sample 2 */
.click{
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.click::after{
  content: '↓';
  display: block;
}
.event-bnt{
  margin-bottom: 30px;
}
.event{
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 1px solid #333;
  padding: 5px 0;
  margin-bottom: 5px;
}
.event:last-of-type{
  margin-bottom: 0px;
}
@media screen and (min-width: 768px) {
  .event-bnt{
    display: flex;
    justify-content: space-between;
  }
  .event{
    width: calc(100%/3.5);
    margin-bottom: 0;
  }
}

/* inview
--------------------------------------*/
/* 8個まで作成可能
_fadeIn　   フェードイン
_fadeUp   　下から
_fadeDown　 上から
_fadeRight　右から
_fadeLeft 　左から
*/

/* fadein */
.js_fade-in,
.js_fade-in2,
.js_fade-in3,
.js_fade-in-once,
.js_fade-in-once2,
.js_fade-in-once3 { opacity: 0; }
/* fadeup */
.js_fade-up,
.js_fade-up2,
.js_fade-up3,
.js_fade-up-once,
.js_fade-up-once2,
.js_fade-up-once3  { opacity: 0; transform: translate(0,20px);  -webkit-transform: translate(0,20px); }
/* fadedown */
.js_fade-down,
.js_fade-down2,
.js_fade-down3,
.js_fade-down-once,
.js_fade-down-once2,
.js_fade-down-once3 { opacity: 0; transform: translate(0,-20px); -webkit-transform: translate(0,-20px); }
/* faderight */
.js_fade-right,
.js_fade-right2,
.js_fade-right3,
.js_fade-right-once,
.js_fade-right-once2,
.js_fade-right-once3 { opacity: 0; transform: translate(-20px,0); -webkit-transform: translate(-20px,0); }
/* fadeleft */
.js_fade-left,
.js_fade-left2,
.js_fade-left3,
.js_fade-left-Once,
.js_fade-left-Once2,
.js_fade-left-Once3 { opacity: 0; transform: translate(20px,0);  -webkit-transform: translate(20px,0); }

/* fade act */
.is_fadeAct     { opacity: 1; transform: translate(0,0); -webkit-transform: translate(0,0); -webkit-transition: 2s;  transition: 2s; }
.is_fadeAct2     { opacity: 1; transform: translate(0,0); -webkit-transform: translate(0,0); -webkit-transition: 2s;  transition: 2s; transition-delay:3s;}
.is_fadeAct3     { opacity: 1; transform: translate(0,0); -webkit-transform: translate(0,0); -webkit-transition: 2s;  transition: 2s; transition-delay:6s;}


/* ========================================== */
/* 文字アニメーション
/* ========================================== */


/* ========================================== */
/* Caption Effect
/* ========================================== */

/* エフェクト基本設定
=======================================================================*/
.u_transform_01 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.u_transform_02 {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.u_transform_03 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.u_transform_04 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 1s linear;
transition: all 1s linear;
}

.u_transform_05 {
-webkit-transform: rotate(360deg) scale(1.6);
transform: rotate(360deg) scale(1.6);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

figure:hover .u_transform_01 {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

figure:hover .u_transform_02 {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}

figure:hover .u_transform_03 {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

figure:hover .u_transform_04 {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

figure:hover .u_transform_05 {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0)scale(1);
}

/*1
=======================================================================*/
/* Effect 01 */
.p_capt-effect_01 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_01 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
}
.p_capt-effect_01 figure:hover figcaption {
opacity: 1;
}


/*2
=======================================================================*/
/* Effect 02 */
.p_capt-effect_02 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_02 figcaption {
position: absolute;
top: -100%;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 1;
}
.p_capt-effect_02 figure:hover figcaption {
top: 0;
left: 0;
}


/*3
=======================================================================*/
/* Effect 03 */
.p_capt-effect_03 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_03 figcaption {
position: absolute;
top: 0;
left: -100%;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 1;
}
.p_capt-effect_03 figure:hover figcaption {
top: 0;
left: 0;
}


/*4
=======================================================================*/
/* Effect 04 */
.p_capt-effect_04 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_04 figcaption {
position: absolute;
top: -100%;
left: -100%;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 1;
}
.p_capt-effect_04 figure:hover figcaption {
top: 0;
left: 0;
}


/*5
=======================================================================*/
/* Effect 05 */
.p_capt-effect_05 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_05 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
}
.p_capt-effect_05 figure:hover figcaption {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
opacity: 1;
}


/*6
=======================================================================*/
/* Effect 06 */
.p_capt-effect_06 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_06 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transform: rotate(90deg) scale(3);
transform: rotate(90deg) scale(3);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
}
.p_capt-effect_06 figure:hover figcaption {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
opacity: 1;
}


/*7
=======================================================================*/
/* Effect 07 */
.p_capt-effect_07 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_07 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-transition: .5s;
transition: .5s;
opacity: 0;
}
.p_capt-effect_07 figure:hover figcaption {
-webkit-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}


/*8
=======================================================================*/
/* Effect 08 */
.p_capt-effect_08 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_08 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: .5s;
transition: .5s;
opacity: 0;
}
.p_capt-effect_08 figure:hover figcaption {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}


/*9
=======================================================================*/
/* Effect 09 */
.p_capt-effect_09 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_09 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
-webkit-transition: .5s;
transition: .5s;
opacity: 0;
}
.p_capt-effect_09 figure:hover figcaption {
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
opacity: 1;
}


/*10
=======================================================================*/
/* Effect 10 */
.p_capt-effect_10 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_10 figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
}
.p_capt-effect_10 figcaption h3,
.p_capt-effect_10 figcaption p {
position: absolute;
left: -100%;
width: 260px;
padding: 0;
text-align: left;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_10 figcaption h3 {
top: 30px;
}
.p_capt-effect_10 figcaption p {
top: 75px;
font-size: 12px;
}
.p_capt-effect_10 figure:hover figcaption {
opacity: 1;
}
.p_capt-effect_10 figure:hover figcaption h3,
.p_capt-effect_10 figure:hover figcaption p {
left: 20px;
}
.p_capt-effect_10 figure:hover figcaption h3 {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.p_capt-effect_10 figure:hover figcaption p {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}


/*11
=======================================================================*/
/* Effect 11 */
.p_capt-effect_11 figure {
position: relative;
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0 50%;
perspective-origin: 0 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.p_capt-effect_11 figure div {
overflow: hidden;
}
.p_capt-effect_11 figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0;
transform-origin: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
transition: transform .4s, opacity .1s .3s;
opacity: 0;
}
.p_capt-effect_11 figcaption h3, .p_capt-effect_11 figcaption p {
text-align: left;
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: 0;
}
.p_capt-effect_11 figcaption h3 {
padding: 30px 20px 0;
}
.p_capt-effect_11 figcaption p {
padding: 10px 20px 0;
font-size: 12px;
}
.p_capt-effect_11 figure:hover figcaption {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transition: -webkit-transform .4s, opacity .1s;
transition: transform .4s, opacity .1s;
opacity: 1;
}
.p_capt-effect_11 figure:hover figcaption h3,
.p_capt-effect_11 figure:hover figcaption p {
-webkit-transition-delay: .4s;
transition-delay: .4s;
opacity: 1;
}

/*12
=======================================================================*/
/* Effect 12 */
.p_capt-effect_12 .figure-inner {
position: relative;
-webkit-perspective: 1000;
perspective: 1000;
width: 300px;
height: 200px;
-webkit-transition: .5s;
transition: .5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.p_capt-effect_12 .image,
.p_capt-effect_12 figcaption {
position: absolute;
width: 300px;
height: 200px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.p_capt-effect_12 .image {
z-index: 2;
}
.p_capt-effect_12 figcaption {
padding: 10px 20px 20px;
background: #fff;
border: 2px solid #666;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.p_capt-effect_12 figcaption h3,
.p_capt-effect_12 figcaption p {
color: #555;
}
.p_capt-effect_12 figure:hover .figure-inner,
.p_capt-effect_12 figcaption { 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}


/*13
=======================================================================*/
/* Effect 13 */
.p_capt-effect_13 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_13 figcaption {
position: absolute;
bottom: -60px;
left: 0;
z-index: 2;
width: 100%;
height: 60px;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_13 figcaption h3 {
padding: 5px 0 0;
font-size: 18px;
}
.p_capt-effect_13 figcaption p {
font-size: 13px;
}
.p_capt-effect_13 figure:hover figcaption {
bottom: 0;
}


/*14
=======================================================================*/
/* Effect 14 */
.p_capt-effect_14 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_14 figcaption {
position: absolute;
bottom: 30px;
right: 40px;
z-index: 2;
width: 100%;
height: 60px;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_14 figcaption h3 {
padding: 5px 0 0;
font-size: 18px;
margin-right: -30px;
}
.p_capt-effect_14 figcaption p {
margin-right: -30px;
font-size: 13px;
}
.p_capt-effect_14 figure:hover figcaption {
right: 100%;
}


/*15
=======================================================================*/
/* Effect 15 */
.p_capt-effect_15 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_15 figcaption h3,
.p_capt-effect_15 figcaption p {
position: absolute;
left: 0;
z-index: 2;
width: 100%;
height: 40px;
line-height: 40px;
padding: 0;
background: rgba(0,0,0,.6);
color: #fff;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_15 figcaption h3 {
top: -40px;
font-size: 18px;
}
.p_capt-effect_15 figcaption p {
bottom: -40px;
font-size: 13px;
}
.p_capt-effect_15 figure:hover figcaption h3 {
top: 0;
}
.p_capt-effect_15 figure:hover figcaption p {
bottom: 0;
}


/*16
=======================================================================*/
/* Effect 16 */
.p_capt-effect_16 figure {
position: relative;
overflow: hidden;
}
.p_capt-effect_16 figure img {
position: relative;
z-index: 2;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_16 figcaption {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100px;
background: #46ceb4;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_16 figcaption h3 {
padding-top: 15px;
}
.p_capt-effect_16 figure:hover img {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}


/*17
=======================================================================*/
/* Effect 17 */
.p_capt-effect_17 figure {
position: relative;
overflow: hidden;
background: #46ceb4;
}
.p_capt-effect_17 figure img {
position: relative;
z-index: 1;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_17 figcaption {
position: absolute;
bottom: -70px;
left: 0;
z-index: 2;
width: 100%;
height: 70px;
background: #46ceb4;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_17 figcaption h3 {
padding-top: 15px;
}
.p_capt-effect_17 figure:hover img {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
.p_capt-effect_17 figure:hover figcaption {
bottom: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}


/*18
=======================================================================*/
/* Effect 18 */
.p_capt-effect_18 figure {
position: relative;
overflow: hidden;
background: #46ceb4;
}
.p_capt-effect_18 figure img {
position: relative;
z-index: 1;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_18 figcaption {
position: absolute;
bottom: 0;
right: -170px;
z-index: 2;
width: 170px;
height: 100%;
background: #46ceb4;
-webkit-transition: .3s;
transition: .3s;
}
.p_capt-effect_18 figcaption h3 {
padding: 70px 0 5px 15px;
font-size: 20px;
text-align: left;
}
.p_capt-effect_18 figcaption p {
padding-left: 15px;
text-align: left;
}
.p_capt-effect_18 figure:hover img {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
.p_capt-effect_18 figure:hover figcaption {
right: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}


/*19
=======================================================================*/
/* Effect 19 */
.p_capt-effect_19 figure {
position: relative;
}
.p_capt-effect_19 figure img {
position: relative;
z-index: 2;
}
.p_capt-effect_19 figure h3,
.p_capt-effect_19 figure p {
position: absolute;
bottom: 0;
left: 10px;
z-index: 1;
padding: 0;
opacity: 0;
-webkit-transition: .3s;
transition: .3s;
color: #555;
text-align: left;
}
.p_capt-effect_19 figure h3 {
font-size: 18px;
}
.p_capt-effect_19 figure:hover h3 {
bottom: -35px;
opacity: 1;
}
.p_capt-effect_19 figure:hover p {
bottom: -58px;
opacity: 1;
}


/*20
=======================================================================*/
/* Effect 20 */
.p_capt-effect_20 figure {
position: relative;
}
.p_capt-effect_20 figure img {
position: relative;
z-index: 2;
}
.p_capt-effect_20 figure h3,
.p_capt-effect_20 figure p {
position: absolute;
z-index: 1;
opacity: 0;
padding: 0;
-webkit-transition: .3s;
transition: .3s;
color: #555;
text-align: left;
}
.p_capt-effect_20 figure h3 {
bottom: -35px;
left: 0;
font-size: 18px;
}
.p_capt-effect_20 figure p {
bottom: -33px;
right: 0;
}
.p_capt-effect_20 figure:hover h3 {
opacity: 1;
}
.p_capt-effect_20 figure:hover p {
opacity: 1;
-webkit-transition-delay: .3s;
transition-delay: .3s;
}

/* ========================================== */
/* Hover Effect
/* ========================================== */