@charset "utf-8";

/**
 *
 *  サイト共通
 *
 */

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
ul,ol,li,dl,dt,dd{list-style-type:none;list-style-position:outside;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
img{vertical-align:top;border:0;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0;padding:0;}
input,select{vertical-align:middle;}


/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
	font-size: 62.5%;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	color: #11193B;
	background: #FFF;
	font-family: "A1 Mincho","Noto Serif JP","YuMincho","Yu Mincho","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.4rem;
	line-height: 1.8;	
}

/* fonts */
.sans-serif{
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;
}


/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/

a{
	outline: none;
}
a:link,
a:visited{
	text-decoration: none;
	color: #11193B;
}

.ophover{
	transition: opacity ease .3s;	
}
.ophover:hover{
	opacity: .7;
}


/*--------------------------------------------------------------------------
   img
---------------------------------------------------------------------------*/
img{
	max-width: 100%;
	height: auto;	
}

/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
.fade01{
	opacity: 0;
	transform: translate(0,100px); 
	-webkit-transform: translate(0,100px);	
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-100px); 
	-webkit-transform: translate(0,-100px);
}
.fade03 {
	opacity: 0;
	transform: translate(-100px,0); 
	-webkit-transform: translate(-100px,0);	
}
.fade04 {
	opacity: 0;
	transform: translate(100px,0); 
	-webkit-transform: translate(100px,0);	
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

.mv {
	opacity: 1;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


.btn-effect{
  overflow:hidden;  
}
.btn-effect::after{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #11193B;
  transform: translateX(-100%);
}
.btn-effect.mv::after{
	animation: cover 1.5s ease 0s 1 none;
  animation-play-state: running;
}
.btn-effect .fade{
  transition-delay: .3s; 
}
.btn-effect:hover .fade{
  transition-delay: 0s;
}

@keyframes cover {
  0% {
    transform: translateX(-100%);
  }
 45% {
    transform: translateX(0);
  }
 55% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%); 
  }
}


/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
.sp{
	display: none;	
}
/* box-sizing ---*/	
header, footer, section, div, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, th, td, a, span {
	box-sizing: border-box;
}



/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Page{
	overflow: hidden;	
}
.inner{
	max-width: 1230px;
	padding: 0 15px;
	margin: 0 auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content {
  margin-top: 100px;
	background: url(../image/bg_body.jpg);
}


/* page-ttl
-----------------------------------------------------------------*/
.page-ttl{
  position: relative;
  height: 600px;
  background: no-repeat center center;
  background-size: cover;    
}
.page-ttl::after{
  position: absolute;
  left: 0;
  bottom: -65px;
  z-index:10;
  display: block;
  content: "";
  width: 50%;
  height: 223px;
  background: #11193B;  
}
.page-ttl .page-hd{
  position: absolute;
  left: 0;
  bottom: -20px;
  z-index:15;
  width: 100%;  
}
.page-ttl .page-hd div{
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 15px;
  color: #FFF;  
}
.page-ttl .page-hd h2{
  margin-bottom: 28px;
}
.page-ttl .page-hd .ttl{
  margin-bottom: 30px;
  font-size: 3.2rem;
  line-height: 1.2;
}
.page-ttl .page-hd .txt{
  font-size: 2rem;
  line-height:1.5;
}
.page-ttl .caption{
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: #FFF;
  font-size: 1.3rem;
  line-height:1.4;  
}




/* btn-req
-----------------------------------------------------------------*/
.btn-req a{
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    background: #E5C23B;
    text-align: center;
    color: #11193B;
    font-size: 2.2rem;
    transition: .3s; 
}
.btn-req a:hover{
  background: #FFF;
}

.btn-req .btn-sub{
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    height: 0;
    margin: 2% auto 0
}

@media screen and (max-width: 768px) {
    .btn-req .btn-sub{
    font-size: 1.2rem;
    margin: 2% auto 0
}

}



/* btn-res
-----------------------------------------------------------------*/
.btn-res a{
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    background: #810000;
    text-align: center;
    color: #FFF;
    font-size: 2.2rem;
    transition: .3s; 
}
.btn-res a:hover{
  color: #810000;
  background: #FFF;
}

/* btn-on
-----------------------------------------------------------------*/
.btn-on a{
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    background: #d3deed;
    text-align: center;
    color: #11193B;
    font-size: 2.2rem;
    transition: .3s; 
    border: 1px solid #bacbdc;
}
.btn-on a:hover{
  color: #11193B;
  background: #ededed;
}

/* btn-group
-----------------------------------------------------------------*/
.btn-group{
  display: flex;
  justify-content: center;
}
.btn-group li{
  max-width: 400px;
  width: calc(50% - 20px);
  margin: 0 10px;  
}
.btn-group li a{
  height: 70px;
  line-height:70px;
}

/* btn_w
-----------------------------------------------------------------*/
.btn_w a,
.btn_w span{
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    background: #FFF;
    text-align: center;
    font-size: 2.2rem;
    transition: .3s;      
}
.btn_w a:hover,
.btn_w span:hover{
  color: #FFF;
  background: #11193B;
}


/* benefit-list
-----------------------------------------------------------------*/
.ttl-benefit {
  margin-bottom: 15px;
  text-align: center;
  font-size: 2.2rem;
  font-weight: normal;
}

.benefit-list{
  margin-bottom: 55px;   
}
.benefit-list{
  display: flex;
  justify-content: space-between;
}
.benefit-list li{
  max-width: 490px;
  width: calc((100% - 20px)/2);
  background: #11193B;  
}
.benefit-list .txt{
  padding: 20px 10px;
  font-size: 1.8rem;
  line-height:1.4;
  color: #E8C53B;
  text-align: center;  
}
.benefit-list li:nth-child(3) .txt{
  padding-top: 30px;  
}


/* cont-nav
-----------------------------------------------------------------*/
.cont-nav{
	padding: 60px 0;
	background: #FFF;
}
.cont-nav .cont-nav-list{
	display: flex;
	justify-content: center;	
}
.cont-nav .cont-nav-list li{
	position: relative;
	margin: 0 10px;	
}
.cont-nav .cont-nav-list li a{
	display: block;
	color: #FFF;
	font-family: "Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;
}
.cont-nav .cont-nav-list .btn-nxt{
	position: absolute;
	left: 20px;
	bottom: 0;
	transform: translateY(50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 228px;
	width: calc( 100% - 20px);
	margin-right: 20px;
	height: 38px;
	padding: 0 15px;
	background: #11193B;
	border: 1px solid #11193B;
	font-size: 1.4rem;
	line-height:1;
	transition: .3s;	
}
.cont-nav .cont-nav-list .btn-nxt span{
	display: block;	
}
.cont-nav .cont-nav-list .btn-nxt span+span{
	background:url(../image/ico_nxt_ov.svg) no-repeat;
	background-size: 100% auto;
	transform: translateY(2px);	
}
.cont-nav .cont-nav-list li a:hover .btn-nxt{
		background: #FFF;
		color: #11193B;
}
.cont-nav .cont-nav-list li a:hover .btn-nxt span+span img{
	opacity:0;	
}

/* notes
-----------------------------------------------------------------*/
div.notes{
  padding: 45px 0 40px;
  background: #11193B;
  font-size: 1.3rem;
  color: #FFF;
  line-height:1.7;
  font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;  
}


/* clearfix
-----------------------------------------------------------------*/
.cf:after{
	clear :both;
	content: "";
	display: block;
	height: 0;
}
.cf{
	zoom:1;
}



@media screen and (max-width: 1430px) {
  
  #Content {
    margin-top: 50px;
  }  
}

/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  #Page {
    min-width: 320px;	
  }
  #Page img{
    width: 100%;
    height: auto;
  }
  .pc{
    display: none;	
  }
  .sp{
    display: block;	
  }
  img.sp,
  br.sp{
    display: inline;
  }


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
  .inner{
    max-width: initial;
		padding: 0 20px;	
  }


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

  

