/*
Theme Name: KYUMA ARCHITECT & ASSOCIATES
*/
@charset "UTF-8";
body{
font-family: source-han-sans-japanese, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
}
.s-container{
max-width:900px;
}
.open-animation{
animation: fadein 1.5s forwards;
}
@keyframes fadein {
0% {opacity: 0.3}
100% {opacity: 1}
}
h1,h2,h3,h4,h5{
font-weight:normal;
margin:0;
padding:0;
}
h1{
bottom:3rem;
font-size:11px;
}
p{
margin-bottom:0;
}
p.copy{
font-size:11px;
}
p.font-small{
font-size:14px;
text-align: justify;
}
.font-weight-500{
font-weight:500;
}
.lh-xl{
line-height:2.3;
}
hr{
margin:0;
padding:0;
}
.text-hr{
width:84px;
}
.g-font-r{
font-family: roboto, sans-serif;
}
.g-font-m{
font-family: sheila, sans-serif;
letter-spacing:2px;
}
@media (max-width: 576px){
p,li{
font-size:14px;
}
p{
line-height:1.7;
}
.lh-xl{
line-height:2;
}
}

/*三角形*/
.equilateral-triangle1 {
border-top: 280px solid rgba(0,0,0,0.7); /* 高さ */
border-right: 280px solid transparent; /* 左辺の長さ */
z-index:10;
animation: triangle1 2s forwards;
top:80px;
}
.equilateral-triangle2 {
border: 220px solid transparent; /* 左辺の長さ */
border-right-color:rgba(20,124,80,0.85);
z-index:10;
bottom:-140px;
right:0px;
animation: triangle2 2s forwards;
}
.equilateral-triangle3 {
width:300px;
height:300px;
border-bottom: 300px solid rgba(0,0,0,0.4); /* 高さ */
border-left: 300px solid transparent; /* 左辺の長さ */
}
.equilateral-triangle4 {
height: 0;
border-style: solid;
border-width: 65px 0 0 268px;
border-color: transparent transparent transparent #ffffff;
bottom:-1px;
}
.equilateral-triangle5 {
width: 27px;
height: 0;
border-style: solid;
border-width: 14px 13.5px 0 13.5px;
border-color: #008d60 transparent transparent transparent;
}
.equilateral-triangle8 {
width: 180px;
margin:0 auto;
height: 0;
border-style: solid;
border-width: 60px 90px 0 90px;
border-color: #008d60 transparent transparent transparent;
}
@media (max-width: 992px){
.equilateral-triangle1 {
border-top: 200px solid rgba(0,0,0,0.7); /* 高さ */
border-right: 200px solid transparent; /* 左辺の長さ */
}
.equilateral-triangle2 {
border: 140px solid transparent; /* 左辺の長さ */
border-right-color:rgba(20,124,80,0.85);
bottom:-60px;
}
.equilateral-triangle3 {
width:20px;
height:200px;
border-bottom: 200px solid rgba(0,0,0,0.4); /* 高さ */
border-left: 200px solid transparent; /* 左辺の長さ */
}
}
@media (max-width: 576px){
.equilateral-triangle1 {
border-top: 120px solid rgba(0,0,0,0.7); /* 高さ */
border-right: 120px solid transparent; /* 左辺の長さ */
}
.equilateral-triangle2 {
border: 80px solid transparent; /* 左辺の長さ */
border-right-color:rgba(20,124,80,0.85);
bottom:0px;
}
.equilateral-triangle3 {
width:110px;
height:110px;
border-bottom: 110px solid rgba(0,0,0,0.4); /* 高さ */
border-left: 110px solid transparent; /* 左辺の長さ */
}
.equilateral-triangle4 {
border-width: 55px 0 0 200px;
}

.equilateral-triangle8 {
width:100px;
margin:0 auto;
height: 0;
border-style: solid;
border-width: 30px 70px 0 70px;
border-color: #008d60 transparent transparent transparent;
}
}
@keyframes triangle1 {
30% {
transform: translatey(0px);
}
100% {
transform: translatey(-80px);
}
}
@keyframes triangle2 {
30% {
transform: translatey(0px);
}
100% {
transform: translatey(80px);
}
}

/*カラー*/
.text-green{
color:#008d60!important;
}
.text-black{
color:#000000;
}
.text-gray,a.text-gray{
color:#555555;
}
.text-red{
color:#cc3333;
}
.bg-lgray{
background:#f7f7f7;
}

