@charset "utf-8";

/* =reset
------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a{
margin:0;
padding:0;
}

fieldset,img{
  border:0;
}
address,caption,cite,code,dfn,em,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
p{
text-justify:inter-ideograph;
margin: 0;
}

header, section, article, footer, article, aside, time ,nav { display: block; }

ul{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

:root {
  --key-color: #1F8667;
  --heading-text-color: #fff;
  --heading-font-family: "altivo", sans-serif;;
  --heading-font-size: min(12.8vw,80px);
  --heading-font-weight: Medium;
  --heading-line-height: 1.4;
  --heading-margin-bottom: 6px;
  --heading-padding-bottom: 14px;
  --link-color: #EEB700;
  --sub-color-black: #181719;
}

body { background: var(--key-color); color: #fff; counter-reset: number 0; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-feature-settings : "palt"; font-size: 16px; line-height: 1.6em; }
img { vertical-align: bottom; }
a { display: block; text-decoration: none; transition: .15s; outline: none; }
a:hover { opacity: .7; text-decoration: none; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }
header .header-logo { position:fixed; top:20px; left:20px; width: min(10.468vw,201px); z-index:100; }
header .header-logo img {width: 100%;}
header .header-right a { background-color:var(--link-color); color: #fff; font-family: var(--heading-font-family); font-size:min(4.8vw,28px); font-weight:bold; line-height:.8em; padding: 18px 25px; position:fixed; top: 0; right: 0; text-align:center; z-index:100; }
header .header-right a span { font-size:12px; line-height:1em; }
footer { background-color: #011500; text-align: center; width: 100%;  margin: 0 auto; padding: 50px 0; }
footer p { font-size: 12px; line-height: 1em;}

* { box-sizing: border-box; }
.heading-wrap { margin-bottom: 50px; }
.heading-wrap h2 { color: #fff; font-family: var(--heading-font-family); font-size: var(--heading-font-size); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); margin-bottom: var(--heading-margin-bottom); position:relative;}
.heading-wrap h2 + p { font-size:14px; line-height:1em; }
.main-wrap {}
.section-wrap{ padding: 130px 0 180px; }
.section-wrap p:not(:last-of-type) { margin-bottom: 1em; }
.section-inner-wrap-1000px { position: relative; margin: 0 auto; max-width: 1000px; width: 92%; }
.section-inner-wrap-form { position: relative; margin: 0 auto; max-width: 800px; width: 92%; }

#main-img { position: relative; width: 100%; height:56.25vw; overflow:hidden; }
#main-img::after { background: url(../images/main_img_pict.png) right top no-repeat; background-size: contain; content: ""; position:absolute; top:50%; left:50%; width:min(91.666vw,1760px); height:min(47.815vw,918px); transform: translate3d(-50%, -50%, 0px); z-index:5; }
#main-img .main-img-heading-wrap { position:absolute; top:50%; left: 11vw; transform: translate3d(0, -50%, 0); z-index: 6;}
#main-img .main-img-heading-wrap h2,
#main-img .main-img-heading-wrap p { display:table; text-shadow: 0px 0px 8px rgba(6, 70, 0, .8); }
#main-img .main-img-heading-wrap h2 { margin-bottom:12px; }
#main-img .main-img-heading-wrap p { font-size:min(3vw,16px); letter-spacing: .3em; line-height:1.8em; }
#main-img .main-img-heading-wrap h2 + p { font-size: min(10.5vw,86px); letter-spacing: 0; line-height:1.15em; margin-bottom:16px; }
#main-img .object { position:absolute; }
#main-img .object img { width:100%;height:100%; }
#main-img .object.object-01 { background-color:var(--sub-color-black); width:80vw; height: 100vw; z-index:1; top:0; left:50%; transform:translate3d(-60%, 0, 0) skewX(-45deg); }

#about { position:relative; }
#about h2 { font-size:42px; font-weight:bold; letter-spacing: 2px; line-height:1.2; margin-bottom:80px; }
#about .about-contents dl:not(:last-of-type) { margin-bottom:50px; }
#about .about-contents dl dt { background-color:#0A6046; font-size:min(5.33vw,30px); display: inline-block; line-height:1.4; margin-bottom:12px; padding: 8px 8px 12px 72px; position:relative; }
#about .about-contents dl dt span { color: #EEB700; position:absolute; font-size:min(13.3vw,76px); left:16px; bottom:-12px; font-family: var(--heading-font-family); font-style:italic; }
#about .about-contents dl dd { font-size:18px; line-height:1.6; }

#detail { position:relative; background-color:#011500; }
#detail .section-inner-wrap-1000px { z-index:1; }
#detail .heading-wrap { padding-left:16px; position:relative; }
#detail .heading-wrap::after { content:""; border-left:3px solid var(--link-color); height:84%; position:absolute; left: 0; top: 16%;}
#detail .about-content-wrap { display: flex; width:101%; z-index:1; }
#detail .about-content-wrap .box03 { background-color:#fff; padding-top:140px; position: relative; width:32.3%; margin: 0 1% 0 0; }
#detail .about-content-wrap .box03 h3 { color: #0FB200; font-size: 20px; font-weight:bold; margin-bottom:16px; padding: 0 16px; text-align:center; }
#detail .about-content-wrap .box03 p { font-size:16px; color:#000; line-height:1.6; padding:0 16px 32px; }
#detail .about-content-wrap .box03 img { width:100%; }
#detail .about-content-wrap .box03#sns-agency::after { background:url(../images/service_icon_01.png) center top no-repeat; background-size: contain; content:""; position:absolute; top:30px; left:50%; transform:translate3d(-50%, 0, 0); width:75px; height:88px; }
#detail .about-content-wrap .box03#blog-agency::after { background:url(../images/service_icon_02.png) center top no-repeat; background-size: contain; content:""; position:absolute; top:40px; left:50%; transform:translate3d(-50%, 0, 0); width:95px; height:68px; }
#detail .about-content-wrap .box03#marketing-agency::after { background:url(../images/service_icon_03.png) center top no-repeat; background-size: contain; content:""; position:absolute; top:30px; left:50%; transform:translate3d(-50%, 0, 0); width:91px; height:88px; }
#detail::after { content:"SERVICE"; position:absolute; right:0; bottom:3vw; font-size:min(12.91vw, 248px); line-height:1; opacity:.3; color:#000; font-style:italic; font-weight:bold; font-family: var(--heading-font-family); }

#contact { position:relative; }
#contact.section-wrap { padding:80px 0; }
#contact .section-inner-wrap { width: 92%; margin:0 auto; position: relative; z-index:1; }
#contact .heading-wrap { text-align:center; }
#contact .contact-text { font-size:20px; font-weight:bold; line-height: 1.6; text-align:center; margin-bottom:40px; }
#contact .link-button a { border: 1px solid var(--link-color); color:var(--link-color); display: block; font-size:26px; font-weight:bold; line-height: 1; padding: 42px 0; text-align:center; position:relative; margin:0 auto; width:80%; max-width:360px; transition:.1s; text-decoration:none; }
#contact::after { content:"CONTACT"; position:absolute; right:0; bottom:-3vw; font-size:min(12.91vw, 248px); line-height:1; opacity:.1; color:#fff; font-style:italic; font-weight:bold; font-family: var(--heading-font-family); }

#companey { position:relative; background-color:#011500; }
#companey .section-inner-wrap-1000px { z-index:1; }
#companey .heading-wrap { padding-left:16px; position:relative; }
#companey .heading-wrap::after { content:""; border-left:3px solid var(--link-color); height:86%; position:absolute; left: 0; top: 14%;}
#companey dl { border-bottom: 1px solid rgba(255, 255, 255, .5); display:table; width:100%; margin-bottom: 3px; padding: 20px 0; z-index:1; }
#companey dl:first-child { border-top: 1px solid rgba(255, 255, 255, .5);}
#companey dl dt,
#companey dl dd { display:table-cell; vertical-align:middle; }
#companey dl dt { width:20%; }
#companey dl dd { width:80%; font-weight:bold; }
#companey::after { content:"COMPANEY"; position:absolute; right:0; bottom:3vw; font-size:min(12.91vw, 248px); line-height:1; color:#002B1E; font-style:italic; font-weight:bold; font-family: var(--heading-font-family); }

#page-contact { background-color:#011500; position:relative; }
#page-contact::after { background:url(../images/grid.png) top left; content: ""; opacity:.15; position: absolute;top: 0;left: 0; width: 100%; height: 100%;}
#page-contact header .header-right-wrap { display:none; }
#page-contact header .header-logo { position:absolute; }
#page-contact .page-main-img { padding-top: 120px; position:relative; z-index:1; }
#page-contact .main-wrap { position:relative; z-index:1; }
#page-contact .section-wrap { padding-top:30px; }
#page-contact .heading-wrap { text-align:center; margin-bottom:0px; }
#page-contact .heading-wrap h2 { color:#0FB200; }
#page-contact .heading-wrap h2 + p { font-size:20px; }
/*#page-contact .heading-wrap h2 { color: #000; font-size:min(8vw,60px); letter-spacing: 2px; line-height: 1; margin-bottom:16px; }
#page-contact .heading-wrap h2 + p { color: var(--heading-text-color); font-family: var(--heading-font-family); font-size: var(--heading-font-size); font-weight: var(--heading-font-weight); letter-spacing: 10px; line-height: var(--heading-line-height); margin-bottom: var(--heading-margin-bottom); }*/
#page-contact .contact-text { font-size:16px; line-height: 1.6; text-align:center; margin-bottom:80px; }
#page-contact .link-button a { background-color: var(--key-color); border-radius: 50px; color:#fff; display: block; font-size:26px; font-weight:bold; line-height: 1.6; text-align:center; padding:10px; position:relative; margin:0 auto; width:80%; max-width:360px; transition:.1s; text-decoration:none; }
#page-contact footer { background-color:transparent; }
#page-contact  .link-button-back a { background-color: var(--key-color); border-radius: 12px; font-size: 18px; font-weight: bold; color: #fff; padding: 10px 32px; text-align: center; transition: 0.4s; width: 80%; max-width: 300px; margin: 0 auto; position: relative;}

