@charset "UTF-8";

/*!
Theme Name: おおたか経営コンサルティング株式会社
Author: happy in code
Template:   cocoon-master
Version:    1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* default reset */
body {
  --wp--style--global--content-size: 980px;
  background: linear-gradient(90deg, #fff 0%, #fff 5%, #BFCFE5 5%, #BFCFE5 25%, #fff 25%, #fff 100%);
}

/* header */
#header-container {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
}
.header-container {
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
}
.header-container-in {
  width: 100%;
  max-width: 1280px;
  padding: 16px 8px;
}
.header-container-in.hlt-top-menu .header {
  flex-grow: 2;
}
.header-container-in.hlt-top-menu .logo-header .site-name {
  padding: 0;
}
.header-container-in.hlt-top-menu .logo-header img {
  width: 40vw;
  max-width: 497px;
  min-width: 180px;
}
@media screen and (max-width: 834px) {
  #header-container { height: 60px; }
  .header-container-in.hlt-top-menu { height: 60px; }
  .header-container-in.hlt-top-menu .logo-header {
    height: 100%;
    padding: 0;
  }
  .header-container-in.hlt-top-menu .logo-header .site-name {
    height: 100%;
  }
  .header-container-in.hlt-top-menu .logo-header .site-name .site-name-text {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 8px 0;
  }
  .header-container-in.hlt-top-menu .logo-header img {
    width: 60vw;
  }
}
#header-container .navi { flex-grow: 1; }
.navi-in > ul { gap: 0 40px; }
.navi-in > ul li {
  height: auto;
  line-height: 1;
}
#navi .navi-in>ul>li>a {
  padding: 0;
  border-bottom: 2px solid #fff;
}
#navi .navi-in>ul>li>a:hover {
  border-bottom: 2px solid #DA4207;
}
#navi .navi-in>ul>li>a .caption-wrap {
  padding: 8px 0;
}
#navi .navi-in>ul>li:last-child>a {
  background: #DA4207;
  border: 2px solid #DA4207;
  border-radius: 4px;
  color: #fff !important;
}
#navi .navi-in>ul>li:last-child>a .caption-wrap { padding: 8px 16px; }
#navi .navi-in>ul>li:last-child>a:hover {
  background: #fff;
  color: #DA4207 !important;
}
@media screen and (max-width: 1023px) {
  #navi .navi-in .menu-pc {
    display: flex;
    gap: 0 24px;
    height: 100%;
  }
}
@media screen and (max-width: 834px) {
  #header .site-name-text { line-height: 1; }
  .header-container-in.hlt-top-menu {
    display: flex;
    flex-direction: row;
    padding: 0;
  }
  .header-container-in.hlt-top-menu .wrap {
    height: 100%;
  }
  .header-container-in.hlt-top-menu .header { padding: 0 8px; }
  #header-container .navi { height: 60px; }
  #navi .navi-in>ul>li:not(:last-child) {
    display: none;
  }
  #navi .navi-in>ul>li:last-child>a {
    border-radius: 0;
    height: 100%;
  }
  #navi .navi-in>ul>li:last-child>a .caption-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    height: 100%;
  }
  #navi .navi-in>ul>li:last-child>a .caption-wrap .item-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px 0;
    font-size: 12px;
  }
  #navi .navi-in>ul>li:last-child>a .caption-wrap .item-label::before {
    display: inline-block;
    content: url(images/icon-mail.svg);
  }
}
@media screen and (max-width: 360px) {
  #navi .navi-in>ul { display: none; }
  #navi .navi-in>ul>li:last-child>a .caption-wrap { padding: 8px 16px; }
}
/* footer */
.footer {
  margin: 0;
  padding: 32px 8px;
}
.footer .footer-bottom {
  margin: 0;
  padding: 0;
}
.footer .copyright { font-size: 12px; }

/* contents */
.content { margin: 0; }
.main {
  padding: 0;
  background-color: transparent;
}
@media screen and (max-width: 834px) {
  main.main { padding: 0; }
}

h2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 16px;
  margin-bottom: 16px;
  font-weight: 500;
  font-family: "Noto Serif JP" ,sans-serif;
  font-size: 40px;
}
@media screen and (max-width: 834px) {
  h2 { font-size: 32px; }
}
h2::after {
  display: block;
  width: 24px;
  height: 18px;
  background: url(images/title-dot.svg) no-repeat left bottom;
  content: '';
}
h2.has-text-align-center {
  justify-content: center;
}
h2.has-text-align-center::before {
  display: block;
  width: 24px;
  height: 18px;
  background: url(images/title-dot.svg) no-repeat left top;
  content: '';
  transform: rotate(180deg);
}

