@charset "utf-8";
/*******************************/
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
word-break:break-all; /*半角英数改行可*/
font-family:"Century Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
html{
overflow-y:scroll;
}
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
body{
font-size:1rem;
line-height:1.6;
background-color:#fff;
color:#333;
animation:fadeIn 1s ease 0s 1 normal;
-webkit-animation:fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}


div.wrapper{
margin:0 auto;
width:90%;
border-left:5px #C5BAFE solid;
padding:2rem 0 2rem 2rem;
}
img{
vertical-align:top;
}

/********************************************************************/
/********************************************************************/
a#logo-title-en{
display:block;
overflow:hidden;
text-align:center;
padding:.5rem 0;
line-height:1.0;
background:#C5BAFE;
}
a#logo-title-en:hover{
background:rgba(0,0,0,.1);
}
a#logo-title-en img{
width:90%;
}


header{
display:flex;
justify-content:space-between;
flex-direction:row;/*横並び*/
/*flex-direction:column;/*縦並び*/
padding-top:2rem;
margin:0 auto;
width:90%;
}
header img{
width:100%;
}
header div{
display:block;
overflow:hidden;
width:calc(70% - 2rem);
position:relative;
}
header div img.logo-title{
position:absolute;
left:0;
bottom:0;
}

header nav{
display:flex;
flex-direction:column;
width:30%;
}
header nav ul,
header nav li{
list-style:none;
margin:0;
padding:0;
}
header nav ul:first-of-type{
margin-bottom:auto;/*上配置*/
}
header nav ul:last-of-type{
margin-top:auto;/*下配置*/
}
header nav a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
line-height:1.0;
padding:1rem 0;
margin-top:1px;
background:rgba(0,0,0,.1);
color:#333;
}
header nav a:hover{
font-weight:bold;
background:#C5BAFE;
}


/********************************************************************/
/********************************************************************/



/******************************
ヘッダー
******************************/
div.head{
display:table;
table-layout:fixed;
margin:0 auto;
width:90%;
}
div.head div{
display:table-cell;
width:50%;
margin:0;
padding:0;
line-height:1.0;
position:relative;
}
div.head img{
width:100%;
margin-top:10px;
}
div.head div h1{
margin:0;
padding:0;
position:absolute;
right:0;
bottom:0;
width:100%;
}
div.head div div.navi{
position:absolute;
top:10px;
right:0;
width:100%;
}
div.head div div.navi a{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
float:left;
font-size:12px;
text-align:center;
text-decoration:none;
margin:0 0 1px 1px;
padding:15px 0;
background-color:#666;
color:#fff;
width:calc(100% / 3 - 1px);
-webkit-transition:0.2s;
transition:0.2s;
border-radius:4px;
}
div.head div div.navi a:hover{
background-color:#C5BAFE;
}

div.head div div.navi a.forstaff{
background-color:#ff9900;
}

/******************************
フッター
******************************/
div.footer{
margin:0 auto;
width:100%;
margin:30px 0 0 0;
padding:5% 5% 10% 5%;
background-color:#666;
color:#fff;
position:relative;
}

/******************************
アイテム
******************************/
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
font-weight:normal;
line-height:1.0;
}

h2{
position:relative;
display:block;
overflow:hidden;
font-size:240%;
margin:2rem 0 0 0;
padding:30px 5%;
background-color:#C5BAFE;
color:#fff;
}
h2:after{
position:absolute;
top:0;
right:0;
content:'';
width:0;
border-width:0 35px 35px 0;
border-style:solid;
border-color:#fff #fff #ddd #ddd;
box-shadow:-1px 1px 2px rgba(0, 0, 0, .1);
}
h3{
font-size:160%;
font-weight:bold;
margin:3rem 0 0 0;
padding:10px 0;
border-bottom:1px #ccc dashed;
}
h4{
font-size:120%;
font-weight:bold;
}

a{
color:#336699;
}
a:hover{
text-decoration:none;
}
hr{
border:none;
border-bottom:1px #ccc solid;
height:1px;
margin:1em 0;
}
ul{
padding-left:1.2em;
}

img.flow{
float:left;
margin-right:20px;
}

/******************************
メールフォーム開閉リンク
******************************/
a.showlink{
display:block;
overflow:hidden;
line-height:1.0;
text-decoration:none;
color:#00ccff;
}
a.showlink img{
width:100px;
height:100px;
vertical-align:top;
transition:transform 2s;		
-webkit-transition:-webkit-transform 2s;		
}
a.showlink:hover img{
transform:rotate(720deg);		
-webkit-transform:rotate(720deg);		
}
a.showlink:hover{
color:#ff9900;
}

/******************************
フォーム
******************************/
input[type=text],
input[type=email],
input[type=password],
textarea,
select{
margin:10px 0;
padding:10px;
width:100%;
outline:none;
border:1px #ccc solid;
}
input[type=submit],
input[type=reset],
input[type=button]{
margin:10px 0;
padding:10px;
cursor:pointer;
}

/******************************
SSL
******************************/
div.secure img{
float:right;
margin:0 0 0 10px;
width:30%;
}
div.secure li{
list-style:circle;
font-size:85%;
margin:0;
}

/******************************
ページトップへ
******************************/
a#pageTop{
position:fixed;
bottom:0;
left:0;
display:block;
overflow:hidden;
z-index:999;
width:100%;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
font-size:14px;
background-color:rgba(0,0,0,0.6);
color:#fff;
}
a#pageTop:hover{
text-decoration:none;
background-color:rgba(0,0,0,0.3);
}

/******************************
Responcive
******************************/
@media (max-width:1000px){

	header{
		flex-direction:column;/*縦並び*/
	}
	header div,
	header nav{
		display:block;
		width:100%;
	}
	header nav ul:first-of-type,
	header nav ul:last-of-type{
		margin-top:1rem;
	}



h2{
font-size:200%;
padding:20px 5%;
}
h3{
font-size:160%;
}
}

@media (max-width:728px){
img.flow{
float:none;
margin-right:0;
}
}

@media (max-width:500px){
body{
font-size:100%;
line-height:1.4;
}
div.wrapper{
width:90%;
border-left:0;
padding:3% 0;
}
img.flow{
width:100%;
}

div.secure img{
float:none;
margin:0;
width:100%;
}
}

/******************************
******************************/