/*
Theme Name : zag
*/
@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;900&display=swap');

/*--------------------------------------------------

common

---------------------------------------------------*/
* {
line-height: 165%;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*
	font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	*/
	line-height: 160%;
    font-size: 14px;
    padding-top: 25px;
}

a, a img {
	color: #000;
	text-decoration: none;
	transition: all ease .2s;
}
a:hover, a img:hover{
    opacity: .8
}
img {
	width: 100%;
    max-width: 100%;
}

.sponly{
    display: none !important;
}

h2 {
font-weight: 900;
font-size: 60px;
color: #333;
text-align: center;
padding: 0 4%;
}

.morebtn a {
display: block;
max-width: 175px;
text-align: center;
width: 100%;
height: 32px;
color: #fff;
font-size:24px;
background: #363636;
line-height: 32px;
margin: 0 auto;
}

.fadein {
opacity: 0; 
  visibility: hidden;
  transform: translateY(60px);
  transition: all 2s;
}
.fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.mt2rem {
    margin-top: 2rem;
}

#wpcf7-f36-o2 div.wpcf7-response-output{
    margin: -2em 0.5em 5em;
    
}

/*--------------------------------------------------

header

---------------------------------------------------*/
header {
background: #fff;
width: 100%;
padding: 10px 10px 10px 20px;
position: fixed;
z-index: 99;
top: 0;
}
header #hLogo {
margin: 0 auto 0 0;
max-width:40px;
}

/*--------------------------------------------------

footer

---------------------------------------------------*/
footer {
color: #fff;
background: #000;
text-align: center;
padding: 40px;
font-size: 18px;
font-weight: 900;
}



/*--------------------------------------------------

other

---------------------------------------------------*/
/* mainVisual------------*/
#mainVisual {
background: url("../img/main-pic.jpg") no-repeat bottom center;
background-size: cover;
height: 655px;
width: 100%;
padding: 3% 3% 7%;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

#mainVisual > * {
text-align: center;
color: #fff;
} 

#mainVisual h1 {
font-weight: 500;
font-size: 22px;
}
#mainVisual h1 + p {
font-weight: 900;
font-size: 42px;
margin: 1.5rem auto;
}
#mainVisual .companyName {
font-weight: 900;
font-size: 24px;
}

/* online meeting ------------*/
#onlineMeeting {
background: url("../img/online-bg.jpg") no-repeat center;
background-size: cover;
color: #fff;
text-align: center;
padding: 4% 3% 3%;
font-size: 16px;
margin-top: 10px;
}

#onlineMeeting h2 {
border: 1px solid #fff;
padding: 7px 15px;
font-size: 21px;
font-weight: 700;
max-width: 240px;
margin: 0 auto 20px;
text-align: center;
color: #fff;
}
#onlineMeeting ul {
display: flex;
flex-wrap:wrap;
justify-content: center;
margin-top: 20px;
}
#onlineMeeting ul li{
height: 32px;
width: 35px;
margin: 0 4px;
}

#onlineMeeting ul li img {
width: 100%;
height: 100%;
}

.moreBtn.toggle {
    display: block;
    width: 94%;
    max-width: 270px;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    padding: .5rem;
    margin: 3rem auto 0;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.moreBtn.toggle:after {
    content: "▼";
    display: inline-block;
    margin-left: 5px;
    font-size: 60%;
    vertical-align: top;
}
.moreBtn.toggle.open:after {
    content: "▲";
}

.meetingForm {
    display: none;
    text-align: left;
    width: 94%;
    max-width: 880px;
    margin: 0 auto;
}

.meetingForm table {
    margin: 0 auto;
}

.meetingForm table th {
    font-size: 16px !important;
}
/* #news ------------*/
#news {
max-width: 810px;
width: 94%;
margin: 60px auto;
}
#news li {
text-align: center;
font-size: 16px;
}

#news figure + p {
width: 94%;
margin: 1rem auto 0;
}