.border-gray{
border-color:#ccc!important;
}
.border-green{
border-color:#008d60!important;
}
.bg-dgray{
background:#757575;
}
a.btn-main{
width: 360px;
height: 70px;
line-height: 70px;
font-size: 14px;
letter-spacing: 3px;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
display:flex;
position:relative;
}

a.btn-pdf{
max-width: 600px;
font-size: 16px;
text-align: center;
padding:10px 0;
background:#008d60;
color:#fff;
}
a.btn-pdf-2{
padding:22px 0;
}


.btn-orange{
background:#da9e0a;
}
.btn-main-svg{
position: absolute;
right:0;
margin-right:20px;
}
a.btn-main:hover svg{
animation: anim 1s forwards;
}
a.btn-main:hover{
color: #ffffff;
background-color: #222222;
}
a.btn-pdf:hover{
background-color: #32a37f;
}

@keyframes anim {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(8px);
}
}

@media (max-width: 576px){
a.btn-main{
width: 250px;
height: 60px;
line-height: 60px;
font-size: 13px;
letter-spacing: 1px;
}
.btn-main-svg{
margin-right:10px;
}
}

/*タイトル*/
.page-title,.page-title2{
height:280px;
margin-bottom:5rem;
}
.title{
font-size:42px;
letter-spacing:3px;
}
.title-md{
margin-bottom:4rem;
}
.title h2,.h2{
font-size:14px;
font-weight:normal;
}

@media (max-width: 576px){
.title{
font-size:30px;
letter-spacing:2px;
}
.title h2,.h2{
font-size:12px;
}
.page-title{
height:150px;
margin-bottom:2.5rem;
}
.page-title2{
height:150px;
margin-bottom:1.5rem;
}
}

/*ナビバー*/
.navbar{
padding:1rem 2rem;
background:rgba(255,255,255,0.95);
}
.navbar ul li a{
color:#000;
font-size:14px;
-webkit-transition: 0.5s;
transition: 0.5s;
padding-bottom: 2px;
}
.navbar ul li a:hover{
color:#666;
}
a.navbar-contact{
width:140px;
display:block;
background:#da9e0a;
color:#fff;
height:42px;
line-height:42px;
font-size:13px;
-webkit-transition: 0.5s;
}

a.navbar-contact:hover{
color: #ffffff;
background-color: #ce9006;
}

.navbar-brand{
width:212px;
}
#input{
display: none;
}
.footer-close-button{
  margin: 0 auto;
  width:30px;/*アイコンサイズ*/
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-close-button span, .footer-close-button span:before, .footer-close-button span:after {
  top: 10px;
  position: relative;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  background: #000;/*アイコン色*/
  display: block;
  content: '';
}
.footer-close-button span:before{
  top: -20px;
}
.footer-close-button span:after{
  top: -13px;
}
#input:checked ~ .footer-close .footer-close-button span:before{
  top: 0;
  transform: rotateZ(-90deg);
}
#input:checked ~ .footer-close .footer-close-button span{
  top: 0;
  transform: rotateZ(45deg);
}
#input:checked ~ .footer-close .footer-close-button span:after{
  top: 0;
  transform: rotateZ(-45deg) scale(0);
}

.menu-nav-pd{
margin-top:81px;
}

@media (max-width: 1140px){
.navbar{
padding-right:0rem;
padding-left:0rem;
}
.navbar-brand{
width:180px;
}
.menu-nav-pd{
margin-top:76px;
}
}
@media (max-width: 992px){
.navbar{
padding-right:1rem;
padding-left:1rem;
}
.navbar ul li a{
font-size:16px;
display:block;
}
}
@media (max-width: 768px){
.navbar{
padding:0.5rem;
}
.menu-nav-pd{
margin-top:60px;
}
}

/*スライダー*/
.carousel-item{
position: relative;
width: 100%;
}
.carousel-item:before{
content: "";
display: block;
padding-top: 50%;
}
.carousel-item img{
position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
-webkit-animation: anime 36s 0s infinite;
animation: anime 36s 0s infinite;
}

@keyframes anime {
    25% {
        transform: scale(1.05) ;
    }
    100% {
        transform: scale(1.1) ;
    }
}

@media (max-width: 992px){
.carousel-item:before{
padding-top: 55%;
}
}

