@charset "utf-8";

/*==================================================
	css reset
==================================================*/

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

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
	width:100%;
	margin:0 auto;
line-height: 1.2;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}



/*--------------------------------------------------
	base
--------------------------------------------------*/
/*color*/
.text-alert{color:#E60012;}
.text-white{color:#fff;}
.text-black{color:#000;}
.text-em{color:#f1764b;}
.text-gray{color:#4c4c4c;}
.text-l-gray{color:#777;}
.text-link{color:#297bd2;}
.text-red{color:#E60012;}

/*font-size*/
.text-xs{font-size:11px;}
.text-sm{font-size:12px;}
.text-md{font-size:13px;}
.text-lg{font-size:16px;}
.text-xlg{font-size:18px;}
.text-xxlg{font-size:20px;}

/*font-style*/
.text-normal{font-weight:normal;}
.text-bold{font-weight:bold;}

/*layout*/
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.text-marker{background: linear-gradient(transparent 60%, #ffff66 60%);}

.valign-middle{vertical-align:middle;}
.valign-bottom{vertical-align:bottom;}

.box-left{float:left;}
.box-right{float:right;}

/*margin*/
.mt0{margin-top:0;}
.mt5{margin-top:5px;}
.mt15{margin-top:15px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}

.mr0{margin-right:0;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr40{margin-right:40px;}
.mr50{margin-right:50px;}
.mr80{margin-right:80px;}

.mb0{margin-bottom:0px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}

.ml0{margin-left:0px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}
.ml60{margin-left:50px;}
.ml80{margin-left:80px;}

/*padding*/
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}

.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr40{padding-right:40px;}
.pr50{padding-right:50px;}

.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}

.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl40{padding-left:40px;}
.pl50{padding-left:50px;}

/*header*/
#header{min-width:1000px;margin:0 0 5px;}
    #header .container-header{width:1000px;margin:0 auto;text-align:left;}
    #header .logo{float:left;}
    #header .logo img{display:block;}
    #header .tagline{float:left;margin:8px 0 0 15px;}
    
/*title*/
.h1{font-size:24px;}
.h2{font-size:22px;}
.h3{font-size:18px;}
.h4{font-size:18px;}
.h5{font-size:18px;}

.title{margin-top:40px;}

/*container*/
.container{display:block;width:1000px;margin:0 auto 60px;text-align:left;}
.container-narrow{width:920px;}
.block-center{display:block;margin-left:auto;margin-right:auto;}

/*button*/
.button{cursor:pointer;}
.btn{text-align:center;border:1px solid;border-radius:3px;white-space:nowrap;display:inline-block;box-sizing:border-box;}
    .btn-default{color:#666666;background:#f2f2f2;border-color: #cccccc;}
            .btn-default:hover{background:#fafafa;text-decoration:none;}

    .btn-primary{color:#fff;background:#f1764b;border-color: #f1764b;box-shadow:0px 2px 2px rgba(0,0,0,0.1);}
            .btn-primary:hover{background:#f4916f;text-decoration:none;}

    .btn-secondary{color:#4d4d4d;background:#ffca3a;border-color:#ffca3a;box-shadow:0px 2px 2px rgba(0,0,0,0.1);}
            .btn-secondary:hover{background:#ffd561;text-decoration:none;}

    .btn-tertiary{color:#fff;background:#10a4bb;border-color:#10a4bb;box-shadow:0px 2px 2px rgba(0,0,0,0.1);}
            .btn-tertiary:hover{background:#2ac2da;text-decoration:none;}

    .btn-image{color:#000;background:#fff;border:none;box-shadow:0px 2px 2px rgba(0,0,0,0.1);}
            .btn-image:hover{opacity: 0.7;text-decoration:none;}

    .btn-disabled{color:#666666;background:#b3b3b3;border-color:#b3b3b3;box-shadow:0px 2px 2px rgba(0,0,0,0.1);}
        .btn-disabled{color:#666666 !important;background:#b3b3b3 !important;border-color:#b3b3b3 !important;cursor:default;text-decoration:none !important;}

    .btn-facebook{color:#ffffff;background:#4561a0;border-color: #4561a0;box-shadow:0px 2px 2px rgba(0,0,0,0.1);display: block;}
            .btn-facebook:hover{background-color:#6a81b3;text-decoration:none;}

    .btn-twitter{color:#ffffff;background:#1da1f2;border-color: #1da1f2;box-shadow:0px 2px 2px rgba(0,0,0,0.1);display: block;}
            .btn-twitter:hover{background-color:#69c0f6;text-decoration:none;}

    .btn-qiita{color:#ffffff;background:#59bb0c;border-color: #59bb0c;box-shadow:0px 2px 2px rgba(0,0,0,0.1);display: block;}
            .btn-qiita:hover{background-color:#88cc4c;text-decoration:none;}

    .btn-close{width:22px;height:22px;text-indent:-9999px;background:url(/images/common/close.png) right 0 no-repeat;}
            .btn-close a{display:block;padding:5px;}

.btn-wide{width:300px;}
.btn-normal{width:160px;}
.btn-narrow{width:100px;}
.btn-select{width:120px;}
.btn-horizontal{width:220px;}

.btn-md{font-size:inherit;height:30px;line-height:30px;padding-right:10px;padding-left:10px;}
.btn-lg{font-size:18px;height:36px;line-height:36px;padding-right:10px;padding-left:10px;}
.btn-xlg{font-size:18px;height:40px;line-height:40px;padding-right:10px;padding-left:10px;}
.btn-xxlg{font-size:18px;height:50px;line-height:50px;padding-right:10px;padding-left:10px;}

/*box*/
.box{border:1px solid #f8f8f8; background:#f8f8f8;padding:10px 0;}
.box-alert{padding:10px 20px 20px 20px;background:#fff1f1;border:1px solid #e61919;border-radius:3px; margin:0 10px}
.box-btn{padding:5px 15px 5px 5px;border:2px solid #f86b75;background:#FDEEEF; border-radius:10px; width:auto; display:inline-block; margin-top:5px;}
.box-default{background-color:#f2f2f2;}
.box-message{padding:10px 15px;background:#fff1f1;border:1px solid #e61919;border-radius:3px;}
.box-message-restart{padding:10px 15px;background:#fff8f6;border:1px solid #f1764b;border-radius:3px;}
.box-message-restart p{color:#f1764b;}
.box-secondary{background:#ffffff; padding:0 5px 5px 5px;margin:10px;}
.box-info{background-color:#fff9e9; padding:10px 10px 20px 10px; margin:10px auto; min-height:90px;}
.box-list{padding:10px;background:#f8f8f8;border:1px solid #666666; width:32.2%; margin:0 5px ; text-align:center;}
.box-step{padding:10px;background:#6db7d5;margin:0; text-align:center; color:#FFFFFF; font-size:18px; font-weight:bold;}

.box-xsm{padding:5px;}
.box-sm{padding:10px;}
.box-md{padding:15px;}
.box-lg{padding:20px;}
.box-xlg{padding:25px;}
.box-narrow{padding:0 140px;}

/*link*/
.link{padding-right:30px;}
.link-more{font-size:16px;text-align:center;height:46px;line-height:46px;background-color:#fafafa;border:1px solid #e6e6e6;display:block;}
    .link-more:hover{background-color:#ffffff;}
	
a{cursor: pointer;}
a:visited { text-decoration: none; color: #660099;}
/*--------------------------------------------------
 clear
--------------------------------------------------*/
.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

/*--------------------------------------------------
Default
--------------------------------------------------*/
body{
	color:#222222;
}

a:link { text-decoration: none; color: #0066cc;}
a:visited { text-decoration: none; color: #660099;}
a:active { text-decoration: underline; color: #0066cc;}
a:hover { text-decoration: underline; color: #0066cc;}

a.pagelink{ text-decoration: none; color: #0066cc;}
a.pagelink:visited { text-decoration: none; color: #660099;}
a.pagelink:active { text-decoration: underline; color: #0066cc;}
a.pagelink:hover { text-decoration: underline; color: #0066cc;}

#contents h2{
padding: 0.1em 0.5em;/*文字の上下 左右の余白*/
color: #6db7d5;/*文字色*/
border-left: solid 10px #6db7d5;/*左線*/
border-bottom: solid 3px #b2e1f4;/*下線*/
position: relative;
display:block;
clear:both;
margin:30px auto 10px auto;
}


#contents h3{
position: relative;
display: inline-block;
width:95%;
color:#f86b75;
margin:30px auto 10px auto;
padding:0 2.5%;
clear:both;
}
/*
#contents h3:before, #contents h3:after{
content: '';
position: absolute;
top: 45%;
display: inline-block;
width: 35%;
height: 5px;
background-color: #f86b75;
}
*/
#contents h3:before {left:0;}
#contents h3:after {right: 0;}

/*--------------------------------------------------
 head
--------------------------------------------------*/
#headerArea{
	width:100%;
	margin:0px auto;
}

#logoArea{
	float:left;
}

.btn_logo{
	float:left;
}

.btn_logo img{
	width:80%;
}
	
#head_info{
	display:block;
	float:right;
	border:2px solid #6db7d5;
	padding:10px;
}

#head_info p{
	font-weight:bold;
	color:#3e9abf;
	text-align:center;
}

#head_info li{
	font-weight:bold;
	margin-top:3px;
	font-size:95%;
}

#head_info li.font_s12{
	font-size:80%;
}

span.info_item{
	display:inline-block;
	width:55px;
}

#gnav{
	clear:both;
}


li.gnav_menu a:link{
	width:12.1%;
	height:45px;
	margin:10px 0.4% 0 0;
	float:left;
    list-style:none;
	color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#77cbe5+0,3e9abf+100 */
background: #77cbe5; /* Old browsers */
background: -moz-linear-gradient(top, #77cbe5 0%, #3e9abf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #77cbe5 0%,#3e9abf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #77cbe5 0%,#3e9abf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77cbe5', endColorstr='#3e9abf',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu a:hover{
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2e1f4+0,6db7d5+100 */
background: #b2e1f4; /* Old browsers */
background: -moz-linear-gradient(top, #b2e1f4 0%, #6db7d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b2e1f4 0%,#6db7d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b2e1f4 0%,#6db7d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1f4', endColorstr='#6db7d5',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu a:visited {
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2e1f4+0,6db7d5+100 */
background: #b2e1f4; /* Old browsers */
background: -moz-linear-gradient(top, #b2e1f4 0%, #6db7d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b2e1f4 0%,#6db7d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b2e1f4 0%,#6db7d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1f4', endColorstr='#6db7d5',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu a:active {
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2e1f4+0,6db7d5+100 */
background: #b2e1f4; /* Old browsers */
background: -moz-linear-gradient(top, #b2e1f4 0%, #6db7d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b2e1f4 0%,#6db7d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b2e1f4 0%,#6db7d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1f4', endColorstr='#6db7d5',GradientType=0 ); /* IE6-9 */
}
/*Amelia*/
li.gnav_menu2 a:link{
	width:12.1%;
	height:45px;
	margin:10px 0.4% 0 0;
	float:left;
    list-style:none;
	color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5727a+0,e60012+100 */
background: #e5727a; /* Old browsers */
background: -moz-linear-gradient(top, #e5727a 0%, #e60012 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e5727a 0%,#e60012 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e5727a 0%,#e60012 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5727a', endColorstr='#e60012',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu2 a:hover{
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fca397+0,fd7e6c+100 */
background: #fca397; /* Old browsers */
background: -moz-linear-gradient(top, #fca397 0%, #fd7e6c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fca397 0%,#fd7e6c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fca397 0%,#fd7e6c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca397', endColorstr='#fd7e6c',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu2 a:visited {
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fca397+0,fd7e6c+100 */
background: #fca397; /* Old browsers */
background: -moz-linear-gradient(top, #fca397 0%, #fd7e6c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fca397 0%,#fd7e6c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fca397 0%,#fd7e6c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca397', endColorstr='#fd7e6c',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu2 a:active {
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fca397+0,fd7e6c+100 */
background: #fca397; /* Old browsers */
background: -moz-linear-gradient(top, #fca397 0%, #fd7e6c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fca397 0%,#fd7e6c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fca397 0%,#fd7e6c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca397', endColorstr='#fd7e6c',GradientType=0 ); /* IE6-9 */
}
/*mydata*/
li.gnav_menu3 a:link{
	width:12.1%;
	height:45px;
	margin:10px 0.4% 0 0;
	float:left;
    list-style:none;
	color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9ba3b+0,fcac00+100 */
background: #f9ba3b; /* Old browsers */
background: -moz-linear-gradient(top, #f9ba3b 0%, #fcac00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f9ba3b 0%,#fcac00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f9ba3b 0%,#fcac00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ba3b', endColorstr='#fcac00',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu3 a:hover{
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7d694+0,f9c254+100 */
background: #f7d694; /* Old browsers */
background: -moz-linear-gradient(top, #f7d694 0%, #f9c254 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f7d694 0%,#f9c254 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f7d694 0%,#f9c254 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d694', endColorstr='#f9c254',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu3 a:visited {
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7d694+0,f9c254+100 */
background: #f7d694; /* Old browsers */
background: -moz-linear-gradient(top, #f7d694 0%, #f9c254 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f7d694 0%,#f9c254 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f7d694 0%,#f9c254 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d694', endColorstr='#f9c254',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu3 a:active {
color:#ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7d694+0,f9c254+100 */
background: #f7d694; /* Old browsers */
background: -moz-linear-gradient(top, #f7d694 0%, #f9c254 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f7d694 0%,#f9c254 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f7d694 0%,#f9c254 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d694', endColorstr='#f9c254',GradientType=0 ); /* IE6-9 */
}

li.gnav_menu,.gnav_menu2,.gnav_menu3{
	line-height:45px;
	vertical-align:middle;
}

.description{
	color:#2F6C15;
	padding:2px;
}

#gnav span{
	line-height:1.2;
}

#gnav span.text-valign{
	display:inline-block;
	margin-top:7px;
	vertical-align:middle;
}

a:active span.text-valign{ text-decoration:underline; color: #ffffff;}
a:hover span.text-valign{ text-decoration:underline; color: #ffffff; }

.description a:link{text-decoration: none; color: #619b06;}
.description a:visited { text-decoration: none; color: #619b06; }
.description a:active span{ text-decoration:underline; color: #FBE105;}
.description a:hover span { text-decoration:underline; color: #FBE105; }

/*--------------------------------------------------
breadcrumb
--------------------------------------------------*/
.breadcrumb {
  padding-left:0;
  margin:15px auto -15px 0;
  font-size:14px;
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  color: #8c8c8c;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

/*--------------------------------------------------
 contents
--------------------------------------------------*/
#contents{
	clear:both;
	margin:10px auto 0 auto;
}

ol.icon-num-red {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
ol.icon-num-red li{
  position: relative;
  line-height: 1.2;
  padding: 0.5em;
  margin:5px auto;
  background:#ffffff;
}

ol.icon-num-red li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #f86b75;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 18px;
  border-radius: 50%;
  left: 3%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 15%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

ol.icon-num-red .num-title{
	color: #f86b75;
	font-weight:bold;
	width:80%;
	text-indent:11%;
	display:inline-block;
	vertical-align:middle;
	margin:10px 0;
}

ol.icon-num-red li.can-do{
	display:inline-block;
	width:31%;
	margin-right:9px;
	min-height:175px;
}

ol.icon-num-red li.can-do2{
	display:inline-block;
	width:31%;
	min-height:175px;
}

ol.icon-num-red .num-detail{
	width:100%;
	margin:10px 0 0 0;
	display:inline-block;
	vertical-align:middle;
}

.icon-num-red span.arrow_detail{
	display:block;
	float:right;
	margin-right:10px;
	
}

.num-detail-txt{
	line-height:1.2;
}

ol.icon-num-red .num-detail-btn{
	float:right;
	display:inline-block;
	line-height:1.2;
	background:#f86b75;
    color:#FFFFFF;
	position:absolute;
	top:78%;
	right:0;
  padding:5px 20px 5px 5px;
}

.num-detail a:link{text-decoration: none; color: #ffffff; background:#f86b75;}
.num-detail a:visited { text-decoration: none; color: #ffffff; background:#f86b75;}
.num-detail a:active span{ text-decoration:underline; color: #ffffff; background:#f9939b;}
.num-detail a:hover span { text-decoration:underline; color: #ffffff; background:#f9939b;}

/*icon*/
p.icon{
	display:inline-block;
	width:20%;
}
p.icon img{padding:0px; width:100%; vertical-align:middle;}
.icon-begginer{margin-left:5px;vertical-align:middle;}


ul.icon-check-red {
  border: none;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.icon-check-red  li {
  line-height: 1.2;
  padding: 5px 0;
  list-style-type: none!important;/*ポチ消す*/
}

ul.icon-check-red  li:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f046";
  position: absolute;
  left : 0; /*左端からのアイコンまで*/
  color: #f86b75; /*アイコン色*/
  font-size:22px;
  margin-right:10px;
  vertical-align:middle;
}

#graphArea{
	width:45%;
}

#graphArea img{
	width:100%;
}
#infoArea{
	width:47%;
	padding:10px;
	background:#fdeeef;
}

#infoArea h4 {
  background:#f86b75;
  color:#FFFFFF;
  margin:5px auto;
  vertical-align:middle;
  width:400px;
  padding:5px;
}

.fa-exclamation-circle{
	margin-right:5px;
}

.fa-3x{
	font-size:20px !important;
}

.fa-2x{
	font-size:16px !important;
}

#infoArea img{
	margin-right:10px;
	margin-top:10px;
}

#infoArea li{
	list-style:none;
	list-style-position:outside;
}

#infoArea p{
	font-weight:bold;
	color:#f86b75;
	margin-bottom:7px;
}

#infoArea span{
	display:block;
	float:right;
	margin-top:5px;
	margin-right:10px;
	background:#f86b75;
	padding:5px 20px 5px 5px;
}

#infoArea a:link{text-decoration: none; color: #ffffff; background:#f86b75;}
#infoArea a:visited { text-decoration: none; color: #ffffff; background:#f86b75;}
#infoArea a:active span{ text-decoration:underline; color: #ffffff; background:#f9939b;}
#infoArea a:hover span { text-decoration:underline; color: #ffffff; background:#f9939b;}

.arrow_detail {
  display:inline-block;
  padding:5px 15px 5px 5px;
  margin:5px 0 0 0;
  position:relative;
  text-decoration:none;
  vertical-align:middle;
}

.arrow_detail::before,
.arrow_detail::after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.arrow_detail::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #ffffff;
}

.arrow_detail:hover::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #ffffff;
}

.step a:link{text-decoration: none; color: #f86b75;}
.step a:visited { text-decoration: none; color: #f86b75;}
.step a:active span{ text-decoration:underline; color: #f9939b;}
.step a:hover span { text-decoration:underline; color: #f9939b;}

.step .arrow_detail::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #f86b75;
}

.step .arrow_detail:hover::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #f9939b;
}
	

.arrow_btn{
 position:relative;
  text-decoration:none;
  vertical-align:middle;
}

.arrow_btn::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #ffffff;
}

 /* step*/
table.step {
    width: 95%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing:0px 5px;
}
 
table.step th,
table.step td {
    padding: 10px;
}
 
table.step th {
    background: #6db7d5;
    vertical-align: middle;
    text-align: left;
    width: 110px;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
}
 
table.step th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #6db7d5;
    border-width: 10px;
    margin-top: -10px;
}

 
table.step td {
    background: #f8f8f8;
    width: 360px;
    padding-left: 20px;
}

h5{
	color:#fbe105;
	font-weight:bold;
}

table.step td.step-arrow{
	background:#ffffff;
}

.sankaku{
width: 0;
height: 0;
border-top: 30px solid #f86b75;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
border-left: 50px solid transparent;
margin:-5px auto -35px auto;
}

/*biz list*/
.biz-list{
    position: relative;/*相対配置*/
	margin:10px auto;
	text-align:center;
}

.biz-list img{
	width:90%;
}

.biz-list ul.biz-name-hon{
	position: absolute;/*絶対配置*/
	top:77px;
	left:65px;
}

.biz-list ul.biz-name-shu{
	position: absolute;/*絶対配置*/
	top:77px;
	left:290px;
}

.biz-list ul.biz-name-eiz{
	position: absolute;/*絶対配置*/
	top:77px;
	left:513px;
}

.biz-list ul.biz-name-oth{
	position: absolute;/*絶対配置*/
	top:77px;
	left:735px;
}

.biz-list ul{
	list-style:disc outside;
	padding-left:13px;
}

.biz-list ul li{
	width:180px;
}

.biz-list ul li.etc{
	list-style:none;
	padding:0;
	margin:0 0 0 -20px;
	line-height:0.8;
}


.biz-list ul li.listmark-none{
	list-style:none;
}

.biz-list span.arrow_detail{
	display:block;
	float:right;
	margin-top:5px;
	margin-right:10px;
	background:#f86b75;
	padding:5px 20px 5px 5px;
}

.biz-list a:link span{text-decoration: none; color: #ffffff; background:#f86b75;}
.biz-list a:visited span{ text-decoration: none; color: #ffffff; background:#f86b75;}
.biz-list a:active span{ text-decoration:underline; color: #ffffff; background:#f9939b;}
.biz-list a:hover span { text-decoration:underline; color: #ffffff; background:#f9939b;}

/*-swiper*/

    .swiper-container {
      width: 100%;
	  min-height:270px;
	  background:#F8F8F8;
    }
    .swiper-slide {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0px 60px;
    }
    .parallax-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 130%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
    }
    .swiper-slide .swiper-contents{
		background:#ffffff;
		padding:20px;
		margin:20px 10px 10px 10px;
	}
	
	.swiper-slide .name-case{
		color:#6db7d5;
      font-size: 120%;
      font-weight: bold;
	  margin-bottom:10px;
    }
    .swiper-slide span.name-category {
      font-size: 90%;
	  padding:5px;
	  border-radius:5px;
	  background:#f86b75;
	  color:#ffffff;
	  width:auto;
    }
    .swiper-slide .text {
		margin-top:10px;
	  max-width: 900px;
      line-height: 1.2;
    }

     .swiper-slide .swiper-button-white{
		 color:#6db7d5;
	 } 


/*matching*/ 

.matchArea{
	width:100%;
	background:#FFFFFF;
	margin:0px auto;
	display:block;
	padding:0px;
	position:relative;
	top:0;
	left:0;
}

.match-ex{
	width:45%;
}

.match-mark{
	margin:0;
	padding:0;
	top:40%;
	left:40%;
	position:absolute;
	z-index:0;
}

.match-mark img{
	width:30%;
	opacity:0.2;
}

.match-category{
	display:inline-block;
	 font-size: 110%;
	  padding:5px;
	  border-radius:5px;
	  background:#f86b75;
	  color:#ffffff;
    }

.match-name-company{
	background:#e9f7fc;
	border: double 4px #6db7d5;
	display:inline-block;
	font-size:110%;
	font-weight:bold;
	margin:10px auto;
	color:#6db7d5;
	padding:5px;
}

.match-name-people{
	background:#fbf7d4;
	border:double 4px #eea303;
	display:inline-block;
	font-size:110%;
	font-weight:bold;
	margin:10px auto;
	color:#eea303;
	padding:5px;
}

 
 /*QA*/
 dt{
border-bottom:dotted 2px #6db7d5;
display:table;
 }

.queation-item{
font-family: 'Righteous', cursive;
font-size:26px;
font-weight:bold;
color:#6db7d5;
margin-right:10px;
display:inline-block;
}

.textQ{
font-weight:bold;
font-size:17px;
display:table-cell;
vertical-align:middle;
width:100%;
}

dd{
	display:table;
	width:100%;
}

.answer-item{
font-family: 'Righteous', cursive;
font-size:26px;
font-weight:bold;
color:#f86b75;
margin-right:10px;
margin-left:3px;
display:inline-block;
}

.textA{
padding:5px 7px 5px 0px;
display:table-cell;
vertical-align:middle;
}

/*img*/
a:hover img{
filter:alpha(opacity=60);
opacity:0.6;
background-color:rgba(255,255,255,0.6)
}

/*=====================================
profile
=====================================*/
#contents .red-line{
position: relative;
display: inline-block;
width:95%;
color:#f86b75;
margin:30px auto 10px auto;
padding:0 2.5%;
clear:both;
}

#contents .red-line:before, #contents .red-line:after{
content: '';
position: absolute;
top: 45%;
display: inline-block;
width: 27%;
height: 5px;
background-color: #f86b75;
}

#contents .red-line:before {left:0;}
#contents .red-line:after {right: 0;}

#contents .red-line2{
position: relative;
display: inline-block;
width:95%;
color:#f86b75;
margin:30px auto 10px auto;
padding:0 2.5%;
clear:both;
}

#contents .red-line2:before, #contents .red-line2:after{
content: '';
position: absolute;
top: 45%;
display: inline-block;
width: 15%;
height: 5px;
background-color: #f86b75;
}

#contents .red-line2:before {left:0;}
#contents .red-line2:after {right: 0;}

 /*arrow_sample*/
 ol.icon-num-red2 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
ol.icon-num-red2 li{
  position: relative;
  line-height: 1.2;
  padding: 0.5em 0.5em 0.5em 30px;
  margin:5px auto;
}

ol.icon-num-red2 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #f86b75;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 18px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

ol.icon-num-red2 p{
	vertical-align:middle;
}
	
span.arrow_sample{
	display:inline-block;
	margin-top:5px;
	margin-left:10px;
	background:#6db7d5;
	padding:5px 20px 5px 5px;
	color:#ffffff;
}
.arrow_sample {
  display:inline-block;
  padding:5px 15px 5px 5px;
  margin:10px 0 0 0;
  position:relative;
  text-decoration:none;
  vertical-align:middle;
}

.arrow_sample::before,
.arrow_sample::after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.arrow_sample::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #ffffff;
}

.arrow_sample:hover::after{
	box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #ffffff;
}

a:link span.arrow_sample{text-decoration: none; color: #ffffff; background:#6db7d5;}
a:visited span.arrow_sample{ text-decoration: none; color: #ffffff; background:#6db7d5;}
a:active span.arrow_sample{ text-decoration:underline; color: #ffffff; background:#98c9dd;}
a:hover span.arrow_sample{ text-decoration:underline; color: #ffffff; background:#98c9dd;}

.pict{
	margin-bottom:10px;
}

h4#member_ex{
	clear:both;
position: relative;
padding-left: 35px;
padding-top:20px;
margin:10px;
color:#F9727F;
}

h4#member_ex:before{
position: absolute;
font-family: FontAwesome;
content: "\f0eb";
background: #F9727F;
color: white;
font-weight: normal;
font-size: 26px;
border-radius: 50%;
left:36%;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
top: 55%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top:5px;
}
h4#member_ex:after {/*吹き出しのちょこんと出た部分*/
content: '';
display: block;
position: absolute;
left:39%;
height: 0;
width: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid #F9727F;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top:7px;
}

.case{
	min-height:300px;
}

.case li{
	margin-bottom:10px;
	margin-left:1em;text-indent:-0.6em;
}

li.case-end{
	margin-bottom:0px;
	margin-left:1em;text-indent:-0.6em;
}

.work{
	min-height:433px;
}
.work li{
	margin-bottom:5px;
	list-style:disc outside;
	margin-left:15px;
}

li.work-end{
	margin-bottom:0px;
}

.label{
	background:#6db7d5;
	color:#ffffff;
	margin:10px 50px;
	padding:3px 0px;
	font-size:18px;
	font-weight:bold;
	width: auto;
	}

.fa-user-circle{
	color:#6db7d5;
}

.remarks{
	clear:both;
	padding-top:20px;
	margin-bottom:10px;
}
/*=====================================
published
=====================================*/
.job p.box{
	text-align:center;
}

.clear{
	clear:both;
}

.flow{
	display:block;
	width:48%;
}

.flow p.box{
	min-height:60px;
}
/*arrow_down*/
.arrow_down{
  width: 100px;
  margin:10px auto -10px auto;
}
.arrow_down::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 40px;
  height:30px;
  background: #f86b75;
}
.arrow_down::after{
  content: "";
  display:block;
  border-top: 50px solid #f86b75;
  border-left: 50px  solid transparent;
  border-right: 50px  solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}

.box-alert ul{
	display:block;
	margin:17px auto 0 125px;
}

.box-alert li{
	text-align:left;
}

.nodes{
	margin:3px auto;
}

.widthsize{
	width:550px;
	resize: vertical;
}
/*利用規約エリア*/
.box-agreewidth{
	width:100%;
	height:52%;
	resize: vertical;
}

/*=====================================
footer
=====================================*/
#footer{
	width:100%;
	margin:0px auto;
	padding:0px auto;
	margin-top:5px;
	clear:both;
	border-top: 1px solid rgba(0,0,0,0.1);
box-shadow:0px 3px 6px -3px #d4d3d4 inset;
-moz-box-shadow:0px 3px 6px -3px #d4d3d4 inset;
-webkit-box-shadow:0px 3px 6px -3px #d4d3d4 inset;
}

#footer_contents{
	text-align:center;
	margin-top:10px;
}

#footer a:link { text-decoration: none; color: #000000;}
#footer a:visited { text-decoration: none; color: #000000;}
#footer a:active { text-decoration: none; color: #000000;}
#footer a:hover { text-decoration: underline; color: #000000;}

#footer_link .link{
	padding:0 10px;
}

#copyright{
	width:100%;
	height:30px;
	line-height:30px;
	border-top:#666666 solid 1px;
	margin:0;
	padding:0 0 0 5px;
	clear:both;
	font-family:Geneva, Arial, Helvetica, san-serif;
	text-align:center;
}

#mark{
	display:block;
	float:right;
	margin:10px 0px 10px auto;
}

#mark ul{
	list-style:none;
}

#mark li{
	float:right;
	margin:0 0px auto 5px;
}

/*=====================================
 registration　table,list
=====================================*/
button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

.notes{
	margin:0 10px 20px 12px
}

.notes li{
	text-indent:-14px;
}
	
.form{
	width:100%;
	border-collapse: separate;
    border-spacing: 2;
}

.form th{
	width:30%;
	background:#a1d1e4;
	text-align:left;
	border:2px splid #ffffff;
	padding:5px;
	vertical-align:middle;
}

.form td{
	width:70%;
	background:#d8eaf1;
	text-align:left;
	border:2px splid #ffffff;
	padding:5px;
	vertical-align:middle;
}

.form td.form_select{
	width:10%;
	vertical-align:top;
}

.box-agree{
	width:80%;
	margin:10px auto;
	vertical-align:middle;
}	

.inculde_box{
	margin:10px auto;
	font-size:14px;
}

.btn-area p{
	width:200px;
	display:block;
	margin:10px auto;
}

.btn-back{
	width:75px;
}

/*=====================================
btn
=====================================*/

input[type="button"],
input[type="submit"],
input[type="reset"]{
	display:block;
	padding:3px 10px;
	margin:5px 0;
	font-size:14px;
	cursor:pointer;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
border:1px solid #f09c9a; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; font-weight:bold; color: #FFFFFF;
background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
	background:-ms-linear-gradient( top, #f24537 5%, #c62d1f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f24537), color-stop(100%, #c62d1f) );
	background-color:#f24537;
	display:inline-block;
	text-shadow:1px 1px 0px #810e05;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #f5978e;
 	-moz-box-shadow:inset 1px 1px 0px 0px #f5978e;
 	box-shadow:inset 1px 1px 0px 0px #f5978e;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover{
background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
	background:-ms-linear-gradient( top, #c62d1f 5%, #f24537 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c62d1f), color-stop(100%, #f24537) );
	background-color:#c62d1f;
}
/*=====================================
popup
=====================================*/ 

#popup p{
	font-size:14px;
	margin:10px 10px 0 10px;
	line-height:1.2;
}


#popup h1{
	float:none;
	font-size:20px;
	color:#031096;
	width:100%;
	margin-top:5px;
	font-weight:bold;
}

#popup h2{
	font-size:18px;
	color:#031096;
	margin-top:30px;
	font-weight:bold;
}

#popup h3{
	font-size:16px;
	color:#000000;
	margin-top:30px;
	font-weight:bold;
}

#popup ul{
	display:block;
	margin:20px 0;
}

#popup li{
	margin:5px 0;
	font-size:14px;
}


#popup .box-example{
	background:#FAE7C6;
	border:solid 1px #FD9827;
	padding:10px;
}

#popup .txt_img{
	vertical-align:middle;
}

#popup .bntimg{
	height:30px;
	margin:10px auto;
}
#popup .btn-info{
	display:block;
	padding:5px;
	background:#E4E9F7;
	margin-top:20px;
	clear:both;
}

#popup .btn-info p{
	width:510px;
	display:block;
	margin-right:0;
	vertical-align:middle;
}
#prof_help{
	clear:both;
}

.indent1{
	padding-left:1.5em;
	text-indent:-1.5em;
}

.indent2{
	padding-left:0.5em;
	text-indent:-0.5em;
}

.indent3{
	text-indent:-0.9em;
	padding-left:0.8em;
}

.indent4{
	padding-left:3em;
	text-indent:-2em;
}

.attention{
	display:block;
	margin:0 auto;
}

.line1{
	display:block;
	padding-left:27px;
}

/*=====================================
 toplink
=====================================*/ 
 #pagetop{
	 margin:20px auto 10px auto;
	 clear:both;
 }
 
 #pagetop p{
	 display:block;
	 padding:0;
	  text-align:right;
 }
 
 #pagetop img.arrow{
	 padding:0px;
	 margin-right:5px;
	vertical-align:middle;
	}

 #pagetop p a:link { text-decoration: none; color: #000000;}
 #pagetop p a:visited { text-decoration: none; color: #000000;}
 #pagetop p a:active { text-decoration: none; color: #000000;}
 #pagetop p a:hover { text-decoration: underline; color: #000000;}
 
 
@media screen and (max-width: 480px) and (max-width: 631px) {
.box-right {
	float: none;
}