/* page-ttl
-----------------------------------------------------------------*/
  .ttl-benefit {
    margin-bottom: 10px;
    font-size: 1.5rem;
    letter-spacing: .2em;
  }
  .page-ttl{
    height: 200px;
  }
  .page-ttl::after{
    bottom: -20px;
    width: 75%;
    height: 115px;
  }
  .page-ttl .page-hd{
    bottom: -5px;
  }
  .page-ttl .page-hd div{
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
    color: #FFF;  
  }
  .page-ttl .page-hd h2{
    margin-bottom: 15px;
  }
  #Page .page-ttl .page-hd h2 img{
    width: auto;
    height: 30px; 
  }
  .page-ttl .page-hd .ttl{
    margin-bottom: 12px;
    font-size: 1.7rem;
  }
  .page-ttl .page-hd .txt{
    font-size: 1.2rem;
  }
  .page-ttl .caption{
    font-size: 1rem;
  }
  



/* btn-req
-----------------------------------------------------------------*/
  .btn-req a{
      max-width: 300px;
      height: 55px;
      line-height: 55px;
      font-size: 1.7rem;
  }


/* btn-req
-----------------------------------------------------------------*/
  .btn-res a{
      max-width: 300px;
      height: 55px;
      line-height: 55px;
      font-size: 1.7rem;
  }
    
/* btn-on
-----------------------------------------------------------------*/
  .btn-on a{
      max-width: 300px;
      height: 55px;
      line-height: 55px;
      font-size: 1.7rem;
  }
  

/* btn-group
-----------------------------------------------------------------*/
  .btn-group{
    display: block;
  }
  .btn-group li{
    max-width: 300px;
    width: 100%;
    margin: 0 auto;  
  }
  .btn-group li+li{
    margin-top: 10px; 
  }
  .btn-group li a{
    height: 55px;
    line-height:55px;
    font-size: 1.6rem;
  }

  
/* btn_w
-----------------------------------------------------------------*/
  .btn_w a{
      max-width: 300px;
      height: 55px;
      line-height: 55px; 
      font-size: 1.7rem;   
  }


/* benefit-list
-----------------------------------------------------------------*/

  .benefit-list{
    margin-bottom: 30px;  
  }
  .benefit-list{
    flex-wrap: wrap;
  }
  .benefit-list li{
    max-width: initial;
    width: calc(50% - 5px);
  }
  .benefit-list li:nth-child(3){
    width: 100%;
    margin-top: 10px;  
  }
  .benefit-list .txt{
    padding: 10px 10px 15px; 
    font-size: 1.4rem;
  }
  .benefit-list li:nth-child(3) .txt{
    padding: 10px 10px 15px;  
  }


/* cont-nav
-----------------------------------------------------------------*/
	.cont-nav{
		padding: 40px 20px 60px;
	}
	.cont-nav .cont-nav-list{
		display: block;
	}
	.cont-nav .cont-nav-list li{
		width: 100%;
		margin: 0;	
	}
	.cont-nav .cont-nav-list li+li{
			margin-top: 35px;	
	}
	.cont-nav .cont-nav-list .btn-nxt{
		max-width: 220px;
		height: 36px;
		padding: 0 15px;
		font-size: 1.3rem;
	}
	.cont-nav .cont-nav-list .btn-nxt span+span{
		max-width: 56px;
		transform: translateY(2px);	
	}



/* notes
-----------------------------------------------------------------*/
  div.notes{
    padding: 30px 0;
    font-size: 1.1rem;


}
}