@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------
ベースの設定
----------------------------------------------------*/
html {
overflow-y: scroll;
height: 100%;
font-size: 62.5% /* 16px x 0.625 = 10px(=1rem) */;
}
body {
background-color: #FFF;
color: #333;
font-size: 1.6rem /* 16px */;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo",sans-serif;
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
_::-webkit-full-page-media, _:future, :root p {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo",sans-serif;
font-weight: 500;
}
nav ul,nav li {
padding: 0;
margin: 0;
list-style: none;
}
a {
opacity: 1;
transition: all .5s ease;
}
a:hover {
text-decoration: none;
opacity: .6;
}
/*----------------------------------------------------
Loading
----------------------------------------------------*/
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#FFF;
text-align:center;
}
#splashLogo {
width: 295px;
height: 148px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splashLogo img {
width: auto;
height: 74px;
}
#splashLogo div {
position: absolute;
top: 50%;
animation: loading 2s infinite;
opacity: 0;
}
.splashLogo__01 {
left: 0;
}
.splashLogo__02 {
left: 74px;
animation-delay: 100ms !important;
}
.splashLogo__03 {
left: 142px;
animation-delay: 200ms !important;
}
.splashLogo__04 {
left: 198px;
animation-delay: 300ms !important;
}
.splashLogo__05 {
left: 250px;
animation-delay: 400ms !important;
}
@media (max-width:768px) {
#splashLogo {
width: 147px;
height: 74px;
}
#splashLogo img {
height: 37px;
}
.splashLogo__02 {
left: 37px;
}
.splashLogo__03 {
left: 71px;
}
.splashLogo__04 {
left: 99px;
}
.splashLogo__05 {
left: 125px;
}
}
/* アイコンの動き */
@keyframes loading {
0% {top:0px; opacity:0;}
50% {top:50px; opacity: 1;}
100% {top:0px; opacity: 0;}
}
/*----------------------------------------------------
汎用class
----------------------------------------------------*/
.wrap {
width: 1110px;
margin: 0 auto;
}
@media (max-width:1110px) {
.wrap {
width: 100%;
padding: 0 3vw;
}
}
@media (max-width:768px) {
.wrap {
padding: 0 10px;
}
}
@media (min-width:769px) {
.pc-br {
display: block;
}
.sp-br {
display: none;
}
}
@media (max-width:768px) {
.pc-br {
display: none;
}
.sp-br {
display: block;
}
}
/*----------------------------------------------------
Header
----------------------------------------------------*/
#header {
height: 100vh;
}
.headerOverlay {
/*background-color: rgba(0,0,0,0.40);*/
background-image: -moz-radial-gradient(rgba(0,0,0,0.50) 10%, rgba(0,0,0,0.40) 10%);
background-image: -webkit-radial-gradient(rgba(0,0,0,0.50) 10%, rgba(0,0,0,0.40) 10%);
background-image: radial-gradient(rgba(0,0,0,0.50) 10%, rgba(0,0,0,0.40) 10%);
background-size: 3px 3px;
height: 100%;
position: relative;
padding: 25px 0 0;
}
@media (max-width:820px) {
.headerOverlay {
background-image: -moz-radial-gradient(rgba(0,0,0,0.50) 20%, rgba(0,0,0,0.40) 20%);
background-image: -webkit-radial-gradient(rgba(0,0,0,0.50) 20%, rgba(0,0,0,0.40) 20%);
background-image: radial-gradient(rgba(0,0,0,0.50) 20%, rgba(0,0,0,0.40) 20%);
}
}
.header__logo {
background-image: url('data:image/svg+xml;utf8,');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: block;
width: 160px;
height: 40px;
text-indent: -9999px;
overflow: hidden;
}
.headerText {
position: absolute;
/*top: calc(50% - 40px);*/
bottom: 0;
left: 0;
right: 0;
height: 50vh;
padding: 0 0 60px;
overflow: hidden;
}
.headerText h2 {
text-align: center;
margin-bottom: 100px;
}
.headerText h2 img {
margin: 0 auto;
}
.headerText p {
color: #FFF;
font-size: 1.5rem;
text-align: center;
line-height: 1.5;
}
@media (max-width:1024px) {
.headerText {
padding: 0 10px 15px;
}
.headerText h2 {
margin-bottom: 20px;
}
.headerText h2 img {
width: 260px;
}
.headerText p {
font-size: 1.2rem;
}
}
#video-area {
position: fixed;
z-index: -1;/*最背面に設定*/
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
.video {
/*天地中央配置*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}
@media (orientation: landscape) {
#videoPC {
display: block;
}
#videoSP {
display: none;
}
}
@media (orientation: portrait) {
#videoPC {
display: none;
}
#videoSP {
display: block;
}
}
/*----------------------------------------------------
Main
----------------------------------------------------*/
#container {
background-color: #FFF;
}
@keyframes fadeinUp {
100% {
transform: translateY(0);
opacity: 1;
}
}
.visible {
opacity: 0;
transform: translateY(30px);
}
.visible.is-show {
animation: fadeinUp 1s ease forwards;
}
#service {
background-color: #FAFAFA;
background-image: url('data:image/svg+xml;utf8,');
background-position: top 50px center;
background-repeat: no-repeat;
background-size: 808px 202px;
padding: 150px 0 25px;
}
@media (max-width:1024px) {
#service {
background-image: url(none);
padding: 25px 0 10px;
}
}
.service__text {
padding: 0 10px;
margin-bottom: 20px;
}
.service__text img {
margin: 0 auto;
}
.service__menu {}
.service__menu ul {
display: flex;
justify-content: center;
}
.service__menu ul li {
width: calc(350 / 1110 * 100%);
margin: 0 calc(20 / 1110 * 100%) 0 0;
}
.service__menu ul li:last-child {
margin-right: 0;
}
@media (max-width:480px) {
.service__menu ul {
flex-direction: column;
}
.service__menu ul li {
width: 100%;
margin-right: 0;
margin-bottom: 15px;
}
}
#service01 {
background: #FFF linear-gradient(#FFE7E5,#FFE7E5) top 180px left/10px 595px repeat-x;
overflow: hidden;
}
#service01 strong,
#service01 a:not(.btn) {
color: #DF3B2E;
}
#service02 {
background: #FFF linear-gradient(#E9DDC9,#E9DDC9) top 180px left/10px 595px repeat-x;
overflow: hidden;
}
#service02 strong,
#service02 a:not(.btn) {
color: #96691D;
}
#service03 {
background: #FFF linear-gradient(#BDDCD1,#BDDCD1) top 180px left/10px 595px repeat-x;
overflow: hidden;
}
#service03 strong,
#service03 a:not(.btn) {
color: #267E5E;
}
@media (max-width:820px) {
#service01 {
background: #FFE7E5 linear-gradient(#FFF,#FFF) top left/10px 70px repeat-x;
}
#service02 {
background: #E9DDC9 linear-gradient(#FFF,#FFF) top left/10px 70px repeat-x;
}
#service03 {
background: #BDDCD1 linear-gradient(#FFF,#FFF) top left/10px 70px repeat-x;
}
}
.serviceSection {
position: relative;
padding: 90px 0 50px;
}
@media (max-width:820px) {
.serviceSection {
padding: 20px 0;
}
}
.serviceSection::before {
content: '';
background: url("../img/tile.png") 0 0/111px 111px repeat;
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 120%;
z-index: 1;
opacity: 0.3;
transform: translate(-50%, -50%) rotate(-7.31deg);
}
@media (max-width:768px) {
.serviceSection::before {
background-size: 60px 60px;
}
}
.serviceSection .wrap {
position: relative;
z-index: 10;
}
.serviceSection__block {
display: flex;
align-items: flex-start;
/*margin-bottom: 20px;*/
}
.serviceSection__text {
width: calc(445 / 1110 * 100%);
margin: 75px calc(30 / 1110 * 100%) 50px 0;
position: relative;
}
@media (max-width:820px) {
.serviceSection__text {
width: 100%;
margin: 30px 0 50px;
}
}
.serviceSection__text p {
font-size: 1.8rem;
margin-bottom: 1em;
}
@media (max-width:768px) {
.serviceSection__text p {
font-size: 1.4rem;
}
}
.fontSize--12px {
font-size: 1.2rem;
}
.serviceSection__no {
width: 80px;
position: absolute;
top: 0;
left: -85px;
}
.serviceSection__no img {
margin: 0 auto;
}
.serviceSection__tag {
margin-bottom: 10px;
}
.serviceSection__h2 {
margin-bottom: 10px;
}
@media (max-width:1280px) {
.serviceSection__no {
left: 0;
top: -10px;
}
#service02 .serviceSection__no {
top: 0;
}
/* .serviceSection__tag {
padding-left: 85px;
}*/
.serviceSection__h2 {
/* padding-left: 85px;*/
padding-right: 10vw;
margin-bottom: 20px;
}
}
.serviceSection__img--sp {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0 -3vw 30px;
width: 100%;
position: relative;
padding: 0 3vw;
box-sizing: content-box;
}
.serviceSection__img--sp span {
display: block;
padding-top: 400px;
}
@media (min-width:821px) {
.serviceSection__img--sp {
display: none;
}
}
@media (max-width:768px) {
.serviceSection__img--sp {
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
}
.serviceSection__img--sp span {
padding-top: 210px;
}
#service03 .serviceSection__img--sp {
background-position: center bottom;
}
}
.serviceSection__logo {
margin-bottom: 10px;
}
@media (max-width:1280px) {
.serviceSection__logo {
margin-bottom: 20px;
}
.serviceSection__logo img {
/* margin: 0 auto;*/
width: 260px;
}
}
.serviceSection__btn {
margin-bottom: 30px;
}
.btn {
border-radius: 4px;
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
font-size: 1.8rem;
line-height: 1.3;
height: 47px;
text-decoration: none;
}
.btn_red {
background-color: #DF3B2E;
}
.btn_brown {
background-color: #96691D;
}
.btn_green {
background-color: #267E5E;
}
.serviceSection__img--pc {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 250px 80px 30px 0;
width: calc(635 / 1110 * 100%);
margin-bottom: 20px;
}
.serviceSection__img--pc span {
display: block;
padding-top: calc(450 / 635 * 100%);
}
@media (max-width:820px) {
.serviceSection__img--pc {
display: none;
}
}
.serviceSection__slide {
margin-left: calc((100% - 1110px) / 2);
position: relative;
z-index: 10;
}
@media (max-width:1110px) {
.serviceSection__slide {
margin-left: 3%;
}
}
@media (max-width:768px) {
.serviceSection__slide {
margin-left: 10px;
}
}
.serviceSection__slide h3 {
position: absolute;
top: -40px;
}
.slide {
overflow: hidden;
}
.slide__item {
width: 250px;
margin-right: 20px;
}
@media (max-width:768px) {
.slide__item {
width: 140px;
}
}
.slide__item--img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
margin-bottom: 15px;
}
@media (max-width:768px) {
.slide__item--img {
margin-bottom: 10px;
}
}
.slide__item--img span {
display: block;
padding-top: 100%;
}
.slide__item--text {
color: #545454;
font-size: 1.6rem;
}
@media (max-width:768px) {
.slide__item--text {
font-size: 1.4rem;
line-height: 1.5;
}
}
.slide-arrow {
display: none;
}
@media (min-width:769px) and (max-width:1500px) {
.slide-arrow {
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
border: none;
border-radius: 0;
display: block;
width: 44px;
height: 44px;
padding: 0;
position: absolute;
top: 103px;
text-indent: -9999px;
overflow: hidden;
z-index: 100;
}
.slide-prev {
background-image: url("../img/prev.png");
left: -22px;
}
.slide-next {
background-image: url("../img/next.png");
right: 0;
}
}
/*----------------------------------------------------
Footer
----------------------------------------------------*/
#footer {
background: #FAFAFA linear-gradient(#FFF,#FFF) top left/10px 90px repeat-x;
padding: 20px 10px 30px;
font-size: 1.4rem;
}
@media (max-width:768px) {
#footer {
background-image: none;
}
}
#footer a {
color: #333;
text-decoration: none;
}
.serviceNav {
margin-bottom: 50px;
}
.serviceNav ul {
display: flex;
justify-content: center;
}
.serviceNav ul li {
width: 295px;
margin: 0 10px;
}
@media (max-width:768px) {
.serviceNav ul {
flex-direction: column;
}
.serviceNav ul li {
width: 100%;
margin: 0 0 20px;
}
}
.serviceNav__a {
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 140px;
padding: 20px 30px;
}
.serviceNav__a--01 {
background-color: #FFE7E5;
}
.serviceNav__a--02 {
background-color: #E9DDC9;
}
.serviceNav__a--03 {
background-color: #BDDCD1;
}
@media (min-width:481px) {
.serviceNav__a .sp {
display: none;
}
}
@media (max-width:480px) {
.serviceNav__a .pc {
display: none;
}
.serviceNav__a .sp {
display: block;
}
}
.serviceNav__a img + img {
margin-top: 5px;
}
.footerLogo {
margin: 0 0 50px;
}
.footerLogo img {
margin: 0 auto;
}
@media (max-width:768px) {
.footerLogo img {
width: 260px;
}
}
.footerNav {
margin-bottom: 10px;
}
.footerNav ul {
display: flex;
justify-content: center;
}
.footerNav ul li {
margin: 0 10px;
}
.copyright {
text-align: center;
}