/*
sass内の各フォルダを管理するscss
*/

/*
foundation内の各ファイルを管理するscss
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
small,
button,
time,
figure {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

li,
dd {
	list-style-type: none;
}

header,
footer,
nav,
section,
article,
main,
aside,
figure,
figcaption {
	display: block;
}

img {
	border: none;
	vertical-align: bottom;
}

a {
	color: #000;
	cursor: pointer;
	text-decoration: none;
}

/*
global内の各ファイルを管理するscss
*/

/*
変数を定義するファイル
*/

/*
関数を定義するファイル
*/

/*
global内の各ファイルを管理するscss
*/

/*
mixinを定義するファイル
*/

body {
	background-color: #FFFFFF;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}

img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	display: block;
	object-fit: cover;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*
layout内の各ファイルを管理するscss
*/

.l-loading {
	background-image: linear-gradient(#FAF3E0, #EAD7B7);
	box-sizing: border-box;
	display: grid;
	height: 100%;
	inset: 0;
	overflow: hidden;
	place-items: center;
	position: fixed;
	transform: translateY(0); /* STEP01：画面全体が上へスライドして消える */
	transition: transform 1s ease;
	width: 100%;
	z-index: 300;
}

.l-loading.js-loading-end {
	transform: translateY(-100%);
}

.l-inner {
	padding-inline: 20px;
}

/* ページ全体：枠 */

.l-wrapper {
	margin-block-end: 60px;
	overflow: hidden;
}

/* header：枠 */

.l-header {
	position: relative;
}

.l-header__bg {
	aspect-ratio: 375/500;
	display: block;
	height: auto;
	max-height: 750px;
	width: 100%;
	-o-object-position: center;
	object-position: center;
}

.l-header__bg img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center top;
	object-position: center top;
}

.l-header__wrapper {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.l-header__nav {
	bottom: clamp(0.625rem, -1.458rem + 3.7vw, 1.875rem);
	position: absolute;
	right: 30px;
}

/* header：枠 */

.l-header-lower {
	align-items: center;
	aspect-ratio: 375/250;
	display: grid;
	height: auto;
	max-height: 250px;
	position: relative;
	width: 100%;
	-o-object-position: center;
	object-position: center;
}

.l-header-lower::before {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	height: 100%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: -1;
}

.l-header-lower--about::before {
	background-image: url(../img/first-view/fv__about.jpg);
}

.l-header-lower--works::before {
	background-image: url(../img/first-view/fv__archive-works.jpg);
}

.l-header-lower--single-works::before {
	background-image: url(../img/first-view/fv__single-works.jpg);
}

.l-header-lower--archive-blog::before {
	background-image: url(../img/first-view/fv__archive-blog.jpg);
}

.l-header-lower--single-blog::before {
	background-image: url(../img/first-view/fv__single-blog.jpg);
}

.l-header-lower--contact-thanks::before {
	background-image: url(../img/first-view/fv__contact-thanks.jpg);
}

.l-header-lower__inner {
	grid-area: 1/1;
	height: 100%;
	height: 100%;
	position: relative;
	width: 100%;
	z-index: 1;
}

.l-header-lower__nav {
	bottom: 20px;
	position: absolute;
	right: 20px;
}

.l-header-lower__nav.c-nav--header {
	max-width: 100%;
	padding: 10px;
	width: 320px;
}

.l-header-lower__nav .c-nav__list {
	display: grid;
	flex-direction: column;
	grid-template-columns: repeat(2, 1fr);
	-moz-column-gap: 20px;
	column-gap: 20px;
}

.l-header-lower__nav .c-nav__link {
	align-items: center;
	display: flex;
	gap: 26px;
	height: 100%;
	padding-block: 5px;
	transition: opacity 0.3s;
	width: 100%;
}

.l-header-lower__nav .c-nav__link:hover {
	opacity: 0.6;
}

/* bottom-nav：枠 */

.l-bottom-nav {
	background: linear-gradient(#FAF3E0, #EAD7B7);
	bottom: 0;
	height: 60px;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 100;
}

.l-bottom-nav__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: 60px;
	list-style: none;
	margin: 0;
	padding: 0; /* 伸ばす */
	place-items: stretch;
}

.l-section {
	padding-block: clamp(6.25rem, 4.049rem + 9.39vw, 12.5rem) 30px;
}

.l-footer {
	background-color: #333333;
	margin-block-start: 80px;
	padding-block: 10px;
}

.l-footer__inner {
	position: relative;
}

.l-footer__nav {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-block-start: 10px;
}

/*
component内の各ファイルを管理するscss
*/

.c-loading {
	display: flex;
	font-family: "Sacramento", cursive;
	gap: 3px;
	justify-content: center; /* アニメーション */
}

.c-loading .c-loading__char {
	-webkit-text-fill-color: transparent;
	background-color: #DDDDDD;
	background-image: linear-gradient(#005F6B, #008CA8, #74C0FC);
	display: inline-block;
	-webkit-background-clip: text;
	animation: water-anime 2s infinite linear;
	animation: slideUp 0.5s 0.5s ease-in-out forwards;
	animation-delay: 0.5s, 0s;
	animation-duration: 0.5s, 2s;
	animation-fill-mode: forwards, none;
	animation-iteration-count: 1, infinite; /* STEP02：波アニメを「上に追加」で並行稼働させる */
	animation-name: slideUp, water-anime;
	animation-timing-function: ease-in-out, linear;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 2%;
	font-size: clamp(1.5rem, 0.972rem + 2.25vw, 3rem);
	font-weight: 700;
	text-transform: uppercase; /* STEP01：文字が下からスライドアップ */
	transform: translateY(100%);
}

.c-loading .c-loading__char:nth-child(1) {
	animation-delay: 0.1s;
}

.c-loading .c-loading__char:nth-child(2) {
	animation-delay: 0.2s;
}

.c-loading .c-loading__char:nth-child(3) {
	animation-delay: 0.3s;
}

.c-loading .c-loading__char:nth-child(4) {
	animation-delay: 0.4s;
}

.c-loading .c-loading__char:nth-child(5) {
	animation-delay: 0.5s;
}

.c-loading .c-loading__char:nth-child(6) {
	animation-delay: 0.6s;
}

.c-loading .c-loading__char:nth-child(7) {
	animation-delay: 0.7s;
}

.c-loading .c-loading__char:nth-child(8) {
	animation-delay: 0.8s;
}

.c-loading .c-loading__char:nth-child(9) {
	animation-delay: 0.9s;
}

.c-loading .c-loading__char:nth-child(10) {
	animation-delay: 1s;
}

/* Keyframes */

/* 文字スライドアップ */

/* 波（背景塗りが広がる） */

.c-link {
	align-items: center;
	background-color: #FFFFFF;
	background-image: linear-gradient(45deg, #008CA8 0%, #008CA8 50%, #FFFFFF 50%, #FFFFFF 100%);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	border: 2px solid #000;
	border-radius: 50px;
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-inline: auto;
	overflow: hidden;
	padding: 10px;
	position: relative;
	transition: background-position 0.3s ease, border-color 0.3s ease;
	width: min(66.6666666667%, 250px);
}

.c-link:hover {
	background-position: 0 100%;
	border-color: #FFFFFF;
}

.c-link:hover .c-link__text {
	color: #FFFFFF;
}

.c-link:hover .c-link__icon {
	background-color: #FFFFFF;
}

.c-link:hover .c-link__icon::before {
	opacity: 0;
}

.c-link:hover .c-link__icon::after {
	opacity: 1;
}

.c-link__text {
	font-size: clamp(1rem, 0.912rem + 0.38vw, 1.25rem);
	line-height: 1;
	transition: color 0.3s;
}

.c-link__icon {
	aspect-ratio: 1;
	background-color: #008CA8;
	border-radius: 50%;
	height: auto;
	position: relative;
	transition: background-color 0.3s;
	width: 40px;
}

.c-link__icon::before,
.c-link__icon::after {
	aspect-ratio: 9/4;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	left: 50%;
	position: absolute;
	top: calc(50% - 2px);
	transform: translate(-50%, -50%);
	transition: opacity 0.3s;
	width: 27px;
	z-index: 1;
}

.c-link__icon::before {
	background-image: url(../img/svg/link-icon__right-white.svg);
}

.c-link__icon::after {
	background-image: url(../img/svg/link-icon__right-blue.svg);
	opacity: 0;
}

/* ナビメニューの共通クラス */

.c-nav {
	display: flex;
	justify-content: center;
	padding: 50px 20px;
}

.c-nav--header {
	background-color: #FFFFFF;
	border-radius: 30px;
	height: auto;
	max-width: 250px;
	padding: 20px;
	width: 20.8333333333%;
}

.c-nav--header .c-nav__link {
	padding-block: clamp(0.438rem, -0.396rem + 1.48vw, 0.938rem);
}

.c-nav__list {
	display: flex;
	flex-direction: column;
}

.c-nav__link {
	align-items: center;
	display: flex;
	gap: 26px;
	height: 100%;
	padding-block: 10px;
	transition: opacity 0.3s;
	width: 100%;
}

.c-nav__link:hover {
	opacity: 0.6;
}

.c-nav__icon {
	aspect-ratio: 1;
	background-color: #008CA8;
	border-radius: 50%;
	height: auto;
	position: relative;
	width: 40px;
}

.c-nav__icon::after {
	aspect-ratio: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: auto;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
}

.c-nav__icon--home::after {
	background-image: url(../img/svg/nav/nav-icon__home-white.svg);
}

.c-nav__icon--about::after {
	background-image: url(../img/svg/nav/nav-icon__about-white.svg);
}

.c-nav__icon--work::after {
	background-image: url(../img/svg/nav/nav-icon__work-white.svg);
}

.c-nav__icon--blog::after {
	background-image: url(../img/svg/nav/nav-icon__blog-white.svg);
}

.c-nav__icon--skills::after {
	background-image: url(../img/svg/nav/nav-icon__skills-white.svg);
}

.c-nav__icon--contact::after {
	background-image: url(../img/svg/nav/nav-icon__contact-white.svg);
}

.c-nav__text {
	display: inline-block;
	font-size: clamp(1rem, 0.956rem + 0.19vw, 1.125rem);
	font-weight: 700;
	line-height: 1;
	position: relative;
}

.c-section-heading {
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
}

.c-section-heading__main {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.c-section-heading__sub {
	color: #008CA8;
	display: inline-block;
	font-family: "Sacramento", cursive;
	font-size: 48px;
	left: calc(100% - 20px);
	position: absolute;
	rotate: -14deg;
	top: -33px;
	transform-origin: left top;
	white-space: nowrap;
}

.c-about__role {
	background-color: #DDDDDD;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	margin-block-start: 20px;
	padding: 5px 13px;
	width: -moz-fit-content;
	width: fit-content;
}

.c-about__name {
	align-items: center;
	display: flex;
	font-size: clamp(1rem, 0.956rem + 0.19vw, 1.125rem);
	padding-block-end: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
}

.c-about__name::before {
	aspect-ratio: 236/12;
	background: url(../img/svg/bg/bg-wave.svg) no-repeat center/contain;
	bottom: 0;
	content: "";
	height: auto;
	left: calc(50% + 60px);
	position: absolute;
	transform: translateX(-50%);
	width: clamp(8.125rem, 5.792rem + 9.95vw, 14.75rem);
}

.c-about__name-jp {
	padding-inline-end: 20px;
	position: relative;
}

.c-about__name-jp::before {
	content: "/";
	font-size: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.c-about__name-en {
	padding-inline-start: 20px;
}

.c-about__text {
	font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
}

.c-works__card {
	background: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	transition: translate 0.3s ease, z-index 0.3s ease;
	width: min(100%, 420px);
}

.c-works__card:hover .c-works__card-imgWrap::before,
.c-works__card:hover .c-works__card-imgWrap::after {
	opacity: 1;
}

.c-works__card:hover .c-works__card-img {
	scale: 1.03;
}

.c-works__card-imgWrap {
	aspect-ratio: 335/193;
	height: auto;
	margin-inline: auto;
	overflow: hidden;
	position: relative;
	width: min(100%, 420px);
}

.c-works__card-imgWrap::before,
.c-works__card-imgWrap::after {
	opacity: 0;
	transition: opacity 0.3s;
}

.c-works__card-imgWrap::before {
	background-color: rgba(0, 0, 0, 0.6);
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.c-works__card-imgWrap::after {
	color: #FFFFFF;
	content: "詳細を見る";
	font-size: 32px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.c-works__card-img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: scale 0.3s;
}

.c-works__card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
}

.c-works__card-tags {
	align-items: flex-end;
	display: flex;
	gap: 8px;
}

.c-works__card-title {
	font-size: clamp(1rem, 0.912rem + 0.38vw, 1.25rem);
}

.c-tag {
	border-bottom: 2px solid #008CA8;
	display: inline-block;
	font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
	line-height: 1;
	padding-block-end: 3px;
	padding-inline: 8px;
}

.c-background-map {
	aspect-ratio: 259/370;
	display: inline-block;
	height: auto;
	position: absolute;
	width: clamp(5rem, 1.061rem + 16.81vw, 16.188rem);
	z-index: 1;
}

.c-background-map--skills {
	right: 20px;
	top: -100px;
}

.c-background-map--footer {
	bottom: 60px;
	left: 10px;
}

.c-background-map--lower {
	right: 20px;
	top: calc(100% + 10px);
}

.c-to-top {
	aspect-ratio: 1;
	background-image: linear-gradient(45deg, #008CA8 0%, #008CA8 50%, #FFFFFF 50%, #FFFFFF 100%);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	border: 1px solid #008CA8;
	border-radius: 50%;
	bottom: 160px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	right: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem); /* ★transitionは1回だけ */
	transition: opacity 0.3s ease, visibility 0s linear 0.3s, background-position 0.3s ease, scale 0.3s ease;
	visibility: hidden;
	width: clamp(2.5rem, 2.06rem + 1.88vw, 3.75rem);
	z-index: 10;
}

.c-to-top.js-show {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0s, background-position 0.3s ease, scale 0.3s ease;
	visibility: visible;
}

.c-to-top:hover {
	background-position: 0 100%;
	scale: 1.06;
}

.c-to-top:hover::before {
	opacity: 0;
}

.c-to-top:hover::after {
	opacity: 1;
}

.c-to-top::before,
.c-to-top::after {
	aspect-ratio: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
	width: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

.c-to-top::before {
	background-image: url(../img/svg/arrow/icon-arrow__up-blue.svg);
}

.c-to-top::after {
	background-image: url(../img/svg/arrow/icon-arrow__up-white.svg);
	opacity: 0;
}

/* ぱんくずリスト */
.c-breadcrumb {
  margin-block-start: clamp(1.875rem, 1.435rem + 1.88vw, 3.125rem);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* 1. これでHomeと制作実績の高さが揃います */
  gap: 0; /* 余白は個別に管理するので0に */
}

/* 各パンくずの要素（Homeや制作実績） */
.c-breadcrumb__item {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  color: #000;
  line-height: 1;
}

.c-breadcrumb__item.is-checked {
  color: #008CA8;
}

/* 2. 【余白と整列の修正】区切り文字の設定 */
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: ">";
  font-size: 16px;
  color: #000;
  /* 絶対配置をやめて、マージンで空白を作る */
  margin: 0 12px; /* 左右に12pxずつ（合計24px）の空白が空きます */
  display: inline-block;
  /* 文字の高さ微調整（必要であれば） */
  transform: translateY(1px); 
}

/* 不要になった絶対配置の指定を削除 */
.c-breadcrumb__item + .c-breadcrumb__item::after {
  display: none;
}

.c-breadcrumb__link {
  transition: opacity 0.3s;
  display: block;
}

.c-breadcrumb__link:hover {
  opacity: 0.6;
}

.c-animation__text {
	margin-bottom: 100px;
}

.c-animation__text .char {
	opacity: 0;
}

/* Splitされるまで文章を隠す（チラつき防止） */

.js-split-text {
	opacity: 0;
}

/* Split完了したら表示OK */

.js-split-text.is-split-ready {
	opacity: 1;
}

/* Split後の各文字は最初0（アニメで出す） */

.js-split-text .char {
	opacity: 0;
}

.c-tabs__list {
	align-items: center;
	display: flex;
	gap: clamp(0.625rem, 0.053rem + 2.44vw, 2.25rem);
}

.c-tabs__item {
	border: 1px solid #008CA8;
}

.c-tabs__link {
	align-items: center;
	background-color: #FFFFFF;
	display: flex;
	font-size: clamp(0.75rem, 0.618rem + 0.56vw, 1.125rem);
	font-weight: 700;
	height: clamp(1.875rem, 1.435rem + 1.88vw, 3.125rem);
	justify-content: center;
	overflow: hidden;
	padding: 10px;
	transition: opacity 0.3s;
	width: clamp(4.688rem, 3.257rem + 6.1vw, 8.75rem);
}

.c-tabs__link.is-active {
	background-color: #008CA8;
	color: #FFFFFF;
}

.c-tabs__link:hover {
	opacity: 0.6;
}

/*
project内の各ファイルを管理するscss
*/

.p-header__titles {
	color: #333333;
	display: flex;
	flex-direction: column;
	left: 30px;
	position: absolute;
	top: 30px;
	width: 100vw;
	z-index: 1;
}

.p-header__title {
	font-size: clamp(2.25rem, 0.93rem + 5.63vw, 6rem);
	font-weight: 700;
	line-height: 1;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
	width: -moz-fit-content;
	width: fit-content;
}

/* header：背景画像 */

.p-header__bg-img {
	bottom: 0;
	position: absolute;
	right: 0;
}

.p-header__bg-img--map {
	aspect-ratio: 250/250;
	bottom: 10px;
	height: auto;
	max-width: 300px;
	right: 60px;
	width: 66.6666666667%;
	z-index: 2;
}

.p-header__bg-img--sunset {
	aspect-ratio: 180/220;
	bottom: 15px;
	height: auto;
	max-width: 200px;
	right: 4px;
	width: 48%;
	z-index: 3;
}

.p-header__bg-img--profile {
	aspect-ratio: 170/210;
	bottom: 15px;
	height: auto;
	max-width: 200px;
	right: 10px;
	width: 45.3333333333%;
	z-index: 4;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center top;
	object-position: center top;
	rotate: -1.5deg;
}

.p-header-lower__title {
	color: #FFFFFF;
	font-size: clamp(2rem, 1.648rem + 1.5vw, 3rem);
	font-weight: 700;
	grid-area: 1/1;
	margin: 0;
	place-self: center;
	z-index: 2;
}

/* ハンバーガーメニュー */

.p-drawer-button {
	align-items: center;
	background: transparent;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding: 15px 20px;
	width: 100%;
}

.p-drawer-button.is-open .p-drawer-button__bars {
	justify-content: center;
}

.p-drawer-button.is-open .p-drawer-button__bar {
	background-color: #FFFFFF;
	left: 50%;
	position: absolute;
	top: 0;
}

.p-drawer-button.is-open .p-drawer-button__bar:nth-of-type(1) {
	transform: translate(-50%, 0) rotate(45deg);
}

.p-drawer-button.is-open .p-drawer-button__bar:nth-of-type(2) {
	transform: translate(-50%, 0) rotate(-45deg);
}

.p-drawer-button.is-open .p-drawer-button__text::before {
	opacity: 0;
}

.p-drawer-button.is-open .p-drawer-button__text::after {
	opacity: 1;
}

.p-drawer-button__bars {
	height: 18px;
	position: relative;
	width: 18px;
}

.p-drawer-button__bar {
	background-color: #FFFFFF;
	height: 2px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: background-color 0.3s, transform 0.3s, top 0.3s;
	width: 100%;
	z-index: 1;
}

.p-drawer-button__bar:nth-of-type(1) {
	top: 0;
}

.p-drawer-button__bar:nth-of-type(2) {
	top: 8px;
}

.p-drawer-button__text {
	color: #FFFFFF;
	font-size: 10px;
	position: relative;
}

.p-drawer-button__text::before,
.p-drawer-button__text::after {
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: opacity 0.3s;
}

.p-drawer-button__text::before {
	content: "open";
}

.p-drawer-button__text::after {
	content: "close";
	opacity: 0;
}

/* ドロワーのナビゲーション */

.p-drawer-nav {
	background: linear-gradient(#FAF3E0, #EAD7B7);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	transform: translateY(100%);
	transition: transform 0.5s;
	width: 100%;
	z-index: 40;
}

.p-drawer-nav.is-open {
	transform: translateY(0);
}

/* bottom-nav：内容 */

.p-bottom-nav__item {
	align-items: center;
	display: flex;
	height: 60px;
	justify-content: center;
	width: 100%;
}

.p-bottom-nav__item--border {
	position: relative;
}

/* 1. 通常のボーダー設定（既存のもの） */
.p-bottom-nav__item--border::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 30px;
  background-color: #008CA8;
}

/* 2. 【最強の打ち消し】Blogの時だけ、強制的に「何も表示しない」 */
/* セレクタを「nav配下のul配下のli.blog」と長く書くことで、
   CSSの優先順位（詳細度）を最高レベルに引き上げます。
*/
nav.l-bottom-nav ul.l-bottom-nav__list li.blog::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background-color: transparent !important;
}

.p-bottom-nav__item--button {
	background-color: #008CA8;
	transition: opacity 0.3s;
}

.p-bottom-nav__item--button:hover {
	opacity: 0.6;
}

.p-bottom-nav__link {
	align-items: center;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	justify-content: center;
	padding: 15px 20px;
	width: 100%;
}

.p-bottom-nav__link:hover .p-bottom-nav__icon::before {
	opacity: 0;
}

.p-bottom-nav__link:hover .p-bottom-nav__icon::after {
	opacity: 1;
}

.p-bottom-nav__link:hover .p-bottom-nav__text {
	color: #008CA8;
}

.p-bottom-nav__icon {
	aspect-ratio: 1;
	height: auto;
	position: relative;
	width: 18px;
}

.p-bottom-nav__icon::before,
.p-bottom-nav__icon::after {
	aspect-ratio: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: auto;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	transition: opacity 0.3s;
	width: 18px;
}

.p-bottom-nav__icon::after {
	opacity: 0;
}

.p-bottom-nav__icon--home::before {
	background-image: url(../img/svg/nav/nav-icon__home-black.svg);
}

.p-bottom-nav__icon--home::after {
	background-image: url(../img/svg/nav/nav-icon__home-blue.svg);
}

.p-bottom-nav__icon--about::before {
	background-image: url(../img/svg/nav/nav-icon__about-black.svg);
}

.p-bottom-nav__icon--about::after {
	background-image: url(../img/svg/nav/nav-icon__about-blue.svg);
}

.p-bottom-nav__icon--work::before {
	background-image: url(../img/svg/nav/nav-icon__work-black.svg);
}

.p-bottom-nav__icon--work::after {
	background-image: url(../img/svg/nav/nav-icon__work-blue.svg);
}

.p-bottom-nav__icon--blog::before {
	background-image: url(../img/svg/nav/nav-icon__blog-black.svg);
}

.p-bottom-nav__icon--blog::after {
	background-image: url(../img/svg/nav/nav-icon__blog-blue.svg);
}

.p-bottom-nav__text {
	color: #000;
	font-size: 10px;
	transition: color 0.3s;
}

.p-about__wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-block-start: clamp(1.875rem, 0.775rem + 4.69vw, 5rem);
}

.p-about__imgWrap {
	display: flex;
	flex-direction: column;
	height: auto;
	margin-inline: auto;
	width: min(89.3333333333%, 500px);
}

.p-about__img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	object-position: top center;
}

.p-about__contents {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-inline: auto;
	width: min(700px, 100%);
}

.p-about-top__wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.p-about-top__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.p-about-top__imgWrap {
	display: flex;
	flex-direction: column;
	height: auto;
	margin-inline: auto;
	width: min(89.3333333333%, 500px);
}

.p-about-top__img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	object-position: top center;
}

.p-about-top__contents {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-inline: auto;
	width: min(700px, 100%);
}

.p-about-top__linkWrap {
	margin-top: 20px;
}

.p-about-roots__lead {
	font-size: clamp(1.5rem, 0.972rem + 2.25vw, 3rem);
	font-weight: 700;
	margin-block-start: 30px;
	text-align: center;
}

.p-about-roots__cards {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-block-start: clamp(1.875rem, 1.215rem + 2.82vw, 3.75rem);
}

.p-about-roots__card {
	margin-inline: auto;
	position: relative;
	width: min(600px, 100%);
}

.p-about-roots__card:not(:last-child)::after {
	background-color: #008CA8;
	content: "";
	height: calc(100% - 10px);
	left: 20px;
	position: absolute;
	top: 50px;
	width: 1px;
	z-index: 1;
}

.p-about-roots__card:nth-of-type(2) .p-about-roots__card-number::before {
	content: "02";
}

.p-about-roots__card:nth-of-type(3) .p-about-roots__card-number::before {
	content: "03";
}

.p-about-roots__card-top {
	align-items: center;
	display: flex;
	gap: 20px;
}

.p-about-roots__card-number {
	aspect-ratio: 1;
	border: 1px solid #008CA8;
	border-radius: 50%;
	height: auto;
	position: relative;
	width: 40px;
}

.p-about-roots__card-number::before {
	color: #008CA8;
	content: "01";
	font-family: "Sacramento", cursive;
	font-size: clamp(1rem, 0.912rem + 0.38vw, 1.25rem);
	left: 50%;
	position: absolute;
	rotate: -25deg;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center top;
}

.p-about-roots__card-title {
	font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
	font-weight: 700;
}

.p-about-roots__card-body {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-inline-start: 60px;
}

.p-about-roots__texts {
	font-size: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);
	line-height: 1.8;
	display: flex;
  align-items: flex-start;
}

.p-about-strength {
	padding-block-end: clamp(5rem, 0.158rem + 20.66vw, 18.75rem);
}

.p-about-strength__cards {
	display: flex;
	flex-direction: column;
	gap: clamp(3.75rem, 2.43rem + 5.63vw, 7.5rem);
	margin-block-start: clamp(1.875rem, 0.335rem + 6.57vw, 6.25rem);
}

.p-about-strength__card-contents {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-inline: auto;
	position: relative;
	width: min(700px, 100%);
}

.p-about-strength__card-contents::before {
	aspect-ratio: 150/14;
	background: url(../img/svg/bg/bg-wave.svg) no-repeat center/contain;
	bottom: -5px;
	content: "";
	height: auto;
	position: absolute;
	right: -5px;
	rotate: -20deg;
	width: clamp(9.375rem, 7.614rem + 7.51vw, 14.375rem);
}

.p-about-strength__card-head {
	align-items: center;
	display: flex;
	gap: 10px;
}

.p-about-strength__card-number {
	aspect-ratio: 1;
	height: auto;
	width: 80px;
}

.p-about-strength__card-title {
	font-size: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
}

.p-about-strength__card-texts {
	font-size: clamp(0.875rem, 0.743rem + 0.56vw, 1.25rem);
	line-height: 1.8;
	display: flex;
  align-items: flex-start;
}

.p-works-top__wrapper {
	display: flex;
	flex-direction: column;
	gap: clamp(3.75rem, 2.87rem + 3.76vw, 6.25rem);
}

/* スライダー */

.p-works-top__swiper-container,
.p-works-top__swiper,
.p-works-top__swiper-wrapper,
.p-works-top__swiper-slide {
	position: relative;
}

.p-works-top__swiper-container {
	overflow: visible;
}

.p-works-top__swiper {
	padding-block: 50px;
}

.p-works-top__swiper-slide {
	aspect-ratio: 335/193;
	background: #FFFFFF;
	height: auto;
	margin-inline: auto;
	width: min(100%, 420px);
	z-index: 1;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: unset;
	left: unset;
	margin: 0;
	padding: 0;
	right: unset;
	top: unset;
}

.swiper-button-prev::before,
.swiper-button-prev::after,
.swiper-button-next::before,
.swiper-button-next::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 16px;
	left: 50%;
	position: absolute;
	top: calc(50% - 1px);
	transform: translate(-50%, -50%);
	transition: opacity 0.3s;
	width: 24px;
}

