@charset "UTF-8";
/* CSS Document */
/*--------------------
事業内容
---------------------*/
.section-title {
font-size:30px;
padding: 30px 0;
margin-left: 5%;
letter-spacing: 3px;
width:90%;
border-bottom: dotted 2px #FF0105;
animation: SlideIn 1.6s ;
}
/* CSSアニメーションの設定 */
@keyframes SlideIn {
0% {
opacity: 0;/*初期状態では透明に*/
transform: translateX(64px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.section-sub{
margin:1% 5% 0%;
width:90%;
text-align: left;
font-size:30px;
animation: SlideIn 1.6s ;
}
.works-list-item{
margin:0 5% 5%;
}
.works-list{
width:80%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
justify-content: space-around;
}
.card :hover{
opacity: 0.5;
}
.card-img {
max-width: 100%;
height: auto;
}
.card-title {
font-size: 18px;
margin-bottom: 20px;
text-align: center;
color: #333;
}
/*--------------------
県別表示
---------------------*/
.kenbetsu-sp{
display: none;
}
.btn-sticky {
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 10px #F8E2E2;/*左線*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
width: 8%;
font-size: 16px;
margin: 20px 5px 10px;
text-align: center;
}
.btn-sticky:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
.btn-sticky1 {
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid #FF0004 10px ;/*左線*/
color: #FF0004;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
width: 8%;
font-size: 16px;
margin: 20px 5px 10px;
text-align: center;
}
.btn-sticky1:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
.prefecture{
list-style: none;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin-top:30px;
margin-right:4%;
}
.prefecture2{
list-style: none;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin-top:30px;
margin-right:4%;
}
/*--------------------
運営事例
---------------------*/
.works-list-second{
width:90%;
margin: 5% auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
justify-content: flex-start;
}
.works-list-item-second{
margin: 2% auto;
}
.card-second {
width: 100%;
background: #fff;
box-shadow: 0 10px 10px #ccc;
}
.card-content-second {
padding: 2px;
}
.card-title-second {
font-size: 16px;
margin: 5px;
text-align: center;
color: #333;
}
/*------------------
* footer
------------------*/
.footer{
background-color: #800000;
position: relative;
padding: 80px 0;
}
.footer .footer-logo img{
width:80%;
}
.nav-item-footer>a{
color: #fff;
font-size:18px;
line-height: 5px;
}
.nav-list-footer{
display: flex;
justify-content: space-around;
line-height:50px;
position: relative; top: -100px; z-index: 2;
}
.logo-background {
position: relative; top: 250px; z-index: 1;
}
.footer .nav-list-footer{
margin-bottom: 24px;
}
.footer .nav-list-footer:last-of-type{
margin-bottom: 64px;
}
.footer .nav-list-footer .nav-item-footer:first-of-type{
margin-left: 0;
}
.address{
margin-bottom: 80px;
}
.footer-last{
color: #fff;
}
.works-list-b-second{
margin: 5%;
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.works-list-b-second img{
width: 100%;
}
.works-list-item{
margin-right:5%;
}
.works-list-item-bunner {
width: 300px;
margin: 5% 5%;
}
@media screen and (max-width: 1380px){
.works-list-second{
width:60%;
margin: 5% 20%;
}
}
/* for iPad*/
@media screen and (max-width: 1200px){
/*ヘッダー*/
.logo{
width: 12%;
}
.header-nav1 .nav-list-first .nav-item-first{
float: right;
margin: 5px 5px 0px ;
text-align: center;
font-size: 16px;
}
.section-title{
width: 90%;
margin: 0px 5% 0px;
text-align: center;
font-size:18px;
margin-top:10px;
padding: 15px 0 15px;
}
.section-sub{
width: 90%;
margin: 5px 5% 0px;
text-align: center;
font-size: 16px;
}
/*コンテンツ*/
.card-second{
width: 180px;
}
.card-title-second{
font-size:16px;
}
img.card-img-second{
width:100%;
}
.works-list-second{
width: 60%;
margin: 5% 20%;
}
}
@media screen and (max-width: 789px){
body{
background-color: white;
}
.hr{
height: 80px;
}
.header-nav1 {
display: none;
}
.header-nav{
display: none;
}
.header-nav-sp{
display: block;
}
.humb-menu label{
}
.humberger-button img{
width: 60px;
height: 60px;
position: fixed;
top: 10px;
right:10px;
}
.humberger-button {
z-index: 120;
}
.humb-menu{
width: 100%;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 0px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#gnav-input:checked ~ #gnav-content {
top: 0px;
}
#gnav-content {
background-color:white;
opacity: 0.99;
position: fixed;
top: 200%;
left: 0;
z-index: 50;
transition: 0.3s;
width: 80%;
margin-left: 20%;
height:900px;
}
.humb-menu__title {
padding: 1.5rem;
}
.humb-menu label {
position: relative;
top: 40px;
display: flex;
justify-content: space-between;
padding: 1.5rem;
}
.humb-menu input {
display: none;
}
.humb-menu .accshow {
height: 0;
overflow: hidden;
}
.humb-menu .accshow p {
padding: 40px 0 20px 0;
}
.humb-menu .cssacc:checked + .accshow {
height: auto;
}
.section-title{
font-size:18px;
text-align: center;
margin-top:30px;
}
.kenbetsu{
display: none;
}
.kenbetsu-sp{
display: block;
width: 90%;
margin: 50px auto;
}
.works-list-second{
width: 95%;
margin: 5% auto;
}
.card-second {
width: 150px;
height: 180px;
}
.card-title-second{
font-size: 12px;
}
/*フッター*/
.works-list-b-second{
display: block;
}
.works-list-b-second img{
width: 60%;
margin: 0 20%;
}
.footer-logo{
position: relative;
top: 250px;
}
.nav-list-footer{
display: block;
}
.nav-item-footer>a{
color: #fff;
font-size:16px;
padding-left: 20px;}
.nav-list-a{
margin-top: 60px;
}
.works-list-item-bunner{
width: 100%;
margin: 0%;
}
/*フッター*/
.footer-logo{
position: relative;
top: 250px;
}
.nav-list-footer{
display: block;
}
.nav-item-footer>a{
color: #fff;
font-size:16px;
}
.works-list-b-second{
display: block;
width: 40%;
margin: 0 auto;
}
.works-list-b-second img{
margin: 0;
}
.works-list-item-bunner{
margin-bottom: 30px;
}
.works-list-b-second img {
width: 80%;
}
}
@media screen and (max-width: 750px){
.section-title{
font-size:18px;
text-align: center;
}
.section-sub{
font-size: 16px;
}
.about{
font-size: 16px;
}
.gnav {
font-size: 18px ;
}
.card-second{
width: 180px;
}
.section-title{
font-size:18px;
}
.works-list-second{
width: 90%;
margin: 2% 5%;
}
/*フッター*/
.nav-list-footer{
display: block;
}
.nav-item-footer>a{
color: #fff;
font-size:16px;
}
.btn-sticky{
width: 5%;
font-size: 12px;
margin: 20px auto;
}
.btn-sticky1{
width: 5%;
font-size: 12px;
margin: 20px auto;
}
}
/* 簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい） */
@media screen and (max-width: 420px){
.logo {
width:15%;
}
.header-nav1{
width: 75%;
}
.navigation-a li{
width: 150px;
font-size: 12px;
}
.navigation-a li li{
font-size:12px;
}
.navigation-a li li.shirink>a{
font-size:10px;
}
.navigation{
width:70px;
}
.header-nav1 .nav-list-first .nav-item-first{
width: 100px;
font-size: 14px;
margin:20px 10px 20px 0;
}
.gnav.navigation-a{
font-size: 14px;
}
.gnav.navigation-a{
font-size: 14px;
position: relative;
top:10px;
right:100px;
}
.btn-sticky {
width: 5%;
font-size: 12px;
margin: 20px auto;
}
.btn-sticky:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
.btn-sticky1 {
width: 5%;
font-size: 12px;
margin: 20px auto;
}
}
@media screen and (min-width: 1800px){
.inner{
padding:50px 0;
}
.works-list{
width:96%;
margin: 30px auto;
display: flex;
flex-direction: row;
}
.works-list-item-second {
margin: 2% 1%;
}
.works-list-item-b{
margin: 0 5% 5%;;
}
}