@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:10px;
}


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

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

/* 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:#333;
}

.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);
}



/*--------------------------------------------------------------------------
   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:830px;
	margin:0 auto;
	padding: 0 15px;
}

/*--------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------*/
#Header{
	padding: 15px 0 0px;
}
#Header .hd{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom: 15px;
}
#Header h1{
	font-size:1.8rem;
	font-weight:normal;
	line-height:1;
}
#Header h1 img{
	width: 60%;
	margin-left:20%;
	text-align:center !important;
}

#Header .sub-nav li{
	display:inline-block;
	margin-left: 8px;
}
#Header .sub-nav a{
	display:inline-block;
	height: 23px;
	width: 80px;
	padding-top: 2px;
	border-radius:3px;
	background : -moz-linear-gradient(50% 100% 90deg,rgba(0, 136, 129, 1) 0%,rgba(0, 162, 154, 1) 100%);
	background : -webkit-gradient(90deg, rgba(0, 136, 129, 1) 0%, rgba(0, 162, 154, 1) 100%);
	background : linear-gradient(0deg, rgba(0, 136, 129, 1) 0%, rgba(0, 162, 154, 1) 100%);
	text-align:center;
	font-size:1.1rem;
	letter-spacing:1px;
	color:#FFF;
}
#Header .sub-nav li:first-child a{
	background : -moz-linear-gradient(50% 100% 90deg,rgba(234, 85, 20, 1) 0%,rgba(243, 152, 0, 1) 100%);
	background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(234, 85, 20, 1) ),color-stop(1,rgba(243, 152, 0, 1) ));
	background : linear-gradient(0deg, rgba(234, 85, 20, 1) 0%, rgba(243, 152, 0, 1) 100%);
}
#Header .sub-nav .entry a{
	background : -moz-linear-gradient(50% 100% 90deg,rgba(234, 85, 20, 1) 0%,rgba(243, 152, 0, 1) 100%);
	background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(234, 85, 20, 1) ),color-stop(1,rgba(243, 152, 0, 1) ));
	background : linear-gradient(0deg, rgba(234, 85, 20, 1) 0%, rgba(243, 152, 0, 1) 100%);
}
/*#Header .yokoku dt{
	float: left;
	display:inline-block;
	margin-right: 10px;
	padding: 10px 10px 10px;
	border:1px solid #000;
	font-size:2.5rem;
	line-height:1;
}
#Header .yokoku dd{
	font-size:1.2rem;
	line-height:1.3;
}
*/

/* ---------------------------------------------------------------------------
			#Gnav	
				グローバルナビゲーション
--------------------------------------------------------------------------- */
#Gnav ul{
	display:flex;
	border-left:1px solid #9FA0A0;
}
#Gnav ul li{
	width: 13.5%;
	border-right:1px solid #9FA0A0;
}
#Gnav ul li.nav03{
	width: 20%;	
}
#Gnav ul li.nav07 {
    width: 30%;
    padding: 0px 0 0px 0;
}
@media screen and (max-width: 768px) {
    #Gnav ul li.nav07 {
        width: 100%;
        padding: 0px 0 0 0;
    }
}
#Gnav ul li a{
	position: relative;
	display:block;
	overflow:hidden;
	width: 100%;
	padding: 5px 0;
	font-size:1.1rem;
	text-align:center;	
}
#Gnav ul li a::after{
	position: absolute;
	left:0;
	bottom:0;
	content:"";
	display:block;
	width: 100%;
	height: 0;
	background:#00A29A;
	transition:.2s;	
}
#Gnav ul li.current a,
#Gnav ul li a:hover{
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(217,217,217,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(217,217,217,1) 100%); 
}
#Gnav ul li.current a::after,
#Gnav ul li a:hover::after{
	height: 4px;	
}
#Gnav ul li a span{
	display:block;
	padding-top: 2px;
        font-size: 10px;
}
#Gnav ul li.nav07 a span {

}
@media screen and (max-width: 768px) {
#Gnav ul li.nav07 a span {

}
}
#Gnav ul li a.comingsoon{
	background:#DCDDDD;
	opacity:.6;
}
#Gnav ul li a.comingsoon:hover{
	background:#DCDDDD;
}
#Gnav ul li a.comingsoon:hover::after{
	height: 0;
}
#Gnav .sub-nav{
	display:none;
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content {
	
}

/* breadcrumb */
.breadcrumb{
	max-width:830px;
	margin: 0 auto;
	padding: 10px 15px 0;
	font-size:1rem;	
}
.breadcrumb li{
	display:inline-block;	
}
.breadcrumb li a::after{
	display:inline-block;
	padding: 0 7px;
	content:">";
}
.page-hd .bc{
    position: absolute;
    left: 0;
    bottom: -25px;
    z-index: 10;
    width: 100%;	
}

/* page-ttl */
.page-hd{
	position: relative;	
}
.page-ttl{
	position: relative;
	height: 400px;	
}
.page-ttl span{
	position: absolute;
	left0;
	top:50%;
	transform:translateY(-50%);
	display:block;
	width: 100%;
	text-align:center;		
}

/* タイトル類 */

.txt-lead{
	margin-bottom: 30px;
	font-size:2.6rem;
	color:#00A29A;
	text-align:center;
	line-height:1.4;	
}
.txt-lead + .txt{
	font-size:1.3rem;
	line-height:2.2;
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;	
}
.sec-ttl{
	position: relative;
	margin-bottom: 40px;
	padding-bottom: 20px;
	text-align:center;	
}
.sec-ttl::after{
	position: absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	display:block;
	content:"";
	width: 58px;
	height: 2px;
	background:#00A29A;	
}
.sec-lead{
	margin-bottom: 60px;
	font-size:3.4rem;
	line-height:1.4;
	color:#00A29A;
	font-weight:600;
	text-align:center;		
}


/* layout */
.layout-box{
	display:flex;
	justify-content:space-between;
	align-items:center;		
}

/* notes */
.notes,
.note{
	font-size:1.2rem;
	line-height:1.5;
}
.cap{
	display:block;
	padding-top: 2px;
	font-size:1.2rem;
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;	
	text-align:right;
}


/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
#Footer{
	padding: 50px 0;
	border-top:1px solid #C9CACA;
}
#Footer .gotop{
	display:none;
	position:fixed;
	right:25px;
	bottom:25px;	
}
#Footer .gotop.bottom{
	bottom:263px;	
}
#Footer .btn-req{
	margin-bottom: 20px;
	text-align:center;	
}
#Footer .btn-res{
	margin-bottom: 70px;
	text-align:center;	
}
#Footer .developer{
	display:flex;
	justify-content:space-between;
	max-width: 726px;
	margin: 0 auto;
}
#Footer .developer li p+p{
	padding-top: 18px;	
}

/* clearfix
-----------------------------------------------------------------*/
.cf:before,
.cf:after{
	content:"";
	display:table;
}
.cf:after{
	clear:both;
}
.cf{
	zoom:1;
}