#news figure + p span {
display: inline-block;
margin-right: .5rem;
}

#news img {
height: 395px;
max-width: 495px;
width: 84%;
object-fit: cover;
margin: 0 auto;
}

/* #aboutUs ------------*/
#aboutUs {
background: url(../img/aboutus-bg.jpg) no-repeat center;
background-size: cover;
padding: 40px 5% 60px;
text-align: center;
}

#aboutUs h2 + h3 {
font-size: 32px;
line-height: 150%;
}

#aboutUs .txtArea {
max-width:630px;
margin: 3rem auto 0;
font-size: 16px;
}
#aboutUs .txtArea p {
text-align: left;
}

/* #service ------------*/
#service {
width: 94%;
max-width:1010px;
margin: 70px auto;
justify-content: space-between;
flex-wrap:wrap;
display: flex;
}

#service > section {
width: 32.5%;
height: 280px;
background-color: rgba(0,0,0,.8);
background-blend-mode: darken;
padding: 2%;
color: #fff;
margin-top: 10px;
}
#service > section h3 {
text-align: center;
margin: 0 auto 1rem;
font-size: 48px;
font-weight: 900;
}
#service .planning {
order: 0;
background-image:url("../img/planning-bg.jpg");
}
#service .branding {
order: 1;
background-image: url("../img/branding.jpg");
}
#service .promotion {
order: 2;
background-image:url("../img/promotion.jpg");
}
#service .design {
order: 3;
background-image:url("../img/design.jpg");
}
#service .product {
background-image: url("../img/products.jpg");
}
#service .consulting {
background-image: url("../img/cunsultiong.jpg");
}
#service .motivation {
background-image: url("../img/motivation.jpg");
}
#service .web {
background-image: url("../img/web.jpg");
}

#service h2 {
order: 4;
align-self: center;
}
#service .web,
#service .consulting,
#service .product,
#service .motivation{
order: 5;
}

/*#study-----------------*/
#study {
background: #EBEBEB;
padding: 5% 5% 3%;
text-align: center;
position: relative;
}

#study h2 {
position: absolute;
width: 90%;
z-index: 2;
font-size: 48px;
top: 12%;
text-shadow: 0 0 5px #fff;
text-align: center;
}
#study #slider02 {
max-width: 920px;
width: 100%;
margin: 0 auto;
z-index: 0;
}
#study #slider02 li {
position: relative;
}
#study #slider02 li .txtArea {
height: 150px;
background: rgba(59,59,59,.6);
background-blend-mode: darken;
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
}
#study #slider02 li .txtArea  img {
height: 120px;
margin: 0 auto;
width: auto;
}
#study #slider02 li .txtArea > div {
position: absolute;
right: 20px;
bottom: 20px;
text-align: left;
color: #fff;
font-weight: 200;
}
#study #slider02 li .txtArea > div h4 {
font-weight: 200;
margin-bottom: .5rem;
}
#study #slider02 li .txtArea > div p {
line-height: 130%;
}
#study #slider02 li .txtArea > div p span {
display: block;
margin-top: 3px;
}
#study .thumb_slider {
max-width:950px;
margin: 0 auto;
}
#study .thumb_slider .slick-slide {
margin: 30px 15px 15px;
}

#study .morebtn a {
position: absolute;
left: calc(50% - 175px/2);
bottom: 0;
}

/* our team------------------------------*/
#ourTeam {
margin:  70px auto;
max-width:980px;
width: 94%;
}
#ourTeam  h2 {
margin-bottom: 40px;
}
#ourTeam .inner {
display: flex;
justify-content: space-between;
flex-wrap:wrap;
align-items: center;
border-bottom: 1px solid #D3D3D3;
padding-bottom: 40px;
margin-bottom: 40px;
}
#ourTeam .inner .right {
width: calc(100% - 240px);
font-size: 12px;
}
#ourTeam .inner .right h4 {
font-size: 24px;
font-weight: 400;
margin-bottom: 25px;
}
#ourTeam .inner .right  p {
font-weight: 300;
}
#ourTeam .inner figure {
width: 190px;
order: -1;
}

