@charset "UTF-8";
 #indexKey {
height: 300px;
padding: 140px 0 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#54c3f1), to(#A5DEF6));
background: linear-gradient(#54c3f1, #A5DEF6);
position: relative;
}
#indexKey:before {
content: "";
width: 100%;
height: 200px;
background: url(//yamahoshi-web.com/wp-content/themes/yamahoshi/svg/city.svg) repeat-x center bottom -10px;
background-size: 2500px auto;
position: absolute;
bottom: 0;
left: 0;
}
#indexKey:after {
content: "";
width: 240px;
height: 420px;
background: url(//yamahoshi-web.com/wp-content/themes/yamahoshi/svg/shizuku.svg) no-repeat right top;
background-size: 100% auto;
position: absolute;
top: 80px;
right: 0;
}
#indexKey .inner {
z-index: 1;
}
#indexKey figure {
margin-right: auto;
}
#indexKey figure img {
width: 720px;
}
#indexKey .question {
width: calc(100% - 720px);
}
#indexKey .question p {
font-family: "NotoSansJP", sans-serif;
font-size: 2.6vmin;
line-height: 1.4;
text-align: center;
letter-spacing: 0;
font-weight: 700;
margin-bottom: 10px;
color: #fff;
}
#indexKey .question li {
width: 70%;
padding: 5px 0;
margin: 0 auto;
text-align: center;
border-bottom: 1px dotted #fff;
font-family: "NotoSansJP", sans-serif;
font-weight: 700;
line-height: 1.4;
font-size: 16px;
font-size: 1.6rem;
text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
}
#indexKey .question li:before {
color: #009DEE;
font-size: 18px;
font-size: 1.8rem;
margin-right: 8px;
position: relative;
top: 2px;
} #indexIntro {
padding: 80px 0 60px;
}
#indexIntro h2 {
padding: 15px 0;
text-align: center;
font-size: 26px;
font-weight: 500;
line-height: 1;
color: #11a5d3;
border-right: 4px solid #11a5d3;
border-left: 4px solid #11a5d3;
background: rgba(17, 165, 211, 0.1);
}
#indexIntro > div {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#indexIntro > div > section {
width: calc(100% - 604px);
}
#indexIntro .movie {
width: 564px;
padding: 0 0 10px;
border: 1px solid rgba(17, 165, 211, 0.3);
border-radius: 10px;
background: rgba(17, 165, 211, 0.1);
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#indexIntro .movie h5 {
padding-top: 5px;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #11a5d3;
}
#indexIntro .movie h5 span {
display: block;
font-size: 50%;
}
#indexIntro .movie .comment {
margin-bottom: 5px;
text-align: center;
}
#indexIntro .movie .comment span {
padding: 0 10px;
display: inline-block;
border-radius: 30px;
color: #fff;
font-size: 13px;
font-family: "NotoSansJP", sans-serif;
font-weight: 500;
background: #11a5d3;
}
#indexIntro .movie iframe {
width: 544px;
height: 306px;
}
#indexIntro h3, #indexIntro h4 {
margin-top: 30px;
font-size: 20px;
}
#indexIntro h3 i, #indexIntro h4 i {
color: #11a5d3;
}
#indexIntro h3 strong, #indexIntro h4 strong {
font-weight: 500;
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(50%, rgba(255, 222, 0, 0.5)));
background: linear-gradient(transparent 60%, rgba(255, 222, 0, 0.5) 50%);
}
#indexIntro dl {
height: 110px;
margin-top: 15px;
border: 1px solid #e5e5e5;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#indexIntro dt {
width: 110px;
line-height: 110px;
font-weight: bold;
border-right: 1px solid #e5e5e5;
background: #f7f7f7;
text-align: center;
}
#indexIntro dd {
width: calc(100% - 110px);
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} #indexHeader {
text-align: center;
position: relative;
}
#indexHeader h2 {
padding: 25px 0;
font-weight: 500;
line-height: 1;
color: #11a5d3;
border-right: 4px solid #11a5d3;
border-left: 4px solid #11a5d3;
background: rgba(17, 165, 211, 0.1);
}
#indexHeader h2 span {
padding: 8px 20px;
display: inline-block;
border-radius: 30px;
font-size: 15px;
font-size: 1.5rem;
letter-spacing: 1px;
background: #11a5d3;
color: #fff;
margin-top: 15px;
line-height: 1;
} #indexMerit {
background: #f7f7f7;
position: relative;
}
#indexMerit:before {
content: "";
width: 50%;
height: 100%;
background: #fffce5;
position: absolute;
top: 0;
right: 0;
}
#indexMerit section {
counter-increment: meritNum;
position: relative;
}
#indexMerit section:before {
content: "";
width: 50%;
height: 3px;
background: #e1e1e1;
position: absolute;
top: 0;
left: -1px;
}
#indexMerit section:after {
content: "";
width: 50%;
height: 3px;
background: #FFDE00;
position: absolute;
top: 0;
right: -1px;
}
#indexMerit .flex.inner {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#indexMerit .flex.inner:before {
content: "MERIT" counter(meritNum);
width: 160px;
height: 26px;
line-height: 1;
color: #FFDE00;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 26px;
font-size: 2.6rem;
text-align: center;
position: absolute;
top: 35px;
left: 50%;
margin-left: -80px;
}
#indexMerit .flex.inner:after {
content: "MERIT" counter(meritNum);
width: 45px;
height: 26px;
line-height: 1;
overflow: hidden;
color: #d5d5d5;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 26px;
font-size: 2.6rem;
text-align: center;
position: absolute;
top: 35px;
left: 50%;
margin-left: -46px;
}
#indexMerit .flex.inner .ttl {
width: 960px;
text-align: center;
font-size: 28px;
font-size: 2.8rem;
font-weight: 500;
background: #fff;
letter-spacing: 2px;
padding: 5px 0;
position: absolute;
top: 70px;
left: 50%;
margin-left: -480px;
-webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
}
#indexMerit .flex.inner > div {
width: 50%;
padding: 150px 40px 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#indexMerit .flex.inner h3 {
width: 240px;
padding: 5px 0;
margin: 0 auto 25px;
text-align: center;
font-size: 20px;
font-weight: 500;
border-radius: 50px;
position: relative;
}
#indexMerit .flex.inner h3:before {
content: "";
width: 0;
height: 0;
border: 16px solid transparent;
position: absolute;
left: 50%;
bottom: -30px;
margin: 0 0 0 -16px;
}
#indexMerit .flex.inner .hikakuNormal {
background: #e1e1e1;
}
#indexMerit .flex.inner .hikakuNormal:before {
border-top: 14px solid #e1e1e1;
}
#indexMerit .flex.inner .hikakuMe {
background: #FFDE00;
}
#indexMerit .flex.inner .hikakuMe:before {
border-top: 14px solid #FFDE00;
}
#indexMerit .blcIntro {
border-right: 1px solid #fff;
}
#indexMerit .case {
border-left: 1px solid #fff;
}
#indexMerit .case h4 {
font-size: 20px;
font-size: 2rem;
text-align: center;
line-height: 1.4;
font-weight: 500;
color: #11a5d3;
margin-bottom: 15px;
}
#indexMerit .case h4 strong {
font-size: 28px;
font-size: 2.8rem;
padding: 0 5px;
margin: 0 5px;
background: rgba(255, 222, 0, 0.6);
line-height: 2;
}
#indexMerit p {
font-size: 18px;
font-size: 1.8rem;
text-align: center;
font-family: "NotoSansJP", sans-serif;
}
#indexMerit .note {
color: #888;
font-size: 13px;
font-size: 1.3rem;
padding-left: 22px;
position: relative;
}
#indexMerit .note:before {
content: "※";
font-family: "NotoSansJP", sans-serif;
margin-right: 5px;
}
#indexMerit .note a {
color: inherit;
text-decoration: underline;
}
#indexMerit .note a:hover {
text-decoration: none;
}
#indexMerit .graph {
text-align: center;
padding: 50px 0 40px;
background: url(//yamahoshi-web.com/wp-content/themes/yamahoshi/images/grid01.png) center top;
background-size: 30px;
position: relative;
}
#indexMerit .graph:before {
content: "";
width: 0;
height: 0;
border: 80px solid transparent;
border-top: 36px solid #FFDE00;
position: absolute;
left: 50%;
top: 0;
margin: 0 0 0 -80px;
}
#indexMerit .graph:after {
content: "";
width: 0;
height: 0;
border-left: 80px solid transparent;
border-top: 36px solid #e1e1e1;
position: absolute;
left: 50%;
top: 0;
margin: 0 0 0 -80px;
}
#indexMerit .graph figcaption {
margin-bottom: 15px;
font-family: "NotoSansJP", sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 1px;
position: relative;
}
#indexMerit .graph img {
background: #fff;
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
} #indexPrice .case h4 {
margin-top: 10px;
}
#indexPrice .case h4 strong {
font-size: 34px;
font-size: 3.4rem;
}
#indexPrice .case h4 strong span {
font-size: 50%;
} #indexNotdug .flex.inner {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#indexNotdug .flex.inner > div {
padding-top: 140px;
}
#indexNotdug .flex p, #indexNotdug .flex h4 {
text-align: left;
}
#indexNotdug figure {
margin-bottom: 15px;
} #indexArea {
padding: 60px 0 30px;
background: url(//yamahoshi-web.com/wp-content/themes/yamahoshi/images/indexArea_bg-min.jpg) no-repeat;
background-size: auto 100%;
background-attachment: fixed;
}
#indexArea h4 {
text-align: center;
font-size: 2.8vmin;
line-height: 1.6;
}
#indexArea h4 + p {
text-align: center;
margin: 30px 0;
font-size: 16px;
font-size: 1.6rem;
}
#indexArea .contactBox {
margin-bottom: 60px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#indexArea .contactBox > * {
width: 50%;
text-align: center;
}
#indexArea .contactBox .tel {
width: 390px;
margin: 0 auto;
font-size: 50px;
font-size: 5rem;
padding-top: 20px;
}
#indexArea .contactBox .tel span {
font-size: 16px;
font-size: 1.6rem;
letter-spacing: 7.5px;
right: 15px;
}
#indexArea .contactBox .goContact {
padding: 8px 15px;
display: block;
font-family: "NotoSansJP", sans-serif;
background: #11a5d3;
color: #fff;
font-weight: 500;
font-size: 24px;
font-size: 2.4rem;
letter-spacing: 2px;
border: 1px solid #11a5d3;
border-radius: 5px;
}
#indexArea .contactBox .goContact:hover {
background: rgba(255, 255, 255, 0.3);
color: #11a5d3;
}
#groupCompany h5 {
text-align: center;
margin-bottom: 40px;
padding: 10px 0;
font-size: 30px;
font-size: 3rem;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
}
#groupCompany ul {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#groupCompany ul li {
width: calc(25% - 40px);
margin: 0 20px 40px;
border: 1px solid #fff;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
}
#groupCompany ul li:hover a {
background: #fff;
}
#groupCompany ul li:hover a dt {
color: #11a5d3;
border-bottom-color: #11a5d3;
}
#groupCompany ul li:hover a dd {
color: #11a5d3;
}
#groupCompany ul a {
height: 100%;
display: block;
background: rgba(255, 255, 255, 0.5);
}
#groupCompany ul figure {
width: calc(100% - 30px);
padding: 10px 0 12px;
margin: 0 auto 10px;
border-bottom: 1px dotted #ccc;
text-align: center;
}
#groupCompany ul dl {
padding-bottom: 15px;
text-align: center;
}
#groupCompany ul dt, #groupCompany ul dd {
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}