@charset "utf-8";
/* CSS Document */
html { font-family: YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif';
	font-size: 62.5%;
}

/*ローディングアニメーション*/

body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 overflow-y: scroll;
}

.anime {
	display: none;
 height: 100%;
 max-height: 1080px;
 background-color: #000;
 position: relative;
}
/*@media screen and (max-width:960px){
	.anime {
		display: none;
	}
}*/
 
.anime video {
	width: 45%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
/*
	@media screen and (max-width:960px){
		.anime video {
			display: none;
		}
	}
	*/
nav:after,header:after,div:after,footer:after {
	content: "";
    clear: both;
    display: block;
}

/*
個別部分
*/

/*
TOP
*/
.main {
	height: 100vh;
}
@media (max-width:480px){
	.main {
		height:auto;
	}
}
.navmenu {
	 filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
	display: none;
}
.case {
    z-index: 2;
    position: relative;
}
.casein {
	color: #ffffff;
	background:linear-gradient(to bottom right, #ff6964, #C22421);
	
	width: 80vh;
	height: 80vh;
	border-radius: 100%;
	margin: 0 0 0 7%;

    box-shadow:  10px 10px 30px rgba(18, 47, 61, 0.1),
    -10px -10px 30px rgba(248, 253, 255, 0.6),
    inset 10px 10px 30px transparent,
    inset -10px -10px 30px transparent;
}
.casein_txt {
	padding: 22% 0;
}
.midasi {
    width: 650px;
    margin: 0 auto;
}
.midasi h3 {
	transform: rotate(-10deg);
	z-index: 5;
	margin: 0 0 0 30px;
}
.midasi p {
    font-size: 350%;
    letter-spacing: 0.2rem;
    line-height: 2.2;
    font-weight: bold;
    text-align: right;
	width: 90%;
}
.case_p {
    font-size: 180%;
    letter-spacing: 0.2rem;
    line-height: 2;
    font-weight: bold;
    text-align: center;
}
.start {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-radius: 100px;
    width: 40%;
    height: 60px;
    margin: 20px auto;
}
.start:hover {
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.start a {
	color: #CE4F3F;
	background-color: #FFDCDC;
    font-weight: bold;
    text-decoration: none;
}
.start p {
    line-height: 60px;
}
.loop_wrap {
    background-image:url("../images/bg.png");
    background-position:center center;
	background-size:1920px 750px;
	-ms-filter: blur(2px);
  	filter: blur(2px);
    width:500%;
    height:80vh;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
        -webkit-animation:infinitescroll 20s linear infinite;
        -moz-animation:infinitescroll 20s linear infinite;
        -ms-animation:infinitescroll 20s linear infinite;
        -o-animation:infinitescroll 20s linear infinite;
        animation:infinitescroll 20s linear infinite;
	z-index:0;
	}
	    
    @-webkit-keyframes infinitescroll {
        0% {-webkit-transform:translate3d(0, 0, 0);}
        100% {-webkit-transform:translate3d(-1920px, 0, 0);}
    }
    @-moz-keyframes infinitescroll {
        0% {-moz-transform:translate3d(0, 0, 0);}
        100% {-moz-transform:translate3d(-1920px, 0, 0);}
    }
    @-ms-keyframes infinitescroll {
        0% {-ms-transform:translate3d(0, 0, 0);}
        100% {-ms-transform:translate3d(-1920px, 0, 0);}
    }
    @-o-keyframes infinitescroll {
        0% {-o-transform:translate3d(0, 0, 0);}
        100% {-o-transform:translate3d(-1920px, 0, 0);}
    }
    @keyframes infinitescroll {
        0% {transform:translate3d(0, 0, 0);}
        100% {transform:translate3d(-1920px, 0, 0);}
	}
	

	@media (min-width:481px) and (max-width:960px){
		.case {
			padding: 150px 0 0;
			height: 785px;
			z-index: 2;
			position: relative;
			}
			.casein {
				width: 80%;
				height: 450px;
				margin: auto;
				border-radius: 100px;
			}
			.casein_txt {
				padding:0;
			}
			.midasi h3 {
				text-align: left;
				display: block;
				font-size: 4rem;
				transform: rotate(-7deg);
			}
			.midasi p {
				font-size: 2.5rem;
				letter-spacing: 0.2rem;
				line-height: 2.2;
			}
			.case_p {
				font-size: 1.6rem;
				letter-spacing: 0.2rem;
				line-height: 2;
			}
			.midasi {
				width: 350px;
				margin: 0 auto;
				padding: 30px 0 15px;
			}
			.midasi img {
				width:300px;
			}
			.start {
				border-radius: 100px;
				width: 50%;
				height: 70px;
				margin: 15px auto 10px;
			}
			.start p {
				line-height: 70px;
				font-size: 1.8rem;
			}
			.main {
				height: 100vh;
			}
			.loop_wrap {
				height:100vh;
			}
			.case {

			}			
}
	
	@media screen and (max-width:480px){
		.case {
			padding: 150px 0;
		}
		.casein {
			width: 90%;
			height: 400px;
			margin: auto;
			border-radius: 70px;
		}
		.casein_txt {
			padding:0;
		}
		.midasi h3 {
			text-align: left;
			display: block;
			font-size: 3rem;
			transform: rotate(-5deg);
		}
		.midasi p {
			font-size: 2rem;
			letter-spacing: 0.2rem;
			line-height: 2.2;
			font-weight: bold;
			text-align: right;
		}
		.case_p {
			font-size: 1.4rem;
			letter-spacing: 0.2rem;
			line-height: 1.8;
		}
		.midasi {
			width: 80%;
			margin: 0 auto;
			padding: 20px 0 10px;
		}
		.midasi img {
			width:100%;
		}		
		.start {
			background-color: #ffffff;
			box-shadow: 0 4px 8px rgba(0,0,0,0.3);
			border-radius: 100px;
			width: 70%;
			height: 60px;
			margin: 30px auto 10px;
		}
		.start:hover {
			box-shadow: 0 0 2px rgba(0,0,0,0.2);
		  }
		.start a {
			color: #CE4F3F;
			font-weight: bold;
			text-decoration: none;
		}
		.start p {
			line-height: 60px;
		}
		.loop_wrap {
			height:700px;
			}
	}
/*headline ---------------------------------------------------------------------------------------*/

.head_line{
	width: 80%;
	height: 70px;
	margin: 0 10%;
	
	position:absolute;

    background: #FFFFFF;
	color: #C22421;
	box-shadow: 0 3px 10px 0 #DFDFDF;
	
	font-size: 2.0rem; /* お好みで変更してください */
	z-index: 20;
 }

 .head_line .inner{
     max-width: 100%; /* お好みで変更してください */   
     position: relative;
 }
 .head_line .hl_title{
	 padding: 25px 3%;
	 
     position: absolute;
	 top: 0;
     left: 0;

	 font-weight: bold;

     line-height: 1;
     z-index: 5;
 }
 .head_line ul {
     width: 100%;
     margin: 0;
     height: 70px;
     overflow: hidden;
     white-space: nowrap;
     position: relative;
 }
 .head_line ul li{
     width: 100%;
     padding-left: 70px;
     animation : headLine 16s linear infinite;    /* 1項目、8秒の設定で×3件 */ 
     position: absolute;  /* 表示項目を全部重ねる */ 
     top:0;
     left: 60px;
     background: #FFFFFF;
     z-index: 3;
     opacity: 1;
     visibility: hidden;   /*visibilityで要素を非表示に */ 
     line-height: 1;
     list-style: none;
 }
 .head_line ul li::before{
     content: '';
     width: 100px;
     height: 50px;
     position: absolute;
     top: 0;
     left: 0;
     background: #FFFFFF;
 }
 /* visibilityで要素の表示・非表示を切り替え */ 
 @keyframes headLine{
     from {
         opacity: 1;
         visibility: visible;
     }
     48% {
         opacity: 1;
         visibility: visible;
     }
     50% {
         opacity: 0;
         visibility: hidden;
     }
	 51% {opacity: 0;
	 }

	 
     99% { opacity: 0;}
     100% { opacity: 0;}
 }

 .head_line ul li:nth-of-type(2){
     animation-delay: 9s;
     z-index: 2;
 }/*
.head_line ul li:nth-of-type(3) a{
     animation-delay: 12s;
	z-index: 1;
 }



  htmlでliが増えたら追加
 .head_line ul li:nth-of-type(3){
     animation-delay: 24s;
     z-index: 1;
 }

*/

 .head_line ul li .day{
	 padding: 25px 10px;
     position: absolute;
     z-index: 1;
     color: #C22421;
	 border-right-color: #C22421 1px solid;
	 transform: skewX(-1deg);
	 line-height: 1.0;
 }

 .head_line ul li a{
	 padding: 25px 0 25px 180px;
     color: #C22421;
     display: block;
     transform: translateX(100%);
     animation : listScroll 16s linear infinite;
     text-decoration: none;
     /*transition: 0.8s;*/
 }



 htmlでliが増えたら追加
 .head_line ul li:nth-of-type(2) a{
     animation-delay: 9s;
 }
/* 
.head_line ul li:nth-of-type(2) a{
     animation-delay: 16s;
 }
 .head_line ul li:nth-of-type(3) a{
     animation-delay: 24s;
 }*/

 @keyframes listScroll{
     from { transform: translateX(100%);}
     35% { transform: translateX(0);}
     48% { transform: translateX(0);}
	 50%{ transform: translateX(0);}
	 51%{ transform: translateX(100%);}
	 85%{ transform: translateX(0);}
	 99%{ transform: translateX(0);}
     100% { transform: translateX(0);}
 }

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */


@media screen and (max-width: 960px){
    .head_line{
	width: 100%;
	height: 70px;
	margin: 0;
	bottom: 0;
    background: rgb(255,255,255,.8);
		font-size: 1.8rem;
 	}
	.head_line .hl_title{
	padding: 26px 15px;
	
    position: absolute;
	top: 0;
    left: 0;
	background: #FFFFFF;
	}
    .head_line ul li{
         padding-left: 0;
         animation : headLineSP 30s linear infinite;
		 padding: 0 0 3px 0;
     }

 	.head_line ul {
     width: 100%;
     margin: 0;
     height: 70px;
 	}
 	.head_line ul li{
     padding-left: 70px;
     top:0;
     left: 60px;
     background:rgb(255,255,255,0);
     z-index: 3;
     opacity: 0;
     visibility: hidden;  /* visibilityで要素を非表示に */ 
     line-height: 1;
     list-style: none;
 	}
	 .head_line ul li::before{
		 content: '';
		 width: 100px;
		 height: 50px;
		 position: absolute;
		 top: 0;
		 left: 0;
		 background: #FFFFFF;
	 }
}
	@keyframes headLineSP{
         from {
             opacity: 1;
             transform: translateX(100%);
             visibility: visible;
         }
         33% {
             opacity: 1;
             transform: translateX(-120%);
             visibility: visible;
         }
         34% {
             opacity: 0;
             visibility: hidden;
         }
         99% { opacity: 0;}
         100% {
             opacity: 1;
             transform: translateX(100%);
         }
}
@media screen and (max-width: 1180px){


     .head_line ul li:nth-of-type(2){
         animation-delay: 20s;
     }
	     .head_line ul li:nth-of-type(3){
         animation-delay: 30s;
	}
/*  htmlでliが増えたら追加
	
	*/	
	
     .head_line ul li::before{
         content: none;
     }
     .head_line ul li .day{
         position: static;
         background: none;
         display: inline-block;
     }
     .head_line ul li a{
         padding: 10px 0;
         display: inline-block;
         animation : none;
         transform: none;
     }
}
 




/* TOPの特徴 ====================================================================================*/

.back {
		background: rgba(194,36,33,0.05);
}



.fea_head {
	width: 100%;
	height: 550px;
	background-attachment: fixed;
	padding: 3% 0 0 0;
	margin: 0 auto;
}

@media (min-width:481px) and (max-width:960px){
	.fea_head {
		height: 80%;
		padding: 10% 0;
	}
}

@media screen and (max-width:480px){
	.fea_head {
		height: 80%;
	}
}



.mtm{
	float: left;
	width: 35%;
	padding: 7% 0 0 16.5%;
}
.fea_text {
	padding: 0 0 6% 0;
}





@media (min-width:481px) and (max-width:960px){
	.mtm {
	float: none;
	width: 100%;
	height: 35%;
	padding: 0;
	text-align: center;
}
}

@media screen and (max-width:480px){
	.mtm {
	float: none;
	width: 100%;
	height: 20%;
	padding: 14% 0 0 0;
	text-align: center;
	}
}
@media (min-width:481px) and (max-width:960px){
	.readpc {
	float: none;
	width: 100%;
	height: 35%;
	padding: 0;
	text-align: center;
}
}

@media screen and (max-width:480px){
	.readpc {
	float: none;
	width: 100%;
	height: 20%;
	padding: 14% 0 0 0;
	text-align: center;
	}
}




.photo_pc {
	float: left;
	width: 40%;
	padding: 5% 0 0 2.5%;
}


@media (min-width:481px) and (max-width:960px){
	.photo_pc {
	float: none;
	width: 60%;
	margin: 0 auto;
	padding: 10% 0 0 0;
	right: 50px;
}
	.photo_pc img {
		display: block;
		margin: auto;
	}
}

@media screen and (max-width:480px){
	.photo_pc {
	float: none;
	width: 60%;
	padding: 10% 0 0 0;
	right: 50px;
	margin: 0 auto;
}
.photo_pc img {
	display: block;
	margin: auto;
}
}

.fea_text h2 {
	font-size: 4.0rem;
	color: #C22421;
	padding: 0 0 5% 0;
}

@media screen and (max-width:480px){
	.fea_text h2 {
	font-size: 2.8rem;
	padding: 0 0 5% 0;
	margin: 0 auto;
}
}




.fea_text p {
	font-size: 2.1rem;
	line-height: 1.5;
	letter-spacing: 0.2rem;
	color: #C22421;
	font-weight: bold;
	margin: 0 auto;
}
@media (min-width:481px) and (max-width:960px){
	.fea_text p {
	font-size: 2.0rem;
	line-height: 1.5;
}
}

@media screen and (max-width:480px){
	.fea_text p {
	font-size: 1.2rem;
	line-height: 1.5;
}
}



.readpc {
	
	height: 5%;
	margin: 0 auto;
	padding: 0 0 0 10%;
	font-weight: bold;
}
/*
* {
  box-sizing: border-box;
}

 */

.wrapper {
  display: flex;
}

.cta {
	border: solid 1px #C22421;
    display: flex;
    padding: 10px 45px;
    text-decoration: none;
	font-size: 2.5rem;
    color: white;
    background: #C22421;
    transition: 1s;
    box-shadow: 6px 6px 0 #F2A5C6;
    transform: skewX(-15deg);
}

.cta:focus {
   outline: none; 
}

.cta:hover {
	background: #FFFFFF;
	color: #C22421;
    transition: 0.5s;
    box-shadow: 10px 10px 0 #C22421;
}

.cta .span2:nth-child(2) {
    transition: 0.5s;
    margin-right: 0px;
}

.cta:hover  .span2:nth-child(2) {
    transition: 0.5s;
    margin-right: 45px;
}

  .span {
	line-height: 2.7;
    transform: skewX(15deg) 
  }

  .span2:nth-child(2) {
    width: 20px;
    margin-left: 30px;
    position: relative;
    top: 12%;
  }
 
  

/**************SVG****************/
/**/
path.one {
    transition: 0.4s;
    transform: translateX(-60%);
}

path.two {
    transition: 0.5s;
    transform: translateX(-30%);
}

.cta:hover path.three {
    animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.cta:hover path.two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}
/**/
/* SVG animations */

@keyframes color_anim {
    0% {
        fill: white;
    }
    50% {
        fill: #C22421;
    }
    100% {
        fill: white;
    }
}

@media (min-width:481px) and (max-width:960px){
	.cta {
		font-size: 2rem;
		margin: auto;
	}
	.readpc {
		font-size: 1.5rem;
		padding: 0;
		width: 350px;
	}
}

@media screen and (max-width:480px){
	.cta {
		font-size: 1.5rem;
		margin: auto;
		padding: 5px 20px;
	}
	.readpc {
		padding: 0;
	}
}




/*--------------------------------------------------------------------------------------------------------------*/



.fea_content {
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	background-attachment: fixed;
}




@media (min-width:481px) and (max-width:960px){
	.fea_content {
		padding: 0;
}
}


@media screen and (max-width:480px){

	
}



@media screen and (max-width:960px){
	.fea_content {
	padding: 5% 0;
	height: 100%;
}
}


.con_u {
	width: 90%;
	height: 45%;
	padding: 5% 0 5% 9.3%;
	text-align: center;
}



@media (min-width:961px) and (max-width:1060px){
	.con_u {
	width: 90%;
	padding:0;
	margin: auto;
}
}


@media (min-width:481px) and (max-width:960px){
	.con_u {
	width: 90%;
	padding:0;
	margin: auto;
}
}

@media screen and (max-width:480px){
	.con_u {
	width: 90%;
	padding:0;
	margin: auto;
}
}

.con_u img {
	display: block;

	object-fit: contain;
	margin: auto;
}
@media (min-width:481px) and (max-width:960px){
	.con_u img {
	width: 70%;
	height: 70%;
}
}

@media screen and (max-width:480px){
	.con_u {
	width: 100%;
	height: 100%;
}
	.fea_p {
		font-size: 2.2rem;
	}
}

.readmore {
	text-align: center;
	font-size: 1.5rem;
	margin: 0 auto;
}

@media screen and (max-width:480px){
	.readmore {
		font-size: 1.1rem;
	}
}

/**/
.highlight:hover {
	border: solid 2px rgb(194, 36, 33);
}
@media screen and (max-width:480px){
	.highlight:hover {
		border: solid 2px rgb(194, 36, 33,0);
	}
}


.highlight .active {
  position: absolute;
  top: -20px;
  opacity: 0;
}

.readmore{
 transition:0.5s;
 display: flex;
 width: 50%;
}
@media (max-width:480px) {
	.readmore {
		width: 70%;
	}
}
.highlight:hover .readmore{
 transform: translate(0,-1.5em);
 transition:0.5s;
}



@keyframes fadeIn { /*animetion-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}

/*----------------------*/


.fea_1 {
	border: solid 2px rgba(194, 36, 33, 0);
	padding: 3% 0;
	float: left;
	width: 30%;
	height: 275px;
	margin:0;
	color: #C22421;
	font-weight: bold;
}

.fea_1 p {
	padding: 0;
	width: 100%;
	height: 37px;
	line-height: 37px;
	margin: 0 auto;
}
.fea_1 .material-icons {
	line-height: 37px!important;
}

.fea_photo1 {
	padding: 0 0 9% 0;
	left: -5px;
}

.fea_photo1 img {
	width: 282px;
}


@media (min-width:961px) and (max-width:1060px){
	.fea_1 {
		float: none;
		height: 300px;
		width: 450px;
		margin: 10% auto;
		padding: 5%;
	}
}


@media (min-width:481px) and (max-width:960px){
	.fea_1 {
		height: 300px;
		margin: 20% auto;
		padding: 5%;
	}
}

@media screen and (max-width:480px){
	.fea_1 p {
		font-size: 1.5rem;
	}
}



.fea_2 {
	border: solid 2px rgba(194, 36, 33, 0);
	padding: 3% 0;
	float: left;
	width: 30%;
	height: 275px;
	margin:0;
	color: #C22421;
	font-weight: bold;
}

.fea_2 p {
	padding: 0 0 4% 0;
	width: 100%;
	height: 31px;
	line-height: 31px;
	margin: 0 auto;
}
.fea_2 .material-icons {
	line-height: 31px!important;
}
.fea_photo2 {
	padding: 0 0 7.7% 0;
	left: -5px;
}

.fea_photo2 img {
	width: 210px;
}



@media (min-width:961px) and (max-width:1060px){
	.fea_2 {
		float: none;
		height: 300px;
		width: 450px;
		margin: 10% auto;
		padding: 5%;
	}
}


@media (min-width:481px) and (max-width:960px){
	.fea_2 {
		height: 300px;
		margin: 20% auto;
		padding: 5%;
	}
}
@media screen and (max-width:480px){
	.fea_2 p {
		font-size: 2.2rem;
	}
}




.fea_3 {
	border: solid 2px rgba(194, 36, 33, 0);
	padding: 3% 0;
	float: left;
	width: 30%;
	height: 275px;
	margin:0;
	color: #C22421;
	font-weight: bold;
}

.fea_3 p {
	padding: 0 0 8% 0;
	width: 100%;
	height: 31px;
	line-height: 31px;
	margin: 0 auto;
}
.fea_3 .material-icons {
	line-height: 31px!important;
}
.fea_photo3 {
	padding: 0 0 7.5% 0;
	left: -5px;
}

.fea_photo3 img {
	width: 280px;
}



@media (min-width:961px) and (max-width:1060px){
	.fea_3 {
		float: none;
		height: 300px;
		width: 450px;
		margin: 10% auto;
		padding: 5%;
	}
}



@media (min-width:481px) and (max-width:960px){
	.fea_3 {
		height: 300px;
		margin: 20% auto;
		padding: 5%;
	}
}

@media screen and (max-width:480px){
	.fea_3 p {
		font-size: 2.2rem;
	}
}






.con_d {
	width: 60%;
	height: 45%;
	padding: 0 0 0 7%;
	margin: 0 auto;
	text-align: center;
}


@media (min-width:961px) and (max-width:1060px){
	.con_d {
	width: 90%;
	padding:0;
	margin: auto;
}
}

@media (min-width:481px) and (max-width:960px){
	.con_d {
	width: 90%;
	padding: 0;
	margin: auto;
	}
}

@media screen and (max-width:480px){
	.con_d {
	width: 90%;
	padding: 0;
	margin: auto;
	}
}


.con_d img {
	display: block;
	object-fit: contain;
	margin: auto;
}

@media (min-width:481px) and (max-width:960px){
	.con_d img {
	width: 70%;
	height: 70%;
}
}

@media screen and (max-width:480px){
	.con_d {
	width: 100%;
	height: 100%;
}
	.fea_p {
		font-size: 2.5rem;
}
}







.fea_4 {
	border: solid 2px rgba(194, 36, 33, 0);
	padding: 3% 0 5% 0;
	float: left;
	width: 45%;
	height: 275px;
	margin:0;
	color: #C22421;
	font-weight: bold;
}

.fea_4 p {
	padding: 0 0 4% 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	margin: 0 auto;
}
.fea_4 .material-icons {
	line-height: 35px!important;
}

.fea_photo4 {
	padding: 5% 0 7% 0;
	left: -5px;
}

.fea_photo4 img {
	width: 280px;
}
@media (min-width:961px) and (max-width:1060px){
	.fea_4 {
		float: none;
		height: 300px;
		width: 450px;
		margin: 10% auto;
		padding: 5%;
	}
}


@media (min-width:481px) and (max-width:960px){
	.fea_4 {
		height: 300px;
		margin: 20% auto;
		padding: 5%;
	}
}

@media screen and (max-width:480px){
	.fea_4 p {
		font-size: 2.2rem;
	}
}




.fea_5 {
	border: solid 2px rgba(194, 36, 33, 0);
	padding: 3% 0 5% 0;
	float: left;
	width: 45%;
	height: 275px;
	margin:0;
	color: #C22421;
	font-weight: bold;
}

.fea_5 p {
	padding: 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	margin: 0 auto;
}
.fea_5 .material-icons {
	line-height: 35px!important;
}
.fea_photo5 {
	padding: 0 0 2% 0;
	left: -5px;
}

.fea_photo5 img {
	width: 255px;
}


@media (min-width:961px) and (max-width:1060px){
	.fea_5 {
		float: none;
		height: 300px;
		width: 450px;
		margin: 10% auto;
		padding: 5%;
	}
}

@media (min-width:481px) and (max-width:960px){
	.fea_5 {
		height: 300px;
		margin: 20% auto;
		padding: 5%;
	}
}



@media screen and (max-width:480px){
	.fea_5 p {
		font-size: 2.2rem;
	}
}





@media (min-width:481px) and (max-width:960px){
	.fea_sp {
	float: none;
	width: 70%;
	margin: 0 auto;
	position: relative;
}
}
@media screen and (max-width:480px){
	.fea_sp {
	float: none;
	width: 70%;
	margin: 10% auto;
	position: relative;
}
}

/* =================================================================================*/

.actFollow_btn{
		width:60px;
		position:fixed;
		top:250px;
		right: 0;
		z-index:10;
		background:#fff;
		border-radius:15px 0 0 15px;
		font-size:0;
		transition-property:right;
		transition-duration:.8s;
		}

		.actFollow_btn_in {
			display:block
		}
		.actFollow_btn a{
			font-size:1.3rem;
			transition-property:opacity;
			transition-duration:.2s;
			padding:10px 25px;
			background: linear-gradient(to bottom right, #EECECD, #C22421);
			border-radius:15px 0 0 15px;
			color:#fff;
			font-weight:bold;
			letter-spacing:0.14em;
			-webkit-writing-mode:vertical-rl;
			-ms-writing-mode:tb-rl;
			writing-mode:vertical-rl
		}
		.actFollow_btn a:hover{
			opacity:.5
		}
		@media screen and (max-width: 414px){
		.actFollow_btn a:hover{
			opacity:1
		}
		}
		
		.actFollow_btn.right {
			right: 0;
		}

		@media (min-width:481px) and (max-width:960px){
		.actFollow_btn{
		width:50px;
		position:fixed;
		top:350px;
		right: -100px;
		z-index:10;
		background:#fff;
		border-radius:23px 0 0 23px;
		font-size:0;
		transition-property:right;
		transition-duration:.8s;
		}

		.actFollow_btn_in {
			display:block
		}
		.actFollow_btn a{
			font-size:1rem;
			transition-property:opacity;
			transition-duration:.2s;
			padding:20px 20px;
			background: linear-gradient(to bottom right, #EECECD, #C22421);
			border-radius:23px 0 0 23px;
			color:#fff;
			font-weight:bold;
			letter-spacing:0.14em;
			-webkit-writing-mode:vertical-rl;
			-ms-writing-mode:tb-rl;
			writing-mode:vertical-rl
		}
		.actFollow_btn a:hover{
			opacity:.5
		}
		}
		@media screen and (max-width:480px){
		.actFollow_btn{
		width:40px;
		position:fixed;
		top:400px;
		right: -100px;
		z-index:10;
		background:#fff;
		border-radius:23px 0 0 23px;
		font-size:0;
		transition-property:right;
		transition-duration:.8s;
		}

		.actFollow_btn_in {
			display:block
		}
		.actFollow_btn a{
			font-size:1rem;
			transition-property:opacity;
			transition-duration:.2s;
			padding:10px 15px;
			background: linear-gradient(to bottom right, #EECECD, #C22421);
			border-radius:23px 0 0 23px;
			color:#fff;
			font-weight:bold;
			letter-spacing:0.14em;
			-webkit-writing-mode:vertical-rl;
			-ms-writing-mode:tb-rl;
			writing-mode:vertical-rl
		}
		.actFollow_btn a:hover{
			opacity:.5
		}
		}







/* ==============================================================================================*/


.intoro {
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	background-attachment: fixed;
}




@media (min-width:481px) and (max-width:960px){
	.intoro{
		height: 30%;
	}
}

@media screen and (max-width:480px){
	.intoro {
		height: 20%;
	}
}





.into_photo {
	background-image:url("../images/pixta_38376122_M.png");
	width: 100%;
	height: 300px;
	margin: 8% auto 0 auto;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
}

.into_photo p {
	margin: 0 auto;
	padding: 125px 0;
	font-size: 50px;
	font-weight: bold;
	color: #000;
	width: 100%;
	text-align: center;
	
}


@media (min-width:481px) and (max-width:960px){

	.into_photo {
		height: 250px;
	}
	.into_photo p {
		font-size: 40px;
		padding: 117px 0;
	}
}

@media screen and (max-width:480px){
	.into_photo {
		height: 140px;
	}
	.into_photo p {
		font-size: 30px;
		padding: 64px 0;
	}
}



.into_photo img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	display: block;
}

.into {
	width: 70%;
	height: 50%;
	padding: 0;
	
}

.into img {
	margin: 0 auto;
	height: 70%;
	width: 70%;
	padding: 0 0 0 11%;
}
.ggl {
	width: 150%;
	background-color: #FFFFFF;
}



@media (min-width:481px) and (max-width:960px){
	.into {
		width: 70%;
	}
	.ggl {
		width: 100%;
		margin: 0 auto;

	}
	.ggl img {
		width: 150%;
		padding: 0;
	}
}

@media screen and (max-width:480px){
	.into {
		width: 70%;
	}
	.ggl {
		width: 100%;
		margin: 0 auto;
		
	}
	.ggl img {
		width: 150%;
		padding: 0;
		background-color: #FFFFFF;
	}
}




/* =======================================================================================*/


.dldemo {
	margin:10% auto;
	padding: 4% 0 8% 0;
	text-align: center;
	background-image: url("../images/pixta_64996460_M.png");
	background-repeat: no-repeat;
	display: block;
	background-size: cover;
}
@media (min-width:481px) and (max-width:1125px){
	.dldemo {
	padding: 5% 0;
}
}

@media screen and (max-width:480px){
	.dldemo {
	background-size: cover;
	background-repeat: no-repeat;
	right: 5px;
	padding: 10% 0;
	height: 280px;
}
}






.dldemo h4 {
	font-size:5.0rem; 
	color: #FFFFFF;
	margin: 0 0 7%;
	text-align: center;
}
@media (min-width:481px) and (max-width:960px){
	.dldemo h4 {
	font-size:2.5rem; 
	text-align: center;
	}
}

@media screen and (max-width:480px){
	.dldemo h4 {
	font-size:2.0rem; 
	margin: 0 0 7%;
}
}


.dddd {
	margin: 0 auto;
	padding: 0 0 2px 0;
}



.udl {
	width: 20%;
	height: 30%;
	float: left;
	border: solid 5px #FFFFFF;
	border-radius: 23px;
	font-weight: bold;
	font-size: 2.5rem;
	color: #FFFFFF;
	padding: 1% 1% 0 1%;
	margin: 0 0 0 22%;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
	transition-duration: 0.5s;
}
.udl:hover {
	transform: scale(1.1);
	opacity: 0.8;
}
.udl a {
	width: 100%;
	height: 100%;
}


.udl p {
	line-height: 2;
	height: 100%;
	width: 100%;
	padding: 0 0 2% 0;
}

@media (min-width:481px) and (max-width:1125px){
	.udl {
	width: 50%;
	height: 30%;
	float: none;
	font-size: 2rem;
	padding:3% 0;
	margin: 0 auto 7%;
	line-height: 1.5;
}
}

@media screen and (max-width:480px){
	.udl {
	width: 80%;
	height: 20%;
	float: none;
	font-size: 1.7rem;
	padding: 3% 0 4% 0;
	margin: 0 auto 7%;
	line-height: 2;
}
}

.note {
	width: 70%;
	height: 10%;
}

.note img {
	width: 20%;
	padding: 0 1% 4% 110%;
}
@media screen and (max-width:1125px){
	.note img {
	display: none;
}
}

.ude {
	width: 20%;
	height: 30%;
	float: right;
	background-color: #FFFFFF;
	border: solid 5px #FFFFFF;
	border-radius: 23px;
	font-weight: bold;
	font-size: 2.5rem;
	color: #D98383;
	padding: 1% 1% 0 1%;
	margin: 0 22% 0 0;
}

.ude p {
	line-height: 2;
	margin: 0 auto;
}




@media (min-width:481px) and (max-width:1125px){
	.ude {
	width: 50%;
	height: 30%;
	float: none;
	font-size: 2rem;
	padding: 3% 0;
	margin: 0 auto 7%;
	line-height: 2;
}
}

@media screen and (max-width:480px){
	.ude {
	width: 80%;
	height: 20%;
	float: none;
	font-size: 1.7rem;
	padding: 3% 0 4% 0;
	margin: 0 auto 7%;
	line-height: 2;
}
}
.ude:hover{
	box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
	transform: translateY(-3px);
}

.ude::after{
	content: "";
	text-decoration: none;
	text-transform: uppercase;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 25px;
	display: inline-block;
	z-index: -1;
	transition: all .5s;
}

.btn-white::after {
	background: #fff;
}

.btn-animation-1:hover::after {
	transform: scaleX(1.4) scaleY(1.6);
	opacity: 0;
}

@keyframes comeFromBottom{
	0%{
		opacity:0;
		transform: translateY(40px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}


.hi {
	float: left;
	width: 15%;
	padding: 0 30% 2% 0;
}
@media screen and (max-width:1125px){
	.hi {
	display: none;
}
}

.tell {
	float: left;
	width: 15%;
	padding: 0 0 4% 38.5%;
}
@media screen and (max-width:1125px){
	.tell {
	display: none;
}
}

.hi img {
	width: 100%;
}

.tell img {
	width: 100%;
}