/* mv */
.is-layout-constrained.p-mv {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 500px;
  margin-bottom: 64px !important;
  padding: 0;
  overflow: hidden;
}
.p-mv .wp-block-cover.alignwide {
  width: 100%;
  height: 100%;
  max-width: unset;
  margin: 0;
  padding: 0;
}
.p-mv .wp-block-cover__inner-container {
  position: relative;
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: auto; 
  gap: 0; 
  align-content: center; 
  align-items: center; 
  width: 100%;
  height: 100%;
}
.p-mv .wp-block-cover__inner-container .p-mv-title {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 25% 24px 16px;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(0, 0, 0, .5);
  font-family: "Noto Serif JP" ,sans-serif;
  font-weight: 600;
  font-size: 4.5vmax;
  z-index: 81;
  grid-area: 1 / 1 / 2 / 2;
}
.p-mv .wp-block-cover__inner-container .p-mv-title::after {
  display: block;
  clear: both;
  content: '';
}
.p-mv .wp-block-cover__inner-container .p-mv-title p {
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.p-mv .wp-block-cover__inner-container::after {
  position: relative;
  display: block;
  width: 100%;
  min-height: calc(2 * 1.2em);
  margin: 0 auto;
  padding: 24px 16px;
  background: linear-gradient(90deg,rgb(0,64,152) 0%,rgb(0,64,152) 50%,rgba(0,64,153,0) 100%);
  line-height: 1.2;
  font-family: "Noto Serif JP" ,sans-serif;
  font-weight: 600;
  font-size: 4.5vmax;
  z-index: 79;
  content: '';
  grid-area: 1 / 1 / 2 / 2;
}
.p-mv .wp-block-cover__inner-container .wp-block-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 1280px;
  height: 100%;
  margin: 0;
  padding: 24px 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 80;
  overflow: hidden;
}
@media screen and (max-width: 620px) {
  .p-mv .wp-block-cover__inner-container {
    align-content: end; 
    align-items: end;
  }
  .p-mv .wp-block-cover__inner-container .p-mv-title {
    padding: 24px 16px;
    font-size: 6vmax;
  }
  .p-mv .wp-block-cover__inner-container .p-mv-title p { display: block; }
  .p-mv .wp-block-cover__inner-container::after {
    font-size: 6vmax;
    min-height: calc(3 * 1.2em);
  }
}
@media screen and (max-width: 485px) {
  .p-mv .wp-block-cover__inner-container .p-mv-title { font-size: 5vmax; }
  .p-mv .wp-block-cover__inner-container .p-mv-title p { float: none; }
  .p-mv .wp-block-cover__inner-container::after {
    font-size: 5vmax;
    min-height: calc(5 * 1.2em);
  }
}
.l-lead {
  margin-bottom: 64px !important;
  padding: 0 16px;
}

/* philosophy */
.l-philosophy {
  display: flex;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 140px 0 0;
  background: url(images/bg-philosophy.jpg) no-repeat left top,
              linear-gradient(0deg, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0) 10%, #E4EBF6 10%,#E4EBF6 90%, rgb(255, 255, 255, 0) 90%, rgb(255, 255, 255, 0) 100%);
}
@media screen and (max-width: 834px) {
  .l-philosophy { 
    background: url(images/bg-philosophy.jpg) no-repeat left top
  }
}

.l-philosophy .wp-block-group {
  width: 980px;
  max-width: 100%;
  margin: 0 !important;
  padding: 32px;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
}
@media screen and (max-width: 834px) {
  .l-philosophy .wp-block-group { 
    background-color: rgba(255, 255, 255, .9);
  }
}

.l-service {
  margin: 0 !important;
  padding: 120px 16px;
}
.l-service h2 { margin-bottom: 8px !important; }
.l-service h2+p {
  margin: 0 auto 64px !important;
  text-align: center;
}
.p-service-list .wp-block-columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 32px;
  border: 2px solid #7F9FCB;
  background: #fff;
}
.p-service-list .wp-block-columns > .wp-block-column {
  flex-grow: 3;
}
.p-service-list .wp-block-columns > .wp-block-column h3 {
  margin-bottom: 8px;
  font-family: "Noto Serif JP" ,sans-serif;
  font-size: 28px;
}
@media screen and (max-width: 834px) {
  .p-service-list .wp-block-columns > .wp-block-column h3 {
    line-height: 1.5;
    font-size: 24px;
  }
}
.p-service-list .wp-block-columns > .wp-block-column p {
  margin: 0;
  font-size: 16px;
}
.p-service-list .wp-block-columns > .wp-block-column + .wp-block-column {
  flex-grow: 1;
}
.p-service-list .wp-block-columns > .wp-block-column figure { text-align: center; }
.p-service-list .wp-block-columns figure img {
  display: inline-block;
  width: auto;
  height: 180px;
}

.l-profile { padding: 80px 16px; }
.l-profile .wp-block-columns { gap: 0 24px; }
.l-profile .wp-block-columns > .wp-block-column { flex-grow: 1; }
.l-profile .wp-block-columns > .wp-block-column + .wp-block-column { flex-grow: 2; }
@media screen and (max-width: 834px) {
  .l-profile .wp-block-columns > .wp-block-column + .wp-block-column { margin-top: 16px; }
}

.l-contact {
  margin: 0 !important;
  padding: 80px 16px;
  background: linear-gradient(90deg, #E4EBF6 0%, #E4EBF6 5%, #BFCFE5 5%, #BFCFE5 25%, #E4EBF6 25%, #E4EBF6 100%);
}

.p-movie .video-container {
	max-width: 100%;
	margin-top: 80px;
}
.p-movie .video-container .video {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.p-movie .video iframe {
  width: 100%;
  height: 100%;
}

.wpforms-form {
  margin: 0 auto;
  padding: 0;
  max-width: 660px !important;
}
.wpforms-form .wpforms-field { margin-bottom: 16px; }
.wpforms-form .wpforms-field-label {
  font-size: 16px;
}
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
  border: 2px solid #DA4207;
  border-radius: 4px;
  background: #DA4207;
  font-size: 18px;
  color: #fff;
  transition: background-color .3s ease-in;
}
div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover {
  background: #fff;
  border: 2px solid #DA4207;
  color: #DA4207;
}
.wpforms-confirmation-container-full,
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  border: 2px solid #DA4207;
  background: #fff;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}