@media (max-width: 576px){
.carousel-item:before{
padding-top: 55%;
}
}

/*home*/
#top-concept{
padding-left:0rem;
}

#top-concept .container-md{
padding:6rem 0 6rem 10rem;
}

.top-concept-title{
font-size:40px;
letter-spacing:-1px;
}

#top-concept p{
line-height:2.3;
}

#top-concept .tree{
right:140px;
width:160px;
}

@media (max-width: 992px){
#top-concept .container-md{
padding:6rem 2rem 6rem 2rem;
}
#top-concept .tree{
right:80px;
}
}

@media (max-width: 768px){
#top-concept .tree{
right:20px;
}
}

@media (max-width: 576px){
#top-concept .container-md{
padding:4rem 1.5rem;
}
.top-concept-title{
font-size:23px;
}
#top-concept p{
line-height:2;
}
#top-concept .tree{
width:100px;
opacity:0.3;
}
}

.border-green.border-section {
margin-right:50%;
position:relative;
top:-4px;
}

.top-works{
padding:5.5rem 0 7rem;
}

#works h3{
font-size:14px;
}

@media (max-width: 576px){
.top-works{
padding:3rem 0 4rem;
}
}

.works-img{
position: relative;
width: 100%;
overflow: hidden;
}
.works-img:before {
content: "";
display: block;
padding-top: 76%;
}
.works-img img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
transition:1s all;
}

#works .bg-title{
background:rgba(0,0,0,0.8);
width:80%;
-webkit-transition: .3s;
transition: .3s;
}

#works .works-img img:hover{
transform:scale(1.1,1.1);
transition:1s all;
}

#works .bg-title:hover{
background:rgba(0,0,0,0.7);
width:80%;
}

#top-about{
background:url(img/top-about.jpg) center center no-repeat;
padding:4.5rem 0 7rem;
background-size:cover;
}

#top-about .row{
background:rgba(20,124,80,0.85);
}

#top-about a.btn-main:hover,#page-contact a.btn-main:hover{
background-color: rgba(255,255,255,0.2);
}

.top-about-img{background: url(img/staff.jpg) no-repeat center;
background-size: cover;
height:400px;
}

.tel-space{letter-spacing:1px;}

@media (max-width: 576px){
#top-about{
padding:4rem 0 4rem;
}
.works-img:before {
content: "";
display: block;
padding-top: 60%;
}
.top-about-img{background: url(img/staff.jpg) no-repeat center;
height:280px;
background-size:cover;
width:100%;
}
}

/*page-contact*/
#page-contact{
background-color:rgba(20,124,80,1);
padding:4rem 0;
margin-top:8rem;
}

.wpcf7-list-item{display:block;padding-right:2rem;}
.wpcf7-radio{margin:0.7rem 0;display:block;}
.wpcf7-list-item {
margin: 0!important;
}

input.wpcf7-submit {
background-color: #da9e0a;
color: #fff !important;/* 文字の色*/
font-size: 15px;
font-weight: 500;
height: 70px;
line-height: 70px;
width:360px;
display:block;
-webkit-appearance: none;
border-radius: 0;
border:0;
-webkit-transition: .5s;
}

.btn-submit {
width:360px;
margin:0 auto;
}

input.wpcf7-submit:hover{
color: #ffffff;
background-color: #ce9006;
}
.wpcf7-not-valid-tip{
font-weight:900!important;
}

@media (max-width: 576px){
#page-contact{
padding:2rem 0 2.5rem;
margin-top:4rem;
}
.wpcf7-list-item {
display: block!important;
padding:0.3rem 0;
}
input[type="radio"] {
margin:0 0.5rem;
font-size:18px;
}
.wpcf7-list-item {
font-size:15px;
}
.btn-submit {
width:250px;
}
input.wpcf7-submit{
width: 250px;
height: 60px;
line-height: 60px;
font-size: 14px;
}
}

/*philosophy*/
.h3{
font-size:34px;
line-height:1.7;
}

#philosophy-1{
padding-bottom:6rem;
}

.philosophy-1-md{
margin-top:-20px
}

#philosophy-1 h4,#philosophy-3 h4{
font-size:24px;
line-height:1.7;
}

#philosophy-1 .g-font-m{
font-size:25px;
color:#000;
}

#philosophy-1 .g-font-m span{
font-size:50px;
}

