@charset "UTF-8";
/* CSS Document */

/*-------------------------------------------------------------------------
	#main
/*-----------------------------------------------------------------------*/

/*flex*/
#main .f-container {
	display: flex;
	justify-content: space-between;
}


/*-------------------------------------------------------------------------
	.tab
/*-----------------------------------------------------------------------*/
#main .tab {
	width:400px;
	margin-bottom:0;
    margin: 0 auto;
	clear:both;
	overflow:hidden;
	}
#main .tab .f-item {
	width: 48%;
}
#main .tab li {
	margin-bottom: 10px;
}
#main .tab li a {
	color:#ffffff;
	font-size: 1.4rem;
	font-weight:bold;
	text-align:center;
	}
#main .tab li a span {
	font-size: 0.8rem;
	vertical-align:middle;
	}
#main .tab .tabTsuhan a,
#main .tab .tabSales a,
#main .tab .tabShop a {
	padding: 0.4em 0;
	background: rgb(149,180,231);
	background: linear-gradient(180deg, rgba(149,180,231,1) 0%, rgba(126,171,226,1) 35%, rgba(126,171,226,1) 100%);
	display:block;
	border-radius: 5px;
}
#main .tab .tabTsuhan a:hover,
#main .tab .tabSales a:hover,
#main .tab .tabShop a:hover {
	background: rgb(38,105,208);
	background: linear-gradient(180deg, rgba(38,105,208,1) 0%, rgba(0,90,200,1) 35%, rgba(0,90,200,1) 100%);	
}
#main .tab .tabTsuhan.active a,
#main .tab .tabSales.active a,
#main .tab .tabShop.active a {
	background: rgb(38,105,208);
	background: linear-gradient(180deg, rgba(38,105,208,1) 0%, rgba(0,90,200,1) 35%, rgba(0,90,200,1) 100%);
}
	/*
#main .tab .tabSales a,
#main .tab .tabShop a {
	background: rgb(149,180,231);
	background: linear-gradient(180deg, rgba(149,180,231,1) 0%, rgba(126,171,226,1) 35%, rgba(126,171,226,1) 100%);
	display:block;
	border-radius: 5px;
	}
#main .tab .tabSales.active a,
#main .tab .tabShop.active a,
#main .tab .tabSales a:hover,
#main .tab .tabShop a:hover {
	background: rgb(38,105,208);
	background: linear-gradient(180deg, rgba(38,105,208,1) 0%, rgba(0,90,200,1) 35%, rgba(0,90,200,1) 100%);
	}
#main .tab .tabTsuhan a {
	background: rgb(149,180,231);
	background: linear-gradient(180deg, rgba(149,180,231,1) 0%, rgba(126,171,226,1) 35%, rgba(126,171,226,1) 100%);
	display:block;
	border-radius: 5px;
	}
#main .tab .tabTsuhan.active a,
#main .tab .tabTsuhan a:hover {
	background: rgb(38,105,208);
	background: linear-gradient(180deg, rgba(38,105,208,1) 0%, rgba(0,90,200,1) 35%, rgba(0,90,200,1) 100%)
	}
*/

/*-------------------------------------------------------------------------
	.flowchart
/*-----------------------------------------------------------------------*/
#main .flowchart {
	width: 400px;
	margin: 0 auto;
}
#main .flowchart .f-item {
	width: 48%;
}
#main .flowchart ul li {
	position: relative;
	text-align: center;
}
#main .flowchart ul li span {
	color: #dedede;
}
#main .flowchart ul.active li span {
	color: #005AC8;
}
#main .flowchart ul li{
	color: #8c8c8c;
}
#main .flowchart ul.active li a {
	color: #444444;
}
#main .flowchart ul li:not(:last-child) {
    margin-bottom: 20px;
}
#main .flowchart ul li:not(:last-child):after {
    content: "↓";
    position: absolute;
    left: 50%;
    bottom: -20px;
    display: block;
    text-align: center;
    color: #dedede;
	font-weight: bold;
}
#main .flowchart ul.active li:not(:last-child):after {
    content: "↓";
    position: absolute;
    left: 50%;
    bottom: -20px;
    display: block;
    text-align: center;
    color: #005AC8;
	font-weight: bold;
}


