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

/* ==========================================
	index.php ▼
========================================== */
figure {
	position: relative;
	background: url(./img/index-bg.jpg) repeat center center;
	height: 535px;
	margin: 0 -999rem;
	padding: 0 999rem;
}
figcaption > p,
figcaption > div {
	float: left;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
	position: absolute;
	top: 50%;
}
figcaption > p,
figcaption > p span {
	font-size: 5.7rem;
	line-height: 6.7rem;
}
figcaption > p span:nth-of-type(1) {
	color: #4f7ad2
}
figcaption > p span:nth-of-type(2) {
	color: #64bf79
}
figcaption > p span:nth-of-type(3) {
	color: #cecc00
}
figcaption > div {
	padding-left: 35.0rem;
}
figcaption > div h2 {
	font-size: 3.0rem;
	padding-bottom: 2.5rem;
}
figcaption > div p {
	font-size: 2.0rem;
	font-weight: 600;
}

@media (max-width: 767px) {
	figure {
    height: 40vh;
	}
	figcaption > p {
		font-size: 4rem;
		transform: translateY(-50%);
    position: absolute;
    top: 50%;
		padding: 2.5rem;
	}
	figcaption > p span {
		font-size: 4rem;
	}
	figcaption > div {
		padding: 45vh 1.5rem 0;
		transform: none;
		position: inherit;
	}
	figcaption > div h2 {
    font-size: 1.7rem;
    padding-bottom: 1.5rem;
	}
	figcaption > div p {
		font-size: 1.4rem;
		font-weight: 400;
		margin-bottom: 5rem;
	}
}

/* ================
	.group-nav ▼
=================== */

.group-nav {
  border: 3px solid #ccc;
	position: relative;
  padding: 2.0rem 2.0rem 4.0rem;
  margin: 3.0rem 0 10.0rem;
  overflow: hidden;
}
.group-nav:not(:last-child) {
  margin-right: 4.0rem;
}
.group-nav:not(:first-child) {
  margin-left: 4.0rem;
}
.group-nav  {
  width: calc( 50% - 4.0rem);
  height: 1195px;
}
.group-nav > h2 {
  font-size: 2.4rem;
  font-weight: 400;
  text-align: center;
}
.group-nav > li h3 {
	font-size: 1.6rem;
	font-weight: 600;
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	padding: 2.5rem 1.0rem;
}