/*company--------------------------*/
#company {
background-color: #000;
background-image:linear-gradient(#1b1b1b 50%, transparent 50%);
background-size: 4px 4px;
padding: 3% 3% 50px;
}
#company h2 {
color: #fff;
grid-row: 1;
grid-column: 1/3;
}
#company .inner {
display: grid;
grid-template-columns: 490px 1fr;
grid-template-rows: 1fr 513px;
width: 100%;
max-width: 980px;
margin: 0 auto;
color: #fff;
grid-row-gap: 30px;
grid-column-gap: 40px;
font-size: 18px;
font-weight: 400;
position: relative;
}
#company .inner > div {
margin-top: 40px;
position: relative;
}
#company .inner > div p {
line-height: 180%;
}
#company .inner > div p:not(.morebtn) a:link {
color: #fff;
text-decoration: underline;
}
#company .inner dl {
display: flex;
margin-top: 20px;
}
#company .inner dl dt {
margin-right: 20px;
}
#company .morebtn a {
position: absolute;
bottom: -50px;
left: calc(50% - 175px/2);
}

/*linkArea --------------------------*/

#linkArea {
padding: 50px 0;
max-width:920px;
margin: 0 auto;
width: 90%;
}
#linkArea .bnr {
width: 100%;
height: 480px;
position: relative;
color: #fff;
margin-bottom: 30px;
}
#linkArea .bnr.drill {
background: url("../img/drillbg.jpg") no-repeat center;
position: relative;
z-index: 2;
padding: 80px 40px;
}
#linkArea .bnr.drill:before {
content: "";
display: block;
width: 50%;
height: 100%;
background: #920783;
position: absolute;
z-index: 3;
top: 0;
left: 0;
mix-blend-mode: hard-light;
}
#linkArea .bnr > *:not(.morebtn) {
position: relative;
z-index: 5;
}

#linkArea .bnr.drill h4 {
padding-top: 40px 0 20px 40px;
margin-bottom: 30px;
}

#linkArea .bnr.drill h4 img {
    height: 80px;
    width: auto;
}

#linkArea .bnr.drill h4 + p {
width: 43%;
font-size: 18px;
}

#linkArea h4 {
font-size: 58px;
font-weight: 900;
}

#linkArea .mono,
#linkArea .kd{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("../img/monogocotibg.jpg") no-repeat center;
padding: 5%;
}
#linkArea .kd {
background: #d4d4d4;
}

#linkArea .mono h4 + p,
#linkArea .kd h4 + p{
font-size: 31px;
font-weight: bolder;
}

#linkArea .morebtn a {
position: absolute;
bottom: 0;
left: calc(50% - 175px/2);
z-index: 5;
background: #941E57;
}

#linkArea .mono .morebtn a {
background: #009E96;
}

#linkArea .kd .morebtn a {
background: #D47000;
}

/*contact----------------------*/
#contact {
max-width: 940px;
margin: 0 auto;
width: 90%;
}

#contact h3 {
border-top: 1px solid #ccc;
padding: 5px;
font-size: 40px;
font-weight: 300;
position: relative;
}

#contact h3:after {
content: "";
width: 96%;
position: absolute;
top: 100%;
left: 2%;
height: 1px;
display: block;
background: #ccc;
}

#contact table,
.meetingForm table {
width: 96%;
margin: 50px auto 30px;
}
#contact table th,
.meetingForm table th{
font-weight: 300;
width: 20%;
text-align: left;
font-size: 18px;
}
#contact table th,
#contact table td,
.meetingForm table th,
.meetingForm table td{
padding: 13px 10px;
vertical-align: top;
}
input[type="text"] ,input[type="email"] ,textarea {
width: 100%;
}

#contact table select,
.meetingForm table select{
padding: .3rem;
}