.bg-tree{
background-image:url(img/tree3.png);
background-position: 90% 100%; 
background-repeat:no-repeat;
background-size:140px;
}

#philosophy-3{
padding-top:5rem;
}

#philosophy-3 .container{
max-width:960px;
}

#philosophy-3{
padding-top:3rem;
}

#philosophy-3 hr{
width:80px;
}

#philosophy-3 p{
font-size:15px;
}

#philosophy-3 img{
max-width:240px;
}

.philosophy-bg{
height:400px;
background:url(img/re_ps40-2.jpg) center center;
background-size:cover;
margin-bottom:-110px;
}

@media (max-width: 992px){
#philosophy-3 img{
max-width:200px;
}
}

@media (max-width: 576px){
.h3{
font-size:21px;
}
#philosophy-1{
padding-bottom:4rem;
}
.philosophy-1-md{
margin-top:-40px
}
#philosophy-1 h4,#philosophy-3 h4{
font-size:21px;
}
#philosophy-1 .g-font-m{
font-size:20px;
}

#philosophy-1 .g-font-m span{
font-size:40px;
}
.philosophy-bg{
background:url(img/re_ps4_sp.jpg) center center no-repeat;
background-size:100%;
height:200px;
margin-bottom:-50px;
}
#philosophy-3{
padding-top:2rem;
}
#philosophy-3 img{
width:180px;
}
#philosophy-3 p{
font-size:14px;
font-weight:500;
}
.bg-tree{
background-size:110px;
}
}

#workflow .workflow-number{
font-size:43px;
width:140px;
}

#workflow .flow-img,#workflow .flow-img-50{
width:180px;
}

#workflow .font-small{
line-height:1.7;
}

@media (max-width: 576px){
#workflow .workflow-number{
font-size:35px;
width:100%;
}
#workflow .flow-img-50{
max-width:100%;
}
}
@media (max-width: 390px){
#workflow .flow-img-50{
max-width:50%;
}
}

/*workstyle*/
#workstyle h4{
font-size: 18px;
}
#workstyle p{
font-size: 15px;
line-height: 2!important;
text-align: justify;
}

@media (max-width: 576px){
#workstyle h4{
font-size: 16px;
}
#workstyle p{
font-size: 14px;
}
#workstyle .sub-h3{
font-size:18px;
}
}


/*contact*/
h3.sub-h3{
font-size:26px;
}
.contact-tel{
width:490px;
margin:0 auto;
letter-spacing:1px;
}
.contact-table td{
padding:0.9rem 0rem 0.8rem 2rem;
}
.contact-table .form-control{
border-radius: 0px;
}
.table th{
font-weight:normal;
padding-right:2rem;
width:30%;
}

.contact-privacy{
padding:2rem 3rem;
}
.text-tel{font-size:30px;}
#contact .sub-h3,#info .sub-h3{
padding-bottom:2rem;
}
#contact .form-flame{
padding:2.5rem 0 0;
}
.wpcf7 form .wpcf7-response-output {
margin: 0em .5em 1em!important;
}
@media (max-width: 768px){
.contact-table td{
padding:0.9rem 0rem 0.8rem 0rem;
}
.contact-table td{
padding:0rem;
display:block;
width:100%;
}
.contact-table th{
font-weight:normal;
padding:1rem 0 0.3rem;
display:block;
width:100%;
}
}

