@charset "utf-8";

a {outline: none;}
a:link {text-decoration: none; color: #333333;}
a:visited {text-decoration: none; color: #333333;}
a:hover {text-decoration: none; color: #dd0125;}
a:active {text-decoration: none; color: #dd0125;}
a:hover img{opacity:0.7; filter:alpha(opacity=70); -ms-filter:“alpha(opacity=70)”;}
a:focus{ outline:none; }

/*==========================================
 Bread
===========================================*/
.bread{margin-top:4px; margin-bottom:4px; margin-left:auto; margin-right:1px;}
.bread ol{margin:0; padding:0; list-style: none;}
.bread li a{display: inline-block;
padding: 5px;
color: #ffffff;
font-size: 0.88em;
text-decoration: none;}
.bread li a:hover{background-color: #540215;}
.bread ol:after{content: "";
display: block;
clear: both;}
.bread li{float: left; width: auto;}
.bread li:after	{content: '\003e';
margin-left: 10px;
margin-right: 10px;
color: #ffffff;}



/*==========================================
 pagetop
===========================================*/
#pagetop {position: fixed; bottom: 18px; right: 8px; z-index: 8889;}
#pagetop .fas{color:#ffffff;}
#pagetop a {background: #fec013;
/*border: solid 1px #ffffff;*/
box-shadow: 1px 1px 4px #333333;
text-decoration: none;
color: #ffffff;
/*height:80px;
width: 80px;*/
text-align: center;
margin: 0 auto 0 auto;
padding: 10px;
border-radius: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;}
#pagetop a:hover {text-decoration: none; background: #cccccc;}


/*==========================================
 subContainer
===========================================*/
/* 左からスライドして表示される領域 ------------------------------*/
#subContainer {
position: fixed;
left: -288px;
top: 0;
z-index: 8888;
width: 288px;
height: 100%;
background-color: rgba( 221, 221, 221, 0.8);
-webkit-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
behavior: url(PIE.htc);}
#subContainer.appeared {left: 0;}
#mainNavigation {position: relative; top:60px;}
#mainNavigation li {padding-top: 2px; margin-bottom: 2px;}
#mainNavigation a {
display: block;
padding: 18px;
overflow: hidden;
color: #333333;
border-left: 0.5em solid #cccccc;}

#mainNavigation .separate a {padding-top: 1.8em; padding-bottom: 1.8em;}
#mainNavigation i {
display: inline-block;
width: 100%;
vertical-align: middle;
line-height: 1;
color: inherit;}

#mainNavigation span {
display: inline-block;
font-size: 1.14em;
line-height: 1;
vertical-align: middle;
width: 88%;
color: inherit;
}
#mainNavigation a,
#mainNavigation a:hover i,
#mainNavigation a:hover span {
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}

/*#mainNavigation .nav_000 a {padding-left: 18px;}*/

#mainNavigation .nav_000 a:hover {
color: #ffffff;
border-color: #5AABD8;
background-color: #81C8E4;
}

#mainNavigation .nav_001 a {
color: #ffffff;
border-color: #f04d50;
background-color: #f1797b;
}
#mainNavigation .nav_001 a:hover  {
color: #ffffff;
border-color: #f04d50;
background-color: #f04d50;
}


#mainNavigation .nav_002 a:hover {
color: #717FE7;
border-color: #717FE7;
background-color: #F4F5FF;
}

#mainNavigation .mainNavigation_trigger {text-align:center;
/* ナビゲーションを表示・非表示させるボタン */
position: absolute;
bottom: 0;
right: -4em;
width: 4em;
border-radius: 0 8px 8px 0;
background-color: rgba( 221, 221, 221, 0.8);
behavior: url(PIE.htc);
}

#mainNavigation .mainNavigation_trigger a {
border: none;
padding: 1em 1em 0.75em 0.75em;
cursor: pointer;
}
#mainNavigation .mainNavigation_trigger i {
width: auto;
}