.swiper-button-prev,
.swiper-button-next {
	aspect-ratio: 1;
	background-color: #FFFFFF;
	background-image: linear-gradient(45deg, #008CA8 0%, #008CA8 50%, #FFFFFF 50%, #FFFFFF 100%);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	border: 1px solid #008CA8;
	border-radius: 50%;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-position 0.3s ease, border-color 0.3s ease;
	width: 40px;
	z-index: 1;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	background-position: 0 100%;
	border-color: #FFFFFF;
}

.swiper-button-prev:hover::before,
.swiper-button-next:hover::before {
	opacity: 0;
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
	opacity: 1;
}

.swiper-button-prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.swiper-button-prev::before {
	background-image: url(../img/svg/link-icon__left-blue.svg);
}

.swiper-button-prev::after {
	background-image: url(../img/svg/link-icon__left-white.svg);
	opacity: 0;
}

.swiper-button-next {
	right: 0;
	transform: translate(50%, -50%);
}

.swiper-button-next::before {
	background-image: url(../img/svg/link-icon__right-blue.svg);
}

.swiper-button-next::after {
	background-image: url(../img/svg/link-icon__right-white.svg);
	opacity: 0;
}

.p-works-top__swiper .swiper-slide-prev,
.p-works-top__swiper .swiper-slide-next {
	transform: translateY(0);
	z-index: 2;
}

/* 真ん中（先頭＝最前面＆20px下げる） */

.p-works-top__swiper .swiper-slide-active {
	transition: translate 0.3s;
	translate: 0 30px;
	z-index: 3;
}

.p-works-archive__head {
	display: flex;
	flex-direction: column;
	gap: clamp(1.875rem, 1.215rem + 2.82vw, 3.75rem);
}

.p-works-archive__cards {
	display: grid;
	grid-template-columns: 1fr;
	margin-block-start: clamp(3.75rem, 2.43rem + 5.63vw, 7.5rem);
	place-items: center;
	row-gap: 50px;
}

.p-works-single__heading .c-section-heading__sub {
	font-size: clamp(2rem, 0.944rem + 4.51vw, 5rem);
}

.p-works-single__body {
	display: flex;
	flex-direction: column;
	gap: clamp(3.75rem, 2.87rem + 3.76vw, 6.25rem);
	margin-block-start: clamp(1.875rem, 0.335rem + 6.57vw, 6.25rem);
}

.p-works-single__detail {
	margin-inline: auto;
	width: min(700px, 100%);
}

.p-works-single__detail-head {
	display: flex;
	flex-direction: column;
	gap: clamp(0.625rem, -0.035rem + 2.82vw, 2.5rem);
}

.p-works-single__detail-heading {
	font-size: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
}

.p-works-single__detail-imgWrap {
	margin-inline: auto;
	width: min(600px, 100%);
}

.p-works-single__detail-body {
	margin-block-start: clamp(3.125rem, 1.585rem + 6.57vw, 7.5rem);
}

.p-works-single__detail-title {
	color: #008CA8;
	display: inline-block;
	font-family: "Sacramento", cursive;
	font-size: 48px;
	rotate: -14deg;
	transform-origin: left top;
	white-space: nowrap;
}

.p-works-single__detail-list {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 20px;
}

.p-works-single__detail-row {
	align-items: center;
	border: 1px solid #DDDDDD;
	border-radius: 10px;
	display: grid;
	font-size: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);
	gap: 10px;
	grid-row: span 2;
	grid-template-rows: subgrid;
	padding: 15px;
}