@media (max-width: 576px){
.contact-tel{
width:100%;
}
.text-tel{font-size:24px;}
.contact-table td{
padding:0rem;
display:block;
width:100%;
font-size:14px;
}
.contact-table th{
padding:1rem 0 0.3rem;
display:block;
width:100%;
font-size:14px;
font-weight:500;
}
.form-control{
font-size:13px!important;
}
.contact-privacy{
padding:1rem 0.8rem;
}
.contact-privacy p.font-small{
font-size:13px;
}
#contact .sub-h3,#info .sub-h3{
padding-bottom:1rem;
font-size:18px;
}
#contact .form-flame {
padding: 1rem 0 0;
}
}
#privacy h3{
font-size:18px;
}
#staff .staff-name{
font-size:30px;
letter-spacing:5px;
}
#staff .staff-name small{
font-size:16px;
letter-spacing:0px;
font-weight:normal!important;
}
span.g-font-m{
font-size:25px;
}
.sm-container{
max-width:1100px;
}
#staff ul,#staff table{
font-size:14px;
}
#staff .charge{
line-height:1.9;
}
#staff ul li a{
color:#333;
border-bottom:1px dotted #ccc;
}
#staff ul li a:before{
content:'▶';
font-size:11px;
color:#da9e0a;
}
#staff table td{
padding-right:0.5rem;
padding-bottom:0.4rem;
}
#staff .staff-md{
margin-top:-20px;
}
#staff .staff-img{
max-width:280px;
}
#staff .staff-img-in{
max-width:300px;
}
#staff .staff-img-top{
max-width:890px;
}
.pb-10{
padding-bottom:9rem;
}
@media (max-width: 992px){
#staff .staff-img-top{
max-width:700px;
}
#staff table td,#staff table td{
width:100%;
display:block;
}
}
@media (max-width: 768px){
#staff .staff-img-top{
max-width:500px;
}
}
@media (max-width: 576px){
#staff .staff-img-in{
max-width:200px;
}
#staff .staff-img-top{
max-width:350px;
}
.pb-10{
padding-bottom:4rem;
}
#staff .staff-name{
font-size:23px;
}
span.g-font-m{
font-size:20px;
}
#staff .staff-name small{
font-size:15px;
}
}
/*philosophy*/
#info table th,#info table td{
padding:1rem 2rem;
line-height:1.8;
font-size:15px;
}
.ls-1{
letter-spacing:40px;
}
.ls-2{
letter-spacing:12px;
}
.ls-3{
letter-spacing:3px;
}
.ls-4{
letter-spacing:1px;
}
.tel-text{
font-size:18px!important;
}
@media (max-width: 576px){
#info table th{
width:80px;
}
#info table th,#info table td{
padding:1rem 0rem;
font-size:14px;
}
.ls-1{
letter-spacing:0px;
}
.ls-2{
letter-spacing:0px;
}
.ls-3{
letter-spacing:0px;
}
.ls-4{
letter-spacing:0px;
}
#info th{
font-weight:500;
}
.tel-text{
font-size:16px!important;
}
}
.slash{
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-right: 1px solid #999;
height:23px;
}

.nav-tab a{
color:#000;
font-size:15px;
-webkit-transition: 0.5s;
transition: 0.5s;
margin-bottom:1rem;
}

.nav-tab a:hover,.nav-tab a.active{
color:#555;
}

@media (max-width: 576px){
.nav-tab a{
width:29.5%;
display:block;
font-size:15px;
border-bottom:1px solid #ccc;
margin:0.3rem;
padding-bottom:0.5rem;
}
.slash{
border-right: 0px solid #999;
}
}

/*feeling*/
#feeling h3{
font-size:40px;
}
#feeling h4{
font-size:35px;
}

#feeling h3 small{
font-size:16px;
}
#feeling .row{
background:#eee;
background-size:cover;
}
#feeling p{
line-height:2.5;
}
#feeling .text-gray{
color:#999!important;
}
*:focus {
  outline: none;
}
.fwf:before {
content:"";
display: block;
padding-top: 100%; /* 高さを幅の75%に固定 */
}
.fwf-c{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-yellow{
background:rgba(252,194,0,0.8);
margin:3rem;
transition:1s all;
}

.style-1 {
background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(0,141,96,0.9) 50%);
}
.style-2 {
background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(0,0,0,0.6) 50%);
}
.style-3 {
background: linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(0,0,0,0.6) 50%);
}
.style-4 {
background: linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(0,141,96,0.9) 50%);
}
.style-5 {
background: rgba(0,141,96,0.9);
}
.style-6{
background-image:
repeating-linear-gradient(45deg,rgba(0,0,0,0.7), rgba(0,0,0,0.7) 8px,transparent 0, transparent 16px);
}
.style-7 {
background: rgba(0,0,0,0.6);
}
.style-8 {
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.716 0 0 6.716 0 15c8.284 0 15-6.716 15-15zM0 15c0 8.284 6.716 15 15 15 0-8.284-6.716-15-15-15zm30 0c0-8.284-6.716-15-15-15 0 8.284 6.716 15 15 15zm0 0c0 8.284-6.716 15-15 15 0-8.284 6.716-15 15-15z' fill='%23000000' fill-opacity='0.7' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.style-9{
background-image: linear-gradient(45deg, rgba(0,0,0,0.6) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0.7)),
linear-gradient(45deg, rgba(0,0,0,0.6) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0.6));
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
.style-10{
background: linear-gradient(to bottom right, rgba(0,0,0,0.6) 50%, rgba(0,141,96,0.9) 50%);
}
.style-11{
background:
linear-gradient(135deg, rgba(0,0,0,0.6) 25%, transparent 25%) -13px 0,
linear-gradient(225deg, rgba(0,0,0,0.6) 25%, transparent 25%) -13px 0,
linear-gradient(315deg, rgba(0,0,0,0.6) 25%, transparent 25%),
linear-gradient(45deg, rgba(0,0,0,0.6) 25%, transparent 25%);
background-size: 26px 26px;
}
.modal-content {
background-color: transparent;
border: 0px solid rgba(0,0,0,0.2);
border-radius:0px;
}
.modal-dialog {
max-width: 700px;
margin: 0 auto;
}

