@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 　root
-----------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
:root {
  --color-primary: 3, 87, 114;
  --color-secondary: 246, 249, 245;
  --color-secondary-2: 104, 165, 218;
  --color-tertiary: 0, 72, 134;
  --color-tertiary-2: 91, 189, 164;
  --color-service-accent: 173, 255, 252;
  --color-accent: 229, 57, 0;
  --color-accent-2: 255, 191, 48;
  --color-basic: 51, 51, 51;
  --color-neutral: 117, 111, 111;
  --color-black: 0, 0, 0;
  --color-white: 255, 255, 255;
  --color-gray: 158, 158, 158;
  --color-gray-w10: 102, 102, 102;
  --color-gray-w20: 153, 153, 153;
  --color-gray-w50: 204, 204, 204;
  --color-gray-w70: 221, 221, 221;
  --color-gray-w90: 238, 238, 238;
  --color-error: 236, 68, 62, 1;
  --color-accent-gradation: linear-gradient(107deg, rgb(var(--color-accent)) 27.01%, rgb(var(--color-accent-2)) 72.99%);
  --color-accent-gradation-2: linear-gradient(107deg, rgb(var(--color-accent)) 51.52%, rgb(var(--color-accent-2)) 93.77%);
  --font-size-base: 16;
  --font-size-body: calc(var(--font-size-base) * 0.875px);
  --font-size-body-l: calc(var(--font-size-base) * 1px);
  --font-size-body-s: calc(var(--font-size-base) * 0.75px);
  --font-size-h1: clamp(25px, 5.8594vw + -20px, 40px);
  --font-size-h2: clamp(24px, 4.6875vw + -12px, 36px);
  --font-size-h3: clamp(22px, 2.3438vw + 4px, 28px);
  --font-size-h4: clamp(18px, 1.5625vw + 6px, 22px);
  --font-size-h5: clamp(16px, 0.7813vw + 10px, 18px);
  --font-size-h6: clamp(14px, 0.7813vw + 8px, 16px);
  --font-size-intro: clamp(20px, 1.9531vw + 5px, 25px);
  --font-size-intro-s: clamp(18px, 0.7813vw + 12px, 20px);
  --font-size-8: calc(var(--font-size-base) * 0.5px);
  --font-size-9: calc(var(--font-size-base) * 0.5625px);
  --font-size-10: calc(var(--font-size-base) * 0.625px);
  --font-size-11: calc(var(--font-size-base) * 0.6875px);
  --font-size-12: calc(var(--font-size-base) * 0.75px);
  --font-size-13: calc(var(--font-size-base) * 0.8125px);
  --font-size-14: calc(var(--font-size-base) * 0.875px);
  --font-size-15: calc(var(--font-size-base) * 0.9375px);
  --font-size-16: calc(var(--font-size-base) * 1px);
  --font-size-18: calc(var(--font-size-base) * 1.125px);
  --font-size-20: calc(var(--font-size-base) * 1.25px);
  --font-size-22: calc(var(--font-size-base) * 1.375px);
  --font-size-24: calc(var(--font-size-base) * 1.5px);
  --font-size-25: calc(var(--font-size-base) * 1.5625px);
  --font-size-26: calc(var(--font-size-base) * 1.625px);
  --font-size-28: calc(var(--font-size-base) * 1.75px);
  --font-size-30: calc(var(--font-size-base) * 1.875px);
  --font-size-32: calc(var(--font-size-base) * 2px);
  --font-size-36: calc(var(--font-size-base) * 2.25px);
  --space-xs: 10px;
  --space-ss: 15px;
  --space-s: 20px;
  --space-m: clamp(20px, 3.9063vw + -10px, 30px);
  --space-l: clamp(30px, 7.8125vw + -30px, 50px);
  --space-ll: calc(var(--space-m) * 2);
  --container-default: 1200px;
  --container-middle: 1000px;
  --container-small: 840px;
  --container-inner: 700px;
  --container-modal: 900px;
  --radius-middle: 10px;
  --radius-large: 20px;
  --transition-duration: .3s;
  --transition-duration-l: .5s;
  --screen-width: 1920px;
  --screen-height: 1080px;
  --top-position: -0px;
  --screen-diagonal: 2202.907170082298px;
}

:root {
  --font-weight-normal: 500;
  --font-weight-bold: 700;
}

@supports (font-family: "Hiragino Kaku Gothic ProN") {
  :root {
    --font-weight-normal: 400;
    --font-weight-bold: 600;
  }
}
/* 　top
-----------------------------------*/
main article .gfinderCasestudyNewpostFeatBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
  border: 1px solid rgba(186, 191, 184, 0.7490196078);
  border-width: 1px;
  background-color: rgb(var(--color-secondary));
  padding: 1.5rem;
  margin-bottom: 1.8em;
}
main article .gfinderCasestudyNewpostFeatBox__thumbnail {
  width: 30%;
}
main article .gfinderCasestudyNewpostFeatBox__thumbnail__figure {
  width: 100%;
  height: auto;
}
main article .gfinderCasestudyNewpostFeatBox__thumbnail__figure img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
main article .gfinderCasestudyNewpostFeatBox__content {
  width: 70%;
}
main article .gfinderCasestudyNewpostFeatBox__content__title {
  font-size: var(--font-size-24);
  border: none;
  padding: 0;
  margin: 0;
}
main article .gfinderCasestudyNewpostFeatBox__content__title a {
  color: rgb(var(--color-primary));
  text-decoration: none;
}
main article .gfinderCasestudyNewpostFeatBox__content__title a:hover {
  color: rgb(var(--color-accent));
}
main article .gfinderCasestudyNewpostFeatBox__content__meta {
  margin-top: 1rem;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
main article .gfinderCasestudyNewpostFeatBox__content__meta__client {
  color: rgb(var(--color-black));
}
main article .gfinderCasestudyNewpostFeatBox__content__meta__date {
  font-size: var(--font-size-14);
  color: rgb(var(--color-neutral));
  text-align: right;
}
main article .gfinderCasestudyNewpostFeatBox__content__text {
  margin-top: 1.5rem;
  margin-bottom: 0;
}
main article .gfinderCasestudyNewpostFeatBox__content__text__more {
  margin-left: 0.5rem;
}

.p-top--menu__card[target=_blank] > section {
  position: relative;
}
.p-top--menu__card[target=_blank] > section:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background: url("assets/img/ico-blank.svg") no-repeat center center;
  background-size: contain;
  top: 20px;
  right: 20px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}
/*768px以下*/
@media screen and (max-width: 768px) {
  main article .gfinderCasestudyNewpostFeatBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  main article .gfinderCasestudyNewpostFeatBox__thumbnail {
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 0;
  }
  main article .gfinderCasestudyNewpostFeatBox__content {
    width: 100%;
  }
}
/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}