.p-works-single__detail-link {
	transition: color 0.3s;
}

.p-works-single__detail-link:hover {
	color: #008CA8;
}

.p-works-single__point-heading {
	color: #008CA8;
	display: inline-block;
	font-family: "Sacramento", cursive;
	font-size: 48px;
	rotate: -14deg;
	transform-origin: left top;
	white-space: nowrap;
}

.p-works-single__point-cards {
	display: flex;
	flex-direction: column;
	gap: clamp(3.75rem, 1.769rem + 8.45vw, 9.375rem);
}

.p-works-single__point-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-works-single__point-titleImg {
	aspect-ratio: 207/37;
	height: auto;
	width: clamp(9.375rem, 8.121rem + 5.35vw, 12.938rem);
}

.p-works-single__point-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-works-single__point-visualWrap {
	height: 100%;
	width: 100%;
}

.p-works-single__point-visual {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-works-single__point-contents {
	background-color: #DDDDDD;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 15px;
}

.p-works-single__point-title {
	font-size: clamp(1rem, 0.912rem + 0.38vw, 1.25rem);
	font-weight: 700;
}

.p-works-single__point-lists {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.p-works-single__point-item {
	font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
	line-height: 1.8;
	list-style-type: disc;
	margin-inline-start: 15px;
}

.p-works-single__code-heading {
	color: #008CA8;
	display: inline-block;
	font-family: "Sacramento", cursive;
	font-size: 48px;
	rotate: -14deg;
	transform-origin: left top;
	white-space: nowrap;
}

.p-works-single__code-visuals {
	display: flex;
	flex-direction: column;
	gap: clamp(3.125rem, 2.465rem + 2.82vw, 5rem);
}

.p-works-single__pagination {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	margin-block-start: clamp(3.125rem, 2.025rem + 4.69vw, 6.25rem);
}

.p-works-single__pagination-wrapper {
	align-items: center;
  display: flex;
  position: relative;
  width: 100%;
	max-width: 600px;
	margin-inline: auto;
  /* 最初と最後、両方ある時すべてに対応するために space-between を推奨 */
  justify-content: space-between;
}

/* --- 最初・最後の時の例外処理 --- */

/* 片方しかない時は仕切り線を消す */
.p-works-single__pagination-wrapper.is-first::before,
.p-works-single__pagination-wrapper.is-last::before {
  display: none;
}

/* 最初の記事（PREVなし）の時はNEXTを右に寄せる */
.p-works-single__pagination-wrapper.is-first {
  justify-content: flex-end;
}

/* 最後の記事（NEXTなし）の時はPREVを左に寄せる */
.p-works-single__pagination-wrapper.is-last {
  justify-content: flex-start;
}

/* 片方の時の幅の調整（50%だと寄りきらないため） */
.p-works-single__pagination-wrapper.is-first .p-works-single__pagination-link,
.p-works-single__pagination-wrapper.is-last .p-works-single__pagination-link {
  flex: none;
}

.p-works-single__pagination-wrapper::before {
	background-color: #999999;
  content: "";
  height: 10px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
}


.p-works-single__pagination-link {
	align-items: center;
	color: #999999;
	display: flex;
	flex: 1 1 50%;
	font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
	gap: 10px;
	justify-content: flex-end;
	line-height: 1;
	transition: color 0.3s;
}

.p-works-single__pagination-link--prev:hover,
.p-works-single__pagination-link--next:hover {
	color: #008CA8;
}

.p-works-single__pagination-link--prev:hover .p-works-single__pagination-arrow--left::before,
.p-works-single__pagination-link--next:hover .p-works-single__pagination-arrow--left::before {
	translate: -10px;
}

.p-works-single__pagination-link--prev:hover .p-works-single__pagination-arrow--right::before,
.p-works-single__pagination-link--next:hover .p-works-single__pagination-arrow--right::before {
	translate: 10px;
}

.p-works-single__pagination-link--prev {
	padding-inline-end: 15px;
}

.p-works-single__pagination-link--next {
	flex-direction: row-reverse;
	padding-inline-start: 15px;
}

.p-works-single__pagination-arrow {
	padding-inline-start: 20px;
	position: relative;
}

.p-works-single__pagination-arrow::before {
	font-size: 16px;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.p-works-single__pagination-arrow--left::before {
	content: "←";
	left: 0;
	transition: translate 0.3s;
}

.p-works-single__pagination-arrow--right {
	padding-inline-end: 20px;
	padding-inline-start: 0;
}

.p-works-single__pagination-arrow--right::before {
	content: "→";
	right: 0;
	transition: translate 0.3s;
}

.p-works-single__pagination-title {
	font-style: normal;
	font-weight: 400;
	letter-spacing: 2px;
}

.p-works-single__pagination-main {
	align-items: center;
	display: flex;
	gap: 20px;
}

.p-works-single__pagination-main:hover .p-works-single__pagination-text {
	color: #008CA8;
}

.p-works-single__pagination-icon {
	aspect-ratio: 1;
	background-color: #FFFFFF;
	border: 1px solid #008CA8;
	border-radius: 50%;
	height: auto;
	position: relative;
	width: 30px;
}

.p-works-single__pagination-icon::before {
	background: url(../img/svg/link-icon__left-blue.svg) no-repeat center/contain;
	content: "";
	height: 14px;
	left: 50%;
	position: absolute;
	top: calc(50% - 1px);
	transform: translate(-50%, -50%);
	width: 20px;
	z-index: 1;
}

.p-works-single__pagination-text {
	color: #999999;
	font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
	letter-spacing: 2.4px;
	transition: color 0.3s;
}

.p-works-single__pagination-wrapper.is-first::before,
.p-works-single__pagination-wrapper.is-last::before {
  display: none;
}

.p-works-single__pagination-wrapper.is-first {
  justify-content: flex-end; /* PREVがないのでNEXTを右に寄せる */
}

.p-works-single__pagination-wrapper.is-last {
  justify-content: flex-start; /* NEXTがないのでPREVを左に寄せる */
}

/* skills:枠 */

.p-skills__inner {
	position: relative;
}

/* skills__card:枠 */

.p-skills__cards {
	display: flex;
	flex-direction: column;
	gap: clamp(3.75rem, 1.769rem + 8.45vw, 9.375rem);
	margin-block-start: clamp(3.75rem, 2.43rem + 5.63vw, 7.5rem);
}

/* skills__card:内容 */

.p-skills__card {
	border: 1px solid #000;
	margin-inline: auto;
	padding: 30px;
	position: relative;
	width: min(90%, 700px);
}

.p-skills__card:nth-of-type(2) .p-skills__card-title::before {
	width: clamp(11.25rem, 9.71rem + 6.57vw, 15.625rem);
}

.p-skills__card-number {
	color: #008CA8;
	font-family: "Sacramento", cursive;
	font-size: clamp(3rem, 1.944rem + 4.51vw, 6rem);
	left: 0;
	line-height: 1;
	position: absolute;
	rotate: -20deg;
	top: 0;
	translate: -45% -45%;
}

.p-skills__card-top {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.p-skills__card-title {
	font-size: clamp(1.25rem, 0.898rem + 1.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	padding-block-end: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
	position: relative;
}

.p-skills__card-title::before {
	background: url(../img/svg/bg/bg-wave.svg) no-repeat center/contain;
	bottom: 0;
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	width: clamp(9.375rem, 8.275rem + 4.69vw, 12.5rem);
}

.p-skills__card-img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	margin-inline: auto;
	max-width: 400px;
	object-fit: cover;
}

.p-skills__card-bg {
	display: inline-block;
}

.p-skills__card-body {
	margin-block-start: 30px;
	margin-inline: auto;
	width: min(420px, 100%);
}

.p-skills__card-text {
	font-size: clamp(0.875rem, 0.743rem + 0.56vw, 1.25rem);
	font-weight: 700;
	line-height: 1.5;
}

.p-blog-top__wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-blog-top__body {
	margin-inline: auto;
	width: min(600px, 100%);
}

.p-blog-top__body-title {
	color: #DC143C;
	font-family: "Sacramento", cursive;
	font-size: clamp(3rem, 1.944rem + 4.51vw, 6rem);
	line-height: 1;
}

.p-blog-top__linkWrap {
	margin-block-start: 80px;
}

.p-blog-top__card {
	align-items: flex-start;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	display: flex;
	gap: 20px;
	padding: 20px;
}

.p-blog-top__card:hover .p-blog-top__card-img {
	scale: 1.1;
}

.p-blog-top__card:hover .p-blog-top__card-body-title,
.p-blog-top__card:hover .p-blog-top__card-body-text {
	color: #008CA8;
}

.p-blog-top__card-head {
	display: flex;
	flex: 1 1 40%;
	flex-direction: column;
	gap: clamp(0.375rem, 0.177rem + 0.85vw, 0.938rem);
}

.p-blog-top__card-imgWrap {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

.p-blog-top__card-img {
	transition: scale 0.3s;
}

.p-blog-top__card-tags {
	align-items: flex-end;
	display: flex;
	gap: 10px;
}

.p-blog-top__card-body {
	display: flex;
	flex: 1 1 60%;
	flex-direction: column;
	font-weight: 700;
	gap: 20px;
}

.p-blog-top__card-body-title {
	display: -webkit-box;
	font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
	overflow: hidden;
	transition: color 0.3s;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.p-blog-top__card-body-text {
	display: -webkit-box;
	font-size: clamp(0.875rem, 0.743rem + 0.56vw, 1.25rem);
	overflow: hidden;
	transition: color 0.3s;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.p-blog-archive__head {
	display: flex;
	flex-direction: column;
	gap: clamp(1.875rem, 1.215rem + 2.82vw, 3.75rem);
}

.p-blog-archive__wrapper {
	margin-block-start: clamp(3.75rem, 2.43rem + 5.63vw, 7.5rem);
}

.p-blog-archive__subTitle {
	color: #DC143C;
	font-family: "Sacramento", cursive;
	font-size: clamp(3rem, 1.944rem + 4.51vw, 6rem);
	line-height: 1;
}

.p-blog-archive__cards {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 30px;
}

.p-blog-archive__card {
	border: 1px solid #DDDDDD;
	display: grid;
	font-weight: 700;
	gap: 12px;
	grid-row: span 4;
	grid-template-rows: subgrid;
	margin-inline: auto;
	padding: 30px 20px;
	width: min(500px, 100%);
}

.p-blog-archive__card:hover .p-blog-archive__card-img {
	scale: 1.06;
}

.p-blog-archive__card:hover .p-blog-archive__card-title,
.p-blog-archive__card:hover .p-blog-archive__card-text {
	color: #008CA8;
}

.p-blog-archive__card-title {
	display: -webkit-box;
	font-size: clamp(1rem, 0.167rem + 1.48vw, 1.5rem);
	margin-block-end: clamp(0.625rem, 0.405rem + 0.94vw, 1.25rem);
	overflow: hidden;
	text-align: center;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	transition: color 0.3s;
}

.p-blog-archive__card-imgWrap {
	aspect-ratio: 380/300;
	height: auto;
	margin-inline: auto;
	overflow: hidden;
	width: min(380px, 100%);
}

.p-blog-archive__card-img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: scale 0.3s;
}

.p-blog-archive__card-tags {
	align-items: center;
	display: flex;
	gap: 12px;
	line-height: 1;
}

.p-blog-archive__card-text {
	display: -webkit-box;
	font-size: clamp(0.875rem, 0.458rem + 0.74vw, 1.125rem);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color 0.3s;
}

.p-blog-single__article-contents {
	flex: 1;
}

.p-blog-single__article-contents .p-blog-single__time {
	color: #008CA8;
	font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
	font-weight: 700;
	margin-block-end: 20px;
}

.p-blog-single__article-contents .p-blog-single__title {
	font-size: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
	font-weight: 700;
	margin-block-end: 30px;
}

.p-blog-single__article-contents .p-blog-single__icatch {
	height: auto;
	margin-block-end: 30px;
	width: 100%;
}

.p-blog-single__article-contents img {
	height: 100%;
	width: 100%;
}

.p-blog-single__article-contents h2 {
	background: #6BC3D4;
	font-size: clamp(1.125rem, 0.905rem + 0.94vw, 1.75rem);
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	padding: 7px 9px;
}

.p-blog-single__article-contents h3 {
	color: #008CA8;
	font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	padding-block: 4px;
	padding-inline: 16px;
	position: relative;
}

.p-blog-single__article-contents h3::after {
	background-color: #008CA8;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 4px;
}

.p-blog-single__article-contents h4 {
	color: #FFFFFF;
	font-size: clamp(0.875rem, 0.743rem + 0.56vw, 1.25rem);
	font-weight: 700;
	line-height: 2;
}

.p-blog-single__article-contents p {
	font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
	line-height: 1.8;
}

.p-blog-single__article-contents a {
	color: #008CA8;
	font-weight: 700;
	text-decoration: underline;
	transition: opacity 0.3s ease;
}

.p-blog-single__article-contents a .p-blog-single__image {
	height: auto;
	width: 100%;
}

.p-blog-single__article-contents ul,
.p-blog-single__article-contents ol {
	padding-inline-start: 40px;
}

.p-blog-single__article-contents li {
	font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
	line-height: 1.8;
}

.p-blog-single__article-contents table {
	display: block;
	overflow-x: scroll;
	width: 100%;
}

.p-blog-single__article-contents table tbody {
	display: block;
	margin-inline: auto;
	max-width: 800px;
}

.p-blog-single__article-contents table tr {
	border-top: 1px solid #008CA8;
	display: flex;
	justify-content: space-between;
}

.p-blog-single__article-contents table tr:last-of-type {
	border-bottom: 1px solid #008CA8;
}

.p-blog-single__article-contents table th {
	background: rgba(0, 140, 168, 0.07);
	flex: 1px;
	font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
	font-weight: 700;
	line-height: 1.5;
	padding-block: 14px;
}

.p-blog-single__article-contents table td {
	align-self: center;
	flex: 1;
	line-height: 1.5;
	padding-block: 16px;
	text-align: center;
}

.p-blog-single__article-contents b,
.p-blog-single__article-contents strong {
	text-decoration: underline;
	text-decoration-color: rgba(0, 140, 168, 0.7);
	text-decoration-thickness: 0.5em;
	text-underline-offset: -0.2em;
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
}

.p-blog-single__article-contents ul li {
	list-style: none;
	position: relative;
}

.p-blog-single__article-contents ul li::before {
	aspect-ratio: 1;
	background: url(../img/blog/check-icon.svg) no-repeat center center/cover;
	content: "";
	height: auto;
	left: -1.5em;
	position: absolute;
	top: -6px;
	translate: 0 50%;
	width: 16px;
}

.p-blog-single__article-contents ol {
	counter-reset: li;
}

.p-blog-single__article-contents ol li {
	list-style: none;
	position: relative;
}

.p-blog-single__article-contents ol li::before {
	color: #008CA8;
	content: "";
	content: counter(li) ".";
	counter-increment: li;
	font-weight: bold;
	left: -1.5em;
	position: absolute;
	top: 0;
}

.p-blog-single__article-contents span {
	background-color: #008CA8;
	padding: 4px 10px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
}

.p-blog-single__article-contents h2 {
	margin-block-end: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
}

.p-blog-single__article-contents h3,
.p-blog-single__article-contents h4 {
	margin-block-end: clamp(0.625rem, 0.405rem + 0.94vw, 1.25rem);
}

.p-blog-single__article-contents p + p {
	margin-block-start: clamp(0.625rem, 0.405rem + 0.94vw, 1.25rem);
}

.p-blog-single__article-contents figure {
	margin-block: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
}

.p-blog-single__article-contents table {
	margin-block: clamp(1.75rem, 1.134rem + 2.63vw, 3.5rem);
}

.p-blog-single__article-contents p + ul,
.p-blog-single__article-contents p + ol,
.p-blog-single__article-contents ul + p,
.p-blog-single__article-contents ol + p,
.p-blog-single__article-contents ul + ol,
.p-blog-single__article-contents ol + ul {
	margin-block-start: 20px;
}

.p-blog-single__article-contents p + h2,
.p-blog-single__article-contents ul + h2,
.p-blog-single__article-contents ol + h2,
.p-blog-single__article-contents figure + h2,
.p-blog-single__article-contents table + h2 {
	margin-block-start: clamp(2.5rem, 1.62rem + 3.76vw, 5rem);
}

.p-blog-single__article-contents p + h3,
.p-blog-single__article-contents ul + h3,
.p-blog-single__article-contents ol + h3,
.p-blog-single__article-contents figure + h3,
.p-blog-single__article-contents table + h3 {
	margin-block-start: clamp(1.75rem, 1.134rem + 2.63vw, 3.5rem);
}

.p-blog-single__article-contents p + h4,
.p-blog-single__article-contents ul + h4,
.p-blog-single__article-contents ol + h4,
.p-blog-single__article-contents figure + h4,
.p-blog-single__article-contents table + h4 {
	margin-block-start: 24px;
}

.p-blog-single__article-contents table + table {
	margin-block-start: clamp(1.75rem, 1.134rem + 2.63vw, 3.5rem);
}

#toc {
	padding: 50px;
	width: 300px;
}

#toc .p-blog-single__toc-title {
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 36px;
	text-align: center;
}

#toc li.js-active > a {
	color: #008CA8;
	text-decoration: underline;
}

#toc .list_2 {
	counter-reset: li;
}

#toc .list_2 li:has(ol) {
	list-style: none;
	position: relative;
}

#toc .list_2 li:has(ol)::before {
	content: "";
	content: counter(li) ".";
	counter-increment: li;
	font-weight: bold;
	left: -1.5em;
	position: absolute;
	top: 0.4em;
}