.modal{
background:rgba(255,255,255,0.8)!important;
}
.equilateral-triangle6 {
border-top: 300px solid rgba(20,124,80,0.85);/* 高さ */
border-right: 300px solid transparent; /* 左辺の長さ */
top:0px;
left:0;
z-index:-1;
}
.equilateral-triangle7 {
border-bottom: 300px solid rgba(20,124,80,0.85); /* 高さ */
border-left: 300px solid transparent; /* 左辺の長さ */
bottom:-0px;
z-index:-1;
}

.modal-frame{
width:100%;
height:100%;
}

.bg-yellow:hover{
transform:scale(1.05,1.05);
transition:1s all;
}
.modal-content{
position:relative;
}
.modal-content:before{
  content: "";
  position: absolute;
  background: #fcc200;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}
@media (max-width: 1200px){
.bg-yellow{
margin:2.5rem;
}
}
@media (max-width: 992px){
#feeling h3{
font-size:35px;
}
#feeling h4{
font-size:25px;
}
#feeling h3 small{
font-size:13px;
}
@media (max-width: 1200px){
.bg-yellow{
margin:2rem;
}
}
.equilateral-triangle6 {
border-top: 160px solid rgba(20,124,80,0.85);/* 高さ */
border-right: 160px solid transparent; /* 左辺の長さ */
}
.equilateral-triangle7 {
border-bottom: 160px solid rgba(20,124,80,0.85); /* 高さ */
border-left: 160px solid transparent; /* 左辺の長さ */
}
}

@media (max-width: 576px){
#feeling p{
line-height:2;
}
#feeling h3{
font-size:25px;
}
#feeling h4{
font-size:18px;
}
#feeling h3 small{
font-size:12px;
}
.bg-yellow{
margin:1.5rem;
}
.style-3,.style-1,.sp-style-3,.style-10{
background: rgba(0,141,96,.9);
}
.sp-style-4{
background: linear-gradient(to bottom right, rgba(0,0,0,0.6) 50%, rgba(0,141,96,0.9) 50%);
}
.sp-style-2 {
background: linear-gradient(to top left,rgba(255,255,255,0) 50%,rgba(0,0,0,.6) 50%);
}
.style-5{
background:rgba(0,0,0,0.6)
}
.style-4{
background: linear-gradient(to bottom right,rgba(255,255,255,0) 50%,rgba(0,0,0,.6) 50%);
}
.equilateral-triangle6 {
border-top: 120px solid rgba(20,124,80,0.85);/* 高さ */
border-right: 120px solid transparent; /* 左辺の長さ */
}
.equilateral-triangle7 {
border-bottom: 120px solid rgba(20,124,80,0.85); /* 高さ */
border-left: 120px solid transparent; /* 左辺の長さ */
}
.modal-content:before{
width: 250px;
height: 250px;
background: #fcc200;
}
}

#works-page p{
font-size:15px;
line-height:2.3!important;
}

.works-main{
background:#222;
}

.works-main-photo:before{
content: "";
display: block;
padding-top: 58%;
}
.works-main-photo img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}

#works-page .date a{
color:#555;
}

@media (max-width: 576px){
#works-page p{
line-height:2!important;
font-size:14px
}
}

/* footer */
footer{
padding-top:5.5rem;
font-size:14px;
}

.footer-logo{
width:211px;
}

.tree2{
width:58px;
}

footer ul{
line-height:2;
border-left:1px solid #ccc;
}


