@charset "utf-8";

/* top-index
------------------------------------------------------------*/

#top-index {
height: 152vw;
overflow: hidden;
position: relative;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index {
height: 120vw;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index {
height: 65vw;
max-height: 900px;
max-height: 1200px;
}
}

#top-index:before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-image: url("../images/index/top_index_bg_sp.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index:before {
background-image: url("../images/index/top_index_bg_pc.jpg");
background-position: center center;
}
}

#top-index .inner-common {
padding-top: 60px;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index .inner-common {
padding-top: 90px;
max-width: inherit;
margin: 0 6%;
}
}

#top-index h1 {
color: #fff;
font-size: 2rem;
font-weight: 700;
margin: 16vw 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index h1 {
font-size: 2.625rem;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index h1 {
margin: 5vw 0 0 0;
}
}
@media only screen and (min-width: 1264px) { /* 1264px以上で適用、PCフルサイズ用CSS */
#top-index h1 {
margin: 7vw 0 0 0;
}
}

#top-index p {
transition-delay: 0.6s; /* for scroll-in */
display: inline-block; /* for scroll-in */
color: #fff;
font-size: 1rem;
margin: 2em 0 0 0;
text-shadow: 0 0 4px #1f1f1f;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index p {
font-size: 1.25rem;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index p {
margin: 2em 0 0 1em;
}
}

/* End top-index */

/* index-strengths
------------------------------------------------------------*/

#index-strengths {
text-align: center;
background-image: url("../images/index/index_strengths_bg_sp.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-strengths {
background-image: url("../images/index/index_strengths_bg_pc.jpg");
}
}

#index-strengths p {
text-align: center;
}

#index-strengths .img {
margin: 2em auto 0;
width: 80%;
max-width: 300px;
}

#index-strengths ul {
padding: 1em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-strengths ul {
display: flex;
justify-content: space-between;
}
}

#index-strengths li {
position: relative;
background: #f2f2f2;
padding: 1.75em 1em 1em;
margin: 3em 0 0 0;
border-radius: 4px;
box-shadow: 0 0 12px 4px rgba(176,176,176,0.3);
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-strengths li {
width: 31%;
}
}

#index-strengths li span.label {
position: absolute;
display: block;
top: -1em;
left: 50%;
transform: translateX(-50%);
background: #a80012;
color: #fff;
border-radius: 100vh;
padding: 0.25em 1em;
min-width: 6em;
}

/* End index-strengths */


/* index-business
------------------------------------------------------------*/

#index-business p {
text-align: center;
}

#index-business ul {
margin: 2em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-business ul {
margin: 3em 0 0 0;
display: flex;
justify-content: space-between;
}
}

#index-business li {
background: #e5e5e5;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-business li:nth-of-type(2) {
margin: 0 2px;
}
}

@media only screen and (max-width: 767px) { /* 767px以下で適用、スマホ専用CSS */
#index-business li + li {
margin-top: 2em;
}
}

#index-business li p {
padding: 0.5em;
}

/* End index-business */