@charset "UTF-8";

/***　アニメーション ***/
.effect_left {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
    -webkit-transition: transform 0.6s ease,
		opacity 0.6s ease;
    transition: transform 0.6s ease,
		opacity 0.6s ease;
}
.effect_left.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.effect_right {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
    -webkit-transition: transform 0.6s ease,
		opacity 0.6s ease;
    transition: transform 0.6s ease,
		opacity 0.6s ease;
}
.effect_right.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.effect_up {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
    -webkit-transition: transform 0.6s ease,
		opacity 0.6s ease;
    transition: transform 0.6s ease,
		opacity 0.6s ease;
}
.effect_up.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.effect_down {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
    -webkit-transition: transform 0.6s ease,
		opacity 0.6s ease;
    transition: transform 0.6s ease,
		opacity 0.6s ease;
}
.effect_down.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.effect_show {
    opacity: 0;
    -webkit-transition: all 1s ease;
    -webkit-transition: transform 0.6s ease,
		opacity 0.6s ease;
    transition: transform 0.6s ease,
		opacity 0.6s ease;
}
.effect_show.active {
    opacity: 1;
}
.effect_wide {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: transform 0.6s ease,
		opacity 0.6s ease;
    transition: transform 0.6s ease,
		opacity 0.6s ease;
}
.effect_wide.active {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.effect_scaletoleft{
	opacity: 0;
}
.effect_scaletoleft.active{
	opacity: 1;
	animation: scaleToLeft 0.4s ease-in;
}
.effect_scaletoright{
	opacity: 0;
}
.effect_scaletoright.active{
	opacity: 1;
	animation: scaleToRight 0.4s ease-in;
}
@media (max-width: 768px) {
  	.effect_left{
  		opacity: 1;
  		transform: translate3d(0%,0,0);
  	}
  	.effect_right{
  		opacity: 1;
  		transform: translate3d(0%,0,0);
  	}
  	.effect_up{
  		opacity: 1;
  		transform: translate3d(0%,0,0);
  	}
  	.effect_down{
  		opacity: 1;
  		transform: translate3d(0%,0,0);
  	}
  	.effect_top{
  		opacity: 1;
  		transform: translate3d(0,0%,0);
  	}
  	.effect_show{
  		opacity: 1;
  	}
}
@-webkit-keyframes effect_wide {
    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes effect_wide {
    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes scaleToRight {
    0% {
		transform-origin: left top;
        transform: scale(0,1);
    }
    100% {
		transform-origin: left top;
        transform: scale(1,1);
    }
}
@keyframes scaleToLeft {
    0% {
		transform-origin: right top;
        transform: scale(0,1);
    }
    100% {
		transform-origin: right top;
        transform: scale(1,1);
    }
}


.radio-ipt{
    position: absolute;
}
.mwform-radio-field{
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 20px;
}
.mwform-radio-field-text{
    position: relative !important;
    padding-left: 36px;
    display: flex;
    min-height: 26px;
    align-items: center;
}
.mwform-radio-field-text:before{
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ebebeb;
    border: 1px solid #ccc;
    border-radius: 50%;
}
.mwform-radio-field-text::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: #305756;
    border-radius: 50%;
    margin: 4px;
    opacity: 0;
    transition: 0.25s;
    position: absolute;
    top: 0;
    left: 0;
}
.radio-ipt:checked + .mwform-radio-field-text::after {
    opacity: 1;
}
.mw_wp_form .horizontal-item + .horizontal-item {
    margin-left: 0px;
}

.checkbox-ipt{
    position: absolute;
}
.mwform-checkbox-field-text{
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.mwform-checkbox-field-text:before{
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ebebeb;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65% auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: 0.25s;
    margin-right: 10px;
}
.checkbox-ipt:checked + .mwform-checkbox-field-text:before {
    background-color: #305756;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 16.998"><path d="M14444.492,17960.41c-.023,0-.047,0-.07,0a1.505,1.505,0,0,1-1.054-.5l-7.053-7.975a1.5,1.5,0,0,1,2.248-1.988l6.03,6.818,13.82-12.945a1.5,1.5,0,0,1,2.051,2.191l-14.947,14A1.5,1.5,0,0,1,14444.492,17960.41Z" transform="translate(-14435.939 -17943.412)" fill="%23fff"/></svg>');
}

/* 個人情報保護基本方針の枠は div.ipt-textarea のため
   common.css の textarea 向けボーダーが効かない。明示的に付与する。 */
.ipt-textarea{
    border: 1px solid #ccc;
}

.media_bg{
    display: inline-block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
}

.mw_wp_form_confirm .form_only{
	display: none;
}


.nav-fixed{
    overflow: unset !important;
    height: auto !important;
}

.header-nav li:not(:last-child){
	margin-bottom: 15px;
}



.video_wrap{
    position: absolute;
    left: 0px;
    right: 0px;
    top: -1px;
    bottom: 0px;
    z-index: -1;
}
.hero-vid{
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
}
@media (min-width: 1200px){
    .video_wrap{
        left: 399px;
    }
}
@media (min-width: 1400px){
    .video_wrap{
        left: 559px;
    }
}

@media (min-width: 1920px){
    .video_wrap{
        left: 767px;
    }
}