footer ul li a{
-webkit-transition: 0.5s;
transition: 0.5s;
color:#000;
}

footer ul li a:hover{
color:#666;
}

footer .border-green.border-section {
margin-right:25%;
position:relative;
top:-4px;
}

@media (max-width: 576px){
footer{
padding-top:3rem;
}

.footer-logo{
width:180px;
}

footer ul{
line-height:1.8;
}

footer ul.footer-nav li{
font-size:13px;
border-bottom:1px solid #ddd;
padding-bottom:0.5rem;
}


footer ul{
border-left:0px solid #ccc;
}
}

/* ローディング画面 */
#logo_loader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1100;
background-color: #fff;
}
#logo_loader .f_logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
text-align: center;
color: #fff;
font-size: 30px;
}
#logo_loader .f_logo img {
width: 100%;
height: auto;
animation: loadLogo 1s;
}
@keyframes loadLogo {
0% {opacity: 0}
50% {opacity: 1;z-index: 0;}
}
#logo_loader.open {
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-delay: 1.3s;
}

@keyframes slideOut {
0% {opacity: 0.7}
100% {opacity: 0;z-index: 0;}
}

@media (max-width: 576px){
#logo_loader .f_logo {
width: 140px;
height: 140px;
}
}

.left-scroll{
opacity: 0;
visibility: hidden;
transform: translatex(50px);
transition: all 1s;
}

@media (max-width: 576px){
.left-scroll{
opacity: 0;
visibility: hidden;
transform: translatex(20px);
transition: all 1s;
}
}

.scroll{
opacity: 0;
visibility: hidden;
transform: translatey(100px);
transition: all 1s;
}

.js-fade{
opacity: 1;
visibility: visible;
transform: translatex(0px);
}

.info-img{
background: url(img/info-title.jpg) no-repeat center;
background-size: cover;
}

.style-img{
background: url(img/style-title.jpg) no-repeat center;
background-size: cover;
}

.omoukoto-img{
background: url(img/omoukoto-title2.jpg) no-repeat center;
background-size: cover;
}

.staff-img{
background: url(img/omoukoto-title.jpg) no-repeat center;
background-size: cover;
}

.workflow-img{
background: url(img/flow-title.jpg) no-repeat center;
background-size: cover;
}

.works-bg-img{
background: url(img/work-title.jpg) no-repeat center;
background-size: cover;
}
.works6{
background: url(img/work6-title.jpg) no-repeat center;
background-size: cover;
}
.works5{
background: url(img/work5-5-title.jpg) no-repeat center;
background-size: cover;
}
.works4{
background: url(img/work4-title.jpg) no-repeat center;
background-size: cover;
}
.works3{
background: url(img/work333-title.jpg) no-repeat center;
background-size: cover;
}
.works2{
background: url(img/work22-title.jpg) no-repeat center;
background-size: cover;
}
.works1{
background: url(img/work11-title.jpg) no-repeat center;
background-size: cover;
}

.philosophy-img{
background: url(img/philosophy-title.jpg) no-repeat center;
background-size: cover;
}

.pgcsimplygalleryblock-masonry-content{
margin-right:-25px;
margin-left:-25px;
margin-top:3rem;
}

.pgcsimplygalleryblock-masonry-main-wrap{
padding:25px!important;
}
.pgcsimplygalleryblock-masonry-item-wrap{
background:#ededed;
}

@media (max-width: 576px){
.pgcsimplygalleryblock-masonry-content{
margin-right:0px;
margin-left:0px;
margin-top:2rem;
}
.pgcsimplygalleryblock-masonry-main-wrap{
padding:20px 20px!important;
}
}

.wp-pagenavi a.page,.wp-pagenavi span{
width:40px;
height:40px;
display:inline-block;
border-radius:50%;
text-align:center;
line-height:40px;
margin:0 0.5rem;
}

.wp-pagenavi a.page{
background:#eee;
color:#000;
}

.wp-pagenavi span,.wp-pagenavi a.page:hover{
background:#008d60;
color:#fff;
}
	
.works-list{
background:#f1f1f1;
padding:15px 25px;
}
.works-list p{
padding:5px 0;
font-size:14px;
}

@media (max-width: 576px){
.works-list{
padding:10px 15px;
font-size:12px!important;
}
.works-list p{
font-size:13px;
}
}