#form dl { background: #fff; margin-bottom: 16px; padding: 20px 40px; width:100%; }
#form dl dt { color: #000; padding-bottom:16px; }
#form dl dt span { color:#ff0000; text-align:center; padding: 2px 10px; font-size: 10px; line-height: 1; margin-left: 8px;}
#form dl dd .form-input { padding: 16px 0; font-size: 16px; border: none; border-bottom: solid 1px #242424; width:100%; }
#form dl dd .form-input:focus-visible { outline: var(--key-color) auto 1px; }
#form dl dd textarea.form-input { height: 220px;}
#form .form-submit { text-align: center; }
#form .form-submit button { font-size: 16px; color: #fff; background-color: var(--link-color); border-radius: 6px; padding: 16px 32px; transition: 0.4s; cursor: pointer; display: block;}
#form .form-submit button:hover { opacity: .8; }
#form ::placeholder { color: #eee;}

/* linkOff */
.link-off a { background: #ccc; border: none; box-shadow: none; pointer-events: none; }
.link-off a::after { display: none!important; }

@media screen and (max-width: 768px){
  :root {
    --heading-margin-bottom: 0;
    --heading-padding-bottom: 3.73vw;
  }

  body { }
  header .header-logo { top:3vw; left:4vw; width:30vw; }
  header .header-right a { padding: 3vw 4vw; }
  footer { padding: 8vw 0; }

  .section-wrap,
  #contact.section-wrap { padding:16vw 0 20vw; } 
  .page_top{ display: none; }
  .pc-none { display: block; }
  .sp-none { display: none; }

  #main-img { height:60vh; }
  #main-img .main-img-heading-wrap h2 img { width:50vw; }
  #main-img::after { background-size:cover; background-position-x: 62%; height:53vh; }
  #main-img .object.object-01 { width:80vw; height:60vh; transform:translate3d(-30%, 0, 0) skewX(-30deg); }
  #main-img .object.object-03 { height:60vh; width: 11.2vw; }
  #main-img .main-img-heading-wrap { left:7.5vw; padding-right:7.5vw; }
  #about h2 { font-size:32px; margin-bottom:8vw; }
  #about .about-contents dl:not(:last-of-type) { margin-bottom:7vw; }
  #about .about-contents dl dt { margin-bottom:3vw; padding:8px 8px 12px 50px; }
  #about .about-contents dl dt span { left: 10px; bottom:-4px; }
  #detail .about-content-wrap { display: block; width:100%; }
  #detail .about-content-wrap .box03 { margin: 0 0 2%; width:100%; }
  #detail::after { bottom:6vw; font-size:min(17vw, 248px); }
  #contact::after { bottom:-5vw; font-size:min(17vw, 248px); }
  #companey::after { bottom:6vw; font-size:min(17vw, 248px); }
  #companey dl dt { width:30%; }
  #companey dl dd { width:70%; }
  #companey dl dt,
  #companey dl dd { font-size:14px; }
  #page-contact .page-main-img { padding-top:20vw; }
  #page-contact .contact-text { margin-bottom:16vw; }
}