#toc .list_2 li:has(ol) + li {
	margin-top: 16px;
}

#toc .list_2 a {
	display: inline-block;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px;
	padding-block: 4px;
	text-decoration: none;
}

#toc .list_3 {
	list-style: none;
}

#toc .list_3 a {
	font-weight: 500;
}

.p-blog-single__linkWrap {
	margin-block-start: clamp(3.75rem, 2.87rem + 3.76vw, 6.25rem);
}

.p-contact__top {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.p-contact__text {
	line-height: 2;
	text-align: center;
}

.p-contact__body {
	margin-block-start: 50px;
}

.p-contact__wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-inline: auto;
	width: min(500px, 100%);
}

input[type=text],
input[type=email],
input[type=tel],
select,
textarea {
	background-color: #DDDDDD;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 12px 24px;
	transition: border-color 0.3s;
	width: 100%;
}

input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
	color: #999999;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
select::placeholder,
textarea::placeholder {
	color: #999999;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus {
	border-color: #008CA8;
	outline: none;
}

input[type=text]:focus-visible,
input[type=email]:focus-visible,
input[type=tel]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: #008CA8;
	outline: none;
}

textarea {
	height: 200px;
	resize: vertical;
}

input[type=submit],
input[type=button] {
	border-radius: 0px;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	background: transparent;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
	display: none;
}