/*==========================================
 btn001
===========================================*/
a.btn001{display: inline-block;
width: 100%;
margin: 8px auto;
padding: 4px 0;
border: 1px solid #cccccc;
background: transparent;
color:#ffffff;
text-align: center;
font-size: 1.4em;
font-weight: bold;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;
}
a.btn001 span{display: block; font-size: 1em; font-weight: normal;}
a.btn001 .fas{margin:3px;}
/*==========================================
 banner001
===========================================*/
a.banner001 {position: relative;
z-index: 2;
background: #ff5151; 
}
a.banner001::after {
display: block;
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
background: rgba(255,255,255,.5);
transition: .3s;
}
a.banner001:hover::after {
width: 100%;
height: 100%;
}


/*==========================================
 btn001start
===========================================*/
a.btn001start{display: inline-block;
width: 100%;
margin: 8px auto;
padding: 11px 0;
border: 3px solid #cccccc;
background: transparent;
color:#ffffff;
text-align: center;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;
}
a.btn001start span{display: block; font-size: 0.98em; font-weight: normal;}
a.btn001start .fas{margin:3px;}
/*==========================================
 banner001start
===========================================*/
a.banner001start {position: relative;
z-index: 2;
background: #ff0000; 
}
a.banner001start::after {
display: block;
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
background: rgba(255,255,255,.5);
transition: .3s;
}
a.banner001start:hover::after {
width: 100%;
height: 100%;
}




/* btn002s ===========================================*/
a.btn002s{display: inline-block;
width: 100%;
margin: 0 auto;
padding: 8px 0;
border: 1px solid #bbbbbb;
background: transparent;
color:#333333;
text-align: center;
font-size: 1em;
/*font-weight: bold;*/
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;}
a.btn002s span{display: block; font-size: 0.89em;}

/* btn002 ===========================================*/
a.btn002{display: inline-block;
width: 100%;
margin: 38px auto;
padding: 8px 0;
border: 1px solid #5CADDA;
background: transparent;
color:#5CADDA;
text-align: center;
font-size: 1.28em;
font-weight: normal;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;}
a.btn002 span{display: block; font-size: 1.18em; font-weight: bold;}
a.btn002 .fas{margin:0 8px;}
/* banner002 ===========================================*/
a.banner002:hover {background: #5CADDA; color: #ffffff;}


/* btn003 ===========================================*/
a.btn003{display: inline-block;
width: 100%;
margin: 38px auto;
padding: 8px 0;
border: 1px solid #ff5151;
background: transparent;
color:#ff5151;
text-align: center;
font-size: 1.28em;
font-weight: normal;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;}
a.btn003 span{display: block; font-size: 1.18em; font-weight: bold;}
a.btn003 .fas{margin:0 8px;}
/* banner003 ===========================================*/
a.banner003:hover {background: #ff5151; color: #ffffff;}


/* btn003yoko===========================================*/
a.btn003yoko{display: inline-block;
width: 100%;
margin: 8px auto;
padding: 4px 0;
border: 1px solid #339acc;
background: transparent;
color:#ffffff;
text-align: center;
font-size: 1.28em;
font-weight: bold;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;
}

a.btn003yoko span{display: block; font-size: 1.18em;}

/* banner003yoko===========================================*/
a.banner003yoko {position: relative;
z-index: 2;
background: #339acc; 
}
a.banner003yoko::after {
display: block;
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
background: rgba(255,255,255,.5);
transition: .3s;
}
a.banner003yoko:hover::after {
width: 100%;
height: 100%;
}


/* btn003tate===========================================*/
a.btn003tate{display: inline-block;
width: 100%;
margin: 8px auto;
padding: 4px 0;
border: 1px solid #47b6c9;
background: transparent;
color:#ffffff;
text-align: center;
font-size: 1.28em;
font-weight: bold;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;
}

a.btn003tate span{display: block; font-size: 1.18em;}

/* banner003tate===========================================*/
a.banner003tate {position: relative;
z-index: 2;
background: #47b6c9; 
}
a.banner003tate::after {
display: block;
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
background: rgba(255,255,255,.5);
transition: .3s;
}
a.banner003tate:hover::after {
width: 100%;
height: 100%;
}