/*feedin*/
.list{
    overflow: hidden;
    background: url(img/index-bg-02.png) no-repeat center;
    margin: 0 -999rem;
    padding: 0 999rem;
}
.list ul.package {
    background: url(img/index-bg-04.jpg) repeat center;
    background-size: cover;
    transition: .8s;
}
.list ul .insert {
    background: url(img/index-bg-04.jpg) repeat center;
    background-size: cover;
    height: 50%;
    width: calc( 100% - 2.0rem);
    transition: .8s;
}
.list-mv05{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px);
}
.mv05{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.group-nav > li:nth-of-type(1) h3 {
	border-bottom: 4px solid #4f7ad2;
}
.group-nav > li:nth-of-type(2) h3 {
	border-bottom: 4px solid #64bf79;
}
.group-nav + .group-nav > li h3 {
	border-bottom: 4px solid #cecc00;
}
.group-nav > li span {
	display: block;
	margin: 2.5rem 0;
	font-size: 1.4rem;
}

.group-nav > li .button {
  color: #ffffff;
	display: block;
  font-size: 1.6rem;
	padding: 1.8rem;
  box-shadow: 3px 3px 3px #ccc;
  text-align: center;
  transition: .2s;
}
.group-nav > li:nth-of-type(1) .button {
	background: #4f7ad2;
	border: 3px solid #4f7ad2;
  margin-bottom: 8.0rem;
}
.group-nav > li:nth-of-type(2) .button {
	background: #64bf79;
	border: 3px solid #64bf79;
}
.group-nav + .group-nav > li .button {
	background: #cecc00;
	border: 3px solid #cecc00;
}
.group-nav > li .button:hover {
	background: #ffffff;
  color: #4f7ad2 !important;
}
.group-nav > li:nth-of-type(2) .button:hover {
  color: #64bf79 !important;
}
.group-nav + .group-nav > li .button:hover {
  color: #cecc00 !important;
}

@media (max-width: 767px) {
  
.group-nav {
    margin: .0rem 0 5.0rem;
    }
    .list ul.sp-kyurin {
        padding: 0;
    } 
    .group-nav,
    .list ul .insert {
        width: 100%;
    }
    .group-nav:not(:first-child) {
    margin-left: 0rem;
    height: auto;
    }
    .list {
    padding: 0 1.5rem;
    margin: 0;
    width: 100%;
    }
    .group-nav > li .box {
        margin-bottom: 4.0rem;
    }
    .group-nav > li h3 {
        font-size: 2.0rem;
        padding: 1.5rem 1.0rem;
    }
  
}

.index-about {
	margin: 0 0 5.0rem;
}
.index-about span {
	display: block;
	margin-bottom: 4.0rem;
}
.index-about span img {
	border-bottom: 4px solid #272070;
	margin: 0 auto;
	padding-bottom: 4.0rem;
}
.index-about span::after {
	content: "";
	display: block;
	border-bottom: 4px solid rgba(0, 0, 0, 0.1);
	position: relative;
	bottom: 4px;
}
.index-about span+p {
	font-size: 1.6rem;
	line-height: 2.8rem;
}

.index-about:before {
	content: "";
	background: url(./img/index-scene.jpg) repeat-x center;
	display: block;
	height: 450px;
	margin: 0 -999rem;
	padding: 0 999rem;
}
.index-about b {
	display: block;
	border-right: 2px solid rgba(0, 0, 0, 0.1);
	border-bottom: 4px solid rgba(0, 0, 0, 0.1);
	padding: 2.5rem;
	margin: 4.0rem auto;
	width: 33.33333%;
}
.index-about b i {
	-webkit-border-radius: 50%;/* for Safari and Chrome */
	-moz-border-radius: 50%; /* for Firefox */
	-o-border-radius: 50%; /* for opera */
	border-radius: 50%;
	background: #272070;
	color: #fff;
	display: block;
	text-align: center;
	margin: 0 auto;
	font-size: 3.0rem;
	line-height: 4.0rem;
	width: 4.0rem;
}

.inner {
  background: url(img/index-bg-03.png) no-repeat center top;
  margin: 0 -999rem;
  padding: 11.5rem 999rem 0;
}

@media (max-width: 767px) {
	.index-about::before {
		content: "";
		background: url(./img/index-scene.jpg) repeat-x center;
		background-size: contain;
		height: 45vh;
	}
	.index-about span+p {
		padding: 0 1rem;
		line-height: 2.4rem;
	}
	.index-about b {
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    margin: 4.0rem 2rem;
		width: 90%;
	}
}

/* ==========================================
    追加作業
========================================== */

/* ==========================================
その他サービス
========================================== */

.top-provisional {
    border-bottom: 2px solid #272070;
    font-size: 2.4rem;
    padding: 1rem;
    margin-bottom: 3.0rem;
}

.service-bnr {
    display: -ms-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-justify-content: space-between;
    justify-content: space-between;
    
    margin-bottom: 2rem;
}

.service-bnr li {
    margin-bottom: 1rem;
    width: 49%;
}

.service-link {
    padding: 0 1rem 3rem;
}

.service-link li a {
    font-size: 1.8rem;
    line-height: 3.5rem;
}

.service-link li a::before {
    font-family: 'FontAwesome';
    content: "\f0da";
    color: #272070;
    font-weight: 600;
    margin-right: 1.0rem;
}

.service-link li a:hover {
    border-bottom: 1px solid #272070;
}

@media screen and (max-width: 767px) {


    .service-bnr li {
        margin-bottom: 1rem;
        width: 100%;
    }
    
}


/* ==========================================
    パッケージトピックス
========================================== */

.pk-topics .row {
    margin-bottom: 3rem;
}

.pk-topics .row div {
    font-size: 1.8rem;
    line-height: 3rem;
}


.pk-topics .row div:first-of-type span {
    display: block;
    font-size: 1.4rem;
    text-align: center;
}

.pk-topics .ttl {
    background-color: #fef1f2;
    font-size: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
}

.pk-topics .ttl:first-of-type {
    background-image: url(img/icon_new.png);
    background-position:  left 2rem center;
    background-repeat:  no-repeat;
    padding: 1.5rem 2rem 1.5rem 10rem;
}

.pk-topics .ttl span {
    font-size: 2.2rem;
    font-weight: 600;
}

@media screen and (max-width: 767px) {


    .pk-topics .row div {
        font-size: 1.6rem;
        padding: 0 3rem;
        line-height: 2.4rem;
    }

}