.row.jc-center {
	justify-content: center;
}

.p-contact__submit {
	margin-block-start: 30px;
	text-align: center;
}

.p-contact__submit input[type=submit] {
	background-color: #FFFFFF;
	background-image: linear-gradient(45deg, #008CA8 0%, #008CA8 50%, #FFFFFF 50%, #FFFFFF 100%);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	border: 2px solid #008CA8;
	border-radius: 10px;
	color: #008CA8;
	display: inline-block;
	font-weight: 700;
	margin-inline: auto;
	overflow: hidden;
	padding-block: 20px;
	position: relative;
	position: relative;
	transition: background-position 0.3s ease, border-color 0.3s ease;
	width: min(250px, 100%);
	z-index: 2;
}

.p-contact__submit:hover input[type=submit] {
	background-position: 0 100%;
	color: #FFFFFF;
}

.p-contact__row {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 10px;
}

.p-contact__head span {
	font-size: clamp(1rem, 0.912rem + 0.38vw, 1.25rem);
	font-weight: 700;
}

.p-contact__head span.--must {
	display: inline-block;
	position: relative;
}

.p-contact__head span.--must::after {
	background-color: #008CA8;
	color: #FFFFFF;
	content: "必須";
	display: inline-block;
	font-size: 12px;
	left: calc(100% + 14px);
	padding: 1px 7px;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	white-space: nowrap;
}

.p-contact-thanks {
	margin-block-end: clamp(3.125rem, -0.176rem + 14.08vw, 12.5rem);
}

.p-contact-thanks__text {
	font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
	text-align: center;
}

.p-contact-thanks__linkWrap {
	margin-block-start: clamp(3.75rem, 2.87rem + 3.76vw, 6.25rem);
}

.p-footer__icons {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: center;
}

.p-footer__link {
	aspect-ratio: 1;
	display: inline-block;
	height: auto;
	transition: opacity 0.3s;
}

.p-footer__link:hover {
	opacity: 0.7;
}

.p-footer__link--wantedly {
	width: 60px;
}

.p-footer__link--x {
	width: 40px;
}

.p-footer__icon {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-footer__nav-list {
	align-items: center;
	display: flex;
	justify-content: center;
}

.p-footer__nav-link {
	color: #FFFFFF;
	padding: 10px 20px;
	transition: opacity 0.3s;
}

.p-footer__nav-link:hover {
	opacity: 0.7;
}

/*
utility内の各ファイルを管理するscss
*/

/* --------------------------
  要素を消すスタイル
-------------------------- */

.u-hidden {
	display: none;
}

/* --------------------------
  要素を表示させるクラス
-------------------------- */

.u-display--sm {
	display: none;
}

.u-display--md {
	display: none;
}

.u-display--lg {
	display: none;
}

.u-display--xl {
	display: none;
}

.u-fade-in {
	opacity: 0;
	transition: opacity 0.5s ease, translate 0.5s ease;
	transition-delay: var(--delay, 0s);
	translate: var(--x, 0) var(--y, 0);
}

.u-fade-in.is-in-view {
	opacity: 1;
	translate: 0 0;
}

/* modifier（方向だけ） */

.u-fade-in--up {
	--y: 24px;
}

.u-fade-in--right {
	--x: 50px;
}

.u-fade-in--left {
	--x: -50px;
}

.u-delay--0 {
	--delay: 0s;
}

.u-delay--300 {
	--delay: .3s;
}

.u-delay--500 {
	--delay: .5s;
}

.u-delay--700 {
	--delay: .7s;
}

.u-delay--1000 {
	--delay: 1s;
}

.u-animated__fadeIn {
	opacity: 0;
	transition: opacity 0.2s, translate 0.2s;
	translate: 0 40px;
}

.u-animated__fadeIn.js-show {
	opacity: 1;
	translate: 0 0;
}

.u-animated__fadeIn--post {
	transition: opacity 0.05s, translate 0.05s;
}

@media (any-hover: hover) {

.p-blog-single__article-contents a:hover {
	opacity: 0.7;
}

}

@media screen and (min-width: 600px) {

.p-about-roots__card-top {
	gap: 30px;
}

.p-about-roots__card-body {
	margin-inline-start: 70px;
}

.p-works-single__detail-list {
	grid-template-columns: repeat(2, 1fr);
	-moz-column-gap: 20px;
	column-gap: 20px;
}

.u-hidden--sm {
	display: none;
}

.u-display--sm {
	display: block;
}

}

@media screen and (min-width: 768px) {

.l-header__bg {
	height: 55.5555555556vw;
	max-height: 700px;
}

.l-header__bg img {
	-o-object-position: center 25%;
	object-position: center 25%;
}

.p-about-roots__card-top {
	gap: 40px;
}

.p-about-roots__card-body {
	margin-inline-start: 80px;
}

.p-works-archive {
	padding-block-end: clamp(9.375rem, -8.482rem + 37.2vw, 25rem);
}

.p-works-archive__cards {
	grid-template-columns: repeat(2, 1fr);
	-moz-column-gap: 30px;
	column-gap: 30px;
}

.p-works-single__detail-list {
	row-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
}

.p-works-single__point-card:nth-of-type(even) .p-works-single__point-wrapper {
	flex-direction: row-reverse;
}

.p-works-single__point-wrapper {
	align-items: flex-start;
	flex-direction: row;
}

.p-blog-top__wrapper {
	align-items: flex-start;
	flex-direction: row;
	gap: 20px;
}

.p-blog-top__head {
	flex: 1 1 40%;
}

.p-blog-top__body {
	flex: 1 1 60%;
	margin-inline: 0;
	width: min(700px, 100%);
}

.p-blog-archive__cards {
	grid-template-columns: repeat(2, 1fr);
	-moz-column-gap: 30px;
	column-gap: 30px;
}

.u-hidden--md {
	display: none;
}

.u-display--md {
	display: block;
}

}

@media screen and (min-width: 900px) {

.l-inner {
	margin-inline: auto;
	padding-inline: 30px;
	width: min(1260px, 100%);
}

.l-wrapper {
	margin-block-end: 0;
}

.l-header__wrapper {
	left: 50%;
	padding-inline: 30px;
	transform: translateX(-50%);
	width: min(1860px, 100%);
}

.l-header-lower {
	max-height: 450px;
}

.l-header-lower__inner {
	left: 50%;
	padding-inline: 30px;
	transform: translateX(-50%);
	width: min(1860px, 100%);
}

.l-footer {
	margin-block-start: 80px;
	padding-block: 20px;
}

.c-link {
	max-width: 300px;
}

.c-link.u-display--lg {
	display: flex;
}

.c-link__icon {
	width: 50px;
}

.c-link__icon::before,
.c-link__icon::after {
	width: 36px;
}

.c-nav--header .c-nav__text {
	font-size: 20px;
}

.c-section-heading__main {
	font-size: 32px;
}

.c-section-heading__sub {
	font-size: 64px;
	top: -45px;
}

.c-about__role {
	font-size: 14px;
	padding: 7px 15px;
}

.c-tag {
	padding-inline: 12px;
}

.c-background-map--skills {
	right: 30px;
	top: -200px;
}

.c-background-map--footer {
	bottom: 100px;
	left: 30px;
}

.c-background-map--lower {
	right: 40px;
	top: calc(100% + 10px);
}

.c-breadcrumb__item {
	font-size: 16px;
}

.p-header__bg-img--map {
	aspect-ratio: 450/430;
	bottom: 20px;
	max-width: 450px;
	right: 35px;
	width: 31.25%;
}

.p-header__bg-img--sunset {
	aspect-ratio: 213/323;
	bottom: 50px;
	max-width: 213px;
	right: 10px;
	width: 14.7916666667%;
}

.p-header__bg-img--profile {
	aspect-ratio: 203/313;
	bottom: 50px;
	max-width: 203px;
	right: 15px;
	width: 14.0972222222%;
}

.p-about__wrapper {
	flex-direction: row;
	gap: 0;
	justify-content: space-between;
}

.p-about__imgWrap {
	flex: 0 0 calc(40% - 30px);
	margin-inline: 0;
}

.p-about__contents {
	flex: 0 0 calc(60% - 30px);
	margin-inline: 0;
}

.p-about-top__wrapper {
	flex-direction: row;
}

.p-about-top__head {
	display: flex;
	flex: 1 1 35.7142857143%;
	flex-direction: column;
}

.p-about-top__linkWrap {
	margin-top: clamp(3.75rem, -0.417rem + 7.41vw, 6.25rem);
}

.p-about-top__body {
	align-items: flex-start;
	flex: 1 1 64.2857142857%;
	flex-direction: row;
}

.p-about-top__imgWrap {
	flex: 0 0 250px;
}

.p-about-top__contents {
	flex: 1 1 auto;
}

.p-about-roots__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.p-about-roots__cards {
	gap: 80px;
}

.p-about-roots__card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-inline: 0;
	width: 100%;
}

.p-about-roots__card:not(:last-child)::after {
	left: 26px;
	top: 70px;
}

.p-about-roots__card-top {
	flex: 1 1 30%;
}

.p-about-roots__card-number {
	width: 50px;
}

.p-about-roots__card-number::before {
	left: calc(50% - 2px);
	top: calc(50% - 2px);
}

.p-about-roots__card-body {
	flex: 1 1 70%;
	flex-direction: row;
	gap: 50px;
	justify-content: space-between;
}

.p-about-roots__texts {
	flex: 1 1 60%;
	line-height: 2;
}

.p-about-roots__img {
	flex: 1 1 40%;
}

.p-about-strength__card {
	align-items: center;
	display: flex;
	gap: 60px;
}

.p-about-strength__card:nth-of-type(1) .p-about-strength__card-contents::before {
	bottom: -40px;
	right: -20px;
}

.p-about-strength__card:nth-of-type(even) {
	flex-direction: row-reverse;
}

.p-about-strength__card-contents {
	flex: 1 1 80%;
	gap: 30px;
}

.p-about-strength__card-contents::before {
	right: -20px;
}

.p-about-strength__card-number {
	flex: 1 1 20%;
	width: 100%;
}

.p-about-strength__card-texts {
	line-height: 2;
}

.p-works-top__wrapper {
	margin-block-start: clamp(1.875rem, -0.208rem + 3.7vw, 3.125rem);
}

.p-works-top__swiper {
	padding-bottom: 80px;
}

.swiper-button-prev::before,
.swiper-button-prev::after,
.swiper-button-next::before,
.swiper-button-next::after {
	height: 18px;
	width: 40px;
}

.swiper-button-prev,
.swiper-button-next {
	width: 60px;
}

.p-works-single {
	margin-block-end: clamp(6.25rem, -4.167rem + 18.52vw, 12.5rem);
}

.p-works-single__detail {
	margin-inline: 0;
	width: 100%;
}

.p-works-single__detail-imgWrap {
	width: min(850px, 100%);
}

.p-works-single__detail-title {
	font-size: 60px;
	top: -45px;
}

.p-works-single__point-heading {
	font-size: 60px;
	top: -45px;
}

.p-works-single__point-wrapper {
	gap: clamp(1.875rem, -0.208rem + 3.7vw, 3.125rem);
}

.p-works-single__point-visualWrap {
	flex: 1 1 50%;
}

.p-works-single__point-contents {
	flex: 1 1 50%;
	padding: 20px;
}

.p-works-single__code-heading {
	font-size: 60px;
	top: -45px;
}

.p-works-single__pagination {
	gap: 15px;
}

.p-skills__card {
	height: 450px;
	padding-inline: 60px;
	width: min(90%, 800px);
}

.p-skills__card:nth-of-type(2) .p-skills__card-img {
	aspect-ratio: 326/150;
	height: auto;
	max-width: 326px;
	width: 326px;
}

.p-skills__card:nth-of-type(2) .p-skills__card-body {
	margin-block-start: 120px;
}

.p-skills__card-top {
	align-items: flex-start;
	flex-direction: row;
	justify-content: space-between;
}

.p-skills__card-topWrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-block-start: 40px;
}

.p-skills__card-img {
	aspect-ratio: 4/3;
	height: auto;
	margin-inline: 0;
	max-width: 246px;
}

.p-skills__card-bg {
	aspect-ratio: 420/98;
	height: auto;
	max-width: 420px;
	width: 100%;
}

.p-skills__card-body {
	margin-block-start: 50px;
	margin-inline: 0;
	width: 100%;
}

.p-skills__card-text {
	width: 87.5%;
}

.p-blog-top__wrapper {
	gap: 50px;
}

.p-blog-top__linkWrap {
	margin-block-start: clamp(3.75rem, -0.417rem + 7.41vw, 6.25rem);
}

.p-blog-top__card {
	gap: 30px;
	padding: 30px;
}

.p-blog-top__card-tags {
	gap: 20px;
}

.p-blog-top__card-body {
	gap: 30px;
}

.p-blog-archive {
	padding-block-end: clamp(18.75rem, 8.333rem + 18.52vw, 25rem);
}

.p-blog-archive__card-tags {
	gap: 20px;
}

.p-blog-single {
	margin-block-end: clamp(5rem, 1.259rem + 15.96vw, 15.625rem);
}

.p-blog-single__article-contents {
	padding-inline: 30px;
}

.p-blog-single__article-contents h2 {
	padding: 17px 19px;
}

.p-blog-single__article-contents h3 {
	padding-block: 7px;
	padding-inline: 24px;
}

.p-blog-single__article-contents h3::after {
	width: 6px;
}

.p-contact__top {
	gap: 80px;
}

.p-contact__body {
	margin-block-start: 100px;
}

.p-contact__wrapper {
	width: 800px;
}

.p-contact__submit {
	margin-block-start: 50px;
}

.p-contact__row {
	align-items: center;
	grid-template-columns: 250px auto;
}

.p-contact__head span.--must::after {
	padding: 3px 10px;
}

.u-hidden--lg {
	display: none;
}

.u-display--lg {
	display: block;
}

}

