@charset "utf-8";

#main .image {
	background: url(img/main.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   text-align: center;
}
#main h2 {
	padding-top: 16em;
   font-size: 1.6vw;
}
#main h3 {
	padding-bottom: 12em;
   font-size: 2.2vw;
   font-weight: normal;
   padding-top: 0.2em;
}
#user_support {
    padding: 2em;
}
#user_support h2 {
	font-size: 1.3em;
   padding-top: 2em;
   padding-bottom: 2em;
   font-weight: normal;
}
#user_support section {
	 margin-bottom: 3em;
    position: relative;
    width: 100%;
    padding-left: 8%;
    border-bottom: #ccc 1px solid;
    padding-bottom: 1em;
}
#user_support section h4 {
	 font-size: 1.2em;
    position: relative;
}
#user_support section h4::before {
    content: "";
    position: absolute;
    width: 1.8em;
    height: 1.8em;
    display: block;
    top: -0.2em;
    left: -2.2em;
}
#user_support section:nth-of-type(1) h4::before {
    background: url(img/icon-haken.png) no-repeat;
    background-size: contain;
}
#user_support section:nth-of-type(2) h4::before {
    background: url(img/icon-trans.png) no-repeat;
    background-size: contain;
}
#user_support section:nth-of-type(3) h4::before {
    background: url(img/icon-chintai.png) no-repeat;
    background-size: contain;
}
#user_support section:nth-of-type(4) h4::before {
    background: url(img/icon-portal.png) no-repeat;
    background-size: contain;
}
#user_support section p {
	 font-size: 1em;
    width: 70%;
    line-height: 1.4em;
}
#user_support section .button {
    font-size: 1em;
    position: absolute;
    right: 0;
    bottom: 0.8em;
}
#user_support section .button a {
    display: block;
    background: #ccc;
    font-size: 0.8em;
    padding: 1em 2em;
    border-radius: 0.5em;
    color: #fff;
}
#user_support section:nth-of-type(1) .button a {
	background: linear-gradient(to bottom right, #F6621F, #ffc647);
}
#user_support section:nth-of-type(2) .button a{
	background: linear-gradient(to bottom right, #6AB799, #add941);
}
#user_support section:nth-of-type(3) .button a{
	background: linear-gradient(to bottom right, #1D82C4, #4bcde3);
}
#user_support section:nth-of-type(1) .button a:hover {
  box-shadow: 0 0 2px #F6621F, 
    0 0 4px #F6621F,
    0 0 10px #F6621F;
}
#user_support section:nth-of-type(2) .button a:hover {
  box-shadow: 0 0 2px #6AB799, 
    0 0 4px #6AB799,
    0 0 10px #6AB799;
}
#user_support section:nth-of-type(3) .button a:hover {
  box-shadow: 0 0 2px #1D82C4, 
    0 0 4px #1D82C4,
    0 0 10px #1D82C4;
}
#business_support {
	background:#eee;
	padding:2em;
}
#business_support h2 {
	font-size: 1.3em;
   padding-top: 2em;
   padding-bottom: 2em;
   font-weight: normal;
}
#business_support  section {
	 margin-bottom: 3em;
    position: relative;
    width: 100%;
    padding-left: 8%;
    border-bottom: #ccc 1px solid;
    padding-bottom: 1em;
}
#business_support section h4 {
	 font-size: 1.2em;
    position: relative;
}
#business_support section h4::before {
    content: "";
    position: absolute;
    width: 1.8em;
    height: 1.8em;
    display: block;
    top: -0.2em;
    left: -2.2em;
}
#business_support section:nth-of-type(1) h4::before {
    background: url(img/icon-sns.png) no-repeat;
    background-size: contain;
}
#business_support section:nth-of-type(2) h4::before {
    background: url(img/icon-sns.png) no-repeat;
    background-size: contain;
}
#business_support section:nth-of-type(3) h4::before {
    background: url(img/icon-create.png) no-repeat;
    background-size: contain;
}
#business_support section:nth-of-type(4) h4::before {
    background: url(img/icon-hp.png) no-repeat;
    background-size: contain;
}
#business_support section:nth-of-type(5) h4::before {
    background: url(img/icon-hp.png) no-repeat;
    background-size: contain;
}

#business_support section p {
	 font-size: 1em;
    width: 70%;
    line-height: 1.4em;
}
#business_support section .button {
    font-size: 1em;
    position: absolute;
    right: 0;
    bottom: 0.8em;
}
#business_support section .button a {
    display: block;
    background: #ccc;
    font-size: 0.8em;
    padding: 1em 2em;
    border-radius: 0.5em;
    color: #fff;
}
#business_support section:nth-of-type(1) .button a {
	background: linear-gradient(to bottom right, #F6621F, #ffc647);
}
#business_support section:nth-of-type(2) .button a{
	background: linear-gradient(to bottom right, #6AB799, #add941);
}
#business_support section:nth-of-type(3) .button a{
	background: linear-gradient(to bottom right, #1D82C4, #4bcde3);
}
#business_support section:nth-of-type(1) .button a:hover {
  box-shadow: 0 0 2px #F6621F, 
    0 0 4px #F6621F,
    0 0 10px #F6621F;
}
#business_support section:nth-of-type(2) .button a:hover {
  box-shadow: 0 0 2px #6AB799, 
    0 0 4px #6AB799,
    0 0 10px #6AB799;
}
#business_support section:nth-of-type(3) .button a:hover {
  box-shadow: 0 0 2px #1D82C4, 
    0 0 4px #1D82C4,
    0 0 10px #1D82C4;
}