html{
/* font-size: 62.5%; */
-webkit-text-size-adjust: 100%;
}
body{
line-height: 1.55;
background: #fff;
font-family:'Noto Sans JP','游ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo',serif;
font-size: 1.1rem;
color: #3C2C25;
font-weight: 500;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* font-smoothing: antialiased; */
}
figure{
text-align: center;
}
img{
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic; /* IE8以降で画像が縮小表示された際にきれいに表示*/
vertical-align: middle;
}
a{
text-decoration: none;
/* color: #3C2C25; */
outline: none;
}
a,p{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/********** Template CSS **********/
:root {
/* --primary: #2f3e92; */
--primary: #04682d;
--light: #F6F7F8;
--dark: #1A2A36;
}
.text-primary1{
color: hsl(160, 56%, 30%) !important;
font-size: larger;
}
@media screen and (max-width: 959px) {
.text-primary1{
font-size:large;
}
}
@media screen and (max-width: 480px) {
.text-primary1{
font-size:medium;
}
}
.text-primary1::before {
/* background:url(../img/.png) 0 0 no-repeat; */
content: url(../img/logo_80.jpg) ;
padding-right: 0.2em;
text-align:center;
vertical-align: middle;
width: 50px;
max-height: 95%;
}
.text-primary100::before {
content: '';/*何も入れない*/
background-image: url(../img/logo_white.png) ;
background-repeat:no-repeat;
display: inline-block;
/* content: url(../img/logoKYORITSU50_wh.png) ; */
padding-right: 0.1em;
text-align:center;
background-size: contain; /*contain 画像の縦横比は維持したまま、疑似要素いっぱいに*/
vertical-align: middle; /* display: inline-blockで要素と画像を横に並べたいときには、vertical-align: middleを指定しておくと綺麗に横に並ぶ*/
width: 350px;/*画像の幅*/
height: 50px;/*画像の高さ*/
}
@media screen and (max-width: 959px) {
/* 959px以下に適用されるCSS（タブレット用） */
.text-primary100:before {
/* width: 75%; */
width: 120px;/*画像の幅*/
height: 30px;/*画像の高さ*/
max-width: 100%;
max-height: 100%;/*画像の高さ*/
}
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.text-primary100:before {
/* width: 75%; */
width: 100px;/*画像の幅*/
height: 30px;/*画像の高さ*/
max-width: 100%;
max-height: 100%;/*画像の高さ*/
}
}
.fw-medium {
font-weight: 500 !important;
}
.fw-bold {
font-weight: 700 !important;
}
.fw-black {
font-weight: 900 !important;
}
.back-to-top {
position: fixed;
display: none;
right: 45px;
bottom: 45px;
z-index: 99;
}
/*** Spinner ***/
#spinner {
opacity: 0;
visibility: hidden;
transition: opacity .5s ease-out, visibility 0s linear .5s;
z-index: 99999;
}
#spinner.show {
transition: opacity .5s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}
/*** Button ***/
.btn {
font-weight: 500;
transition: .5s;
}
.btn.btn-primary,
.btn.btn-outline-primary:hover {
color: #FFFFFF;
}
.btn-square {
width: 38px;
height: 38px;
}
.btn-sm-square {
width: 32px;
height: 32px;
}
.btn-lg-square {
width: 48px;
height: 48px;
}
.btn-square,
.btn-sm-square,
.btn-lg-square {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
}
/*** Navbar ***/
.navbar.sticky-top {
top: -100px;
transition: .5s;
}
.navbar .navbar-brand,
.navbar a.btn {
height: 75px;
}
.navbar .navbar-nav .nav-link {
margin-right: 30px;
padding: 25px 0;
color: var(--dark);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
outline: none;
text-decoration: none; /* デフォルトのunderlineを消す */
border-bottom: 2px solid transparent; /* ホバー前は透明な下線 */
transition: border-color 0.3s; /* なめらかに表示 */
padding-bottom: 2px;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: var(--primary);
border-bottom: 2px solid #01af18; /* ホバー時の色 (Bootstrapのprimary) */
transition: border-color 0.3s; /* なめらかに表示 */
}
.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
vertical-align: middle;
margin-left: 8px;
}
@media (max-width: 991.98px) {
.navbar .navbar-nav .nav-link {
margin-right: 0;
padding: 10px 0;
}
.navbar .navbar-nav {
border-top: 1px solid #EEEEEE;
}
}
@media (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: block;
border: none;
margin-top: 0;
top: 150%;
opacity: 0;
visibility: hidden;
transition: .5s;
}
.navbar .nav-item:hover .dropdown-menu {
top: 100%;
visibility: visible;
transition: .5s;
opacity: 1;
}
}
/*** Header ***/
.owl-carousel-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
background: rgba(0, 0, 0, .1);
}
@media (max-width: 768px) {
.header-carousel .owl-carousel-item {
position: relative;
/* 2024.10.3 rev */
/* min-height: 500px; */
}
.header-carousel .owl-carousel-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.header-carousel .owl-carousel-item p {
/* カルーセルの文字：旭洋 */
font-size: 14px !important;
}
#guni-pat{
font-size: 12px !important;
}
}
@media (max-width: 480px) {
.header-carousel .owl-carousel-item {
position: relative;
/* 2024.10.3 rev */
/* min-height: 500px; */
}
.header-carousel .owl-carousel-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.header-carousel .owl-carousel-item p {
/* カルーセルの文字：旭洋 */
font-size:xx-small !important;
}
#guni-pat{
font-size:xx-small !important;
}
}
/* ドット丸の */
.header-carousel .owl-dots {
position: absolute;
width: 180px;
height: 100%;
top: 0;
right: 6%;
/* right: 30px; */
/* margin: 0 auto; */
display: flex;
/* flex-direction: column; コメントアウト*/
align-items: center;
/*コレ*/justify-content: space-around;
/* justify-content:space-between; */
/* border: 1px solid #999; */
/* background: #25686e; */
justify-content: space-around; /* space-around：flexアイテムの両側の余白を均等にする */
}
.header-carousel .owl-dots .owl-dot {
position: relative;
top:2%;
width: 45px;
height: 45px;
margin: 5px 0;
background: #FFFFFF;
box-shadow: 0 0 30px hsl(0, 0%, 100%);
border-radius: 45px;
transition: .5s;
border: 1px solid #999;
}
.header-carousel .owl-dots .owl-dot.active {
width: 60px;
height: 60px;
}
.header-carousel .owl-dots .owl-dot img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
padding: 2px;
border-radius: 45px;
transition: .5s;
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.header-carousel .owl-dots {
width: 100px;
}
.header-carousel .owl-dots .owl-dot {
width: 20px;
height: 20px;
}
.header-carousel .owl-dots .owl-dot.active {
width: 30px;
height: 30px;
}
}
/* ポリシー */
.page-header_Policy {
content: '';/*何も入れない*/
/* background-image: url(../img/715589645-min_2000-700.jpeg) ; */
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/Policy_2000-500.jpg) top center no-repeat;
/* background-size: cover; */
padding-top: 25%; /* 縦500px/幅2000px ＝0.25 の比率で */
/* padding-top: 30%; 縦600px/幅2000px ＝0.3 の比率で */
background-size:contain;
/* background-position: center bottom 8%; */
background-position: center center;
height: auto;
width: 100%;
position: relative;
aspect-ratio: 4/1;
/* padding-top: 1rem !important; */
}
.page-header_Policy::before{
content: "";
display: block;
padding-top: 0%;
}
/* 会社概要 */
.page-header_company {
content: '';/*何も入れない*/
/* background-image: url(../img/715589645-min_2000-700.jpeg) ; */
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/4153717_m_r.jpg) top center no-repeat;
/* background-size: cover; */
padding-top: 25%; /* 縦500px/幅2000px ＝0.25 の比率で */
/* padding-top: 30%; 縦600px/幅2000px ＝0.3 の比率で */
background-size:contain;
/* background-position: center bottom 8%; */
background-position: center center;
height: auto;
width: 100%;
position: relative;
aspect-ratio: 4/1;
/* padding-top: 1rem !important; */
}
.page-header_company::before{
content: "";
display: block;
padding-top: 0%;
}
/* 施工実績 */
.page-header_workdesign {
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/works_tps_headbanner2000-500.jpg) top center no-repeat;
/* background-size: cover; */
padding-top: 25%; /* 縦500px/幅2000px ＝0.25 の比率で */
/* padding-top: 30%; 縦600px/幅2000px ＝0.3 の比率で */
background-size:contain;
/* background-position: center bottom 8%; */
background-position: center center;
height: auto;
width: 100%;
position: relative;
aspect-ratio: 4/1;
}
.page-header_workdesign ::before{
content: "";
display: block;
padding-top: 0%;
}
/* TOTAL PRODUCE SYSTEM */
.page-header_worketps {
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/works_tps_headbanner2000-500.jpg) top center no-repeat;
/* background-size: cover; */
padding-top: 25%; /* 縦500px/幅2000px ＝0.25 の比率で */
/* padding-top: 30%; 縦600px/幅2000px ＝0.3 の比率で */
background-size:contain;
/* background-position: center bottom 8%; */
background-position: center center;
height: auto;
width: 100%;
position: relative;
aspect-ratio: 4/1;
}
.page-header_worketps::before{
content: "";
display: block;
padding-top: 0%;
}
/* 施工実績 */
.page-header_works {
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/works_2000-500.jpg) top center no-repeat;
/* background-size: cover; */
padding-top: 25%; /* 縦500px/幅2000px ＝0.25 の比率で */
/* padding-top: 30%; 縦600px/幅2000px ＝0.3 の比率で */
background-size:contain;
/* background-position: center bottom 8%; */
background-position: center center;
height: auto;
width: 100%;
position: relative;
aspect-ratio: 4/1;
}
.page-header_works::before{
content: "";
display: block;
padding-top: 0%;
}
.page-header_inquiry{
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/955190082-min_2000-500.jpg) top center no-repeat;
/* background-size: cover; */
/* background-size: cover; */
padding-top: 25%; /* 縦500px/幅2000px ＝0.25 の比率で */
/* padding-top: 30%; 縦600px/幅2000px ＝0.3 の比率で */
background-size:contain;
/* background-position: center bottom 8%; */
background-position: center center;
height: auto;
width: 100%;
position: relative;
aspect-ratio: 4/1;
}
.page-header_inquiry::before{
content: "";
display: block;
padding-top: 0%;
}
.header_inquiry::before{
content: "";
display: block;
padding-top: 0%;
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.page-header_worketps {
object-fit: cover;
aspect-ratio: 16 / 9;
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/works_tps_headbanner640-480.jpg) top center no-repeat;
background-size:cover;
}
.page-header_works {
object-fit: cover;
aspect-ratio: 16 / 9;
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/works_640-480.jpg) top center no-repeat;
background-size:cover;
}
.page-header_company {
object-fit: cover;
aspect-ratio: 16 / 9;
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/4153717_m_640-480.jpg) top center no-repeat;
background-size:cover;
}
.page-header_Policy {
object-fit: cover;
aspect-ratio: 16 / 9;
background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(../img/Policy_640-480.jpg) top center no-repeat;
background-size:cover;
}
}
@media screen and (max-width: 1440px) {
.page-header .page-header_kojin .page-header_houjin .page-header_works .page-header_inquiry{
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
}
@media screen and (max-width: 959px) {
.page-header .page-header_kojin .page-header_houjin .page-header_works .page-header_inquiry{
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
}
@media screen and (max-width: 480px) {
.page-header .page-header_kojin .page-header_houjin .page-header_works .page-header_inquiry{
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
}
/* イメージに合わせて 2024.10.03 */
.container{
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container::before{
content: "";
display: block;
padding-top: 0%;
}
.container-inner{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 90%;
height: 8.2rem;
}
.ksshadow p{
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
color: #eeeeee;
/* font-size: 50px; */
text-shadow: 2px 3px 3px rgba(34, 34, 34, 0.4), 2px 3px 3px rgba(34, 34, 34, 0.4);
/* font-weight: bold;background-color: #0dcaf0; */
background-color: rgb(54, 124, 180)(0, 0, 0, 1);
/* background-color:#066bbe; */
font-weight:bolder;
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--light);
}
.title-gunib1{
font-size: 3.44vw !important;
}
.title-gunib2{
font-size: 2.44vw !important;
}
.title-gunib3{
font-size:small !important;
}
/* 2024.10.03 add suzuki */
@media screen and (max-width: 959px) {
/* 959px以下に適用されるCSS（タブレット用） */
.title-gunib1{
font-size: 3.75vw !important;
}
.title-gunib2{
font-size:small !important;
}
.title-gunib3{
font-size:smaller !important;
}
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.title-gunib1{
font-size:small !important;
}
.title-gunib2{
font-size:small !important;
}
.title-gunib3{
font-size:xx-small !important;
}
}
/*** About ***/
@media (min-width: 992px) {
.container.about {
max-width: 100% !important;
}
.about-text {
padding-right: calc(((100% - 960px) / 2) + .75rem);
}
}
@media (min-width: 1200px) {
.about-text {
padding-right: calc(((100% - 1140px) / 2) + .75rem);
}
}
@media (min-width: 1400px) {
.about-text {
padding-right: calc(((100% - 1320px) / 2) + .75rem);
}
}
/*** Service ***/
.service-item {
/* box-shadow: 0 0 45px rgba(0, 0, 0, .08); */
box-shadow: 0 0 2px rgba(0, 60, 116, 0.8);
}
.service-icon {
position: relative;
margin: -50px 0 25px 0;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
background: #FFFFFF;
border-radius: 100px;
box-shadow: 0 0 45px rgba(0, 0, 0, .08);
transition: .5s;
}
.service-item:hover .service-icon {
color: #FFFFFF;
background: var(--primary);
}
/*** Feature ***/
@media (min-width: 992px) {
.container.feature {
max-width: 100% !important;
}
.feature-text {
padding-left: calc(((100% - 960px) / 2) + .75rem);
}
}
@media (min-width: 1200px) {
.feature-text {
padding-left: calc(((100% - 1140px) / 2) + .75rem);
}
}
@media (min-width: 1400px) {
.feature-text {
padding-left: calc(((100% - 1320px) / 2) + .75rem);
}
}
/*** Project Portfolio ***/
#portfolio-flters li {
display: inline-block;
font-weight: 500;
color: var(--dark);
cursor: pointer;
transition: .5s;
border-bottom: 2px solid transparent;
}
#portfolio-flters li:hover,
#portfolio-flters li.active {
color: var(--primary);
border-color: var(--primary);
}
.portfolio-img {
position: relative;
}
.portfolio-img::before,
.portfolio-img::after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
/* background: var(--dark); */
background: #1a2a364f;
transition: .8s;
}
.portfolio-img::before {
left: 50%;
}
.portfolio-img::after {
right: 50%;
}
.portfolio-item:hover .portfolio-img::before {
width: 51%;
left: 0;
}
.portfolio-item:hover .portfolio-img::after {
width: 51%;
right: 0;
}
.portfolio-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 1;
transition: .5s;
}
.portfolio-item:hover .portfolio-btn {
opacity: 1;
transition-delay: .3s;
}
/*** Quote ***/
@media (min-width: 992px) {
.container.quote {
/* max-width: 100% !important; */
max-width:98% !important;
}
.quote-text {
padding-right: calc(((100% - 960px) / 2) + .75rem);
}
}
@media (min-width: 1200px) {
.quote-text {
padding-right: calc(((100% - 1140px) / 2) + .75rem);
}
}
@media (min-width: 1400px) {
.quote-text {
padding-right: calc(((100% - 1320px) / 2) + .75rem);
}
}
/*** Team ***/
.team-item {
/* box-shadow: 0 0 45px rgba(0, 0, 0, .08); */
box-shadow: 0 0 2px rgba(0, 60, 116, 0.8);
}
.team-item img {
/* border-radius: 8px 60px 0 0; */
/* margin:0 2%; */
}
.team-item .team-social {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background: #FFFFFF;
transition: .5s;
}
/*** Testimonial ***/
.testimonial-carousel::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
z-index: 1;
}
.testimonial-carousel::after {
position: absolute;
content: "";
top: 0;
right: 0;
height: 100%;
width: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
z-index: 1;
}
@media (min-width: 768px) {
.testimonial-carousel::before,
.testimonial-carousel::after {
width: 200px;
}
}
@media (min-width: 992px) {
.testimonial-carousel::before,
.testimonial-carousel::after {
width: 300px;
}
}
.testimonial-carousel .owl-nav {
position: absolute;
width: 350px;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
opacity: 0;
transition: .5s;
z-index: 1;
}
.testimonial-carousel:hover .owl-nav {
width: 300px;
opacity: 1;
}
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
position: relative;
color: var(--primary);
font-size: 45px;
transition: .5s;
}
.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
color: var(--dark);
}
.testimonial-carousel .testimonial-img img {
width: 100px;
height: 100px;
}
.testimonial-carousel .testimonial-img .btn-square {
position: absolute;
bottom: -19px;
left: 50%;
transform: translateX(-50%);
}
.testimonial-carousel .owl-item .testimonial-text {
margin-bottom: 30px;
box-shadow: 0 0 45px rgba(0, 0, 0, .08);
transform: scale(.8);
transition: .5s;
}
.testimonial-carousel .owl-item.center .testimonial-text {
transform: scale(1);
}
/*** Contact ***/
@media (min-width: 992px) {
.container.contact {
max-width: 100% !important;
}
.contact-text {
padding-left: calc(((100% - 960px) / 2) + .75rem);
}
}
@media (min-width: 1200px) {
.contact-text {
padding-left: calc(((100% - 1140px) / 2) + .75rem);
}
}
@media (min-width: 1400px) {
.contact-text {
padding-left: calc(((100% - 1320px) / 2) + .75rem);
}
}
/*** Footer ***/
.footer .btn.btn-social {
margin-right: 5px;
color: #9B9B9B;
border: 1px solid #9B9B9B;
border-radius: 38px;
transition: .3s;
}
.footer .btn.btn-social:hover {
color: var(--primary);
border-color: var(--light);
}
.footer .btn.btn-link {
display: block;
margin-bottom: 5px;
padding: 0;
text-align: left;
color: #9B9B9B;
font-weight: normal;
text-transform: capitalize;
transition: .3s;
}
.footer .btn.btn-link::before {
position: relative;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
}
.footer .btn.btn-link:hover {
color: #FFFFFF;
letter-spacing: 1px;
box-shadow: none;
}
.footer .copyright {
padding: 25px 0;
border-top: 1px solid rgba(256, 256, 256, .1);
}
.footer .copyright a {
color: var(--light);
}
.footer .copyright a:hover {
color: var(--primary);
}
/* Reset */
*{
margin: 0;
padding: 0;
/* 2024.10.03 */
box-sizing: border-box;
}
/* wrapper */
.wrapper {
width: 100vw;
max-width: 100%;
text-align: center;
margin-bottom: 12%;
/* height:900px; */
/* max-height:100%; */
/* height: 100vh; 2024.10.03 revised suzuki */
/* overflow:hidden; */
/* aspect-ratio: 1/1; */
background-position: center bottom 1%;
}
.wrapper::before{
/* heightは親要素wrapper と同じ */
content: "";
display:block;
/* padding-top: 100%; */
}
.wrapper__video{
/* postion: relative; */
width: 100%;
/* height: 100vh; */
/* object-fit:cover; */
/* width: 100%; */
/* height: 100%; */
}
/* .video-wrapper:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-image: radial-gradient(black 20%, transparent 20%),
radial-gradient(black 20%, transparent 20%);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
} */
.okyakusamahe{
object-fit:cover;
max-width:50%;
padding: 1%;
}
.okyakusamaheimg{
object-fit:cover;
max-width:30%;
padding: 0%;
}
.tsuyomi{
font-size: calc(1.275rem + .3vw) !important;
}
.companymsg{
font-size: calc(1.275rem + .3vw) ;
}
.aboutmon .footersmon{
font-size: small;
}
.linkservice{
font-size:large;
}
/* 2024.10.03 add suzuki */
@media screen and (max-width: 959px) {
/* 959px以下に適用されるCSS（タブレット用） */
.wrapper{
/* height: 500px!important; */
background-position: center bottom 8%;
}
.header-carousel-wrapper {
/* height: 500px!important; */
}
.wrapper__video .wrapper__video-inner {
position: absolute;
width: auto;
height: 100%;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.okyakusamahe{
height: 250px;
font-size: small;
padding: 1%;
}
.okyakusamaheimg{
/* object-fit:cover; */
object-fit: fill;
max-width:48%;
height: auto;
padding: 2%;
}
.okyakusamahe_h5{
font-size: large;
}
.tsuyomi h3{
font-size:large;
}
.companymsg{
font-size:large!important;
}
.aboutmon {
font-size: small;
}
.footersmon{
font-size: small;
}
.linkservice{
font-size:smaller;
padding-right: 1rem !important;
padding-left: 1rem !important;
}
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.wrapper {
/* height:300px !important; */
background-position: center bottom 8%;
}
.header-carousel-wrapper {
/* height: 400px!important; */
}
.okyakusamahe {
height: 200px;
font-size:small;
max-width: 50%;
}
.tsuyomi h3{
font-size: medium;
}
.companymsg{
font-size:medium!important;
}
.aboutmon{
font-size: small;
}
.footersmon{
font-size: small;
}
.linkservice{
font-size:xx-small;
padding-right: 0.7rem !important;
padding-left: 0.7rem !important;
padding-left: 1rem !important;
text-align: center;
vertical-align: middle;
display: table;
}
}
.c-table1 {
width: 100%;
color: #101920;
font-size: 1.25em;;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: inherit;
}
* {
box-sizing: border-box;
word-break: normal;
word-wrap: break-word;
white-space: normal;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
user agent stylesheet
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
unicode-bidi: isolate;
border-spacing: 2px;
border-color: #dfdfdf;
}
.c-table1__head {
white-space: nowrap;
border-color: #dfdfdf;
}
.c-table1__head, .c-table1__item {
text-align: left;
vertical-align: top;
line-height: 1.75;
border-bottom: 1px solid;
padding: 1.25rem;
}
.c-table1__item {
/* border-color: #dfdfdf; */
}
.c-table1__head, .c-table1__item {
text-align: left;
vertical-align: top;
line-height: 1.75;
padding: 1.25rem;
}
.trmsg td{
padding-left: 2rem!important;
}
@media screen and (max-width:500px){
.c-table1__head {
width: 12.2580645161vw; /* 200(px) / 620(px) * 100vw */
}
.c-table1__head, .c-table1__item {
font-size:large;
}
}
@media screen and (max-width:768px){
.c-table1__head {
width: 12.2580645161vw; /* 200(px) / 620(px) * 100vw */
}
}
.c-table1 table {
margin: 20px auto;
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
unicode-bidi: isolate;
border-spacing: 2px;
border-color: #dfdfdf;
}
.c-table1 th {
background: #ffffff;
/* border: solid 1px #bebdbd; */
color: #101920;
padding: 10px;
}
.c-table1 td {
/* border: solid 1px #dfdfdf; */
padding: 10px;
}
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #dfdfdf;
width: 100%;
}
.c-table1 {
width: 98%;
}
.c-table1 th{
/* border-bottom: none; */
border-bottom:0.5px solid #e6e3e3;
display: block;
width: 100%;
}
.c-table1 td {
border-bottom:0.5px solid #535353;
display: block;
width: 100%;
}
}
/* content
------------------------------------------*/
.inner{
width: 100%;
max-width: 1150px;
margin: 0 auto;
padding: 0 30px;
}
.col {
display: flex;
}
/* caption
------------------------------------------*/
.person01,.person02{
align-items: flex-start;
}
.caption_balloon{
position: relative;
padding: 15px 30px;
border-radius: 10px;
max-width: 580px;
color: #fff;
font-size: 1.6rem;
line-height: 1.5;
letter-spacing: 0.2em;
}
.caption_balloon::after{
content: "";
position: absolute;
bottom: -12px;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 6px;
}
.person01 .caption_balloon{
background-color:#2f3e92; /* #3C2C25; */
border-radius: 10px;
}
.person01 .caption_balloon::after{
left: 25px;
border-color: #3C2C25 transparent transparent #3C2C25;
}
.person02 .caption_balloon{
background-color: #0dcaf0;
padding: 15px 18px;
top: 2.5em;
font-size: 1.1em;
text-align: left;
}
.person02 .caption_balloon::after{
right: 25px;
/* border-color: #93CF30 #93CF30 transparent transparent; */
border-color: #0dcaf0 #0dcaf0 transparent transparent;
}
.person03 .caption_balloon::after{
right: 25px;
/* border-color: #93CF30 #93CF30 transparent transparent; */
border-color: #0dcaf0 #0dcaf0 transparent transparent;
}
.caption_balloon p + p{
margin-top: 6px;
}
.person01 .caption_fg{
width: 233px;
margin-right: 15px;
}
.person02 .caption_fg{
width: 210px;
margin-left: 15px;
}
.person03 .caption_fg{
width: 210px;
margin-left: 15px;
}
@media screen and (max-width:500px){
.caption_balloon{
padding: 15px 18px;
font-size: 1.3rem;
letter-spacing: 0.15em;
}
.person01 .caption_balloon{
border-radius: 10px;
}
}
/* flow
------------------------------------------*/
.flow{
opacity: 1;
/* animation: si_fade 1.5s ease-in; */
overflow: hidden;
padding: 70px 0 105px;
background: url("../img/main_bg03.svg") no-repeat center bottom / 100%,url(../img/flow_bg01_1.png) no-repeat left 14% / 32vw,url("../img/25134496.png") no-repeat right 65% / 12vw;
}
@media screen and (max-width:1440px){
.flow{
background: url(../img/main_bg03.svg) no-repeat center bottom / 100%,url(../img/flow_bg01_1.png) no-repeat left 14% / 463px,url(../img/flow_bg01_r.png) no-repeat right 65% / 480px;
}
}
@media screen and (max-width:768px){
.flow{
padding: 40px 0 70px;
background: url(../img/main_bg03.svg) no-repeat center bottom / 1020px,url(../img/flow_bg01_1.png) no-repeat left 14% / 55%,url(../img/flow_bg01_r.png) no-repeat right 65% / 55%;
}
}
@media screen and (max-width:500px){
.flow{
background: url(../img/flow_bg01_1.png) no-repeat left 14% / 20vw,url("../img/flow_bg01_1.png)") no-repeat right 65% / 12vw;
/*要素の左端から2px、要素の上端から-3pxの位置に背景画像を表示*/
background-position: 0px 450px;
/* background: url(../img/main_bg03.svg) no-repeat center bottom / 1020px,url(../img/flow_bg01_1.png) no-repeat left 14% / 85%,url(../img/flow_bg01_r.png) no-repeat right 65% / 85%; */
}
}
/* flow_list-------------------------------*/
.flow_list{
max-width: 820px;
margin: 0 auto 80px;
counter-reset: number 0;
}
.flow_listItem{
position: relative;
z-index: 10;
justify-content: center;
align-items: flex-start;
}
.flow_listItem:nth-last-of-type(n+2)::before{
content: "";
position: absolute;
bottom: -15%;
left: 37px;
z-index: 1;
display: block;
width: 0;
height: calc(100% - 78px - 20px);
border-right: 2px dotted #3C2C25;
}
.flow_listItem + .flow_listItem{
margin-top: 25px;
}
.flow_listItem .step{
position: relative;
z-index: 10;
margin-right: 20px;
padding-top: 5px;
}
.flow_listItem .step::before{
counter-increment: number 1;
content: "STEP " counter(number, decimal-leading-zero);
display: block;
font-size: 1.4rem;
font-weight: 700;
color: #0dcaf0;
text-align: center;
}
.flow_listItem .step .ic{
display: flex;
justify-content: center;
align-items: center;
width: 78px;
height: 78px;
background-color:#0dcaf0;/* #FF8E3F;*/
border-radius: 15%;
box-shadow: 0 2px 3px rgba(125, 55, 4, 0.26);
}.flow_listItem_content .ttl
.flow_listItem_content{
width: calc(100% - 78px);
}
.flow_listItem_content .ttl{
margin-bottom: 10px;
font-size: 2.4rem;
font-weight: 700;
margin-top: 2.5em;
}
.flow_listItem_content .txtBox{
padding: 20px 25px;
font-size: 1.4rem;
box-shadow: 0 2px 3px rgba(4, 110, 209, 0.16);
text-align: left;
opacity: 0.9;
}
@media screen and (max-width:768px){
.flow_list{
margin-bottom: 50px;
}
}
@media screen and (max-width:500px){
/* 2024.10.05 rev 携帯縦のときflowの変更 */
.flow_listItem{
display: block !important;
}
.flow_listItem .step .ic{
display:none!important;
}
.flow_listItem_content{
/* width:250px; */
min-width:90%;
}
.flow_h2{
font-size:16px!important;
}
.flow_listItem:nth-last-of-type(n+2)::before{
left: calc( ( 100% ) / 2 - 25px );
width: 30px;
height: 30px;
border: 2px solid;
border-color: transparent transparent #0dcaf0 #0dcaf0;
transform: rotate(-45deg);
/* 横方向の>中央寄せ 縦方向の>の中央寄せ 親要素との距離*/
text-align: center;
vertical-align:middle;
text-align: center;
margin: 0 auto;
display: inline-block;
/* margin-right: .3rem; */
}
.flow_list{
padding-left: 1%;
}
.flow_listItem .step{
padding-top: 10%;
}
.card-body{
padding: 1% 1%;
}
.flow{
}
.flow_listItem + .flow_listItem{
margin-top: 20px;
}
.flow_listItem:nth-last-of-type(n+2)::before{
bottom: -12%;
}
.flow_listItem_content .ttl{
margin-bottom: 6px;
font-size: 1.2rem;
}
.flow_listItem_content .txtBox{
padding: 5px;
font-size: 1.0rem;
text-align: left;
}
}
/* txtBox
------------------------------------------*/
.txtBox{
padding: 25px 30px;
background: #f1f8fa;/* #F7F5F0; */
border-radius: 10px;
box-shadow: 0 3px 15px rgba(4, 110, 209, 0.16);
font-size: 1.6rem;
}
.bold{
font-weight: 700;
}
.txtBox p + p{
margin-top: 15px;
}
@media screen and (max-width:768px){
.txtBox{
font-size: 1.4rem;
}
}
/* flow_caption-------------------------------*/
.flow_caption{
position: relative;
}
.flow_caption .person01{
justify-content: flex-end;
flex-direction: row-reverse;
}
.flow_caption .person01 .caption_fg{
margin-top: 40px;
margin-bottom: 35px;
}
.flow_caption .person02{
position: absolute;
top: 23%;
right: 0;
flex-direction: row-reverse;
width: 100%;
}
.flow_caption .person02 .caption_balloon{
width: calc(100% - 245px - 230px);
}
@media screen and (max-width:768px){
.flow_caption{
max-width: 600px;
margin: 0 auto;
}
.flow_caption .person01{
align-items: center;
}
.flow_caption .person02{
position: static;
align-items: center;
margin-top: 0;
}
.flow_caption .caption_fg{
width: 35%;
}
.flow_caption .person01 .caption_fg{
margin-top: 0;
margin-bottom: 0;
}
.flow_caption .caption_balloon{
width: 65%!important;
}
.flow_caption .person02 .caption_balloon{
margin-top: 0;
}
.flow_caption .caption_balloon::after{
bottom: 16px;
border-width: 8px 10px;
}
.flow_caption .person01 .caption_balloon::after{
left: -18px;
border-color: transparent #3C2C25 transparent transparent;
}
.flow_caption .person02 .caption_balloon::after{
right: -18px;
border-color: transparent transparent transparent #93CF30;
}
}
@media screen and (max-width:500px){
.flow_caption .person02{
margin-top: 15px;
}
}
@media screen and (max-width: 500px) {
.inner {
padding: 0 20px 0;
}
}
@media screen and (max-width: 768px) {
.inner {
padding: 0 30px 0;
}
}
@media screen and (max-width: 1024px) {
.inner {
width: 100% !important;
}
}
.sdgsstyl{
margin-left: 3em;
}
/* PC用のCSSはメディアクエリの外に記述する */
@media screen and (max-width: 959px) {
/* 959px以下に適用されるCSS（タブレット用） */
.sdgsstyl{
margin-left: 1em;
}
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.sdgsstyl{
margin-left: 1em;
}
}
.policysite {
background-color: #0f5701;
background-image: linear-gradient(#0f5701, #01af18);
}
.flow_h2{
position: relative;
margin-bottom: 60px;
font-size: 4.0rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.15em;
line-height: 1.4;
}
.flow_h2 {
font-size: 26px;
}
.flow_h2 span {
display: flex;
align-items: center;
color: #498ee0;
font-size: 18px;
text-transform: uppercase;
}
.flow_h2 span::before {
content: '';
display: inline-block;
margin-right: 20px;
width: 40px;
height: 1px;
background-color: #498ee0;
}
.inner{
max-width: 1000px;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 50px;
/* main_bg03.svg は波画像*/
/* background: url(../img/main_bg03.svg) no-repeat center bottom / 100%, url(../img/25134496_200.png) no-repeat left -3% top 1% / 8vw; */
/* background: url(../img/main_bg03.svg) no-repeat center bottom / 100%, url(../img/flow_fg02_1.png) no-repeat left 15% / 8vw, url(../img/flow_fg02_1.png) no-repeat right 1% / 5vw;
*/
}
@media screen and (max-width: 959px) {
/* 959px以下に適用されるCSS（タブレット用） */
.inner{
background: url(../img/main_bg03.svg) no-repeat center bottom / 100%;
}
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
.inner{
background: url(../img/main_bg03.svg) no-repeat center bottom / 100%;
}
}
.worksl3::before{
content: "";
display: block;
background-image: url(../img/);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100px;
position:relative;
left: 0;
bottom: 0;
margin: 0 calc(50% - 50vw);
width: 100vw;
}
.card1{
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
/* background-color: #fff; */
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 8px;
}
.box{
display: flex;
flex-direction: row;
margin-left: 3%;
margin-right: 3%;
}
.box + .box{
margin-top: 80px;
}
.box__body{
width: 50%;
padding: 0 20px;
}
.box__ttl {
font-size: 20px;
text-transform: uppercase;
}
.box__txt {
margin-top: 20px;
}
.box__image{
width: 50%;
}
.box__image img{
height: 100%;
object-fit: cover;
}
.box.reverse{
flex-direction: row-reverse;
}
@media screen and (max-width:767px){
.box {
display: block;
}
.box + .box{
margin-top: 60px;
}
.box__body{
width: 100%;
padding: 0;
}
.box__image{
margin-top: 20px;
width: 100%;
}
}
.sectiondiagonal{
/* clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
background-color:#c4e3f8;
background: linear-gradient(to bottom, rgb(249, 251, 252), rgb(204, 227, 243));
background: -webkit-linear-gradient(top, rgb(249, 251, 252), rgb(204, 227, 243));
background: -moz-linear-gradient(top, rgb(249, 251, 252), rgb(204, 227, 243));
padding: 100px 150px;*/
/* background: url(../img/main_bg03.svg) no-repeat center bottom / 100%, url(../img/tnm1.png) no-repeat left 14% / 32vw, url(../img/quote.jpg) no-repeat right 65% / 33vw; */
}
.gaiyou h1 {
position: relative;
border-top: solid 2px #0b8505;
border-bottom: solid 2px #0b8505;
background: #deecf1;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
padding: 1rem 2rem;
border-left: 15px solid #0b8505;
background: #eaf2fc;
background: linear-gradient(to right, #d1eaff, #ffffff);
background: -webkit-linear-gradient(left, #d1ffe0, #ffffff);
/* background: -webkit-linear-gradient(left, #d1eaff, #ffffff); */
background: -moz-linear-gradient(left, #d1eaff, #ffffff);
}
.gaiyou h1:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Times New Roman','Quicksand','Avenir','Arial',sans-serif;
font-weight: 900;
/* content: '\f0a7\ KYORITSU'; */
background: #047fb8;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
.numbering {
position:relative;
top: -40px;
left: 2px;
color: #fff;
background: #0D1B37;
width: 80px;
height: 80px;
line-height: 80px;
font-size: 42px;
text-align: center;
}
.theme_font {
font-family: 'Oswald', sans-serif;
font-weight: normal;
}
.title_usecase {
border-bottom: 1px solid;
font-size: 25px;
font-weight: bold;
letter-spacing: 3px;
padding-bottom: .3em;
}
.title_usecasetop {
border-top: 1px solid;
font-size: 25px;
font-weight: bold;
letter-spacing: 3px;
padding-bottom: .3em;
height: 1.5em;
}
.box__bodyxxxxx ol > li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.8em;
top: 1px;
width: 2em;
padding: 4px 0;
color: #fff;
background: #0D1B37;
font-weight: normal;
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 90%;
}
#kesiki111 {
position:fixed;
top:0;
z-index:-2;
background-repeat:repeat-y;
}
#kabe111 {
background-color: #066bbe;
position:absolute;
top:1200px;
z-index:-1;
/*safari対策*/
transform:translateZ(-1px);
}
.content111 {
width:80%;
height:10em;
border:solid 6px gray;
}
#sikaku {
mask:url(#mask);
}
#madoarea111 {
width:60%;
height:10em;
margin:0 auto;
border:solid 5px crimson;
}
/* worksのfif*/
.parent-2 {
position: relative;
width: 100%;
max-width: 900px; /* 最大で900pxの幅を持つ */
margin: 0 auto;
}
.parent__inner-2 {
position: relative;
width: 100%;
}
.image-static-2 {
width: 98%;
height: auto; /* オリジナルのアスペクト比を保つため、widthに合わせる */
object-fit: cover; /* img要素が要素のボックスに対してどのように表示されるかを指定 */
filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.7)); /* 画像の影 */
}
.child-2 {
position: absolute;
top: 45%; /* GIF画像の位置調整 */
left: 85%; /* GIF画像の位置調整 */
transform: translateX(-50%);
width: 33vw;
max-width: 500px; /* 最大幅を300px */
}
.image-gif-2 {
width: 100%; /* 親要素にフィットするように設定 */
height: auto; /* ここにも auto を指定した場合、元の画像比率が維持されます */
max-width: 500px; /* 最大幅を300pxに設定 */
max-height: 500px; /* 最大高さを300pxに設定 */
object-fit: cover; /* ここも cover で描画エリア全体にフィットさせる */
}
.repkakusu{
display:none;
}
@media screen and (max-width: 460px){
.repkakusu{
display:block;
}
}
@media screen and (max-width:768px){
.repkakusu{
display:block;
}
}
/* Topic Start */
.news-list{
list-style: none outside;
margin: 0;
padding: 0;
}
.news-list .item a{
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
text-decoration: none;
color: #333;
border-bottom: 1px solid #CCC;
padding: 20px 20px;
}
.news-list .item:first-child a{
border-top: 1px solid #CCC;
}
.news-list .item .date{
margin: 0;
min-width: 140px;
font-size: 16px;
color: #999;
padding: 0 20px 0 0;
}
.news-list .item .category{
margin: 0;
min-width: 140px;
padding: 0 20px 0 0;
}
.news-list .item .category span{
background: #999;
color: #FFF;
text-align: center;
display: inline-block;
padding: 5px 20px;
font-size: 12px;
line-height: 1;
}
.news-list .item .title{
margin: 0;
width: 100%;
}
.news-list .item a:hover .title{
color: #00F;
}
@media screen and (max-width: 767px){
.news-list .item a{
flex-wrap: wrap;
}
.news-list .item .date{
min-width: 100px;
}
.news-list .item .title{
margin-top: 10px;
}
}
/* 装飾 */
/* *{
box-sizing: border-box;
}
a{
text-decoration: none;
}
body{
margin: 20px;
}
.head-border {
display: flex;
align-items: center;
} */
.head-border:before,
.head-border:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
}
.head-border:before {
margin-right: 1rem;
}
.head-border:after {
margin-left: 1rem;
}
.news-list img{
width: 300px;
max-width: 100%;
}
.news-list img::before{
}
.item-innerimg{
top: -15%;
padding: 0;
display: flex;
align-items:center;
justify-content: center;
font-weight: 800;
font-size:larger;
}
/* Topic End */
/* 斜めデザイン */
.slant-bg {
width: 100%;
margin: 0;
padding: 50px 0;
position: relative;
top: 2px;
margin-top: 3rem;
}
.slant-bg p {
width: 65%;
margin: 0 auto;
}
.slant-bg::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #a5ebb7;
transform: skewY(-5deg);
z-index: -1;
/* background-repeat:no-repeat; */
/* background: linear-gradient(rgba(97, 164, 240, 0.1), rgba(250, 251, 252, 0.1)), url(../img/logo_white.png) top center no-repeat; */
background: linear-gradient(rgb(97 240 162 / 10%), rgb(250 252 250 / 10%)) top center no-repeat;
/* background: linear-gradient(rgb(97 240 162 / 10%), rgb(250 252 250 / 10%)), url(../img/logo_white.png) top center no-repeat; */
}
/* 社長メッセージ */
.ceomsg h3{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
font-size:1.5em;
line-height: 1.5em;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 1.01);
-moz-transform-origin: 0 0;
-moz-transform: scale(1, 1.01);
-ms-transform-origin: 0 0;
-ms-transform: scale(1, 1.02);
-o-transform-origin: 0 0;
-o-transform: scale(1, 1.01);
}
.ceomsg p{
/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; */
/* font-size:1.2em; */
line-height: 1.5em;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 1.01);
-moz-transform-origin: 0 0;
-moz-transform: scale(1, 1.01);
-ms-transform-origin: 0 0;
-ms-transform: scale(1, 1.02);
-o-transform-origin: 0 0;
-o-transform: scale(1, 1.01);
}
.transparent-bothends {
position: relative;
width: 80%;
margin: 50px 0;
padding: 20px 0;/*ボーダーとテキストに空間をあける為のpadding*/
color: #2e8506;
text-align: left;
border-style:none;
}
.transparent-bothends::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 95%;
height: 1px;
margin: 0 auto;
text-align: center;
background: #9eeea8; /*この部分は後にlinear-gradientへ*/
background-image: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
background-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
background-position: center;
background-repeat: no-repeat;
}
/* 施工実績 Start */
.sekoujisseki-list{
list-style: none outside;
margin: 0;
padding: 0;
}
.sekoujisseki-list .sekoujisseki-item a{
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
text-decoration: none;
color: #333;
border-bottom: 1px solid #CCC;
padding: 20px 20px;
}
.sekoujisseki-list .sekoujisseki-item:first-child a{
border-top: 1px solid #CCC;
}
.sekoujisseki-list .sekoujisseki-item .sekoujisseki-date{
margin: 0;
min-width: 140px;
font-size: 16px;
color: #999;
padding: 0 20px 0 0;
}
.sekoujisseki-list .sekoujisseki-item .sekoujisseki-category{
margin: 0;
min-width: 140px;
padding: 0 20px 0 0;
}
.sekoujisseki-list .sekoujisseki-item .sekoujisseki-category span{
background: #117722;
color: #FFF;
text-align: center;
display: inline-block;
padding: 5px 20px;
font-size: 12px;
line-height: 1;
}
.sekoujisseki-list .sekoujisseki-item .sekoujisseki-title{
margin: 0;
width: 100%;
display: flex;
/* border-bottom: 1px solid rgb(204, 204, 204); */
}
.sekoujisseki-list .sekoujisseki-item a:hover .sekoujisseki-title{
color: rgb(74, 156, 7);
}
@media screen and (max-width: 767px){
.sekoujisseki-list .sekoujisseki-item a{
flex-wrap: wrap;
}
.sekoujisseki-list .sekoujisseki-item .sekoujisseki-date{
min-width: 100px;
}
.sekoujisseki-list .sekoujisseki-item .sekoujisseki-title{
margin-top: 10px;
}
}
.sekoujisseki-head-border{
text-align: left;
}
.sekoujisseki-head-border:before,
.sekoujisseki-head-border:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
}
.sekoujisseki-head-border:before {
margin-right: 1rem;
}
.sekoujisseki-head-border:after {
margin-left: 1rem;
}
.sekoujisseki-list img{
width: 300px;
max-width: 100%;
}
.sekoujisseki-list img::before{
}
.sekoujisseki-item-innerimg{
top: -15%;
padding: 0;
display: flex;
align-items:center;
justify-content: center;
font-weight: 800;
font-size:larger;
}
/* 施工実績 End */
/* ボタン */
a.btn_02 {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
border: 1px solid #005485;
box-sizing: border-box;
width: 120px;
max-width: 50%;
height: 50px;
padding: 0 6% 0 0%;
color: #005485;
font-size: 14px;
text-align: left;
text-decoration: none;
position: relative;
transition-duration: 0.2s;
}
a.btn_02:hover {
background: #228bc8;
color: #fff;
}
/* a.btn_02:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent #005485;
position: absolute;
top: 50%;
left: 6%;
margin-top: -7px;
}
a.btn_02:hover:before {
border-color: transparent transparent transparent #fff;
} */