/*
#main .chart {
	position:relative;
    width:508px;
    margin: 0 auto;
	}
#main .chart table {
	margin-bottom:0;
	border-top:1px solid #cccccc;
	border-left:1px solid #cccccc;
	text-align:center;
	}
#main .chart table td {
	line-height:25px;
	background-color:#f8f8f8;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
	color:#aaaaaa;
	vertical-align:middle;
	}
#main .chart table td a {
	padding:5px;
	height:100%;
	display:block;
	font-weight:bold;
	background:url(../img/process/bg_active.png) left top repeat-x;
	vertical-align:middle;
	}
#main .chart table td a:hover {
	background:url(../img/process/bg_active_o.png) left top repeat-x;
	}
#main .chart table td.col01 {
	width:191px;
	}
#main .chart table td.col02 {
	width:156px;
	}
#main .chart table td.col03 {
	width:157px;
	}
#main .chart table td.row1{
	height:35px;
	}
#main .chart table td.row3 a{
	height:97px;
	}
#main .chart table td.row4 a{
	line-height:133px;
	}
#main .chart table td a span {
	font-size: 0.8rem;
	vertical-align:middle;
	color:#005AC8;
	}

#main .ico_arrow p {
	margin-bottom:0;
	}
#main .ico_arrow p img {
	position:absolute;
	}
#main #sales .ico_arrow p img.arrow01 {
	top:32px;
	left:402px;
	}
#main #sales .ico_arrow p img.arrow02 {
	top:81px;
	left:310px;
	}
#main #sales .ico_arrow p img.arrow03 {
	top:104px;
	left:149px;
	}
#main #sales .ico_arrow p img.arrow04 {
	top:140px;
	left:149px;
	}
#main #sales .ico_arrow p img.arrow05 {
	top:176px;
	left:149px;
	}
#main #sales .ico_arrow p img.arrow06 {
	top:190px;
	left:312px;
	}
#main #tsuhan .ico_arrow p img.arrow01 {
	top:32px;
	left:149px;
	}
#main #tsuhan .ico_arrow p img.arrow02 {
	top:68px;
	left:149px;
	}
#main #tsuhan .ico_arrow p img.arrow03 {
	top:104px;
	left:149px;
	}
#main #tsuhan .ico_arrow p img.arrow04 {
	top:140px;
	left:149px;
	}
#main #tsuhan .ico_arrow p img.arrow05 {
	top:176px;
	left:149px;
	}
#main #tsuhan .ico_arrow p img.arrow06 {
	top:190px;
	left:188px;
	}
#main #shop .ico_arrow p img.arrow01 {
	top:32px;
	left:595px;
	}
#main #shop .ico_arrow p img.arrow02 {
	top:68px;
	left:595px;
	}
#main #shop .ico_arrow p img.arrow03 {
	top:176px;
	left:595px;
	}
*/
#main .process {
	width:600px;
	margin:20px auto 0 auto;
	background-color:#f8f8f8;
	border:1px solid #cccccc;

	/* 角丸 */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;

	position:relative;
	behavior:url(/hellographic/files/htc/PIE.htc);
	}
#main .process h5 {
	line-height:42px;
	margin-bottom:0;
	text-align:center;
	font-size: 1.8rem;
	border-bottom:1px solid #ffffff;
	}
#main .section {
	margin-bottom:0;
	padding:15px 15px 0 15px;
	border-top:1px solid #cccccc;
	border-bottom:1px solid #ffffff;
	background:url(../img/process/bgSection.png) left top repeat-x;
	}
#main .section.last {
	padding-bottom:15px;
	border-bottom:none;
	}
#main .section .pageTop {
	width:100%;
    height: 28px;
	margin:15px 0 0 0;
	float:none;
	display:block;
	clear:both;
	overflow:hidden;
    }	
#main .section .pageTop a {
    display: inline;
    float: right;
    height: 28px;
    margin-right: 0;
	overflow:hidden;
    width: 28px;
	}
#main .wrap {
	width:570px;
	clear:both;
	overflow:hidden;	
	}
#main .txtArea {
	width:305px;
	float:left;
	overflow:hidden;
	}
#main .txtArea {
	letter-spacing:0.15em;
	}
#main h6 {
	margin-bottom:10px;
	padding-bottom:5px;
	font-size: 1.5rem;
	font-weight:bold;
	border-bottom:1px solid #cccccc;
	letter-spacing:0.01em;
	}
#main h6 span {
	font-size: 1.1rem;
	}
#main .txtArea span.attent {
	line-height:20px;
	color:#005AC8;
	font-weight:bold;
	font-size: 1.1rem;	
	}
#main .imgArea {
	width:245px;
	float:right;
	overflow:hidden;
	}
#main .imgArea p {
	margin-bottom:0;
	}
#main .imgArea img {
	margin-bottom:10px;
	}
#main .imgArea img.last {
	margin-bottom:0;
	}
	
/*-------------------------------------------------------------------------
	.relate
/*-----------------------------------------------------------------------*/
#main .relate {
	width:305px;
	margin-bottom:0;
	}
#main .relate dt {
	font-size: 1.2rem;
	font-weight:bold;
	}
#main .relate ul {
	width:305px;
	margin:0 auto;
	clear:both;
	overflow:hidden;
	}
#main .relate ul li {
	width:115px;
	margin-right:10px;
	float:left;
	overflow:hidden;
/*	background:url(/hellographic/work/job/files/img/bgNaviOther.png) left top no-repeat;*/
	}
#main .relate ul li.last {
	margin-right: 0;	
}
#main .relate ul li a {
	display:block;
	}
#main .relate ul li a img {
	display:block;
	}
#main .relate ul li a span {
	line-height:14px;
	display:block;
	font-size: 1.0rem;
	letter-spacing:0;
	text-align:center;
	}
#main .relate ul li a:hover span {
	text-decoration:underline;
	}
#main .relate ul li.last {
	margin-right:0;
	}
#main .relate dd{
	width:115px;
	text-align:center;
	line-height:140%;
	}	
#main .relate dd img{
	margin-bottom:3px;
	}


/*-------------------------------------------------------------------------
  ------------------------------------------------------------------------
	ブレイクポイント
	940px未満 @media screen and (max-width: 939px) {...}
	560px未満 @media screen and (max-width: 559px) {...}	
  ------------------------------------------------------------------------
/*-----------------------------------------------------------------------*/
@media screen and (max-width: 939px) {
	#main .tab {
		width: auto;
	}
	#main .flowchart {
		width: auto;
	}
	#main .process {
		width: 100%;
	}
	#main .wrap {
		width: 100%;
	}
	#main .txtArea {
		width: 100%;
		order: 2;
	}
	#main .imgArea {
		width: 100%;
		order: 1;
	}
	#main .process .f-container {
		flex-wrap: wrap;
	}
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: 15px !important;
	}
	.swiper-container {
		padding-bottom: 30px;
	}
	
}