#contact input[type="submit"],
.meetingForm input[type="submit"] {
margin-bottom: 60px;
background: #3c76de;
border: none;
padding: .5rem 1rem;
color: #fff;
font-size: 16px;
}

#gmap {
width: 100%;
height: 510px;
}

#gmap iframe {
width: 100%;
height: 100%;
}

@media screen and (max-width: 812px) {
/*--------------------------------------------------

common

---------------------------------------------------*/
.sponly {
	display: block !important;
}
.pconly {
	display: none !important;
}

/*--------------------------------------------------

other

---------------------------------------------------*/
/* mainVisual------------*/
#mainVisual {
height: 550px;
background: url("../img/main-pic.jpg") no-repeat 20% top;
justify-content: center;
}
#mainVisual h1 {
font-size: 20px;
}
#mainVisual h1 + p {
font-size: 34px;
}
/* online meeting ------------*/
#onlineMeeting {
padding: 10% 5%;
text-align: left;
}
/* #news ------------*/
#news img {
height: 270px;
}
.slick-prev, .slick-next {
top:40%;
}
.slick-prev {
left: -5px;
}
.slick-next {
right: -5px;
}
/* #aboutUs ------------*/

#aboutUs h2 + h3 {
font-size: 26px;
line-height: 150%;
}

/* #service ------------*/
#service {
margin: 30px auto;
}
#service > section {
width: 49%;
height: auto;
padding: 4%;
}
#service > section h3 {
font-size: 24px;
}
#service h2 {
order:-1;
text-align: center;
margin: 0 auto;
}
/* #study ------------*/
#study {
padding-bottom:50px; 
}
#study #slider02 {
margin-bottom: 1rem;
}
#study h2,
#study #slider02 li .txtArea{
position: relative;
width: 100%;
}
#study #slider02 li .txtArea {
display: flex;
height: auto;
justify-content: space-between;
padding: 10px;
background: rgb(0 0 0 / 76%);
}

#study #slider02 li .txtArea > div {
position: relative;
right: auto;
bottom: auto;
margin-left: 5px;
}
#study #slider02 li .txtArea img {
width: 40%;
height: auto;
object-fit: contain;
}
#study #slider02 li .txtArea > div p span {
line-height: 100%;
margin-top: 5px;
}
#study .thumb_slider .slick-slide {
margin: 0 5px;
}

/* ourteam-------------*/
#ourTeam h2 {
margin-bottom: 1.5rem;
}
#ourTeam .inner figure {
margin: 0 auto;
}
#ourTeam .inner .right {
width: 94%;
margin: 0 auto;
}
#ourTeam .inner .right h4 {
margin:  20px auto 10px;
}

#company {
padding-bottom: 80px;
}
#company .morebtn a {
bottom:-80px;
}
#company h2 {
color: #fff;
grid-row: 1;
}
#company figure {
margin-top: 30px;
}
#company .inner {
display: block;
width: 90%;
}
#company .inner > div p,
#company .inner > div dl {
font-size: 14px;
}

/* linkArea-------------*/
#linkArea {

}
#linkArea h4 {
font-size: 44px;
}
#linkArea .bnr.drill {
padding: 0 20px 70px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}

#linkArea .bnr.drill:before {
width: 100%;
height: 60%;
top: auto;
bottom: 0;
}
#linkArea .bnr.drill h4 {
margin-bottom: 0;
}
#linkArea .bnr.drill h4 + p {
width: 100%;
font-size: 16px;
max-width:405px;
}
#linkArea .mono h4 + p, #linkArea .kd h4 + p {
font-size: 22px;
}

/* contact-------------*/
#contact table,
.meetingForm table {
margin: 20px auto 30px;
}
#contact table th,
#contact table td,
.meetingForm table th,
.meetingForm table td{
display: block;
width: 100%;
padding: 0;
}
#contact table th,
.meetingForm table th {
padding: 25px 0 10px;
}
#contact input[type="submit"],
.meetingForm input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}


#gmap {
height: 400px;
}

}