@media screen and (min-width: 1160px) {

.l-header-lower__nav {
	right: 30px;
}

.c-section-heading__main {
	font-size: 36px;
}

.c-section-heading__sub {
	font-size: 80px;
	top: -55px;
}

.c-about__name::before {
	left: calc(50% + 110px);
}

.p-header__bg-img--map {
	bottom: 25px;
	right: 45px;
}

.p-about__imgWrap {
	flex: 0 0 calc(40% - 50px);
}

.p-about__contents {
	flex: 0 0 calc(60% - 50px);
}

.p-about-top__wrapper {
	gap: 50px;
}

.p-about-top__head {
	flex: 1 1 33.3333333333%;
}

.p-about-top__body {
	flex: 1 1 66.6666666667%;
	gap: 40px;
}

.p-about-top__imgWrap {
	flex: 0 0 310px;
}

.p-about-roots__cards {
	gap: 100px;
}

.p-about-roots__card-body {
	gap: 100px;
}

.p-about-strength__card {
	gap: 100px;
}

.p-works-top__swiper .swiper-slide-active {
	translate: 0 50px;
}

.p-works-archive__cards {
	grid-template-columns: repeat(3, 1fr);
	-moz-column-gap: 50px;
	column-gap: 50px;
	place-items: stretch;
	row-gap: 80px;
}

.p-works-archive__card:nth-of-type(3n + 2) {
	transform: translateY(60px);
}

.p-works-archive__card:nth-of-type(3n + 3) {
	transform: translateY(120px);
}

.p-works-single__detail-title {
	font-size: 70px;
	top: -55px;
}

.p-works-single__detail-list {
	grid-template-columns: repeat(3, 1fr);
}

.p-works-single__point-heading {
	font-size: 70px;
	top: -55px;
}

.p-works-single__code-heading {
	font-size: 70px;
	top: -55px;
}

.p-blog-top__head {
	flex: 1 1 35%;
}

.p-blog-top__body {
	flex: 1 1 65%;
}

.p-blog-archive__cards {
	grid-template-columns: repeat(3, 1fr);
	-moz-column-gap: 50px;
	column-gap: 50px;
	row-gap: 50px;
}

.u-hidden--xl {
	display: none;
}

.u-display--xl {
	display: block;
}

}

