@charset "utf-8";





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



#page-head-bg{
	position: fixed;
	width: 100%;
	height: 400px;
	background:url(../i/h2_bg_process.jpg) no-repeat center center;
	background-size:cover;
	z-index: -1;
}







section#process-wrapper{
	background: #fff url("../i/process_bg.jpg") repeat-y center top;
	padding: 30px 0 30px 0;
}


.process-h3-sub{
	font-size: 0.8em;
	display: block;
}

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

	head
	
========================================*/

.step-head{
	width: 100%;
	margin: 0 0 60px 0;
}

.step-head-list{
	display: block;
	justify-content: space-between;
	list-style: none;
	width: 100%;
	padding: 0;
	border-top:1px solid #7baac1;
}

.step-head-list a{
	display: block;
	list-style: none;
	width: 100%;
	height: 60px;
	border-bottom:1px solid #7baac1;
	border-left:1px solid #7baac1;
	border-right:1px solid #7baac1;
	position: relative;
	padding: 20px 0 0 90px;
}

.step-head-list a:hover{
	background: #7baac1;
}

.step-head-list a span.list-title{
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color:#000;
}

.step-head-list a#step-head-list01{
  background: url("../i/step_num01.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list01:hover{
  background: #7baac1 url("../i/step_num_white01.png") no-repeat 24px 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list02{
  background: url("../i/step_num02.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list02:hover{
  background: #7baac1 url("../i/step_num_white02.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list03{
  background: url("../i/step_num03.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list03:hover{
  background: #7baac1 url("../i/step_num_white03.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list04{
  background: url("../i/step_num04.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list04:hover{
  background: #7baac1 url("../i/step_num_white04.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list05{
  background: url("../i/step_num05.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list05:hover{
  background: #7baac1 url("../i/step_num_white05.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list06{
  background: url("../i/step_num06.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list06:hover{
  background: #7baac1 url("../i/step_num_white06.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list07{
  background: url("../i/step_num07.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list07:hover{
  background: #7baac1 url("../i/step_num_white07.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list08{
  background: url("../i/step_num08.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list08:hover{
  background: #7baac1 url("../i/step_num_white08.png") no-repeat 15px 1px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list09{
  background: url("../i/step_num09.png") no-repeat 15px 1px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list09:hover{
  background: #7baac1 url("../i/step_num_white09.png") no-repeat 15px 1px;
  background-size:60px 60px;
}





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

	process
	
========================================*/


.process-contents-col01{
	width: 100%;
	margin: 30px 0 30px 0;
}
.process-contents-col01-left{
	width: 100%;
	margin: 0 0 0px 0;
	position: relative;
}
.process-contents-col01-right{
	width: 100%;
	position: relative;
}

.process-contents-col02{
	width: 100%;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; 
	margin: 30px 0 30px 0;
}
.process-contents-col02-right{
	width: 100%;
	position: relative;
}
.process-contents-col02-left{
	width: 100%;
	position: relative;
}

.process-contents-h4{
	font-size:21px;
	font-weight: 500;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 6px 0;
}
.process-contents-h4 span{
	display: inline-block;
	font-size:18px;
	color: #7baac1;
	margin: 0 9px 0px 0;
}

img.process-photo{
	width: 100%;
}

.process-photo{
	width: 100%;
}
.process-btn-movie{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 75px;
}



.process-head{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.process-head-num{
	width: 60px;
	margin: 0 15px 0 0;
}
.process-head-num img{
	width: 60px;
}
.process-head-btn{
	width: 120px;
}


/*== ボタン共通設定 */
.btn-to-movie{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 120px;
	height: 33px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}

.btn-to-movie::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  transform: skewX(18deg);
  background: url("../i/btn_movie.png") no-repeat;
  background-size: 13px 13px;
  top: 9px;
  right: 15px;
  opacity: 1;
}


/*ボタン内spanの形状*/
.btn-to-movie span {
	font-size:13px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 6px 0 0 -18px;
}

.btn-to-movie:hover span{
	color:#fff;
}

/*ボタン内spanの形状*/
.btn-to-movie span i {
	display: inline-block;
	margin: 0 12px 0 0;
	font-size:18px;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#036eb7;
	width:120%;
	height: 100%;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}




.step-anchor-wrapper{
	width: 100%;
	text-align: center;
	margin: 45px 0 60px 0;
}

.step-anchor{
	width: 60px;
	height: 60px;
	text-align: center;
	margin: 0px 0 0px 0;
  animation: updown 2s infinite ease-in-out;

}


@keyframes updown {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}




.banner-to-movie{
	width: 100%;
	height: 210px;
	margin: 60px 0 60px 0;
	background: url("../i/banner_bg.jpg") no-repeat center center;
	text-align: center;
	position: relative;
}

.banner-to-movie-inner{
	width: 100%;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.to-movie-title{
	width: 270px;
	margin: 9px auto 6px auto;
}
.to-movie-title img{
	width: 100%;
}
.to-movie-lead{
	font-size:14px;
	font-weight: 500;
	color: #fff; 
	margin: 0 0 18px 0;
}


/*== ボタン共通設定 */
.btn-to-allmovie{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 240px;
	height: 50px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}


/*ボタン内spanの形状*/
.btn-to-allmovie span {
	font-size:13px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 3px 0 0 0px;
}


.to-movie-btn{
	width: 154px;
}



}/*//end  max-width: 480px ///////////////////////*/







@media only screen and (min-width: 481px) {




#page-head-bg{
	position: fixed;
	width: 100%;
	height: 450px;
	background:url(../i/h2_bg_process.jpg) no-repeat;
	background-size:cover;
	z-index: -1;
}



section#process-wrapper{
	background: #fff url("../i/process_bg.jpg") repeat-y center top;
	padding: 30px 0 30px 0;
}



.process-h3-sub{
	font-size: 0.8em;
}

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

	head
	
========================================*/

.step-head{
	width: 100%;
	margin: 0 0 60px 0;
}

.step-head-list{
	display: flex;
	justify-content: space-between;
	list-style: none;
	width: 100%;
	padding: 0;
}

.step-head-list a{
	display: flex;
	justify-content: space-between;
	list-style: none;
	width: 94px;
	height: 270px;
	border:1px solid #7baac1;
	position: relative;
}

.step-head-list a:hover{
	background: #7baac1;
}

.step-head-list a span.list-title{
	position: absolute;
	writing-mode: vertical-rl;
	font-size: 18px;
	top:75px;
	left:50%;
	transform: translate(-50%, 0%);
	color:#000;
}

.step-head-list a span.list-title span{
	display: block;
}

.step-head-list a#step-head-list01{
  background: url("../i/step_num01.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list01:hover{
  background: #7baac1 url("../i/step_num_white01.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list02{
  background: url("../i/step_num02.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list02:hover{
  background: #7baac1 url("../i/step_num_white02.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list03{
  background: url("../i/step_num03.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list03:hover{
  background: #7baac1 url("../i/step_num_white03.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list04{
  background: url("../i/step_num04.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list04:hover{
  background: #7baac1 url("../i/step_num_white04.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list05{
  background: url("../i/step_num05.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list05:hover{
  background: #7baac1 url("../i/step_num_white05.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list06{
  background: url("../i/step_num06.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list06:hover{
  background: #7baac1 url("../i/step_num_white06.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list07{
  background: url("../i/step_num07.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list07:hover{
  background: #7baac1 url("../i/step_num_white07.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list08{
  background: url("../i/step_num08.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list08:hover{
  background: #7baac1 url("../i/step_num_white08.png") no-repeat center 9px;
  background-size:60px 60px;
}

.step-head-list a#step-head-list09{
  background: url("../i/step_num09.png") no-repeat center 9px;
  background-size:60px 60px;
}
.step-head-list a#step-head-list09:hover{
  background: #7baac1 url("../i/step_num_white09.png") no-repeat center 9px;
  background-size:60px 60px;
}





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

	process
	
========================================*/


.process-contents-col01{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0 30px 0;
	min-height: 250px;
}
.process-contents-col01-left{
	width: 420px;
	position: relative;
}
.process-contents-col01-right{
	width: 500px;
	position: relative;
}

.process-contents-col02{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; 
	margin: 30px 0 30px 0;
	min-height: 250px;
}
.process-contents-col02-right{
	width: 420px;
	position: relative;
}
.process-contents-col02-left{
	width: 500px;
	position: relative;
}

.process-contents-h4{
	font-size:30px;
	font-weight: 500;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 6px 0;
}
.process-contents-h4 span{
	display: inline-block;
	font-size:25px;
	color: #7baac1;
	margin: 0 9px 0px 0;
}

img.process-photo{
	width: 100%;
}

.process-photo{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
.process-btn-movie{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}



.process-head{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.process-head-num{
	width: 60px;
	margin: 0 30px 0 0;
}
.process-head-num img{
	width: 100%;
}
.process-head-btn{
	width: 120px;
}


/*== ボタン共通設定 */
.btn-to-movie{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 120px;
	height: 33px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}

.btn-to-movie::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  transform: skewX(18deg);
  background: url("../i/btn_movie.png") no-repeat;
  background-size: 13px 13px;
  top: 9px;
  right: 15px;
  opacity: 1;
}


/*ボタン内spanの形状*/
.btn-to-movie span {
	font-size:13px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 7px 0 0 -18px;
}

.btn-to-movie:hover span{
	color:#fff;
}

/*ボタン内spanの形状*/
.btn-to-movie span i {
	display: inline-block;
	margin: 0 12px 0 0;
	font-size:18px;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#036eb7;
	width:120%;
	height: 100%;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}




.step-anchor-wrapper{
	width: 100%;
	text-align: center;
	margin: 45px 0 72px 0;
}

.step-anchor{
	width: 90px;
	height: 90px;
	text-align: center;
	margin: 0px 0 0px 0;
  animation: updown 2s infinite ease-in-out;

}


@keyframes updown {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}




.banner-to-movie{
	width: 960px;
	height: 250px;
	margin: 120px 0 90px 0;
	background: url("../i/banner_bg.jpg") no-repeat;
	text-align: center;
	position: relative;
}

.banner-to-movie-inner{
	width: 100%;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.to-movie-title{
	margin: 9px 0 6px 0;
}
.to-movie-title img{
	width: 345px;
}
.to-movie-lead{
	font-size:16px;
	font-weight: 500;
	color: #fff; 
	margin: 0 0 18px 0;
}


/*== ボタン共通設定 */
.btn-to-allmovie{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 240px;
	height: 50px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}


/*ボタン内spanの形状*/
.btn-to-allmovie span {
	font-size:13px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 3px 0 0 0px;
}

.to-movie-btn{
	width: 154px;
}



}/*//end  min-width: 481px ///////////////////////*/