@media screen and (min-width: 1370px) {

.c-section-heading__main {
	font-size: 40px;
}

.c-section-heading__sub {
	font-size: 96px;
	top: -65px;
}

.p-about__imgWrap {
	flex: 0 0 calc(40% - 80px);
}

.p-about__contents {
	flex: 0 0 calc(60% - 80px);
}

.p-works-single__detail-title {
	font-size: 80px;
	top: -65px;
}

.p-works-single__point-heading {
	font-size: 80px;
	top: -65px;
}

.p-works-single__code-heading {
	font-size: 80px;
	top: -65px;
}

.p-skills__card:nth-of-type(1) {
	margin-inline: 0 auto;
}

.p-skills__card:nth-of-type(2) {
	margin-inline: auto;
}

.p-skills__card:nth-of-type(3) {
	margin-inline: auto 0;
}

}

@keyframes slideUp {

0% {
	transform: translateY(100%);
}

100% {
	transform: translateY(0);
}

}

@keyframes water-anime {

50%,70% {
	background-size: 100% 100%;
}

}

/* 1. リスト全体の基本設定 */
.c-breadcrumb__list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
}

/* 2. リンク（Homeなど）の設定 */
.c-breadcrumb__list a {
  display: inline-block;
  color: #000 !important; /* 通常時は黒 */
  text-decoration: none !important;
  transition: color 0.3s;
  cursor: pointer !important; /* 指マークを強制 */
  position: relative;
  z-index: 10; /* クリックしやすくする */
}

/* 3. リンクにホバーした時だけ青くする */
.c-breadcrumb__list a:hover {
  color: #008CA8 !important;
}

/* 4. 現在地（制作実績など）の色を固定 */
/* pointer-events: none は削除しました */
.c-breadcrumb__list span:not(.c-breadcrumb__separator) {
  display: inline-block;
  color: #000 !important; 
  line-height: 1;
}

/* 5. 区切り文字の設定 */
.c-breadcrumb__separator {
  margin: 0 8px !important;
  font-size: 14px;
  color: #000 !important;
  display: inline-block;
}

/* 6. 不要な擬似要素の完全削除 */
.c-breadcrumb__item::after,
.c-breadcrumb__item::before,
.c-breadcrumb__list span::after,
.c-breadcrumb__list span::before {
  content: none !important;
  display: none !important;
}

.wpcf7-response-output {
	display: none;
}
.wpcf7-spinner {
	display: none;
}