@charset "UTF-8";


/* reset ---------------------------------------*/

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
	margin: 0;
	padding: 0;
}

table {
	width: 100%;
	font-size: inherit;
	word-break: break-all;
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img {
	border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

li {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
}

q::before, q::after {
	content: '';
}

abbr {
	border: 0;
	font-variant: normal;
}

sup {
	vertical-align: text-top;
}

sub {
	vertical-align: text-bottom;
}

input, textarea, select {
	font-weight: inherit;
	font-size: inherit;
	font-family: inherit;
}

legend {
	color: #000;
}

select, input, button, textarea {
	box-sizing: border-box;
	font-size: inherit;
	font-family: inherit;
}

pre, code, kbd, samp {
	line-height: 100%;
	font-family: monospace;
}


/* base ---------------------------------------*/

* {
	min-height: 0vw;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

html {
	/* ベースフォントサイズを10pxに(デフォルトの16pxの代わりに、1emが10pxになるように調整 (16px * 0.625 = 10px)) */
	font-size: 62.5%;
}

body {
	margin: 0;
	padding: 0;
	color: var(--text-color);
	/* overflow-x: hidden; */
	font-size: 1.6em;/* bodyのフォントサイズを16pxにする (em指定はchromeバグ対応) */
	line-height: 2;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

	-webkit-text-size-adjust: 100%;
	        font-feature-settings: 'palt'1;
	-webkit-font-feature-settings: 'palt'1;
}

.bodywrapper {
	position: relative;
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
	transition: .25s;
}

a:hover {
	opacity: .6;
}

img {
	max-width: 100%;
	height: auto;
	line-height: 1;
	vertical-align: bottom;
}

small {
	font-size: 1.2rem;
}

.font-figtree {font-family: "Figtree", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;}

.marker-orange-02 {
	padding-bottom: 9px;
	background-image: linear-gradient(90deg, #e29c3e, #e29c3e);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 5px;
}

.marker-white {
	padding-bottom: 9px;
	background-image: linear-gradient(90deg, #fff, #fff);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 5px;
}

.marker-orange-vertical {
	padding-right: 6px;
	background-image: linear-gradient(0deg, #e29c3e, #e29c3e);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 5px 100%;
}

.band-orange {
	background-image: linear-gradient(90deg, #e29c3e, #e29c3e);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	padding: 0 2px 2px;
}

/* color ---------------------------------------*/
:root {
	--text-color: #353535;
	--bg-color: #F9F9F9;
	--bg-color-02: #F2F2F2;
	--ac-color-gray: #787878;
	--ac-color-orange: #F2A154;
	--ac-color-orange-02: #eaa13c;
	--ac-color-green: #7FC8A9;
}

.bg-gray {
	background: var(--bg-color);
}

.bg-gray-mid {
	background: var(--bg-color-02);
}

.bg-white {
	background: #FFF;
}

.fc-orange {color: var(--ac-color-orange);}
.fc-orange-02 {color: var(--ac-color-orange-02);}
.fc-white {color: #FFF;}

/* layout ---------------------------------------*/

.inner {
	max-width: 1230px;/*コンテンツ幅1150px*/
	margin: 0 auto;
	padding: 0 40px;
}

/** table **/
#primary tbody {
	border-top: solid 1px #E6E6E6;
}

#primary table th, #primary table td {
	padding: .8em;

	border-bottom: solid 1px #E6E6E6;
}

#primary td, #primary th {
	vertical-align: top;
}

#primary th {
	background: #3D3D3D;
	color: #FFF;
}


/* header ---------------------------------------*/
.header {
	position: absolute;
	top: 0;
	z-index: 9999;
	width: 100%;
	background: rgba(255, 255, 255, .8);
}

.header-inner {
	position: relative;
	height: 70px;
}

.header-logo {
    z-index: 1000;
    position: relative;
    display: block;
}

.header-logo img {
	position: absolute;
	top: 26px;
	left: 23px;
	z-index: 999;
	width: 149px;
	height: 104px;
	transition: .25s;
}

.header-logo:hover {
	opacity: .6;
}

.header-logo-bg {
	position: absolute;
	top: -95px;
	left: -205px;
	z-index: 2;
	width: 523px;
}

.header-wrap {
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
	padding-top: 4px;
}

/* gnav ---------------------------------------*/

.gnav-list {
	font-size: 1.4rem;
}

.gnav-list > li {
	display: inline-block;
	font-weight: 500;
}

.gnav-list > li:nth-of-type(n+2) {
	margin-left: 70px;
}

.gnav-list > li a {
	display: block;
	transition: .25s;
}

.gnav-list > li > a:hover {
	color: var(--ac-color-orange);
	opacity: 1;
}

.has-child {
	position: relative;
	padding-right: 15px;
}

.has-child:after {
	display: block;
	position: absolute;
	top: 12px;
	right: -5px;
	width: 10px;
	height: 10px;
	background: url(../img/common/arrow-down.svg) no-repeat;
	background-size: contain;
	content: '';
}

.gnav-subchild {
	visibility: hidden;
	position: absolute;
	width: 100%;
	height: 20px;
}

.gnav-sublist {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 19px;
	left: 0;
	width: max-content;
	padding: 5px 20px;
	border-radius: 0 0 10px 10px;
	box-shadow: 2px 2px 20px rgba(51, 51, 51, .04);
	background: rgba(255, 255, 255, .8);
	transition: .25s;
}

.has-child:hover .gnav-subchild {
	visibility: visible;
}

.has-child:hover .gnav-sublist {
	visibility: visible;
	opacity: 1;
}

.gnav-sublist > li {
	margin-bottom: 8px;
}

.gnav-sublist > li:last-of-type {
	margin-bottom: 0;
}

.gnav-sublist > li > a {
	display: inline-block;
	position: relative;
	padding-left: 16px;
	line-height: 1.6;
}

.gnav-sublist > li > a:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '〉';
}

.gnav-sublist > li > a:hover {
	color: var(--ac-color-orange);
	opacity: 1;
}

#openmenu {
	display: none;
}


/* fixedheader ---------------------------------------*/
.fixedheader {
	position: fixed;
	top: 0;
	z-index: 9999;
	width: 100%;
	background: rgba(255, 255, 255, .8);
	transition: .3s;
	transform: translate3d(0, -100%, 0);
}

.fixedheader.is-fixed {
	transform: translate3d(0, 0, 0);
}

.fixedheader-inner {
	position: relative;
	height: 70px;
}

.fixedheader-logo {
    z-index: 1000;
    position: relative;
    display: block;
}

.fixedheader-logo img {
	position: absolute;
	top: 8px;
	left: 60px;
	z-index: 999;
	width: 80px;
	height: 56px;
	transition: .25s;
}

.fixedheader-logo:hover {
	opacity: .6;
}

.fixedheader-wrap {
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
	padding-top: 4px;
}


/* fixedlink ---------------------------------------*/
.fixedlink {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.fixedlink-list-item {
	position: absolute;
	width: 116px;
	height: 109px;
	border-radius: 8px 0 0 8px;
	box-shadow: 7px 1px 1px 0 rgb(255 255 255 / 100%), 1px 1px 1px 0 rgb(93 93 93 / 37%) inset, 2px 2px 1px 0 rgba(255,255,255,.37), 2px 2px 0 4px rgba(255,255,255,.37) inset;
	background: rgba(249, 249, 249, .9);
}

.fixedlink-list-item a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.fixedlink-list-item:first-of-type {
	right: 0;
	bottom: 155px;
}

.fixedlink-list-item:nth-of-type(2) {
	right: 0;
	bottom: 35px;
}

.fixedlink-list-img img {
	display: block;
	width: auto;
	height: 46px;
	margin: 5px auto 0;
}

.fixedlink-list-text {
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: .15em;
	text-align: center;
}

/* indexbgvideo ---------------------------------------*/
.indexbgvideo {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.indexbgvideo video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* indexkv ---------------------------------------*/
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	background-color: #fff;
	z-index: 10000;
	display: none;
}

#loading-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fade-out {
	animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

.indexkv {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 100vh;
	aspect-ratio: 1480 / 880;
}

.indexkv::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 1800px;
	background: #f9f9f9;
	content: '';
}

.indexkv-image {
	width: 100%;
	background: url(../img/index/kv_2026.webp) no-repeat;
	background-size: cover;
	background-position: top center;
	aspect-ratio: 1440 / 1390;
}

.indexkv-title {
	position: absolute;
	z-index: 2;
	top: 60%;
	/* transform はローディング後の演出で使うので、位置の微調整は margin で行う */
	margin-top: -160px;
	margin-left: 30px;
	left: 8.5%;
	transform: translateY(-50%);
	width: 29vw;
}

.indexkv-title img {
	width: 100%;
}

.kvlink-side {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 70px;
	right: 0;
	z-index: 2;
	width: 33px;
	height: 70vh;
	background: linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,0));
}

.kvlink-side-fb {
	position: relative;
	transform: rotate(90deg);
	padding: 45px 10px;
	color: #00417E;
	font-weight: 700;
	font-size: 1.0rem;
	letter-spacing: .2em;
}

.kvlink-side-fb::before {
	position: absolute;
	top: 47px;
	left: -10px;
	transform: rotate(-90deg);
	width: 8px;
	height: 17px;
	background: url(../img/common/icon_facebook.png) no-repeat;
	background-size: contain;
	content: '';
}

.kvlink-side-insta {
	position: relative;
	transform: rotate(90deg);
	margin-top: 20px;
	padding: 45px 10px;
	color: #B7463F;
	font-weight: 700;
	font-size: 1.0rem;
	letter-spacing: .2em;
}

.kvlink-side-insta::before {
	position: absolute;
	top: 47px;
	left: -15px;
	transform: rotate(-90deg);
	width: 17px;
	height: 17px;
	background: url(../img/common/icon_instagram.png) no-repeat;
	background-size: contain;
	content: '';
}

.kvlink-copyright small {
	position: absolute;
	top: 50%;
	left: -170px;
	z-index: 2;
	transform: rotate(90deg) translateY(-50%);
	color: #FFF;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: .1em;
}

.kvlink-headline {
	position: absolute;
	bottom: 35px;
	left: 46px;
	z-index: 2;
	width: 80vw;
	max-width: 923px;
	padding: 12px 0;
	border-radius: 10px;
	box-shadow: 0 -1px 2px 0 rgba(10,2,4,.37), 0 1px 2px 0 rgba(10,2,4,.37) inset, 0 1px 1px 0 rgba(255,255,255,.37), 0 -1px 1px 0 rgba(255,255,255,.37) inset;
	background: rgba(255, 255, 255, .82);
}

.kvlink-headline a dl {
	display: flex;
	flex-wrap: nowrap;
}

.kvlink-headline a dl dt {
	position: relative;
	padding: 0 18px 0 29px;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .2em;
	white-space: nowrap;
}

.kvlink-headline a dl dt::after {
	position: absolute;
	top: 7px;
	right: 0;
	width: 1px;
	height: 17px;
	background: var(--text-color);
	content: '';
}

.kvlink-headline a dl dd {
	padding: 0 57px;
	overflow: hidden;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .2em;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/* section-title ---------------------------------------*/
.section-title {
	margin: 0 auto 80px;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .4em;
	text-align: center;
}

.section-title img {
	margin-bottom: 20px;
}

.section-title.section-title-renewal {
	position: absolute;
	top: 0;
	margin: 0;
}

.section-title.section-title-renewal-left {left: calc(50% - 51vw);}
.section-title.section-title-renewal-right {right: calc(50% - 51vw);}

.section-title strong {
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.21) 0%, rgba(233, 232, 70, 0.21) 48%, rgba(242, 183, 133, 0.21) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-title-sub {
	position: relative;
	z-index: 1;
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.04em;
	padding-left: 40px;
	margin-bottom: 32px;
}

.section-title-sub::after {
	position: absolute;
	bottom: -6px;
	left: -36px;
	z-index: 1;
	width: 370px;
	height: 55px;
	background: url('../img/about_2025/title_strength_deco.webp') no-repeat;
	background-size: contain;
	content: '';
}

.section-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.667;
	letter-spacing: 0.05em;
}

.section-title-sub + .section-text {
	padding-left: 40px;
}

.section-lead {
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.05em;
}


/* indexmessage ---------------------------------------*/
.indexmessage {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 525px;
	background: url(../img/index/message_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

.indexmessage-block {
	position: absolute;
	top: 24%;
	left: 60%;
	transform: translateX(-50%);
	width: 600px;
}

.indexmessage-title {
	font-size: 36px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.08em;
	color: #fff;
	margin-bottom: 30px;
}

.indexmessage-text {
	font-size: 20px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.08em;
	color: #fff;
}


/* indexvision ---------------------------------------*/
.indexvision {
	position: relative;
	z-index: 3;
	padding: 13vw 0 70px;
	background: rgba(234, 161, 60, 0.2);
}

.indexvision::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	background: linear-gradient(170deg, rgba(234, 161, 60, 0) 0%, rgba(234, 161, 60, 0.4) 20%, rgba(234, 161, 60, 0.9) 40%, rgba(234, 161, 60, 1) 100%);
	content: '';
}

.indexvision::after {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	width: min(calc(693 / 1440 * 100vw), 693px);
	aspect-ratio: 693 / 377;
	background: url(../img/index/vision_bg.webp) no-repeat center / contain;
	content: '';
	opacity: 0.4;
}

.indexvision-deco {
	position: absolute;
	top: 0.5vw;
	right: calc(-10 / 1440 * 100vw);
	z-index: 1;
	font-size: calc(124 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.21);
}

.indexvision-title {
	padding-left: 17%;
	margin-bottom: 40px;
}

.indexvision-title span {
	display: block;
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
}

.indexvision-title b {
	display: block;
	margin-left: -1%;
	font-size: 36px;
	font-weight: 900;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #fff;
}

.indexvision-summary {
	margin: 0 8% 0 auto;
	width: fit-content;
}

.indexvision-subtitle {
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #fff;
}

.indexintro {
	position: relative;
	z-index: 2;
}


/* indexservice, service ---------------------------------------*/
.indexservice, .pageservice {
	position: relative;
	z-index: 1;
	background: url(../img/index/top_bg.png) no-repeat;
	background-size: contain;
	background-position: 0 0;
}

.indexservice {padding: 12vw 0 112px;}
.pageservice {padding: 70px 0 112px;}

.indexservice-list, .service-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30px;
}

.indexservice-list {
	margin-top: 80px;
}

.indexservice-list > li, .service-list > li {
	display: flex;
	flex-direction: column;
	width: 45%;
	margin-bottom: 60px;
	padding: 63px 0 0;
	/*	Neumorphism*/
	border-radius: 8px;
	box-shadow: 3px 3px 5px #E0E0E0,
	-8px -8px 10px #FFF;
	background: #F9F9F9;
}

.indexservice-list-title, .service-list-title {
	padding: 0 20px 30px;
	font-weight: 700;
	font-size: 2.8rem;
	letter-spacing: .2em;
	text-align: center;
}

.indexservice-list-content, .service-list-content {
	display: flex;
	justify-content: space-between;
	padding: 0 50px;
}

.indexservice-list-content-text, .service-list-content-text {
	max-width: 185px;
	margin: 0 20px 43px 0;
	font-weight: 700;
	font-size: 1.4rem;
}

.indexservice-list-content-img, .service-list-content-img {
	margin-bottom: 43px;
}

.indexservice-list-content-img img, .service-list-content-img img {
	width: 100%;
	max-width: 206px;
}

.indexservice-list-btn, .service-list-btn {
	position: relative;
	margin: auto 0 20px;
	text-align: center;
}

.indexservice-list-btn::before, .service-list-btn::before {
	position: absolute;
	top: -29px;
	left: 0;
	width: 100%;
	height: 3px;
	background: #F2F2F2;
	content: '';
}

.indexservice-list-btn::after, .service-list-btn::after {
	position: absolute;
	top: -26px;
	left: 0;
	width: 100%;
	height: 3px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0));
	background-repeat: no-repeat;
	content: '';

	background-position: center;
}


.indexservice-btn {
	margin: 0 auto;
	text-align: center;
}


/* indexinformation ---------------------------------------*/

.indexinformation {
	position: relative;
	padding-bottom: 50px;
}

.indexinformation-container {
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 100px;
	padding: 13vw 0 60px;
	background: url(../img/index/information_bg.webp) no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.indexinformation-key {
	margin-top: 20px;
	width: 37%;
}

.indexinformation-key-title {
	position: relative;
	margin: 0 5vw 0 auto;
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.75;
	letter-spacing: 0.1em;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.indexinformation-key-text {
	margin: -180px calc(5vw + 70px) 0 auto;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.indexinformation-news {
	position: relative;
	flex: 1;
}

.indexinformation-news-list {
	position: relative;
	width: 50.5vw;
}

.indexinformation-news-list > li {
	background-image: linear-gradient(to right, var(--ac-color-gray), var(--ac-color-gray) 8px, rgba(255, 255, 255, 0) 8px, rgba(255, 255, 255, 0) 8px);
	background-size: 16px 3px;
	background-repeat: repeat-x;

	background-position: left bottom;
}

.indexinformation-news-list > li a {
	display: block;
	padding: 25px 0;
}

.indexinformation-news-list > li a dl {
	display: flex;
	flex-wrap: nowrap;
}

.indexinformation-news-list > li a dl dt {
	width: 135px;
	color: var(--ac-color-gray);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.8;
	letter-spacing: 0;
	white-space: nowrap;
}

.indexinformation-news-list > li a dl dd {
	width: calc(100% - 135px);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.8;
	letter-spacing: .1em;
}

.indexinformation-list {
	display: flex;
	justify-content: space-between;
}

.indexinformation-list > li {
	width: 30%;
	padding: 60px 35px;
	border-radius: 16px;
	box-shadow: 12px 12px 16px #F2F2F2, -8px -8px 16px #FFF;
	/*	Neumorphism*/
	background: #F9F9F9;
}

.indexinformation-list-image {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 150px;
	margin: 0 auto 20px;
	text-align: center;
}

.indexinformation-list-title {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2.8rem;
	letter-spacing: .2em;
	text-align: center;
}

.indexinformation-list-text {
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: .2em;
}

.indexinformation-news-btn {
	margin-top: 36px;
	width: 53vw;
	text-align: right;
}


/* indexfuture ---------------------------------------*/
.indexfuture {
	position: relative;
	width: 100vw;
	height: calc(85vh - 70px);
}

.indexfuture::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: calc(100vh - 70px);
	margin-top: 70px;
	background-image: url(../img/index/future_bg.webp);
	background-size: cover;
	background-repeat: no-repeat;
	content: '';

	background-position: top center;
}

.indexfuture::after {
	position: fixed;
	top: -95px;
	left: -205px;
	z-index: 0;
	width: 523px;
	height: 403px;
	background: url(../img/common/logo_deco.png) no-repeat;
	background-size: contain;
	content: '';
}

.indexfuture-title {
	position: fixed;
	top: calc(5.5vw + 70px);
	left: 13.7%;
	z-index: -1;
	width: 33vw;
}

.indexfuture-text {
	position: fixed;
	top: calc(18.5vw + 70px);
	left: 13%;
	z-index: -1;
	width: 80%;
	color: #FFF;
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: .05em;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
}


/* indexinterlude ---------------------------------------*/
.indexinterlude {
	position: relative;
	width: 100vw;
	height: calc(78vh - 70px);
}

.indexinterlude-title {
	position: fixed;
	top: calc(50% - 180px);
	left: 26%;
	z-index: -1;
	transform: translateY(-50%);
	font-size: calc(93 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.15);
}

.indexinterlude-summary {
	position: fixed;
	top: calc(50% + 20px);
	left: 40%;
	z-index: -1;
	transform: translateY(-50%);
	width: 57%;
}


/* indexskill ---------------------------------------*/
.indexskill {
	position: relative;
	padding: 14vw 0 100px;
}

.indexskill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 3.5%;
	margin-top: 60px;
}

.indexskill-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 31%;
	height: 100px;
	margin-bottom: 38px;
	/*	Neumorphism*/
	border-radius: 12px;
	box-shadow: 6px 6px 12px #F3F3F3, -6px -6px 12px #FFF;
	background: #F9F9F9;
}

.indexskill-list-img {
	width: 25%;
	margin-left: 8%;
}

.indexskill-list-img img {
	width: 100%;
}

.indexskill-list-title {
	width: 75%;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
}


/* indexvoice ---------------------------------------*/
.indexvoice {
	padding: 100px 0 120px;
}

.indexvoice-list > li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 130px;
}

.indexvoice-list > li:last-of-type {
	margin-bottom: 0;
}

.indexvoice-list > li:nth-of-type(odd) .indexvoice-list-img, .indexvoice-list > li:nth-of-type(even) .indexvoice-list-summary {
	order: 2;
}

.indexvoice-list > li:nth-of-type(even) .indexvoice-list-img, .indexvoice-list > li:nth-of-type(odd) .indexvoice-list-summary {
	order: 1;
}

.indexvoice-list-img {
	width: 40%;
	overflow: hidden;
	border-radius: 8px;
}

.indexvoice-list-img img {
	width: 100%;
}

.indexvoice-list-summary {
	width: 55%;
}

.indexvoice-list-client {
	position: relative;
	margin-bottom: 27px;
	padding-bottom: 20px;
	font-weight: 700;
	font-size: 1.8rem;
	letter-spacing: .2em;
}

.indexvoice-list-client::before, .indexvoice-list-client::after {
	position: absolute;
	left: calc(calc(-100vw + 1150px) / 2);
	width: calc(calc(calc(100vw - 1150px) / 2) + calc(100% * 60 / 55));
	content: '';
}

.indexvoice-list-client::before {
	bottom: 0;
	height: 2px;
	background: linear-gradient(to right, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
}

.indexvoice-list-client::after {
	bottom: -2px;
	height: 2px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::before, .indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::after {
	right: calc(calc(-100vw + 1150px) / 2);
	left: unset;
}

.indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::before {
	background: linear-gradient(to left, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
}

.indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::after {
	background-image: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.indexvoice-list-title {
	margin-bottom: 20px;
	color: #818181;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.7;
	letter-spacing: .2em;
}

.indexvoice-list-text {
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: .2em;
}

/* indexpres ---------------------------------------*/
.indexpres { 
	position: relative;
	padding: 11% 0 9%;
	width: 100%;
	background: url(../img/index/pres_bg.webp) no-repeat center center / cover;
	overflow: hidden;
	z-index: 1;
}

.indexpres-block { 
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: calc(70 / 1150 * 100%);
}

.indexpres-image { 
	width: calc(250 / 1150 * 100%);
	height: fit-content;
	overflow: hidden;
	border-radius: 8px;
}

.indexpres-image img { 
	width: 100%;
}

.indexpres-summary { 
	width: fit-content;
}

.indexpres-title { 
	position: relative;
	margin-bottom: 36px;
}

.indexpres-title-job { 
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: #fff;
}

.indexpres-title b { 
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: #fff;
}

.indexpres-title small { 
	margin-left: 20px;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: #fff;
}

.indexpres-text { 
	display: block;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.642;
	letter-spacing: .2em;
	color: #fff;
}

.indexpres-list > li { 
	position: relative;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .2em;
	color: #fff;
	padding-left: 16px;
}

.indexpres-list > li::before {
    position: absolute;
    top: 1px;
    left: 2px;
    z-index: 1;
    font-size: 1.4rem;
    content: '・';
}


/* indexclient ---------------------------------------*/
.indexclient {
	position: relative;
	padding: 7vw 0 200px;
}

.indexclient-summary {
	margin-left: 20%;
}

.indexclient-slick-container {
	width: 100%;
	margin: 50px auto 0;
}

.indexclient-slick-wrapper:not(:last-of-type) {
	margin-bottom: 40px;
}

.slick-slide {
	margin: 0 20px;
}

.slick-slide img {
	width: 100%;
	height: auto;
}


/* indexportfolio ---------------------------------------*/
.indexportfolio {
	position: relative;
	padding: 6vw 0 120px;
}

.indexportfolio-list {
	margin: 100px auto 0;
}

.indexportfolio-list > li {
	position: relative;
	margin-bottom: 150px;
}

.indexportfolio-list > li::before {
	position: absolute;
	right: 0;
	bottom: -100px;
	left: 0;
	z-index: 0;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	background: url(../img/index/portfolio_deco.webp) no-repeat;
	background-size: contain;
	content: '';

	aspect-ratio: 1180 / 185;
}

.indexportfolio-list-flyer, .indexportfolio-list-web {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 2%;
}

.indexportfolio-list-web {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.indexportfolio-list-flyer > li {
	z-index: 1;
	box-shadow: 5px 5px 15px 0 rgba(99,97,97,.15);
}

.indexportfolio-list-web > li {
	z-index: 1;
}

.indexportfolio-btn {
	margin: 0 auto;
	text-align: center;
}


/* indexstaff ---------------------------------------*/
.indexstaff {
	position: relative;
	padding: 150px 0 120px;
}

.indexstaff .inner {
	max-width: 1060px;
}

.indexstaff .section-title {
	position: absolute;
	top: -25px;
	right: 0;
	left: 0;
	margin: auto;
}

.indexstaff-list > li {
	display: flex;
	justify-content: space-between;
	gap: calc(50 / 980 * 100%);
	margin-bottom: 130px;
}

.indexstaff-list > li:last-of-type {
	margin-bottom: 0;
}

.indexstaff-list > li:nth-of-type(odd) .indexstaff-list-img, .indexstaff-list > li:nth-of-type(even) .indexstaff-list-summary {
	order: 1;
}

.indexstaff-list > li:nth-of-type(even) .indexstaff-list-img, .indexstaff-list > li:nth-of-type(odd) .indexstaff-list-summary {
	order: 2;
}

.indexstaff-list-img {
	width: calc(460 / 980 * 100%);
	height: fit-content;
	overflow: hidden;
	border-radius: 8px;
}

.indexstaff-list-img img {
	width: 100%;
}

.indexstaff-list-summary {
	width: calc(470 / 980 * 100%);
}

.indexstaff-list-jobtitle {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 2;
	letter-spacing: .2em;
}

.indexstaff-list-name {
	margin-right: 16px;
}

.indexstaff-list-description {
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.6;
	letter-spacing: .08em;
}


/* indexcontact ---------------------------------------*/
.indexcontact {
	padding: 100px 0 60px;
}

.indexcontact .inner {
	max-width: 1060px;
}


/* linelink ---------------------------------------*/
.linelink {
	padding-bottom: 100px;
}

.linelink-block {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 40px;
	/*	Neumorphism*/
	border-radius: 12px;
	box-shadow: 6px 6px 12px #D5D5D5, -6px -6px 12px #FFF;
	background: #E7E7E7;
}

.linelink-announce {
	position: relative;
	width: 50%;
	padding-right: 30px;
}

.linelink-announce::before, .linelink-announce::after {
	position: absolute;
	top: -20px;
	width: 2px;
	height: calc(100% + 40px);
	content: '';
}

.linelink-announce::before {
	right: -2px;
	background: linear-gradient(to bottom, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
}

.linelink-announce::after {
	right: 0;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.linelink-announce-btn {
	position: absolute;
	right: 45%;
	bottom: 2%;
}

.linelink-info {
	width: 50%;
	padding-left: 6%;
}

.linelink-info-tel {
	display: inline-block;
	margin-bottom: 15px;
}

.linelink-info-mail {
	display: inline-block;
}


.map-linelink.linelink {
	padding: 30px 0 60px;
}

.map-linelink .linelink-block {
	display: block;
	padding: 20px 32px;
}

.map-linelink .linelink-announce {
	width: 100%;
	padding-right: 0;
	padding-bottom: 20px;
	text-align: center;
}

.map-linelink .linelink-announce::before, .map-linelink .linelink-announce::after {
	top: unset;
	left: -16px;
	width: calc(100% + 32px);
	height: 2px;
	content: '';
}

.map-linelink .linelink-announce::before {
	right: unset;
	bottom: 0;
	background: linear-gradient(to right, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
}

.map-linelink .linelink-announce::after {
	right: unset;
	bottom: -2px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.map-linelink .linelink-announce-btn {
	right: 50%;
	bottom: 8%;
}

.map-linelink .linelink-info {
	width: fit-content;
	margin: 0 auto;
	padding-top: 20px;
	padding-left: 0;
}

.map-linelink .linelink-info-tel {
	display: block;
}


/* breadcrumbs ---------------------------------------*/
.crumbs {
}

.crumbs-nav {
	display: block;
	padding: 20px 65px;
	background: #F8F8F8;
}

.bg-gray .crumbs-nav {
	background: #FFF;
}

/* testのみ */
.crumbs-nav ol {
	display: flex;
}

.crumbs-nav ol > li {
	position: relative;
	padding-right: 20px;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .2em;
}

.crumbs-nav ol > li:not(:first-of-type) {
	margin-left: 10px;
}

.crumbs-nav ol > li:not(:last-child)::after {
	position: absolute;
	right: -7px;
	content: '〉';
}
/* /testのみ */


/* footer ---------------------------------------*/
.footer {
}

.footer-top {
	padding: 45px 0;
	background: #E7E7E7;
}

.footer-top-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 40px;
}

.footer-nav {
	color: #040000;
}

.footer-nav-list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.footer-nav-list > li {
}

.footer-nav-list-sub {
	margin-bottom: 55px;
}

.footer-nav-list > li > a, .footer-nav-list-sub > a {
	padding-right: 20px;
	font-weight: 700;
	font-size: 1.8rem;
	letter-spacing: .2em;
}

.footer-nav-list-child {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 325px;
	margin: 0;
}

.footer-nav-list-child.-small {
	height: unset;
}

::-webkit-full-page-media, :future, :root .footer-nav-list-child.-large {
	width: 445px;
}

::-webkit-full-page-media, :future, :root .footer-nav-list-child.-medium {
	width: 277px;
}

.footer-nav-list-child > li {
	margin: 16px 0 16px 30px;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .2em;
}

.footer-nav-list-child > li > a {
	position: relative;
	padding-left: 16px;
}

.footer-nav-list-child > li > a::before {
	position: absolute;
	top: 3px;
	left: 0;
	content: '〉';
}

.footer-bottom {
	padding: 35px 20px 28px;
	background: var(--text-color);
}

.footer-bottom-logo {
	margin: 0 auto 60px;
	text-align: center;
}

.footer-bottom-list {
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
}

.footer-bottom-list > li {
	position: relative;
	padding-right: 25px;
	color: #FFF;
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: .2em;
}

.footer-bottom-list > li:last-of-type {
	padding-right: 0;
}

.footer-bottom-list > li:not(:last-child)::after {
	position: absolute;
	right: 4px;
	content: '｜';
}

.footer-bottom-list > li a:hover {
	opacity: 1;
	color: var(--ac-color-orange);
}

.footer-copyright {
	display: block;
	color: #F6CB88;
	font-size: 1.1rem;
	font-weight: 500;
	text-align: center;
}


/* btn ---------------------------------------*/

.btn {
	display: inline-block;
	position: relative;
	z-index: 0;
	width: 222px;
	height: 45px;
	border-radius: 20px;
	box-shadow: 0 3px 4px -2px rgba(10,2,4,.37), -4px -4px 2px rgba(255,255,255,1), inset 0 3px 4px -2px rgba(255, 255, 255, 0), inset -4px -4px 2px rgba(255, 255, 255, 0);
	background: var(--bg-color);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 43px;
	letter-spacing: .2em;
	text-align: center;
	cursor: pointer;
	transition: .5s;
}

.btn-large {
	width: 340px;
	height: 60px;
	border-radius: 70px;
	font-size: 2rem;
	line-height: 60px;
}

.btn-small {
	width: 125px;
	height: 25px;
	padding-right: 12px;
	box-shadow: 0 2px 3px -2px rgba(10,2,4,.37), -1px -1px 3px rgba(255,255,255,1), inset 0 2px 3px -2px rgba(255, 255, 255, 0), inset -1px -1px 3px rgba(255, 255, 255, 0);
	font-size: 1.4rem;
	line-height: 24px;
}

.btn-white {
	background: #FFF;
}

.btn-gray {
	background: #E7E7E7;
}

.btn.btn-normal,
.btn.btn-normal:hover {
	box-shadow: unset;
}

.arrow-right-orange, .arrow-right-green, .arrow-right-black {
	position: absolute;
	top: 50%;
	right: 9%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	transition: .3s;

	border-top: 8.5px solid transparent;
	border-bottom: 8.5px solid transparent;
}

.arrow-right-orange {
	border-left: 17px solid var(--ac-color-orange);
}

.arrow-right-green {
	border-left: 17px solid var(--ac-color-green);
}

.arrow-right-black {
	border-left: 17px solid var(--text-color);
}

.arrow-left-black {
	position: absolute;
	top: 50%;
	left: 9%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	transition: .25s;

	border-top: 8.5px solid transparent;
	border-bottom: 8.5px solid transparent;
	border-right: 17px solid var(--text-color);
}

.btn-large .arrow-right-orange, .btn-large .arrow-right-green, .btn-large .arrow-right-black {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.btn-large .arrow-right-orange {
	border-left: 22px solid var(--ac-color-orange);
}

.btn-large .arrow-right-green {
	border-left: 22px solid var(--ac-color-green);
}

.btn-large .arrow-right-black {
	border-left: 22px solid var(--text-color);
}

.btn-large .arrow-left-black {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 22px solid var(--text-color);
}

.btn-small .arrow-right-black {
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 10px solid var(--text-color);
}

.btn:hover {
	opacity: 1;
	box-shadow: 0 3px 4px -2px rgba(255, 255, 255, 0), -4px -4px 2px rgba(255, 255, 255, 0), inset 0 3px 4px -2px rgba(10,2,4,.37), inset -4px -4px 2px rgba(255,255,255,1);
}

.btn-small.btn:hover {
	box-shadow: 0 2px 3px -2px rgba(255, 255, 255, 0), -1px -1px 3px rgba(255, 255, 255, 0), inset 0 2px 3px -2px rgba(10,2,4,.37), inset -1px -1px 3px rgba(255,255,255,1);
}

.btn:hover .arrow-right-black {
	border-left: 17px solid var(--ac-color-orange);
}

.btn-large.btn:hover .arrow-right-black {
	border-left: 22px solid var(--ac-color-orange);
}

.btn-small.btn:hover .arrow-right-black {
	border-left: 10px solid var(--ac-color-orange);
}

.btn:hover .arrow-left-black {
	border-right: 17px solid var(--ac-color-orange);
}

.btn-large.btn:hover .arrow-left-black {
	border-right: 22px solid var(--ac-color-orange);
}


/* 404 ---------------------------------------*/
.notfound {
	position: relative;
	z-index: 1;
	margin-top: 70px;
	padding: 140px 0 200px;
	background: url(../img/index/top_bg.png) no-repeat;
	background-size: contain;

	background-position: 0 0;
}

.notfound-title {
	margin-bottom: 70px;
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 2.0;
	letter-spacing: .2em;
	text-align: center;
}

.notfound-text {
	margin-bottom: 100px;
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: .2em;
	text-align: center;
}

.notfound-btn {
	margin: 0 auto;
	text-align: center;
}


/* animation ---------------------------------------*/

.animation {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1.25s ease;
}

.animation.on {
	opacity: 1;
	transform: translate(0, 0);
}

.animation.animation-marker,
.animation.animation-band {
	opacity: 1;
	transform: translate(0, 0);
}

.animation.animation-marker {background-size: 0 5px;}
.animation.animation-marker-vertical {background-size: 5px 0;}
.animation.animation-band {background-size: 0 100%;}

.animation.on.animation-marker {
	background-size: 100% 5px;
	transition: all .8s ease;
}

.animation.on.animation-marker-vertical {
	background-size: 5px 100%;
	transition: all 1.2s ease;
}

.animation.on.animation-band {
	background-size: 100% 100%;
	transition: all .8s ease;
}


/* page  ---------------------------------------*/
.pagekv {
	position: relative;
	z-index: 0;
}

.bg-gray .pagekv {
	padding: 0;
}

.pagekv-bg img {
	width: 100%;
	height: calc(40vh + 70px);
    min-height: 350px;
	object-fit: cover;
}

.pagekv-bg.pagekv-bg-contact img,
.pagekv-bg.pagekv-bg-company img {
	object-position: bottom;
}

.pagekv .kvlink-side {
	top: 70px;
	height: 60vh;
	min-height: 400px;

}

.pagekv .kvlink-copyright small {
	top: calc(50% + 30px);
	left: -80px;
	font-size: 1rem;
	text-align: center;
}

.pagecontent {
	position: relative;
	z-index: 1;
	padding: 70px 0 112px;
	background: url(../img/index/top_bg.png) no-repeat;
	background-size: contain;

	background-position: 0 0;
}

.pagecontent .wrapper-single {
	margin: 0 0 100px;
}

.breadcrumbs {
	margin-bottom: 0!important;
	font-weight: 700;
	font-size: 1.4rem;
}

.breadcrumbs > span {
	padding-right: 10px;
}


/* about ---------------------------------------*/
/*aboutus*/
.aboutus {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(.1vw, 5vw, 10vw);
	background: #EEE;
}

.aboutus-bg img {
	width: 100%;
}

.aboutus-wrapper {
	position: absolute;
	top: 15vw;
	right: 40px;
	left: clamp(10%, 16vw, 24%);
	max-width: 780px;
}

.aboutus .section-title {
	margin: 0 auto 5vw;
	text-align: left;
}

.aboutus-text {
	margin-bottom: 2.5vw;
	color: #FFF;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.25vw, 1.8rem);
	line-height: 2.1;
	letter-spacing: .2em;
}

.pageabout .bg-gray {
	position: relative;
	z-index: 2;
	background: #EEE;
}


/*strength*/
.strength {
	padding: 100px 0 150px;
}

.strength .inner {
	max-width: 1060px;
}

.strength-list {
}

.strength-list > li {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 5%;
	margin-bottom: 100px;
}

.strength-list > li:last-of-type {
	margin-bottom: 0;
}

.strength-list-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 295px;
	height: 295px;
	/*	Neumorphism*/
	border-radius: 50%;
	box-shadow: 6px 6px 20px #D9D9D9, -6px -6px 20px #FFF;
	background: #EEE;
}

.strength-list-title figure {
	margin: 90px 0 20px;
}

.strength-list-title span {
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.67;
	letter-spacing: .2em;
}

.strength-list-content {
	width: calc(100% - 5% - 295px - 20px);
}

.strength-list > li:first-of-type .strength-list-space, .strength-list > li:nth-of-type(2) .strength-list-space {
	float: right;
	height: 120px;
}

.strength-list > li:first-of-type .strength-list-image, .strength-list > li:nth-of-type(2) .strength-list-image {
	float: right;
	clear: both;
	margin: 10px 0 0 10px;
}

.strength-list > li:nth-of-type(3) .strength-list-space {
	float: left;
	height: 120px;
}

.strength-list > li:nth-of-type(3) .strength-list-image {
	float: left;
	clear: both;
	margin: 10px 20px 0 0;
}

.strength-list-text {
	margin-top: 40px;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 2.1;
	letter-spacing: .05em;
}

/*concept*/
.concept {
	position: relative;
	padding: 0 0 80px;
}

.concept:before {
	position: absolute;
	/*	aspect-ratio: 1115/852;*/
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background: url(../img/about/concept.webp) no-repeat;
	background-size: contain;
	content: '';
}

.concept .inner {
	max-width: 1060px;
}

.concept-wrapper {
	max-width: 750px;
	margin: 0 auto 100px;
	padding-top: 30vw;
}

.concept-lead {
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.8;
	letter-spacing: .2em;
}

.concept-lead span {
	margin-left: 130px;
}

.concept-text {
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 2.1;
	letter-spacing: .05em;
}

.concept-text + .concept-text {
	margin-top: 40px;
}

/*company*/
.company {
	position: relative;
	padding: 0 0 80px;
}

.company .inner {
	max-width: 1060px;
}

.company table tr {
	font-weight: 500;
}

.company table tr td:first-of-type {
	width: 25%;
}




/*about_2025*/
.about_2025 {
	padding: 100px 0 150px;
}


/* page-service ---------------------------------------*/
.servicetab {
	border-bottom: 2px solid #E1E1E1;
}

.servicetab-title {
	margin-bottom: 50px;
	font-weight: 700;
	font-size: 3.2rem;
	letter-spacing: .2em;
	text-align: center;
}

.servicetab-list {
	display: flex;
	justify-content: center;
	gap: 2.5%;
	padding: 0 40px;
}

.servicetab-item {
	width: 183px;
	text-align: center;
}

.servicetab-item a {
	display: block;
	width: 100%;
	max-width: 183px;
	height: 52px;
	padding: 18px 10px 15px;
	border-radius: 5px 5px 0 0;
	background: #E1E1E1;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .1em;
	transition: all .25s ease;
}

.servicetab-item a:hover {
	opacity: 1;
	background: var(--ac-color-orange);
	color: #FFF;
}

.servicetab-item.is-active a {
	opacity: 1;
	background: var(--ac-color-orange);
	color: #FFF;
}

/* servicecrumbs */
.servicecrumbs {
}

.servicecrumbs-nav {
	padding: 40px 0 90px;
}

.servicecrumbs-nav ol {
	display: flex;
}

.servicecrumbs-nav ol > li {
	position: relative;
	padding-right: 20px;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .2em;
}

.servicecrumbs-nav ol > li:not(:first-of-type) {
	margin-left: 10px;
}

.servicecrumbs-nav ol > li:not(:last-child)::after {
	position: absolute;
	top: -1px;
	right: -2px;
	content: '>';
}


/* servicedetail */
.servicedetail {
	padding: 0 0 60px;
}

.servicedetail-title {
	display: flex;
	justify-content: flex-start;
	gap: 27px;
	margin-bottom: 40px;
}

.servicedetail-title span {
	display: block;
	order: 1;
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 1.6;
	letter-spacing: .2em;
}

.servicedetail-title figure {
	order: 2;
	margin-top: 18px;
}

.servicedetail-text {
	margin-bottom: 40px;
	font-weight: 700;
	font-size: 1.8rem;
	letter-spacing: .2em;
}

.servicedetail-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 35px;
}

.servicedetail-list > li {
	position: relative;
	width: 100%;
	max-width: 217px;
}

.servicedetail-list > li::after {
	position: absolute;
	top: 0;
	right: 17px;
	bottom: 0;
	z-index: 0;
	width: 17px;
	height: 10px;
	margin: auto 0;
	background: url(../img/common/arrow-down.svg) no-repeat;
	background-size: contain;
	content: '';
}

.servicedetail-list > li a {
	display: block;
	width: 217px;
	height: 45px;
	padding: 12px 30px 10px 15px;
	border-radius: 10px;
	box-shadow: 0 3px 4px -2px rgba(10,2,4,.37), -4px -4px 2px rgba(255,255,255,1), inset 0 3px 4px -2px rgba(255, 255, 255, 0), inset -4px -4px 2px rgba(255, 255, 255, 0);
	background: var(--bg-color);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .2em;
	text-align: center;
}

.servicedetail-list > li a:hover {
	opacity: 1;
	box-shadow: 0 3px 4px -2px rgba(255, 255, 255, 0), -4px -4px 2px rgba(255, 255, 255, 0), inset 0 3px 4px -2px rgba(10,2,4,.37), inset -4px -4px 2px rgba(255,255,255,1);
}


/* servicestrength */
.servicestrength {
	padding: 40px 0 100px;
	background: var(--bg-color-02);
}

.servicestrength-title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 29px;
	margin-bottom: 100px;
}

.servicestrength-title span {
	display: block;
	padding-bottom: 14px;
	color: #737373;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .5em;
}

.servicestrength-list > li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 130px;
}

.servicestrength-list > li:last-of-type {
	margin-bottom: 0;
}

.servicestrength-list > li:nth-of-type(odd) .servicestrength-list-img, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-summary {
	order: 2;
}

.servicestrength-list > li:nth-of-type(even) .servicestrength-list-img, .servicestrength-list > li:nth-of-type(odd) .servicestrength-list-summary {
	order: 1;
}

.servicestrength-list-img {
	width: 40%;
	overflow: hidden;
	border-radius: 8px;
}

.servicestrength-list-img img {
	width: 100%;
}

.servicestrength-list-summary {
	width: 55%;
}

.servicestrength-list-point {
	position: relative;
	margin-bottom: 27px;
	padding-bottom: 20px;
	font-weight: 700;
	font-size: 1.8rem;
	letter-spacing: .2em;
}

.servicestrength-list-point::before, .servicestrength-list-point::after {
	position: absolute;
	left: calc(calc(-100vw + 1150px) / 2);
	width: calc(calc(calc(100vw - 1150px) / 2) + calc(100% * 60 / 55));
	content: '';
}

.servicestrength-list-point::before {
	bottom: 0;
	height: 2px;
	background: linear-gradient(to right, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
}

.servicestrength-list-point::after {
	bottom: -2px;
	height: 2px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::before, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::after {
	right: calc(calc(-100vw + 1150px) / 2);
	left: unset;
}

.servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::before {
	background: linear-gradient(to left, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
}

.servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::after {
	background-image: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
}

.servicestrength-list-title {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.7;
	letter-spacing: .2em;
}

.marker-orange {
	background: linear-gradient(rgba(255, 255, 255, 0) 70%, rgba(242, 161, 84, .5) 70%);
}

.servicestrength-list-text {
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: .2em;
}


/* servicecontent */
.servicecontent {
	padding: 40px 0 100px;
}

.servicecontent-title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 29px;
	margin-bottom: 100px;
}

.servicecontent-title span {
	display: block;
	color: #737373;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .5em;
}

.servicecontent-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 50px 5%;
	margin-bottom: 60px;
}

.servicecontent-list > li {
	width: 30%;
	padding: 60px 35px;
	border-radius: 16px;
	box-shadow: 12px 12px 16px #F2F2F2, -8px -8px 16px #FFF;
	/*	Neumorphism*/
	background: #F9F9F9;
}

.servicecontent-list-image {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	margin: 0 auto 20px;
	text-align: center;
}

.servicecontent-list-title {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2.0rem;
	letter-spacing: .2em;
	text-align: center;
}

.servicecontent-list-text {
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: .05em;
}

.servicecontent-similarities-title {
	margin-bottom: 50px;
	font-weight: 700;
	font-size: 2.8rem;
	letter-spacing: .05em;
}

.servicecontent-similarities-list {
	display: flex;
	flex-wrap: wrap;
	gap: 3.5%;
}

.servicecontent-similarities-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 31%;
	height: 100px;
	margin-bottom: 38px;
	/*	Neumorphism*/
	border-radius: 12px;
	box-shadow: 6px 6px 12px #F3F3F3, -6px -6px 12px #FFF;
	background: #F9F9F9;
}

.servicecontent-similarities-list-img {
	width: 25%;
	margin-left: 8%;
}

.servicecontent-similarities-list-img img {
	width: 100%;
}

.servicecontent-similarities-list-title {
	width: 75%;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
}


/* serviceflow */
.serviceflow {
	padding: 40px 0 100px;
	background: var(--bg-color-02);
}

.serviceflow-title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 29px;
	margin-bottom: 100px;
}

.serviceflow-title span {
	display: block;
	color: #737373;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .5em;
}

.serviceflow-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 80px 5%;
}

.serviceflow-list > li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 230px;
	height: 230px;
	/*	Neumorphism*/
	border-radius: 50%;
	box-shadow: 6px 6px 20px #D9D9D9, -6px -6px 20px #FFF;
	background: #EEE;
}

.serviceflow-list-image {
	margin: 0 0 15px;
}

.serviceflow-list-num {
	margin-bottom: 3px;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1;
}

.serviceflow-list-title {
	font-weight: 700;
	font-size: 2.0rem;
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
}


/* serviceportfolio */
.serviceportfolio {
	padding: 40px 0 0;
}

.serviceportfolio-title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 29px;
	margin-bottom: 100px;
}

.serviceportfolio-title span {
	display: block;
	padding-bottom: 14px;
	color: #737373;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .5em;
}

.serviceportfolio-btn {
	margin: 0 auto;
	text-align: right;
}


/* privacy ---------------------------------------*/
.terms {
	position: relative;
	z-index: 1;
	margin-top: 70px;
	padding: 80px 0;
	background: url(../img/index/top_bg.png) no-repeat;
	background-size: contain;
	background-position: 0 0;
}

.law .inner {
	max-width: 1080px;
}

.terms-lead {
	margin-bottom: 100px;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 2.2;
	letter-spacing: .2em;
	text-align: center;
}

.terms-list > li {
	margin-bottom: 80px;
}

.terms-list.law-list > li {
	margin-bottom: 24px;
}

.terms-list > li:last-of-type {
	margin-bottom: 0;
}

.terms-list > li dl {
	display: flex;
	gap: 20px;
}

.terms-list > li dl dt {
	width: 150px;
	line-height: 1.6;
}

.terms-list > li dl dd {
	flex: 1;
	line-height: 1.6;
}

.terms-list-title {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2.0rem;
	letter-spacing: .2em;
}

.terms-list-text {
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 2;
}

.terms-list-sub {
	margin-top: 15px;
	padding-left: 30px;
}

.terms-list-sub > li {
	list-style: circle;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 2;
}

ol.terms-list-sub > li {
	list-style: auto;
}

.privacy#primary table {
	display: inline-block;
	margin: 20px 0 0 20px;
}

.privacy#primary td {
	font-size: 1.4rem;
}

.maintenance-table {
	margin-top: 80px;
}

.maintenance-table table {
	margin-bottom: 12px;
}

.maintenance-table table tr th {
	font-size: 1.6rem;
	font-weight: 700;
	border: solid 1px #E6E6E6;
	background: unset!important;
	color: unset!important;
	padding: 12px!important;
	vertical-align: middle!important;
	width: 34%;
    min-width: 330px;
}

.maintenance-table table tr:first-of-type th {
	font-size: 1.8rem;
}

.maintenance-table table tr td {
	font-size: 1.6rem;
	font-weight: 400;
	text-align: center;
	border: solid 1px #E6E6E6;
	vertical-align: middle!important;
	width: 20%;
}

.maintenance-table table tr:first-of-type td {
	font-size: 2.0rem;
	font-weight: 700;
}

.maintenance-table table tr:nth-of-type(2) td {
	font-weight: 700;
}

.maintenance-table table tr:nth-of-type(2) td strong {
	font-size: 2.5rem;
	font-weight: 700;
}

.maintenance-table table tr td:first-of-type {
	border-left: solid 4px var(--ac-color-orange)!important;
}

.maintenance-table table tr td:nth-of-type(2) {
	border-right: solid 4px var(--ac-color-orange)!important;
}

.maintenance-table table tr:first-of-type td:first-of-type,
.maintenance-table table tr:first-of-type td:nth-of-type(2) {
	border-top: solid 4px var(--ac-color-orange)!important;
}

.maintenance-table table tr:last-of-type td:first-of-type,
.maintenance-table table tr:last-of-type td:nth-of-type(2) {
	border-bottom: solid 4px var(--ac-color-orange)!important;
}

.maintenance-table-text {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	color: var(--ac-color-orange);
}


/* archive ---------------------------------------*/
.archive-list {
	display: -webkit-flex;
	/* Safari */
	display:         flex;
	/* Safari */
	        flex-direction: row;
	flex-wrap: wrap;

	-webkit-flex-direction: row;
}

.time-tit {
	margin: 14px auto 0;
}

.time {
	opacity: .8;
	margin-bottom: 10px;
	font-size: 1.4rem;
}

.tit h2 {
	font-size: 1.6rem;
	line-height: 1.5;
}

.archive-item {
	width: calc(92% / 3);
	margin-right: calc(8% / 2);
	margin-bottom: 50px;
}

.archive-item:nth-of-type(3n) {
	margin-right: 0;
}

.archive-item .image {
	width: 100%;
	padding: 4px;
	border-radius: 12px;
	box-shadow: 6px 6px 12px #F3F3F3, -6px -6px 12px #FFF;
	background: #F9F9F9;
	aspect-ratio: 8 / 5;
	overflow: hidden;
}

.archive-item .image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/*category*/
.category-title {
	margin: 0 auto 5px;
	text-align: center;
}

.category-list {
	display: inline-block;
	position: relative;
	width: 100%;
	margin-bottom: 40px;
	font-weight: 500;
	font-size: 1.4rem;
	text-align: center;
}

.category-list a.is-active {
	color: var(--ac-color-orange);
}

.category-list span:after {
	content: ' ｜ ';
}

.category-list span:last-child:after {
	content: none;
}

.term-list {
	opacity: .8;
	font-size: 1.2rem;
	margin-top: 12px;
}

.term-list span {
	display: inline-block;
	padding: 2px 6px 3px;
	margin: 0 6px 4px 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	line-height: 1.1;
}

/** ページネーション **/
.wp-pagenavi {
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	padding-top: 80px;
}

.wp-pagenavi .current {
    color: #fff;
    background: var(--ac-color-orange);
}

.wp-pagenavi span,
.wp-pagenavi a {
    display: block;
    margin: 0 10px!important;
    width: 50px;
    border: unset!important;
    border-radius: 100px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
	box-shadow: 0 3px 4px -2px rgba(10, 2, 4, .37), -4px -4px 2px rgba(255, 255, 255, 1), inset 0 3px 4px -2px rgba(255, 255, 255, 0), inset -4px -4px 2px rgba(255, 255, 255, 0);
    background: var(--bg-color);
	padding: 0!important;
}

/* single ---------------------------------------*/
#single {
    width: 700px;
    max-width: 100%;
    margin: 0 auto;
}

#single .time-tit {
    margin: 40px auto 0;
}

#single .time {
    font-size: 0.8em;
    margin-bottom: 10px;
}

#single .tit h1,
#single .tit h3 {
    font-size: 1.6em;
}

#single img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    margin-top: 40px;
    margin-bottom: 40px;
}

#single-portfolio {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
}

#single-portfolio a {
    color: #0071a7 !important;
}

#single-portfolio .time-tit {
    margin-bottom: 40px;
}

#single-portfolio .time {
    font-size: 0.8em;
    margin-bottom: 10px;
}

#single-portfolio .tit h1 {
    font-size: 1.6em;
}

#single-portfolio .sec {
    margin-bottom: 60px;
}

#single-portfolio .tit h2 {
    font-size: 1.2em;
    margin-bottom: 14px;
}

#single-works p {
	margin: 0 auto 30px;
	text-align: center;
}

.single-btn {
	margin: 0 auto;
	text-align: center;
}

.map-flo {
    width: 50%;
    height: 600px;
}

/* --- お問い合わせフォーム --- */
/* デザインカスタマイズ */
div.wpcf7 {
	margin: 0 0 30px 0;
	padding: 0;
	        border-radius: 0;

	   -moz-border-radius: 10px;
	 -khtml-border-radius: 0;
	-webkit-border-radius: 0;
}

div.wpcf7 p {
	margin: 0;
	padding: 30px 0 0;
	font-size: 1.6rem;
}

div.wpcf7 p label {
	width: 100%;
}

div.wpcf7 input, .wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	margin-top: 5px;
	padding: 8px;
	border: none;
	background: var(--bg-color);
	font-size: 1.6rem;
}

div.wpcf7 textarea {
	width: 100%;
	height: 300px;
}

div.wpcf7 .contact-btn {
	margin-top: 60px;
	text-align: center;
}

div.wpcf7 .contact-btn p {
	position: relative;
	padding: unset;
}

div.wpcf7 .contact-btn p::after {
	position: absolute;
	top: 50%;
	right: 9%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	content: '';
	transition: .25s;

	border-left: 25px solid var(--text-color);
	border-top: 12.5px solid transparent;
	border-bottom: 12.5px solid transparent;
}

div.wpcf7 .contact-btn p:hover {
	opacity: 1;
	box-shadow: 0 3px 4px -2px rgba(255, 255, 255, 0), -4px -4px 2px rgba(255, 255, 255, 0), inset 0 3px 4px -2px rgba(10,2,4,.37), inset -4px -4px 2px rgba(255,255,255,1);
}

div.wpcf7 .contact-btn p:hover::after {
	border-left: 25px solid var(--ac-color-orange);
}

div.wpcf7 input.wpcf7-submit {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: unset;
	border-radius: 70px;
	background: rgba(255, 255, 255, 0);
	/* 他ページの .btn-large と同じ大きさにそろえる */
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: .2em;
}

.wpcf7 input.wpcf7-submit:active {
	bottom: -2px;
}

.wpcf7 input:focus, .wpcf7 textarea:focus {
	border: 1px solid #009DE1;
}

.wpcf7-captchac {
	border: 1px solid #CCC;
}


/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid {
	background: #FFB6C1;
}

.wpcf7 span.wpcf7-not-valid-tip {
	font-size: 80%;
}

.wpcf7 .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 8px 35px 8px 14px;
	        border-radius: 4px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
}

.wpcf7 .wpcf7-validation-errors {
	border: 1px solid #EED3D7;
	color: #B94A48;

	background-color: #F2DEDE;
}

.wpcf7 .wpcf7-mail-sent-ok {
	border: 1px solid #BCE8F1;
	color: #3A87AD;

	background-color: #D9EDF7;
}

/* 必須赤色表示 */
.wpcf7 .required {
	margin-left: 5px;
	padding: 2px 5px 3px;
	border-radius: 5px;
	/* 白文字が読めるよう濃いオレンジ（白との比 5.0:1） */
	background: #a65d0b;
	color: #FFF;
	font-weight: 700;
	font-size: 1.1rem;
}

/* 任意緑色表示 */
.wpcf7 .any {
	margin-left: 10px;
	padding: 2px 5px 3px;
	border-radius: 5px;
	/* 白文字が読めるよう濃い緑（白との比 5.1:1） */
	background: #2f7d5f;
	color: #FFF;
	font-size: 1.1rem;
}


/* page-template ---------------------------------------*/
.page-wrapper {
	max-width: 840px;
	width: 100%;
	margin: 20px auto 100px;
}

.page-date {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 4px;
}

.page-title h1 {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.8;
	margin-bottom: 20px;
}

.page-image {
	width: 100%;
	/* overflow: hidden; */
	/* border-radius: 20px; */
	margin: 0 auto;
}

.page-image img {
	width: 100%;
}

.page-entrybody > p {
	margin-top: 32px;
}

.page-entrybody > p strong {
	font-weight: 700;
}

.page-entrybody > p em {
	font-style: italic;
}

.page-entrybody a {
	text-decoration: underline;
	color: var(--ac-color-blue);
}

.page-entrybody a:hover {
	text-decoration: none;
}

.page-entrybody > ul,
.page-entrybody > ol {
	margin-top: 32px;
	margin-left: 2em;
}

.page-entrybody li {
	line-height: 1.8;
	list-style: unset;
}

.page-entrybody li + li {
	margin-top: 6px;
}

.page-entrybody > figure {
	width: 100%;
	/* overflow: hidden; */
	/* border-radius: 16px; */
	margin: 32px auto 0;
}

.page-entrybody img {
	width: 100%;
}

.page-entrybody > h2,
.page-entrybody > h3,
.page-entrybody > h4 {
	font-weight: 700;
	line-height: 1.8;
	margin-top: 32px;
}

.page-entrybody > h2 {
	font-size: 2.4rem;
}

.page-entrybody > h3 {
	font-size: 2rem;
}

.page-entrybody > h4 {
	font-size: 1.8rem;
}

.page-btn {
	margin: 0 auto;
	text-align: center;
}


/* about_2025 ---------------------------------------*/
/* about_2025kv ---------------------------------------*/
.about_2025kv {
	background: #060606;
}

.about_2025kv-bg {

}

.about_2025kv-bg img {
	width: 100%;
}

.about_2025kv_wrapper {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
}

.about_2025kv-deco-01 {
	display: flex;
	width: calc(2700 / 1440 * 100vw);
	margin: 0 auto 3.2vw;
}

.about_2025kv-deco-01 span {
	flex-shrink: 0;
	width: calc(1350 / 1440 * 100vw);
	font-size: calc(124 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.21);
	white-space: nowrap;
	animation: scroll-01 39s linear infinite;
}

@keyframes scroll-01 {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}

.about_2025kv-title {
	max-width: max(1230 / 1440 * 100vw, 1230px);
	width: 100%;
	padding: 0 40px;
	margin: 0 auto 5.6vw;
}

.about_2025kv-title span {
	display: block;
	font-size: calc(20 / 1440 * 100vw);
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.035em;
	color: #fff;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2);
	margin-bottom: -0.2vw;
}

.about_2025kv-title b {
	display: block;
    margin-left: -1vw;
	font-size: calc(62 / 1440 * 100vw);
	font-weight: 700;
	font-style: italic;
	line-height: 1.1;
	letter-spacing: 0.07em;
	color: #fff;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2);
}

.about_2025kv-deco-02 {
	display: flex;
	width: calc(calc(3200 / 1440 * 100vw) + 4vw);
	margin: 0 auto 3.4vw;
}

.about_2025kv-deco-02 span {
	flex-shrink: 0;
	width: calc(1600 / 1440 * 100vw);
	font-size: calc(124 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.21);
	white-space: nowrap;
	animation: scroll-02 47s linear infinite;
}

@keyframes scroll-02 {
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0);}
}

.about_2025kv-lead {
	max-width: max(1230 / 1440 * 100vw, 1230px);
	width: 100%;
	padding: 0 40px;
	margin: 0 auto 1.7vw;
	font-size: calc(26 / 1440 * 100vw);
	font-weight: 700;
	line-height: 1.462;
	letter-spacing: 0.035em;
	color: #fff;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2);
}

.about_2025kv-lead span {
	margin-left: 1vw;
}

.about_2025kv-block {
	max-width: 830px;
	width: 100%;
	padding: 0 40px;
	margin: 0 auto;
}

.about_2025kv-block-title {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.17em;
	color: #fff;
	margin-bottom: 20px;
}

.about_2025kv-block-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.667;
	letter-spacing: 0.1em;
	color: #fff;
}


/* about_2025strength ---------------------------------------*/
.about_2025strength {
	position: relative;
	padding: 13vw 0 0;
}

.about_2025strength-deco {
	position: absolute;
	top: 0;
	left: 0;
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.21) 0%, rgba(233, 232, 70, 0.21) 48%, rgba(242, 183, 133, 0.21) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about_2025strength-title {
	position: relative;
	z-index: 1;
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.04em;
	padding-left: 40px;
	margin-bottom: 68px;
}

.about_2025strength-title::after {
	position: absolute;
	bottom: -16px;
	left: -36px;
	z-index: 1;
	width: 370px;
	height: 55px;
	background: url('../img/about_2025/title_strength_deco.webp') no-repeat;
	background-size: contain;
	content: '';
}

.about_2025strength-list {

}

.about_2025strength-list > li {
	display: flex;
	gap: calc(58 / 1150 * 100%);
	position: relative;
	z-index: 1;
	padding: 70px 0;
}

.about_2025strength-list > li:first-of-type {padding: 0 0 70px;}
.about_2025strength-list > li:last-of-type {padding-bottom: 160px;}
.about_2025strength-list > li:nth-of-type(even)::before {
	position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    z-index: -1;
    width: 100vw;
    height: 100%;
    background: rgba(249, 249, 249, 0.6);
    content: '';
}

.about_2025strength-list-title {
	flex-shrink: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.about_2025strength-list > li:first-of-type .about_2025strength-list-title {margin-left: calc(58 / 1150 * 100%);}
.about_2025strength-list > li:nth-of-type(2) .about_2025strength-list-title {margin-left: calc(352 / 1150 * 100%);}
.about_2025strength-list > li:nth-of-type(3) .about_2025strength-list-title {margin-left: calc(146 / 1150 * 100%);}
.about_2025strength-list > li:nth-of-type(4) .about_2025strength-list-title {margin-left: auto;}

.about_2025strength-list-text {
	max-width: 545px;
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.667;
	text-align: justify;
	letter-spacing: 0.1em;
}


/* about_2025logo ---------------------------------------*/
.about_2025logo {
	position: relative;
	background: url('../img/about_2025/bg_logo.webp') no-repeat center center / cover;
	padding: 6.2vw 0 9vw;
}

.about_2025logo-deco {
	position: absolute;
	bottom: -1vw;
	right: -1vw;
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.06) 0%, rgba(233, 232, 70, 0.06) 48%, rgba(242, 183, 133, 0.06) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about_2025logo-top {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc(100 / 1150 * 100%);
	margin-bottom: 82px;
}

.about_2025logo-top-summary {
	flex-shrink: 0;
	max-width: 405px;
	width: 100%;
	margin-bottom: 6px;
}

.about_2025logo-top-title {
	margin-bottom: 30px;
}

.about_2025logo-top-title span {
	display: block;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #fff;
	margin-bottom: 4px;
}

.about_2025logo-top-title b {
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: #fff;
}

.about_2025logo-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.667;
	text-align: justify;
	letter-spacing: 0.08em;
	color: #fff;
}

.about_2025logo-top-image {
	max-width: 255px;
	width: 100%;
}

.about_2025logo-bottom {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc(50 / 1150 * 100%);
}

.about_2025logo-bottom-image {
	max-width: 225px;
	width: 100%;
	margin-left: calc(50 / 1150 * 100%);
}

.about_2025logo-bottom-summary {
	flex-shrink: 0;
	max-width: 405px;
	width: 100%;
}


/* about_2025company ---------------------------------------*/
.about_2025company {
	position: relative;
	padding: 17.6vw 0 130px;
}

.about_2025company-deco {
	position: absolute;
    top: 1.4vw;
    left: -1.8vw;
	width: calc(850 / 1440 * 100vw);
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.21) 0%, rgba(233, 232, 70, 0.21) 48%, rgba(242, 183, 133, 0.21) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about_2025company-title {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.02em;
	margin-bottom: 22px;
}

.about_2025company-list {
	display: flex;
	flex-wrap: wrap;
}

.about_2025company-list dt {
	flex-shrink: 0;
	width: 250px;
	padding: 15px 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05em;
	border-top: 1px solid #e3e3e3;
}

.about_2025company-list dd {
	max-width: 730px;
	width: calc(100% - 250px);
	padding: 15px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05em;
	border-top: 1px solid #e3e3e3;
}

.about_2025company-list-block {
	display: flex;
	gap: 46px;
}

.about_2025company-list-block > ul {

}

.about_2025company-list-block > ul > li {
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.03em;
}


/* about_2025message ---------------------------------------*/
.about_2025message {
	position: relative;
	z-index: 1;
	background-color: #070707;
	background-image: url('../img/about_2025/bg_message_01.webp');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: calc(833 / 1440 * 100vw) calc(899 / 1400 * 100vw);
	padding: 16vw 0 20.7vw;
}

.about_2025message::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: 100%;
	background-image: url('../img/about_2025/bg_message_02.webp');
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: calc(1041 / 1440 * 100vw) calc(751 / 1400 * 100vw);
	content: '';
}

.about_2025message-deco-01 {
	position: absolute;
	top: 0;
	right: -3vw;
	z-index: 2;
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.02em;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.06) 0%, rgba(233, 232, 70, 0.06) 48%, rgba(242, 183, 133, 0.06) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about_2025message-deco-02 {
	position: absolute;
	bottom: 0;
	left: -2vw;
	z-index: 2;
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.02em;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.06) 0%, rgba(233, 232, 70, 0.06) 48%, rgba(242, 183, 133, 0.06) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about_2025message-head {
	display: flex;
	gap: calc(36 / 1150 * 100%);
	margin-bottom: 132px;
}

.about_2025message-head-image {
	width: calc(397 / 1150 * 100%);
	height: fit-content;
	border-radius: 10px;
	overflow: hidden;
}

.about_2025message-head-summary {
	flex: 1;
	/* 「…コミュニティ運営に携わり、」が1行に収まる幅（実測481px） */
	max-width: 500px;
	width: 100%;
	margin-top: 8px;
}

.about_2025message-head-title {
	margin-bottom: 34px;
}

.about_2025message-head-title span {
	display: block;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff;
}

.about_2025message-head-title b {
	display: inline-block;
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: #fff;
}

.about_2025message-head-name {
	margin-bottom: 36px;
}

.about_2025message-head-name b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #fff;
	margin-bottom: 6px;
}

.about_2025message-head-name strong {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #fff;
}

.about_2025message-head-name small {
	margin-left: 16px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #fff;
}

.about_2025message-text {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.667;
	letter-spacing: 0.14em;
	color: #fff;
}

.about_2025message-list {
	border: 1px solid #fff;
	padding: 8px 36px 8px 16px;
	width: fit-content;
}

.about_2025message-list > li {
	position: relative;
	padding-left: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.667;
	letter-spacing: 0.14em;
	color: #fff;
}

.about_2025message-list > li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 12px;
	content: '・';
}

.about_2025message-shoulder {
	width: fit-content;
	margin: 0 auto 136px;
}

.about_2025message-lead {
	width: fit-content;
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.357;
	letter-spacing: 0.05em;
	color: #fff;
	margin-bottom: 20px;
}

.about_2025message-body {
	position: relative;
}

.about_2025message-body-block {
	width: 540px;
}

.about_2025message-body-block-01 {
	margin: 0 calc(410 / 1150 * 100%) min(calc(566 / 1230 * 100vw), 566px) auto;
}

.about_2025message-body-block-02 {
	margin: 0 auto min(calc(190 / 1230 * 100vw), 190px) calc(440 / 1150 * 100%);

}
.about_2025message-body-block-03 {
	margin: 0 auto 0 calc(290 / 1150 * 100%);

}

.about_2025message-title {
	margin-bottom: 22px;
}

.about_2025message-title span {
	display: block;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff;
	margin-bottom: -4px;
}

.about_2025message-title b {
	display: inline-block;
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: #fff;
}

.about_2025message-body-image {
	position: absolute;
	z-index: 1;
}

.about_2025message-body-image-inner {
	border-radius: 5px;
	overflow: hidden;
}

.about_2025message-body-image span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #fff;
	margin-top: 4px;
}

.about_2025message-body-image-01 {
	top: 4.6%;
	right: 0;
	width: calc(372 / 1150 * 100%);
}

.about_2025message-body-image-02 {
	top: 29%;
	left: 38%;
	width: calc(272 / 1150 * 100%);
}

.about_2025message-body-image-03 {
	top: 35.4%;
	right: 0;
	width: calc(341 / 1150 * 100%);
}

.about_2025message-body-image-04 {
	top: 74.2%;
	left: 0;
	width: calc(248 / 1150 * 100%);
}

.about_2025message-body-name {
	margin: 22px auto 0 calc(calc(280 / 1150 * 100%) + 298px);
	width: fit-content;
}

.about_2025message-body-name span {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.643;
	letter-spacing: 0.05em;
	color: #fff;
}

.about_2025message-body-name-image {
	margin: -4px 0 0 110px;
	width: 170px;
}


/* about_2025creator ---------------------------------------*/
.about_2025creator {
	position: relative;
	z-index: 1;
	padding: 5.2vw 0 126px;
	margin-bottom: 100px;
}

.about_2025creator-deco {
	position: absolute;
	top: 2vw;
	right: -3vw;
	z-index: 2;
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.06) 0%, rgba(233, 232, 70, 0.06) 48%, rgba(242, 183, 133, 0.06) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about_2025creator-title {
	width: fit-content;
	margin: 0 auto 60px;
}

.about_2025creator-title span {
	display: block;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.035em;
	margin-bottom: -6px;
	padding: 0 10px;
}

.about_2025creator-title b {
	display: block;
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 0 10px 9px;
}

.about_2025creator-lead {
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.357;
	text-align: center;
	letter-spacing: 0.05em;
	margin-bottom: 32px;
}

.about_2025creator-text {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.667;
	text-align: center;
	letter-spacing: 0.03em;
	margin-bottom: 120px;
}

.about_2025creator-list {

}

.about_2025creator-list > li {
	display: flex;
	gap: calc(36 / 1150 * 100%);
}

.about_2025creator-list > li + li{
	margin-top: 50px;
}

.about_2025creator-list-image {
	flex-shrink: 0;
	width: calc(204 / 1150 * 100%);
	height: fit-content;
	border-radius: 5px;
	overflow: hidden;
}

.about_2025creator-list > li:first-of-type .about_2025creator-list-image {margin-left: calc(90 / 1150 * 100%);}
.about_2025creator-list > li:nth-of-type(2) .about_2025creator-list-image {margin-left: calc(220 / 1150 * 100%);}
.about_2025creator-list > li:nth-of-type(3) .about_2025creator-list-image {margin-left: calc(160 / 1150 * 100%);}
.about_2025creator-list > li:nth-of-type(4) .about_2025creator-list-image {margin-left: calc(260 / 1150 * 100%);}
.about_2025creator-list > li:nth-of-type(5) .about_2025creator-list-image {margin-left: calc(370 / 1150 * 100%);}

.about_2025creator-list-summary {
	margin-top: 6px;
	max-width: 476px;
    width: 100%;
}

.about_2025creator-list-name {
	margin-bottom: 16px;
}

.about_2025creator-list-name b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.about_2025creator-list-name strong {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.about_2025creator-list-name small {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.about_2025creator-list-text {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.643;
	letter-spacing: 0.1em;
}


/* pc only */
@media screen and (min-width: 768px) {
	.sp {
		display: none !important;
	}
}


/* large pc */
@media screen and (min-width: 1441px) {
}


/* small pc */
@media screen and (min-width: 768px) and (max-width: 1400px) {
	.about_2025kv {
		min-height: 86vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1230px) {
	.indexvoice-list-client::before, .indexvoice-list-client::after, .servicestrength-list-point::before, .servicestrength-list-point::after {
		left: -40px;
		width: calc(40px + calc(100% * 60 / 55));
	}

	.indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::before, .indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::after, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::before, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::after {
		right: -40px;
		left: unset;
	}

	.indexportfolio-list > li {
		position: relative;
		margin-bottom: 12vw;
	}

	.indexportfolio-list > li::before {
		bottom: -8vw;
	}

	.indexportfolio-list-flyer, .indexportfolio-list-web {
		max-width: 1150px;
		padding: 0 115px;
	}

	.footer-nav-list-child {
		height: 340px;
	}

	.about_2025kv {
		min-height: 90vw;
	}

}

@media screen and (min-width: 768px) and (max-width: 1100px) {
	.header-wrap {
		right: 30px;
	}

	.fixedheader-wrap {
		right: 30px;
	}

	.gnav-list > li:nth-of-type(n+2) {
		margin-left: 5vw;
	}

	.indexkv-image {
		background-position: right center;
	}

	.indexkv-title {
		left: 10%;
		width: 37vw;
	}

	.footer-nav-list > li > a,
	.footer-nav-list-sub > a {
		font-size: 1.6rem;
	}

	.footer-nav-list-child {
		height: 320px;
	}

	::-webkit-full-page-media, :future, :root .footer-nav-list-child.-large {
		width: 395px;
	}

	::-webkit-full-page-media, :future, :root .footer-nav-list-child.-medium {
		width: unset;
	}

	.footer-nav-list-child > li {
		margin: 14px 15px;
		font-size: 1.2rem;
	}

	.servicetab-item a {
		font-size: 1.4rem;
	}

	.about_2025kv {
		min-height: 96vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
	.header-logo-bg {
		top: -50px;
		left: -130px;
		width: 348px;
	}

	.header-logo img {
		width: 100px;
		height: 70px;
	}

	.gnav-list > li:nth-of-type(n+2) {
		margin-left: 4vw;
	}

	.indexservice-list > li, .service-list > li {
		width: 48%;
		margin-bottom: 30px;
	}

	.indexservice-list-title, .service-list-title {
		font-size: 2.4rem;
	}

	.indexservice-list-content, .service-list-content {
		padding: 0 20px;
	}

	.indexfuture::after {
		top: -50px;
		left: -130px;
		width: 348px;
		height: 268px;
	}

	.indexskill-list-img, .servicecontent-similarities-list-img {
		width: 25%;
		margin-left: 5%;
	}

	.indexskill-list-title, .servicecontent-similarities-list-title {
		width: 75%;
		margin-right: 5%;
		font-size: 1.7rem;
	}

	.indexclient {
		padding: 100px 0 200px;
	}

	.indexportfolio::before {
		top: -100px;
		width: 20vw;
		height: auto;
		aspect-ratio: 636/2435;
	}

	.footer-nav-list-child {
		height: 355px;
	}

	/*page-about*/
	.aboutus-bg img {
		height: 800px;

		object-fit: cover;
	}

	.strength-list-title {
		width: 240px;
		height: 240px;
	}

	.strength-list-title figure {
		margin: 65px 0 15px;
	}

	.strength-list-content {
		width: calc(100% - 5% - 240px - 20px);
	}

	.strength-list > li:first-of-type .strength-list-space, .strength-list > li:nth-of-type(2) .strength-list-space {
		height: 140px;
	}

	.strength-list > li:first-of-type .strength-list-image {
		width: 80px;
	}

	.strength-list > li:nth-of-type(2) .strength-list-image {
		width: 220px;
	}

	.strength-list > li:nth-of-type(3) .strength-list-space {
		height: 140px;
	}

	.strength-list > li:nth-of-type(3) .strength-list-image {
		width: 120px;
	}

	.strength-list-text {
		margin-top: 20px;
	}

	.about_2025kv {
		min-height: 108vw;
	}

	.about_2025kv_wrapper {
		top: 50px;
	}

	.about_2025message-body-block {
		width: calc(740 / 1150 * 100%);
	}

	.about_2025message-body-block-02 {
		margin: 0 auto min(calc(190 / 1230 * 100vw), 190px) calc(400 / 1150 * 100%);
	}

	.about_2025message-body-image-02 {
		top: 33.5%;
		left: 23%;
	}

	.about_2025message-body-name {
		margin: 22px auto 0 calc(600 / 1150 * 100%);
	}
}

@media screen and (min-width: 768px) and (max-width: 850px) {
	.gnav-list {
		font-size: 1.3rem;
	}

	.footer-top-inner {
		padding: 0 25px;
	}

	.about_2025kv {
		min-height: 116vw;
	}

	.about_2025company-list dt {
		width: 200px;
	}

	.about_2025company-list dd {
		width: calc(100% - 200px);
	}
}


/* sp only */
@media screen and (max-width: 767px) {
	/* base ---------------------------------------*/
	/* common item ---------------------------------------*/
	.pc {
		display: none !important;
	}

	/* layout ---------------------------------------*/
	.inner {
		max-width: 540px;
		padding: 0 20px;
	}

	/* header ---------------------------------------*/
	.header {
		position: fixed;
		background: unset;
	}

	.header-inner {
	}

	.header-logo img {
		top: 20px;
		left: 16px;
		width: auto;
		height: 40px;
	}

	.header-logo-bg {
		opacity: .9;
		top: -15px;
		left: -55px;
		width: 174px;
	}

	.header-wrap {
		display: contents;
	}

	#openmenu {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 99999;
		width: 60px;
		height: 60px;
		overflow: hidden;
		border-radius: 0 0 0 4px;
		box-shadow: -1px -1px 1px 0 rgba(10,2,4,.37), 1px 1px 1px 0 rgba(10,2,4,.37) inset, 1px 1px 1px 0 rgba(255,255,255,.37), -1px -1px 1px 0 rgba(255,255,255,.37) inset;
		background: rgba(255, 255, 255, .8);
	}

	#openmenu span {
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 2px;
		background: var(--text-color);
		content: '';
		transition: all .25s ease;
	}

	#openmenu span:nth-child(1) {
		top: 22px;
	}

	#openmenu span:nth-child(2) {
		top: 28px;
	}

	#openmenu span:nth-child(3) {
		top: 34px;
	}

	#openmenu.is-open span:nth-child(1) {
		top: 28px;
		transform: translateX(-50%) rotate(45deg);
	}

	#openmenu.is-open span:nth-child(2) {
		opacity: 0;
	}

	#openmenu.is-open span:nth-child(3) {
		top: 28px;
		transform: translateX(-50%) rotate(-45deg);
	}

	.bodyfixed {
		position: fixed;
		width: 100%;
		height: 100%;
	}


	/* fixedheader ---------------------------------------*/
	.fixedheader {
		display: none;
	}

	/* gnav ---------------------------------------*/
	.gnav {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		transform: translate3d(100%, 0, 0);
		width: 100%;
		height: 100dvh !important;
		overflow: auto;
		border: none;
		background: var(--bg-color);
		transition: all .25s ease;
	}

	#gnav.is-active {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.gnav-bg-sp {
		background: url(../img/index/top_bg.png) no-repeat;
		background-size: 160%;

		background-position: 0 0;
	}

	.gnav-list {
		display: block;
		padding: 90px 40px 60px 60px;
	}

	.gnav-list > li > a, .gnav-list > li {
		font-size: 2rem;
	}

	.gnav-list > li {
		display: block;
		margin-bottom: 25px;
		line-height: 1.5;
	}

	.gnav-list > li a {
		display: inline-block;
	}

	.gnav-list > li:nth-of-type(n+2) {
		margin-left: 0;
	}

	.gnav-list > li > a:hover {
		color: var(--text-color);
	}

	.has-child {
		position: unset;
		padding-right: 0;
	}

	.has-child:after {
		display: none;
	}

	.gnav-list-title {
		position: relative;
	}

	.gnav-list-title::before,
	.gnav-list-title::after {
		position: absolute;
		content: '';
		top: 50%;
		right: 0;
		height: 2px;
		width: 14px;
		border-radius: 1px;
		background: var(--ac-color-orange);
		transform: translateY(-50%) rotate(90deg);
		transition: all 0.25s ease-in-out;
	}

	.gnav-list-title::before {
		transform: translateY(-50%) rotate(90deg);
	}

	.gnav-list-title::after {
		transform: translateY(-50%);
	}

	.gnav-list-title.is-active::before {
		transform: rotate(180deg);
	}

	.gnav-list-title.is-active::after {
		opacity: 0;
	}

	.js-ac-target {
		display: none;
	}

	.js-ac-trigger.is-active .js-ac-target {
		display: block;
	}

	.gnav-subchild {
		position: unset;
		width: unset;
		height: unset;
	}

	.gnav-sublist {
		display: block;
		visibility: visible;
		opacity: 1;
		position: unset;
		margin: 0;
		padding: 10px 0 0 20px;
		box-shadow: none;
		background: none;
	}

	.gnav-sublist > li {
		margin-bottom: 10px;
		font-size: 1.6rem;
	}

	.gnav-sublist > li > a:hover {
		color: var(--text-color);
	}


	/* kv ---------------------------------------*/
	.indexkv {
		max-height: unset;
		aspect-ratio: 375 / 580;
	}

	.indexkv-image {
		background: url(../img/index/kv_2026_sp.webp) no-repeat;
		background-size: cover;
		aspect-ratio: 821 / 1364;
	}

	.indexkv-title {
		top: unset;
		right: 0;
		bottom: 18%;
		left: 0;
		transform: unset;
		width: 74vw;
		margin: 0 auto;
	}

	.kvlink-side {
		top: 60px;
		right: 0;
		width: 25px;
		height: 60vh;
	}

	.kvlink-side-fb {
		padding: 38px 0;
	}

	.kvlink-side-fb::before {
		top: 42px;
		left: -18px;
		width: 6px;
		height: 13px;
	}

	.kvlink-side-insta {
		padding: 38px 0;
	}

	.kvlink-side-insta::before {
		top: 42px;
		left: -20px;
		width: 13px;
		height: 13px;
	}

	.kvlink-copyright small {
		top: 50%;
		left: -137px;
		font-size: 1.0rem;
	}

	.kvlink-headline {
		bottom: 2%;
		left: 10px;
		width: calc(100vw - 20px);
		padding: 10px 0;
		border-radius: 8px;
	}

	.kvlink-headline a dl {
		flex-direction: column;
	}

	.kvlink-headline a dl dt {
		padding: 0 5px 5px 15px;
		font-size: 1.4rem;
	}

	.kvlink-headline a dl dt::after {
		top: 6px;
		right: unset;
		left: 158px;
		transform: unset;
		width: 1px;
		height: 15px;
	}

	.kvlink-headline a dl dd {
		padding: 0 5px 0 80px;
		font-size: 1.4rem;
	}


	/* fixedlink ---------------------------------------*/
	.fixedlink {
		right: unset;
		left: 0;
	}

	.fixedlink-list-item {
		width: 50vw;
		height: 50px;
		border-radius: 12px 12px 0 0;
	}

	.fixedlink-list-item a {
		flex-direction: row;
	}

	.fixedlink-list-item:first-of-type {
		right: unset;
		bottom: 0;
		left: 0;
	}

	.fixedlink-list-item:nth-of-type(2) {
		right: unset;
		bottom: 0;
		left: 50vw;
	}

	.fixedlink-list-img {
		margin-right: 10px;
	}

	.fixedlink-list-img img {
		height: 30px;
		margin-bottom: 0;
	}


	/* section-title ---------------------------------------*/
	.section-title {
		margin: 0 auto 30px;
		font-size: 1.2rem;
		line-height: 1.5;
		letter-spacing: .3em;
	}

	.section-title figure {
		margin: 0 auto;
	}

	.section-title img {
		width: 100%;
		margin-bottom: 10px;
	}

	.section-title.section-title-renewal {
		top: 4vw;
		margin: 0;
	}

	.section-title strong {
		font-size: calc(55 / 375 * 100vw);
	}
	
	.section-title-sub {
		font-size: 18px;
		padding-left: 20px;
		margin-bottom: 32px;
	}
	
	.section-title-sub::after {
		bottom: -6px;
		left: -36px;
		width: 272px;
		height: 40px;
	}

	.section-title-sub + .section-text {
		padding-left: 10px;
	}
	
	.section-lead {
		margin-bottom: 12px;
		font-size: 20px;
	}

	/* indexmessage ---------------------------------------*/
	.indexmessage {
		height: unset;
		min-height: 400px;
		background-position: right;
	}

	.indexmessage-block {
		position: unset;
		padding: 130px 20px 70px;
		width: 100%;
		transform: unset;
		margin: 0 auto;
	}

	.indexmessage-title {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.indexmessage-text {
		font-size: 14px;
	}

	/* indexvision ---------------------------------------*/
	.indexvision {
		padding: 20vw 0 34vw;
		background: rgba(234, 161, 60, 0.6);
	}

	.indexvision::before {
		background: linear-gradient(170deg, rgba(234, 161, 60, 0.4) 0%, rgba(234, 161, 60, 0.6) 20%, rgba(234, 161, 60, 0.9) 40%, rgba(234, 161, 60, 1) 100%);
	}

	.indexvision::after {
		width: calc(280 / 375 * 100vw);
	}

	.indexvision-deco {
		top: 2vw;
		right: calc(-4 / 375 * 100vw);
		font-size: calc(55 / 375 * 100vw);
	}

	.indexvision-title {
		padding-left: 0;
		margin-bottom: 24px;
	}

	.indexvision-title span {
		font-size: 16px;
	}

	.indexvision-title b {
		font-size: 20px;
	}

	.indexvision-summary {
		margin: 0 auto 0 2%;
		width: 100%;
	}

	.indexvision-subtitle {
		margin-bottom: 24px;
		font-size: 18px;
	}


	/* indexservice, pageservice ---------------------------------------*/
	.indexservice, .pageservice {
		background-size: 160%;
	}

	.indexservice {padding: 20vw 0 60px;}
	.pageservice {padding: 130px 0 100px;}

	.indexservice .section-title figure, .pageservice .section-title figure {
		width: 100px;
	}

	.indexservice-list, .service-list {
		display: block;
		justify-content: center;
	}

	.indexservice-list {margin-top: 60px;}

	.indexservice-list > li, .service-list > li {
		width: 100%;
		margin: 0 auto 30px;
		padding: 20px 0 0;
	}

	.indexservice-list-item:last-of-type, .service-list-item:last-of-type {
		margin-bottom: 0;
	}

	.indexservice-list-title, .service-list-title {
		padding: 0 20px 20px;
		font-size: 1.8rem;
	}

	.indexservice-list-content, .service-list-content {
		align-items: center;
		padding: 0 20px;
	}

	.indexservice-list-content-text, .service-list-content-text {
		width: 42.6vw;
		max-width: 300px;
		margin-right: 2vw;
		margin-bottom: 46px;
	}

	.indexservice-list-content-img, .service-list-content-img {
		margin-bottom: 46px;
		margin-left: 2vw;
	}

	.indexservice-list-content-img img, .service-list-content-img img {
		width: 120px;
		max-width: 32vw;
	}


	/* indexinformation ---------------------------------------*/

	.indexinformation {
		padding-bottom: 100px;
	}

	.indexinformation .section-title figure {
		width: 170px;
	}

	.indexinformation .section-title strong{
		font-size: calc(48 / 375 * 100vw);
	}

	.indexinformation-container {
		display: block;
		padding: 18vw 0 60px;
		margin-bottom: 70px;
		background-size: 400%;
		background-position: bottom left 7%;
	}

	.indexinformation-key {
		width: 100%;
		margin-bottom: 3vw;
	}

	.indexinformation-key-title {
		margin: 0 auto 0 calc(50vw + 10px);
		font-size: 1.8rem;
		white-space: nowrap;
	}

	.indexinformation-key-text {
		margin: -185px calc(50vw + 12px) 0 auto;
		font-size: 1.4rem;
		line-height: 1.5;
		white-space: nowrap;
	}

	.indexinformation-news {
		width: 100%;
		padding: 0 calc(50% - 270px);
	}

	.indexinformation-news::before {
		top: -160px;
		width: 100vw;
		max-width: 500px;
	}

	.indexinformation-news-list {
		width: 100%;
	}

	.indexinformation-news-list > li {
		background-image: linear-gradient(to right, var(--ac-color-gray), var(--ac-color-gray) 6px, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0) 6px);
		background-size: 12px 1.5px;
	}

	.indexinformation-news-list > li a {
		padding: 20px 10px;
	}

	.indexinformation-news-list > li a dl dt {
		width: 90px;
		font-size: 1.3rem;
	}

	.indexinformation-news-list > li a dl dd {
		width: calc(100% - 90px);
		font-size: 1.3rem;
	}

	.indexinformation-list {
		display: block;
	}

	.indexinformation-list > li {
		width: 100%;
		margin-bottom: 30px;
		padding: 35px 30px;
	}

	.indexinformation-list > li:last-of-type {
		margin-bottom: 0;
	}

	.indexinformation-list-image {
		height: 80px;
	}

	.indexinformation-list-image img {
		width: auto;
		height: 80px;
	}

	.indexinformation-list-title {
		margin-bottom: 16px;
		font-size: 1.8rem;
	}

	.indexinformation-list-text {
		font-size: 1.4rem;
	}

	.indexinformation-news-btn {
		margin: 36px auto 0;
		width: unset;
		text-align: center;
}


	/* indexfuture ---------------------------------------*/
	.indexfuture {
		width: 100vw;
		height: 100vh;
	}

	.indexfuture::before {
		height: 100vh;
		margin-top: 0;
	}

	.indexfuture::after {
		opacity: .9;
		top: -15px;
		left: -55px;
		width: 174px;
		height: 134px;
	}

	.indexfuture-title {
		top: 100px;
		left: 12%;
		width: 232px;
	}

	.indexfuture-text {
		top: 180px;
		left: 12%;
		width: 80%;
		font-size: 1.4rem;
	}


	/* indexinterlude ---------------------------------------*/
	.indexinterlude {
		height: calc(95vh - 70px);
	}

	.indexinterlude-title {
		top: calc(50% - 160px);
		left: 7%;
		font-size: calc(48 / 375 * 100vw);
	}

	.indexinterlude-summary {
		top: calc(50% + 30px);
		left: 10%;
		width: 80%;
	}


	/* indexskill ---------------------------------------*/
	.indexskill {
		padding: 22vw 0 50px;
	}

	.indexskill .section-title figure {
		width: 70px;
	}

	.indexskill-list {
		gap: 6%;
		margin-top: 50px;
	}

	.indexskill-list li {
		width: 47%;
		height: 70px;
		margin-bottom: 6%;
	}

	.indexskill-list-img {
		width: 25%;
		margin-left: 5%;
	}

	.indexskill-list-img img {
		width: 100%;
	}

	.indexskill-list-title {
		width: 80%;
		padding-right: 5%;
		font-size: 1.5rem;
	}

	/* indexvoice ---------------------------------------*/
	.indexvoice {
		padding: 50px 0;
	}

	.indexvoice .section-title figure {
		width: 75px;
	}

	.indexvoice-list > li {
		display: block;
		margin-bottom: 40px;
	}

	.indexvoice-list-img {
		width: 100%;
		margin-bottom: 20px;
	}

	.indexvoice-list-summary {
		width: 100%;
		padding: 0 10px;
	}

	.indexvoice-list-client {
		margin-bottom: 20px;
		font-size: 1.6rem;
		line-height: 1.6;
	}

	.indexvoice-list-client::before {
		left: calc(-50vw + 240px);
		width: 100vw;
	}

	.indexvoice-list-client::after {
		left: calc(-50vw + 240px);
		width: 100vw;
	}

	.indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::before, .indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::after {
		left: calc(-50vw + 240px);
	}

	.indexvoice-list-title {
		margin-bottom: 10px;
		font-size: 1.8rem;
	}

	.indexvoice-list-text {
	}

	/* indexpres ---------------------------------------*/
	.indexpres { 
		padding: 20% 0;
		background: url(../img/index/pres_bg.webp) no-repeat left 9% center / cover;
	}

	.indexpres-block { 
		display: block;
	}

	.indexpres-image { 
		width: 60%;
		margin: 0 auto 40px;
	}

	.indexpres-summary { 
		width: 100%;
	}

	.indexpres-title {
		margin-bottom: 20px;
	}

	.indexpres-title-job { 
		margin-bottom: 4px;
	}
	
	.indexpres-title b { 
		font-size: 2.4rem;
	}
	
	.indexpres-title small { 
		margin-left: 12px;
	}


	/* indexclient ---------------------------------------*/
	.indexclient {
		padding: 20vw 0 80px;
	}

	.indexclient .section-title figure {
		width: 85px;
	}

	.indexclient-summary {
    margin-left: 0;
}

	.indexclient-slick-container {
		margin: 30px auto 0;
	}

	.indexclient-slick-wrapper:not(:last-of-type) {
		margin-bottom: 20px;
	}

	.slick-slide {
		margin: 0 10px;
	}

	/* indexportfolio ---------------------------------------*/
	.indexportfolio {
		padding: 20vw 0 100px;
	}

	.indexportfolio .inner {
		max-width: unset;
	}

	.indexportfolio .section-title figure {
		width: 120px;
	}

	.indexportfolio::before {
		top: -50px;
		width: 25vw;
		height: auto;

		aspect-ratio: 636/2435;
	}

	.indexportfolio-list {
		margin: 50px auto 0;
	}

	.indexportfolio-list > li {
		position: relative;
		margin-bottom: 12vw;
	}

	.indexportfolio-list > li:last-of-type {
		margin-bottom: 20vw;
	}

	.indexportfolio-list > li::before {
		bottom: -8vw;
	}

	.indexportfolio-list-flyer {
		padding: 0 12vw;
	}

	.indexportfolio-list-web {
		padding: 0 10vw;
	}


	/* indexstaff ---------------------------------------*/
	.indexstaff {
		padding: 80px 0 50px;
	}

	.indexstaff .section-title figure {
		width: 70px;
	}

	.indexstaff .inner {
		max-width: 540px;
	}

	.indexstaff .section-title {
		top: -17px;
	}

	.indexstaff-list > li {
		display: block;
		margin-bottom: 40px;
	}

	.indexstaff-list-img {
		max-width: unset;
		margin-bottom: 20px;
		width: 100%;
	}

	.indexstaff-list-summary {
		width: 100%;
		padding: 0 10px;
	}

	.indexstaff-list-jobtitle {
		margin-bottom: 16px;
		font-size: 1.6rem;
		line-height: 1.8;
	}

	.indexstaff-list-description {
		font-size: 1.4rem;
	}


	/* indexcontact ---------------------------------------*/
	.indexcontact {
		padding: 50px 0 50px;
	}

	.indexcontact .section-title figure {
		width: 110px;
	}


	/* linelink ---------------------------------------*/
	.linelink {
		padding-bottom: 60px;
	}

	.linelink-block {
		display: block;
		padding: 20px 32px;
	}

	.linelink-announce {
		width: 100%;
		padding-right: 0;
		padding-bottom: 20px;
		text-align: center;
	}

	.linelink-announce::before, .linelink-announce::after {
		top: unset;
		left: -16px;
		width: calc(100% + 32px);
		height: 2px;
		content: '';
	}

	.linelink-announce::before {
		right: unset;
		bottom: 0;
		background: linear-gradient(to right, rgba(202, 201, 201, 1) 0%, rgba(202, 201, 201, 1) 50%, rgba(202, 201, 201, .5) 100%);
	}

	.linelink-announce::after {
		right: unset;
		bottom: -2px;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
	}

	.linelink-announce-btn {
		right: 37%;
		bottom: 8%;
	}

	.linelink-info {
		width: fit-content;
		margin: 0 auto;
		padding-top: 20px;
		padding-left: 0;
	}

	.linelink-info-tel {
		display: block;
	}


	/* breadcrumbs ---------------------------------------*/
	.crumbs-nav {
		padding: 20px;
	}

	/* footer ---------------------------------------*/
	.footer-top {
		padding: 20px 0;
	}

	.footer-nav-list {
		display: block;
	}

	.footer-nav-list > li {
		margin-bottom: 16px;
	}

	.footer-nav-list > li:last-of-type {
		margin-bottom: 0;
	}

	.footer-nav-list-sub {
		margin-bottom: 16px;
	}

	.footer-nav-list > li > a, .footer-nav-list-sub > a {
		padding-right: 0;
		font-size: 1.6rem;
	}

	.footer-nav-list-child {
		flex-direction: row;
		height: unset;
	}

	::-webkit-full-page-media, :future, :root .footer-nav-list-child.-large,
	::-webkit-full-page-media, :future, :root .footer-nav-list-child.-medium {
		width: 100%;
	}

	.footer-nav-list-child > li {
		width: 240px;
		margin: 12px 0 12px 20px;
		white-space: nowrap;
	}

	.footer-nav-list-child > li > a {
		position: relative;
		padding-left: 16px;
	}

	.footer-nav-list-child > li > a::before {
		position: absolute;
		top: 3px;
		left: 0;
		content: '〉';
	}

	.footer-bottom {
		padding: 35px 20px 66px;
	}

	.footer-bottom-logo {
		width: 100px;
		margin: 0 auto 30px;
	}

	.footer-bottom-list {
		display: block;
		margin-bottom: 20px;
		text-align: center;
	}

	.footer-bottom-list > li {
		padding-right: 0;
	}

	.footer-bottom-list > li:not(:last-child)::after {
		display: none;
	}


	/* btn ---------------------------------------*/
	.btn {
	}

	.btn-large {
		width: 80%;
		height: 54px;
		border-radius: 60px;
		font-size: 1.8rem;
		line-height: 54px;
	}

	.btn-large .arrow-right-orange, .btn-large .arrow-right-green, .btn-large .arrow-right-black {
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}

	.btn-large .arrow-right-orange {
		border-left: 20px solid var(--ac-color-orange);
	}

	.btn-large .arrow-right-green {
		border-left: 20px solid var(--ac-color-green);
	}

	.btn-large .arrow-right-black {
		border-left: 20px solid var(--text-color);
	}

	.btn-large .arrow-left-black {
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-right: 20px solid var(--text-color);
	}

	.btn-large.btn:hover .arrow-right-black {
		border-left: 20px solid var(--ac-color-orange);
	}

	.btn-large.btn:hover .arrow-left-black {
		border-right: 20px solid var(--ac-color-orange);
	}

	/* 404 ---------------------------------------*/
	.notfound {
		padding: 50px 0 120px;
		background-size: 160%;
	}

	.notfound-title {
		margin-bottom: 50px;
		font-size: 2.4rem;
	}

	.notfound-text {
		margin-bottom: 50px;
		font-size: 1.6rem;
	}


	/* page ---------------------------------------*/
	.pagekv {
		position: relative;
		z-index: 0;
	}

	.pagekv-bg img {
		height: 320px;
		min-height: unset;
	}


	.pagekv .kvlink-side {
		height: 250px;
		min-height: unset;
		background: linear-gradient(rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0));
	}

	.pagekv .kvlink-copyright small {
		top: 180px;
		left: -85px;
		line-height: 1.6;
		text-align: center;
	}

	.pagecontent {
		padding: 50px 0 100px;
		background-size: 160%;
	}

	.pagecontent .wrapper-single {
		margin: 0 0 60px;
	}




	/* about ---------------------------------------*/
	/*aboutus*/
	.aboutus {
		padding-bottom: clamp(.1vw, 5vw, 10vw);
	}

	.aboutus-bg img {
		height: 1000px;

		object-fit: cover;
	}

	.aboutus-wrapper {
		top: 130px;
		right: 13%;
		left: 13%;
	}

	.aboutus .section-title {
		margin: 0 auto 30px;
	}

	.aboutus .section-title figure {
		width: 130px;
		margin: 0 auto 0 0;
	}

	.aboutus-text {
		margin-bottom: 20px;
		text-shadow: 0 0 2px rgba(0, 0, 0, .4);
	}


	/*strength*/
	.strength {
		padding: 70px 0 100px;
	}

	.strength .section-title figure {
		width: 150px;
	}

	.strength-list {
		padding: 0 2.7vw;
	}

	.strength-list > li {
		display: block;
		margin-bottom: 80px;
	}

	.strength-list-title {
		width: 185px;
		height: 185px;
		margin: 50px auto 30px;
	}

	.strength-list-title figure {
		margin: 60px 0 5px;
	}

	.strength-list > li:first-of-type .strength-list-title figure {
		width: 14.4px;
	}

	.strength-list > li:nth-of-type(2) .strength-list-title figure {
		width: 21.9px;
	}

	.strength-list > li:nth-of-type(3) .strength-list-title figure {
		width: 19.4px;
	}

	.strength-list-title span {
		font-size: 1.8rem;
	}

	.strength-list-content {
		width: 100%;
	}

	.strength-list > li:first-of-type .strength-list-space {
		height: 70px;
	}

	.strength-list > li:first-of-type .strength-list-image {
		width: 60px;
	}

	.strength-list > li:nth-of-type(2) .strength-list-space {
		height: 35px;
	}

	.strength-list > li:nth-of-type(2) .strength-list-image {
		width: 150px;
	}

	.strength-list > li:nth-of-type(3) .strength-list-space {
		height: 70px;
	}

	.strength-list > li:nth-of-type(3) .strength-list-image {
		width: 80px;
	}

	.strength-list-text {
		margin-top: 0;
		font-size: 1.6rem;
	}

	/*concept*/
	.concept {
		padding: 0 0 50px;
	}

	.concept:before {
		top: 0;
		right: -5%;
		left: unset;
		width: 140%;
		height: auto;
		background-size: cover;

		aspect-ratio: 1440 / 684;
	}

	.concept-wrapper {
		margin: 0 auto 60px;
		padding: 42vw 2.7vw 0;
	}

	.concept-lead {
		margin-bottom: 30px;
		font-size: 1.8rem;
	}

	.concept-lead span {
		margin-left: 50px;
	}

	.concept-text {
		font-size: 1.4rem;
	}

	.concept-text + .concept-text {
		margin-top: 20px;
	}

	/*company*/
	.company {
		position: relative;
		padding: 0 0 50px;
	}

	.company table tr td:first-of-type {
		width: 30%;
	}

	/* 会社概要：項目名（電話番号・事業内容）を1行に、内容は文節で折り返す */
	#company table {
		word-break: auto-phrase;
	}

	#company table tr td:first-of-type {
		white-space: nowrap;
	}


	/* page-service ---------------------------------------*/
	.pageservice {
		padding: 50px 0 112px;
	}

	.servicetab {
		position: relative;
	}

	.servicetab.sp-border::after {
		position: absolute;
		bottom: 78px;
		left: 0;
		width: 100%;
		height: 2px;
		background: #E1E1E1;
		content: '';
	}

	.servicetab-title {
		margin-bottom: 40px;
		font-size: 2.4rem;
	}

	.servicetab-list {
		flex-wrap: wrap;
		gap: 40px 20px;
		padding: 0 20px;
	}

	.servicetab-item {
		width: 27%;
	}

	.servicetab-item a {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3px 10px;
		border-radius: 8px 8px 0 0;
		font-size: 1.4rem;
		height: 40px;
	}

	.service-container {
	}


	/* servicecrumbs */
	.servicecrumbs {
	}

	.servicecrumbs-nav {
		padding: 30px 0 50px;
	}

	.servicecrumbs-nav ol {
		display: flex;
	}

	.servicecrumbs-nav ol > li {
		padding-right: 20px;
		font-size: 1.1rem;
		line-height: 1;
		letter-spacing: .2em;
	}

	.servicecrumbs-nav ol > li:not(:last-child)::after {
		right: -1px;
	}


	/* servicedetail */
	.servicedetail {
		padding: 0 0 60px;
	}

	.servicedetail-title {
		display: block;
		margin-bottom: 20px;
	}

	.servicedetail-title figure {
		margin-top: 0;
	}

	.servicedetail-title-webproduction img {
		width: 120px;
	}

	.servicedetail-title-ecommerce img {
		width: 95px;
	}

	.servicedetail-title-flyer img {
		width: 95px;
	}

	.servicedetail-title-leaflet img {
		width: 55px;
	}

	.servicedetail-title-other img {
		width: 120px;
	}

	.servicedetail-title-video img {
		width: 45px;
	}

	.servicedetail-title-photo img {
		width: 90px;
	}

	.servicedetail-title-sns img {
		width: 160px;
	}

	.servicedetail-title-marketing img {
		width: 125px;
	}

	.servicedetail-title-lecturer img {
		width: 70px;
	}

	.servicedetail-title-event img {
		width: 130px;
	}

	.servicedetail-title-dx img {
		width: 130px;
	}

	.servicedetail-title-comics img {
		width: 145px;
	}

	.servicedetail-title span {
		font-size: 2.0rem;
	}

	.servicedetail-text {
		font-size: 1.4rem;
	}

	.servicedetail-list {
		flex-wrap: wrap;
		gap: 30px 10%;
	}

	.servicedetail-list > li {
		position: relative;
		width: 45%;
		max-width: unset;
	}

	.servicedetail-list > li::after {
		right: 14px;
		width: 12px;
		height: 7px;
	}

	.servicedetail-list > li a {
		width: 100%;
		height: 45px;
		padding: 13px 30px 0 15px;
		font-size: 1.4rem;
	}


	/* servicestrength */
	.servicestrength {
		padding: 50px 0;
	}

	.servicestrength-title {
		gap: 20px;
		margin-bottom: 30px;
	}

	.servicestrength-title figure {
		width: 120px;
	}

	.servicestrength-title span {
		padding-bottom: 8px;
		font-size: 1.2rem;
		letter-spacing: .3em;
	}

	.servicestrength-list > li {
		display: block;
		margin-bottom: 50px;
	}

	.servicestrength-list-img {
		width: 100%;
		margin-bottom: 10px;
	}

	.servicestrength-list-summary {
		width: 100%;
		padding: 0 10px;
	}

	.servicestrength-list-point {
		margin-bottom: 20px;
		font-size: 1.6rem;
		line-height: 1.6;
	}

	.servicestrength-list-point::before {
		left: calc(-50vw + 240px);
		width: 100vw;
	}

	.servicestrength-list-point::after {
		left: calc(-50vw + 240px);
		width: 100vw;
	}

	.servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::before, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::after {
		left: calc(-50vw + 240px);
	}

	.servicestrength-list-title {
		margin-bottom: 10px;
		font-size: 1.8rem;
	}

	.servicestrength-list-text {
	}


	/* servicecontent */
	.servicecontent {
		padding: 50px 0;
	}

	.servicecontent-title {
		gap: 20px;
		margin-bottom: 30px;
	}

	.servicecontent-title figure {
		width: 100px;
	}

	.servicecontent-title span {
		font-size: 1.2rem;
		letter-spacing: .3em;
	}

	.servicecontent-list {
		display: block;
	}

	.servicecontent-list > li {
		width: 100%;
		margin-bottom: 30px;
		padding: 35px 30px;
	}

	.servicecontent-list > li:last-of-type {
		margin-bottom: 0;
	}

	.servicecontent-list-image {
		height: 80px;
	}

	.servicecontent-list-image img {
		width: auto;
		height: 80px;
	}

	.servicecontent-list-title {
		margin-bottom: 16px;
		font-size: 1.8rem;
	}

	.servicecontent-list-text {
		font-size: 1.4rem;
	}

	.servicecontent-similarities-title {
		margin-bottom: 30px;
		font-size: 2.2rem;
	}

	.servicecontent-similarities-list {
		gap: 6%;
		margin-top: -10px;
	}

	.servicecontent-similarities-list li {
		width: 47%;
		height: 70px;
		margin-bottom: 6%;
	}

	.servicecontent-similarities-list-img {
		width: 25%;
		margin-left: 5%;
	}

	.servicecontent-similarities-list-img img {
		width: 100%;
	}

	.servicecontent-similarities-list-title {
		width: 80%;
		padding-right: 5%;
		font-size: 1.5rem;
	}


	/* serviceflow */
	.serviceflow {
		padding: 50px 0 ;
	}

	.serviceflow-title {
		gap: 20px;
		margin-bottom: 50px;
	}

	.serviceflow-title figure {
		width: 80px;
	}

	.serviceflow-title span {
		font-size: 1.2rem;
		letter-spacing: .3em;
	}

	.serviceflow-list {
		justify-content: space-between;
		gap: 0;
		max-width: 335px;
		margin: 0 auto;
	}

	.serviceflow-list > li {
		width: 180px;
		height: 180px;
	}

	.serviceflow-list > li:nth-of-type(even) {
		margin: -20px 0 -10px auto;
	}

	.serviceflow-list-image {
		height: 60px;
		margin: 0 0 10px;
	}

	.serviceflow-list-image img {
		width: auto;
		height: 100%;
	}

	.serviceflow-list-title {
		font-size: 1.6rem;
	}


	/* servicesportfolio */
	.serviceportfolio {
		padding: 40px 0 0;
	}

	.serviceportfolio-title {
		gap: 20px;
		margin-bottom: 30px;
	}

	.serviceportfolio-title figure {
		width: 120px;
	}

	.serviceportfolio-title span {
		padding-bottom: 8px;
		font-size: 1.2rem;
		letter-spacing: .3em;
	}

	.serviceportfolio-list {
	}


	/* privacy ---------------------------------------*/
	.terms {
		padding: 50px 0 112px;
		background-size: 160%;
	}

	.terms.privacy .section-title figure {
		width: 200px;
	}

	.terms.law .section-title figure {
		width: 70px;
	}

	.terms.tos .section-title figure {
		width: 220px;
	}

	.terms.maintenance .section-title figure {
		width: 310px;
	}

	.terms-lead {
		margin-bottom: 60px;
		font-size: 1.4rem;
		line-height: 1.8;
		text-align: justify;
	}

	.terms-list > li {
		margin-bottom: 50px;
	}

	.terms-list > li dl {
		display: block;
	}

	.terms-list > li dl dt {
		width: 100%;
	}

	.terms-list > li dl dd {
		font-size: 1.4rem;
	}

	.terms-list-title {
		margin-bottom: 10px;
		font-size: 1.8rem;
		letter-spacing: 0;
	}

	.terms-list-sub {
		margin: 10px 0;
		padding-left: 25px;
	}

	.privacy#primary table {
		margin: 20px 0 0 0;
	}

	.privacy#primary td {
		padding: .5em;
		font-size: 1.4rem;
	}

	.maintenance-table {
		margin-top: 30px;
	}

	.maintenance-table-inner {
		overflow: auto;
	}
	
	.maintenance-table table {
		width: 800px;
		margin-bottom: 20px;
	}
	
	.maintenance-table table tr th {
		font-size: 1.4rem;
		width: 25%;
		min-width: unset;
	}
	
	.maintenance-table table tr:first-of-type th {
		font-size: 1.6rem;
	}
	
	.maintenance-table table tr td {
		width: 25%;
	}

	.maintenance-table-text {
		font-size: 1.6rem;
	}


	/* archive ---------------------------------------*/
	.pagecontent#portfolio .section-title figure {
		width: 120px;
	}

	.pagecontent#information .section-title figure {
		width: 170px;
	}

	.pagecontent#blog .section-title figure {
		width: 70px;
	}

	.pagecontent#contact .section-title figure {
		width: 110px;
	}

	.time-tit {
		margin: 10px auto 0;
	}

	.archive-item .image img {
		max-height: 140px;
	}

	.archive-item {
		width: 47%;
		margin-right: 6%;
		margin-bottom: 40px;
	}

	.archive-item:nth-of-type(3n) {
		margin-right: 6%;
	}

	.archive-item:nth-of-type(2n), .archive-item:nth-of-type(4n) {
		width: 47%;
		margin-right: 0;
		margin-bottom: 40px;
	}

	/*category*/
	.category-title figure {
		width: 80px;
		margin: 0 auto;
	}

	/** ページネーション **/
	.wp-pagenavi {
		padding-top: 40px;
	}

	.wp-pagenavi span,
	.wp-pagenavi a {
    margin: 0 5px!important;
    width: 45px;
    line-height: 45px;
}

	/* single ---------------------------------------*/
	.map-flo {
        width: 100%;
        height: auto;
    }

	/* --- お問い合わせフォーム --- */
	/* デザインカスタマイズ */
	div.wpcf7 .contact-btn {
		margin-top: 30px;
	}

	div.wpcf7 .contact-btn p::after {
		border-left: 20px solid var(--text-color);
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}

	div.wpcf7 .contact-btn p:hover::after {
		border-left: 20px solid var(--ac-color-orange);
	}

	div.wpcf7 input.wpcf7-submit {
		font-size: 2rem;
	}


	/* page-template ---------------------------------------*/
	.page-wrapper {
		margin: 20px auto 50px;
	}

	.page-title h1 {
		font-size: 2.0rem;
		line-height: 1.8;
	}

	.page-image {
		/* border-radius: 12px; */
	}

	.page-entrybody > p {
		font-size: 1.5rem;
		margin-top: 20px;
	}

	.page-entrybody > ul,
	.page-entrybody > ol {
		margin-top: 20px;
		margin-left: 1.5em;
	}
	
	.page-entrybody li {
		font-size: 1.5rem;
	}

	.page-entrybody li + li {
		margin-top: 6px;
	}
	
	.page-entrybody > figure {
		/* border-radius: 12px; */
		margin: 20px auto 0;
	}

	.page-entrybody > h2,
	.page-entrybody > h3,
	.page-entrybody > h4 {
		margin-top: 20px;
	}

	.page-entrybody > h2 {
		font-size: 2rem;
	}
	
	.page-entrybody > h3 {
		font-size: 1.8rem;
	}
	
	.page-entrybody > h4 {
		font-size: 1.6rem;
	}

	/* about_2025 ---------------------------------------*/
	/* about_2025kv ---------------------------------------*/
	.about_2025kv-deco-01 {
		width: calc(1540 / 375 * 100vw);
		margin: 0 auto 4vw;
	}

	.about_2025kv-deco-01 span {
		width: calc(770 / 375 * 100vw);
		font-size: calc(70 / 375 * 100vw);
		animation: scroll-01 30s linear infinite;
	}

	.about_2025kv-title {
		max-width: unset;
		padding: 0 20px;
		margin: 0 auto 20vw;
	}

	.about_2025kv-title span {
		font-size: calc(14 / 375 * 100vw);
		margin-bottom: -0.2vw;
	}

	.about_2025kv-title b {
		margin-left: -1vw;
		font-size: calc(28 / 375 * 100vw);
	}

	.about_2025kv-deco-02 {
		width: calc(1840 / 375 * 100vw);
		margin: 0 auto 4vw;
	}

	.about_2025kv-deco-02 span {
		width: calc(920 / 375 * 100vw);
		font-size: calc(70 / 375 * 100vw);
		animation: scroll-02 39s linear infinite;
	}

	.about_2025kv-lead {
		max-width: unset;
		padding: 0 20px;
		margin: 0 auto 2vw;
		font-size: calc(16 / 375 * 100vw);
	}

	.about_2025kv-lead span {
		margin-left: 1vw;
	}

	.about_2025kv-block {
		max-width: unset;
		padding: 0;
	}

	.about_2025kv-block-title {
		font-size: 18px;
		margin-bottom: 16px;
	}

	.about_2025kv-block-text {

	}


	/* about_2025strength ---------------------------------------*/
	.about_2025strength {
		padding: 10vw 0 0;
	}

	.about_2025strength-deco {
		font-size: calc(55 / 375 * 100vw);
	}

	.about_2025strength-title {
		font-size: 18px;
		padding-left: 20px;
		margin-bottom: 50px;
	}

	.about_2025strength-title::after {
		bottom: -16px;
		left: -36px;
		width: 272px;
		height: 40px;
	}

	.about_2025strength-list > li {
		display: block;
		padding: 30px 0;
	}

	.about_2025strength-list > li:first-of-type {padding: 0 0 30px;}
	.about_2025strength-list > li:last-of-type {padding-bottom: 60px;}

	.about_2025strength-list-title {
		font-size: 18px;
	}

	.about_2025strength-list > li:first-of-type .about_2025strength-list-title,
	.about_2025strength-list > li:nth-of-type(3) .about_2025strength-list-title {margin-left: 0;}
	.about_2025strength-list > li:nth-of-type(2) .about_2025strength-list-title,
	.about_2025strength-list > li:nth-of-type(4) .about_2025strength-list-title,
	.about_2025strength-list > li:nth-of-type(2) .about_2025strength-list-text,
	.about_2025strength-list > li:nth-of-type(4) .about_2025strength-list-text {margin-left: calc(70 / 375 * 100%);}

	.about_2025strength-list-text {
		max-width: calc(276 / 335 * 100%);
	}


	/* about_2025logo ---------------------------------------*/
	.about_2025logo {
		background: url('../img/about_2025/bg_logo_sp.webp') no-repeat center center / cover;
		padding: 10vw 0 10vw;
	}

	.about_2025logo-deco {
		bottom: -1vw;
		right: -1vw;
		font-size: calc(55 / 375 * 100vw);
	}

	.about_2025logo-top {
		display: block;
		margin-bottom: 50px;
	}

	.about_2025logo-top-summary {
		max-width: unset;
		margin-bottom: 10px;
	}

	.about_2025logo-top-title {
		margin-bottom: 40px;
	}

	.about_2025logo-top-title span {
		font-size: 14px;
		margin-bottom: 4px;
	}

	.about_2025logo-top-title b {
		font-size: 18px;
	}

	.about_2025logo-top-logo {
		width: 145px;
		margin: 0 auto 30px;
	}

	.about_2025logo-top-image {
		max-width: unset;
		width: 151px;
		margin: 0 0 20px auto;
	}

	.about_2025logo-bottom {
		display: block;
	}

	.about_2025logo-bottom-image {
		max-width: unset;
		width: 225px;
		margin: 0 auto 20px 0;
	}

	.about_2025logo-bottom-summary {
		max-width: unset;
	}


	/* about_2025company ---------------------------------------*/
	.about_2025company {
		padding: 10vw 0 80px;
	}

	.about_2025company-deco {
		top: 1.4vw;
		left: -1.8vw;
		width: calc(295 / 375 * 100vw);
		font-size: calc(55 / 375 * 100vw);
	}

	.about_2025company-title {
		font-size: 18px;
		margin-bottom: 30px;
	}

	.about_2025company-list dt {
		width: 130px;
		padding: 18px 8px;
		font-size: 14px;
	}

	.about_2025company-list dd {
		max-width: unset;
		width: calc(100% - 130px);
		padding: 18px 0;
		font-size: 14px;
	}

	.about_2025company-list-block {
		display: block;
	}

	.about_2025company-list-block > ul > li {
		font-size: 14px;
	}


	/* about_2025message ---------------------------------------*/
	.about_2025message {
		background-size: calc(400 / 375 * 100vw) calc(440 / 375 * 100vw);
		padding: 30vw 0 20vw;
	}

	.about_2025message::after {
		background-position: bottom left 10%;
		background-size: calc(400 / 375 * 100vw) calc(350 / 375 * 100vw);
	}

	.about_2025message-deco-01 {
		top: 0;
		right: -3vw;
		font-size: calc(55 / 375 * 100vw);
	}

	.about_2025message-deco-02 {
		bottom: 0;
		left: -2vw;
		font-size: calc(55 / 375 * 100vw);
	}

	.about_2025message-head {
		display: block;
		position: relative;
		margin-bottom: 60px;
	}

	.about_2025message-head-image {
		position: absolute;
		top: 80px;
		left: 0;
		z-index: 1;
		width: 200px;
		border-radius: 5px;
	}

	.about_2025message-head-summary {
		max-width: unset;
		margin-top: 0;
	}

	.about_2025message-head-title {
		margin-bottom: 280px;
	}

	.about_2025message-head-title span {
		font-size: 14px;
	}

	.about_2025message-head-title b {
		font-size: 18px;
	}

	.about_2025message-head-name {
		margin-bottom: 20px;
	}

	.about_2025message-head-name b {
		margin-bottom: 2px;
	}

	.about_2025message-head-name strong {
		display: block;
		margin-bottom: 4px;
	}

	.about_2025message-head-name small {
		display: block;
		margin-left: 0;
	}

	.about_2025message-text {
		margin-bottom: 16px;
	}

	.about_2025message-list {
		padding: 8px 36px 8px 16px;
	}

	.about_2025message-list > li {
	}

	.about_2025message-shoulder {
		margin: 0 auto 80px;
	}

	.about_2025message-lead {
		font-size: 18px;
		margin-bottom: 16px;
	}

	.about_2025message-body-block {
		width: unset;
	}

	.about_2025message-body-block-01 {
		margin: 0 auto 40px;
	}

	.about_2025message-body-block-02 {
		margin: 0 auto 70px;

	}
	.about_2025message-body-block-03 {
		margin: 0 auto 30px;
	}

	.about_2025message-title {
		margin-bottom: 20px;
	}

	.about_2025message-title span {
		font-size: 14px;
		margin-bottom: -4px;
	}

	.about_2025message-title b {
		font-size: 18px;
	}

	.about_2025message-body-image {
		position: unset;
	}

	.about_2025message-body-image span {
		font-size: 10px;
		white-space: nowrap;
		margin-top: 4px;
	}

	.about_2025message-body-image-01 {
		max-width: 262px;
		width: 100%;
		margin: 0 0 40px auto;
	}

	.about_2025message-body-image-02 {
		max-width: 172px;
		width: 100%;
		margin: 0 auto 40px 0;
	}

	.about_2025message-body-image-03 {
		max-width: 234px;
		width: 100%;
		margin: 0 auto 40px 0;
	}

	.about_2025message-body-image-04 {
		max-width: 202px;
		width: 100%;
		margin: 0 0 40px auto;
	}

	.about_2025message-body-name {
		margin: 40px auto 0 0;
	}

	.about_2025message-body-name span {
		font-size: 12px;
	}

	.about_2025message-body-name-image {
		margin: 10px 0 0 70px;
		width: 92px;
	}


	/* about_2025creator ---------------------------------------*/
	.about_2025creator {
		padding: 10vw 0 10vw;
		margin-bottom: 50px;
	}

	.about_2025creator-deco {
		top: 2vw;
		right: -3vw;
		font-size: calc(55 / 375 * 100vw);
	}

	.about_2025creator-title {
		margin: 0 auto 40px;
	}

	.about_2025creator-title span {
		font-size: 14px;
		margin-bottom: -6px;
		padding: 0 3px;
	}

	.about_2025creator-title b {
		font-size: 18px;
		padding: 0 3px 9px;
	}

	.about_2025creator-lead {
		font-size: 18px;
		margin-bottom: 26px;
	}

	.about_2025creator-text {
		margin-bottom: 60px;
		text-align: left;
	}

	.about_2025creator-list {

	}

	.about_2025creator-list > li {
		display: block;
	}

	.about_2025creator-list > li + li {
		margin-top: 40px;
	}

	.about_2025creator-list-image {
		width: 200px;
		border-radius: 5px;
	}

	.about_2025creator-list > li:first-of-type .about_2025creator-list-image,
	.about_2025creator-list > li:nth-of-type(3) .about_2025creator-list-image,
	.about_2025creator-list > li:nth-of-type(5) .about_2025creator-list-image {margin-left: 0;}
	.about_2025creator-list > li:nth-of-type(2) .about_2025creator-list-image,
	.about_2025creator-list > li:nth-of-type(2) .about_2025creator-list-summary,
	.about_2025creator-list > li:nth-of-type(4) .about_2025creator-list-image,
	.about_2025creator-list > li:nth-of-type(4) .about_2025creator-list-summary {margin-left: calc(70 / 375 * 100%);}

	.about_2025creator-list-summary {
		margin-top: 6px;
		max-width: 476px;
		max-width: calc(276 / 335 * 100%);
	}

	.about_2025creator-list-name {
		margin-bottom: 16px;
	}

	.about_2025creator-list-name b {
		margin-bottom: 2px;
	}

	.about_2025creator-list-name strong {
		display: block;
		margin-bottom: 4px;
	}

	.about_2025creator-list-name small {
		display: block;
		margin-left: 0;
	}
}


/* large sp */
@media screen and (max-width: 580px) {
	.indexinformation-news {
		padding: 0 20px;
	}

}

@media screen and (max-width: 540px) {
	.indexvoice-list-client::before, .indexvoice-list-client::after, .servicestrength-list-point::before, .servicestrength-list-point::after {
		left: -30px;
		width: calc(100% + 60px);
	}

	.indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::before, .indexvoice-list > li:nth-of-type(even) .indexvoice-list-client::after, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::before, .servicestrength-list > li:nth-of-type(even) .servicestrength-list-point::after {
		left: -30px;
	}
}

@media screen and (max-width: 500px) {
	.strength {
		padding: 70px 0 80px;
	}

	.strength-list > li:first-of-type .strength-list-space {
		height: 170px;
	}

	.strength-list > li:nth-of-type(2) .strength-list-space {
		height: 70px;
	}

	.strength-list > li:nth-of-type(3) .strength-list-space {
		height: 150px;
	}
}


/* iphone5 iphoneSE用 */
@media screen and (max-width: 370px) {
}

/* breadcrumbs (Phase 2 / 2026-09-06) ---------------------------------------
   modules/breadcrumbs.php を <ol> ベースに変更したことに伴う最小限の調整。
   既存の .crumbs-nav ol / .crumbs-nav ol > li の指定をそのまま活かし、
   ブラウザ既定の ol インデントの打ち消しと、長いパンくずの折り返しだけを追加する。
   （li { list-style: none } は 28 行目で既に全体に適用済み）
--------------------------------------------------------------------------- */
ol.breadcrumbs {
	margin: 0;
	padding: 0;
}

.crumbs-nav ol.breadcrumbs {
	flex-wrap: wrap;
	row-gap: 8px;
}

.crumbs-nav ol.breadcrumbs > li > a {
	text-decoration: none;
}

.crumbs-nav ol.breadcrumbs > li > a:hover,
.crumbs-nav ol.breadcrumbs > li > a:focus-visible {
	text-decoration: underline;
}


/* カテゴリ見出しの分類名 (Phase 2 / 2026-09-06) -----------------------------
   実績カテゴリ9ページの h1 が「制作実績」で全て同一になるのを避けるため、
   分類名を h1 の中に表示する。.section-title の中央寄せ・字送りを継承する。
--------------------------------------------------------------------------- */
.section-title-term {
	display: block;
	margin-top: 14px;
	font-size: 2.4rem;
	letter-spacing: .2em;
}


/* 404 (Phase 2 / 2026-09-06) -----------------------------------------------
   自動転送を廃止した代わりに、主要ページ導線と検索を置いたことによる追加。
--------------------------------------------------------------------------- */
.notfound-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 32px 0 0;
	padding: 0;
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: .1em;
}

.notfound-nav-list > li > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.notfound-search {
	margin: 32px auto 0;
	max-width: 420px;
}

.notfound-search .search-form {
	display: flex;
	gap: 8px;
}

.notfound-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #CCC;
	border-radius: 4px;
	font-size: 1.4rem;
}

.notfound-search .search-submit {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: #E29C3E;
	color: #FFF;
	font-weight: 700;
	font-size: 1.4rem;
	cursor: pointer;
}


/* 詳細ページへ遷移させない実績 (2026-09-06) --------------------------------
   一覧には通常どおり掲載するが、カードをリンクにしない。
   <a> の代わりに <div class="is-nolink"> が出力される。
   見た目は変えず、マウスカーソルだけ「クリックできない」ことを示す。
--------------------------------------------------------------------------- */
.archive-item .is-nolink {
	display: block;
	cursor: default;
}


/* アニメーションの方向・遅延バリエーション (2026-09-06) -----------------------
   既存の .animation（スクロールで .on が付く仕組み）に方向と遅延を足す。
   js/script.js の発火ロジックはそのまま使う。
--------------------------------------------------------------------------- */

/* 左から入る */
.animation.animation-left {
	transform: translate(-48px, 0);
}

/* 右から入る */
.animation.animation-right {
	transform: translate(48px, 0);
}

/* 動かずフェードのみ */
.animation.animation-fade {
	transform: none;
}

.animation.on.animation-left,
.animation.on.animation-right,
.animation.on.animation-fade {
	transform: translate(0, 0);
}

/* 遅延 */
.animation.animation-delay-1 { transition-delay: .3s; }
.animation.animation-delay-2 { transition-delay: .6s; }
.animation.animation-delay-3 { transition-delay: .9s; }

/* ゆっくり効かせたいとき */
.animation.animation-slow { transition-duration: 2.2s; }

/* --- Vision セクションの背景だけをフェードさせる ---
   ::after は擬似要素でクラスを付けられないため、
   セクション本体は透明にせず（.animation-bg で打ち消す）、背景だけ制御する。 */
.animation.animation-bg {
	opacity: 1;
	transform: none;
	transition: none;
}

.indexvision.animation-bg::after {
	opacity: 0;
	transition: opacity 4.5s ease 1s;
}

.indexvision.animation-bg.on::after {
	opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
	.animation,
	.animation.animation-left,
	.animation.animation-right,
	.animation.animation-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.indexvision.animation-bg::after {
		opacity: 0.4;
		transition: none;
	}
}


/* PORTFOLIO の棚：一段ずつ左右交互にフェードイン (2026-09-06) ---------------
   マークアップは変えず、既存の <li class="animation"> に対して
   nth-child で方向と遅延を割り当てる。段数が増減しても自動で追従する。
--------------------------------------------------------------------------- */
.indexportfolio-list > li.animation:nth-child(odd) {
	transform: translate(-56px, 0);
}

.indexportfolio-list > li.animation:nth-child(even) {
	transform: translate(56px, 0);
}

.indexportfolio-list > li.animation.on {
	transform: translate(0, 0);
}

/* 段ごとに少しずつ遅らせる（同時に視界へ入ったときに順番に出る） */
.indexportfolio-list > li.animation:nth-child(1) { transition-delay: 0s; }
.indexportfolio-list > li.animation:nth-child(2) { transition-delay: .18s; }
.indexportfolio-list > li.animation:nth-child(3) { transition-delay: .36s; }
.indexportfolio-list > li.animation:nth-child(4) { transition-delay: .54s; }
.indexportfolio-list > li.animation:nth-child(5) { transition-delay: .72s; }
.indexportfolio-list > li.animation:nth-child(6) { transition-delay: .90s; }
.indexportfolio-list > li.animation:nth-child(7) { transition-delay: 1.08s; }
.indexportfolio-list > li.animation:nth-child(8) { transition-delay: 1.26s; }

@media (prefers-reduced-motion: reduce) {
	.indexportfolio-list > li.animation,
	.indexportfolio-list > li.animation:nth-child(odd),
	.indexportfolio-list > li.animation:nth-child(even) {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}


/* 見出しの英字をテキストに (2026-09-06) -------------------------------------
   これまで SVG 画像（アウトライン化された文字）だった見出しの英字を
   Figtree のテキストに置き換えた。<figure> は残しているので、
   既存の figure に対する指定はそのまま効く。
   幅指定が残っている figure は、テキストが折り返さないよう解除する。
--------------------------------------------------------------------------- */
.title-en {
	display: block;
	font-family: "Figtree", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	color: #737373;
}

/* 画像用に付けていた幅指定を、テキストになった figure では解除する */
figure:has(> .title-en) {
	width: auto !important;
	max-width: none !important;
	height: auto !important;
}

/* --- 文脈ごとのサイズ --- */

/* ページ・セクションの主見出し（Service / Portfolio / Information ほか） */
.section-title .title-en {
	font-size: clamp(3.2rem, 4.4vw, 5.4rem);
	margin-bottom: 20px;
}

/* サービスページの各ブロック見出し */
.servicestrength-title .title-en,
.servicecontent-title .title-en,
.serviceflow-title .title-en,
.serviceportfolio-title .title-en {
	font-size: clamp(3.4rem, 4.8vw, 6.0rem);
	margin-bottom: 16px;
}

/* サービス名の見出し（DX for Welfare facility など。文字数が多い） */
.servicedetail-title .title-en {
	font-size: clamp(2.4rem, 3.4vw, 4.2rem);
	margin-bottom: 12px;
	white-space: normal;
}

/* Point 1 / 2 / 3 */
.servicestrength-list-summary .title-en {
	font-size: 2.4rem;
	margin-bottom: 8px;
	color: #f2a154;
}

/* 実績カテゴリの見出し */
.category-title .title-en {
	font-size: 2.6rem;
	margin-bottom: 6px;
}

/* about の強み */
.strength-list-title .title-en {
	font-size: clamp(2.6rem, 3.6vw, 4.4rem);
	margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
	.title-en {
		white-space: normal;
	}

	.section-title .title-en {
		margin-bottom: 10px;
	}
}


/* 領域ページ (2026-09-06) ---------------------------------------------------
   /field/ のハブと、各領域ページで使う。
   実績一覧は既存の .archive-list をそのまま流用している。
--------------------------------------------------------------------------- */
.fieldlist {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0 0 80px;
	padding: 0;
}

.fieldlist-item {
	width: calc((100% - 56px) / 3);
}

.fieldlist-item > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 28px;
	border-radius: 14px;
	background: #FFF;
	box-shadow: 6px 6px 14px #EDEDED, -6px -6px 14px #FFF;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease;
}

.fieldlist-item > a:hover,
.fieldlist-item > a:focus-visible {
	transform: translateY(-4px);
	box-shadow: 8px 10px 20px #E4E4E4, -6px -6px 14px #FFF;
}

.fieldlist-item-en {
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-style: italic;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: .02em;
	color: #F2A154;
}

.fieldlist-item-name {
	margin-top: 10px;
	font-weight: 700;
	font-size: 2.0rem;
	line-height: 1.5;
	letter-spacing: .06em;
}

.fieldlist-item-desc {
	margin-top: 12px;
	font-size: 1.4rem;
	line-height: 1.8;
	color: #565656;
}

.fieldlist-item-count {
	margin-top: auto;
	padding-top: 18px;
	font-size: 1.3rem;
	letter-spacing: .08em;
	color: #737373;
}

.fieldlist-item-count b {
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-size: 2.2rem;
	font-weight: 700;
	color: #E29D3F;
}

.fieldworks-title {
	margin: 0 auto 40px;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .4em;
	text-align: center;
}

.fieldworks-title-count {
	display: block;
	margin-top: 12px;
	font-size: 1.4rem;
	letter-spacing: .1em;
	color: #737373;
}

@media screen and (max-width: 767px) {
	.fieldlist {
		gap: 18px;
		margin-bottom: 50px;
	}

	.fieldlist-item {
		width: 100%;
	}

	.fieldlist-item > a {
		padding: 24px 20px;
	}
}


/* トップの「関わってきた領域」ブロック (2026-09-06) --------------------------
   /field/ が未公開のときは modules/field-list.php 側で出力を止めるため、
   このCSSも自動的に使われなくなる。
--------------------------------------------------------------------------- */
.indexfield {
	position: relative;
	z-index: 2;
	padding: 100px 0 110px;
	background: #F9F9F9;
}

/* 本文は SERVICE と同じ .section-text にそろえたので、余白だけ足す */
.indexfield .section-text {
	margin-bottom: 56px;
}

.indexfield .fieldlist {
	margin-bottom: 56px;
}

.indexfield-btn {
	text-align: center;
}

@media screen and (max-width: 767px) {
	.indexfield {
		padding: 60px 0 70px;
	}

	.indexfield .section-text {
		margin-bottom: 32px;
	}

	.indexfield .section-text br {
		display: none;
	}
}


/* 領域ページの本文ブロック (2026-09-06) ------------------------------------- */
.fieldsec {
	max-width: 900px;
	margin: 0 auto 64px;
}

.fieldsec-title {
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid #E29D3F;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.6;
	letter-spacing: .06em;
}

.fieldsec p {
	margin-bottom: 20px;
	font-size: 1.5rem;
	line-height: 2;
	letter-spacing: .05em;
}

.fieldsec p:last-child {
	margin-bottom: 0;
}

.fieldsec-list {
	margin: 0 0 20px;
	padding: 0;
}

.fieldsec-list > li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 30px;
	font-size: 1.5rem;
	line-height: 1.9;
	letter-spacing: .05em;
}

.fieldsec-list > li::before {
	position: absolute;
	top: .55em;
	left: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #E29D3F;
	content: '';
}

.fieldsec-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
}

.fieldsec-tags > li {
	padding: 8px 16px;
	border-radius: 999px;
	background: #FFF;
	box-shadow: 3px 3px 8px #EDEDED, -3px -3px 8px #FFF;
	font-size: 1.35rem;
	letter-spacing: .04em;
	color: #565656;
}

.fieldsec a {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #B4741F;
}

.fieldsec a:hover,
.fieldsec a:focus-visible {
	text-decoration: none;
}

@media screen and (max-width: 767px) {
	.fieldsec {
		margin-bottom: 44px;
	}

	.fieldsec-title {
		font-size: 1.8rem;
	}

	.fieldsec p,
	.fieldsec-list > li {
		font-size: 1.4rem;
	}
}


/* ファーストビューの演出 (2026-09-06) ---------------------------------------
   ローディング動画が終わった合図（body.is-kv-ready）を受けて、
   タイトルを左からフェードで出す。背景の左側はゆっくり明滅させる。
--------------------------------------------------------------------------- */

/* --- タイトルは要素ごとに順番に出す（下の「FVのオープニング」を参照） --- */
.js-kv .indexkv-title {
	z-index: 2;
}

/* --- 背景の左側がゆっくり明るくなる --- */
.indexkv-image {
	position: relative;
	overflow: hidden;
}

.indexkv-image::after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(58% 62% at 16% 44%, rgba(255, 247, 230, .62) 0%, rgba(255, 232, 190, .28) 38%, rgba(255, 255, 255, 0) 72%),
		radial-gradient(34% 40% at 4% 68%, rgba(255, 240, 210, .34) 0%, rgba(255, 255, 255, 0) 70%);
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: 0;
	content: '';
}

.js-kv body.is-kv-ready .indexkv-image::after {
	animation: forwards-kv-glow 7.5s ease-in-out 1.2s infinite alternate;
}

@keyframes forwards-kv-glow {
	from {
		opacity: .30;
		transform: translateX(-2.5%) scale(1);
	}
	to {
		opacity: .78;
		transform: translateX(2.5%) scale(1.07);
	}
}

@media (prefers-reduced-motion: reduce) {
	.indexkv-title {
		opacity: 1;
		transform: translateY(-50%);
			transition: none;
	}

	.js-kv body.is-kv-ready .indexkv-image::after {
		animation: none;
		opacity: .4;
	}
}


/* 右下の固定バナー（LINE登録・資料請求）を非表示 (2026-09-06) ----------------
   再表示したいときは、この1ブロックを消すだけで元に戻る。
   マークアップ側（25テンプレートの .fixedlink）はそのまま残している。
--------------------------------------------------------------------------- */
.fixedlink {
	display: none !important;
}


/* copyright を1文字ずつフェード (2026-09-06) ---------------------------------
   縦書き（rotate(90deg)）で表示しているので、
   「上から」＝回転前の文字列の先頭から順に出る。
--------------------------------------------------------------------------- */
.js-kv .kvcopy .char {
	display: inline-block;
	opacity: 0;
	transform: translateY(-10px);
}

.js-kv body.is-kv-ready .kvcopy .char {
	animation: forwards-char-in .5s ease forwards;
	/* 1文字あたり 45ms ずつ遅らせる。全体の始まりは 0.8s 後 */
	animation-delay: calc(.8s + var(--i) * .045s);
}

@keyframes forwards-char-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .kvcopy .char,
	.js-kv body.is-kv-ready .kvcopy .char {
		opacity: 1;
		transform: none;
		animation: none;
	}
}


/* ファーストビューの NEWS（サムネイル付き）(2026-09-06) ----------------------
   1行のバーだった headline NEWS を縦に広げ、サムネイルを入れた。
   「headline」の文字は削除し、ラベルは NEWS のみ。
--------------------------------------------------------------------------- */
.kvlink-headline {
	padding: 18px 24px 20px;
}

.kvlink-headline-label {
	margin-bottom: 12px;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .22em;
	color: #B4741F;
}

.kvnews {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.kvnews-item {
	flex: 1 1 0;
	min-width: 0;
}

.kvnews-item > a {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.kvnews-thumb {
	flex: 0 0 88px;
	width: 88px;
	aspect-ratio: 16 / 10;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #EEE;
}

.kvnews-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.kvnews-item > a:hover .kvnews-thumb img,
.kvnews-item > a:focus-visible .kvnews-thumb img {
	transform: scale(1.06);
}

.kvnews-date {
	display: block;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-size: 1.2rem;
	letter-spacing: .06em;
	color: #787878;
}

.kvnews-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-top: 4px;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.6;
	letter-spacing: .04em;
}

.kvnews-item > a:hover .kvnews-title,
.kvnews-item > a:focus-visible .kvnews-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media screen and (max-width: 767px) {
	.kvlink-headline {
		padding: 14px 16px 16px;
	}

	.kvnews {
		flex-direction: column;
		gap: 12px;
	}

	.kvnews-thumb {
		flex-basis: 72px;
		width: 72px;
	}
}


/* 見出しが流れる演出 (2026-09-06) -------------------------------------------
   カーソルを載せている間だけ、大きな英字見出しが横へ流れる。
   /about/ のFV（.about_2025kv-deco-01）と同じ「流れる」動き。

   複製は 1つだけ置き、間隔を 100vw 取ってあるので、
   画面に同時に2つ映ることはない。＝「ひとつがループする」見え方になる。
   移動量（100% + 100vw）＝ 文字幅 + 間隔 なので、
   1周したところで複製が元の位置にぴたりと重なり、継ぎ目が出ない。
--------------------------------------------------------------------------- */
.titlemarquee {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	will-change: transform;
	/* /about/ のFV（.about_2025kv-deco-01 = 1350px を 39秒）に合わせて約34px/秒。
	   移動量は「文字幅 + 100vw」なので、1440px幅で約2100px ÷ 34 ≒ 62秒。 */
	animation-duration: 62s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.titlemarquee > * {
	display: inline-block;
}

.titlemarquee > *:nth-child(2) {
	position: absolute;
	top: 0;
}

/* 左端に置かれた見出し（SERVICE / PORTFOLIO）は右へ流す */
.section-title-renewal-left .titlemarquee,
.titlemarquee-right {
	animation-name: forwards-marquee-right;
}

.section-title-renewal-left .titlemarquee > *:nth-child(2),
.titlemarquee-right > *:nth-child(2) {
	right: calc(100% + 100vw);
}

/* 右端に置かれた見出し（INFORMATION / CLIENT）は左へ流す */
.section-title-renewal-right .titlemarquee,
.titlemarquee-left {
	animation-name: forwards-marquee-left;
}

.section-title-renewal-right .titlemarquee > *:nth-child(2),
.titlemarquee-left > *:nth-child(2) {
	left: calc(100% + 100vw);
}

@keyframes forwards-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - 100vw)); }
}

@keyframes forwards-marquee-right {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(100% + 100vw)); }
}

/* 大きな英字の見出しは hover を待たずに最初から流れ、
   カーソルを載せている間だけ速度が落ちる（止まりはしない）。
   CSS の animation-duration を途中で変えると位置が飛ぶので、
   速度の変化は script.js が transform を毎フレーム書いて作っている。
   JSが無い場合は上の CSS ループがそのまま等速で流れる。 */

/* Shape Your Heart は一回り大きく、70px 上へ、字間は少し詰める */
.indexinterlude-title {
	top: calc(50% - 250px);
	font-size: calc(126 / 1440 * 100vw);
	letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
	.titlemarquee {
		animation: none;
	}

}

@media screen and (max-width: 767px) {
	/* タッチ端末では hover がないので複製ごと止める */
	.titlemarquee {
		animation: none;
	}

	.titlemarquee > *:nth-child(2) {
		display: none;
	}

	.titlemarquee {
		white-space: normal;
	}

	.indexinterlude-title {
		top: calc(50% - 220px);
		font-size: calc(62 / 375 * 100vw);
		letter-spacing: .02em;
	}
}


/* NEWS枠 (2026-09-06) -------------------------------------------------------
   サムネイル付きにして縦に伸びたので、FVタイトルと重ならないよう
   タイトル側の基準を .indexkv-image から .indexkv（＝実際に見えている範囲）に変更済み。
   枠は上へ80px・右へ300px広げ、左右ボタンで送れるようにした。
--------------------------------------------------------------------------- */
.kvlink-headline {
	width: min(calc(100vw - 92px), 1223px);
	max-width: none;
	padding: 20px 26px 22px;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(10, 2, 4, .12);
	background: rgba(255, 255, 255, .88);
}

.kvlink-headline-label {
	margin-bottom: 12px;
	font-size: 1.3rem;
}

.kvnews {
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.kvnews::-webkit-scrollbar {
	display: none;
}

.kvnews-item {
	flex: 0 0 calc((100% - 36px) / 3);
	scroll-snap-align: start;
}

.kvnews-item > a {
	gap: 14px;
}

.kvnews-thumb {
	flex: 0 0 180px;
	width: 180px;
}

.kvnews-title {
	font-size: 1.4rem;
	line-height: 1.6;
}

/* 送りボタン */
.kvnews-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: calc(50% + 12px);
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid rgba(10, 2, 4, .08);
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 1px 6px rgba(10, 2, 4, .14);
	cursor: pointer;
	transition: opacity .25s, background-color .25s;
}

.kvnews-nav-prev { left: -19px; }
.kvnews-nav-next { right: -19px; }

.kvnews-nav span {
	display: block;
	width: 9px;
	height: 9px;
	border-top: 2px solid #B4741F;
	border-right: 2px solid #B4741F;
}

.kvnews-nav-prev span { transform: translateX(2px) rotate(-135deg); }
.kvnews-nav-next span { transform: translateX(-2px) rotate(45deg); }

.kvnews-nav:hover {
	background: #FFF8ED;
}

.kvnews-nav[disabled],
.kvnews-nav.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* 横幅が狭いPC・タブレットはKV自体が低くなるので詰める */
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvlink-headline {
		padding: 14px 18px 16px;
	}

	.kvlink-headline-label {
		margin-bottom: 8px;
		font-size: 1.2rem;
	}

	.kvnews {
		gap: 12px;
	}

	.kvnews-item {
		flex-basis: calc((100% - 24px) / 3);
	}

	.kvnews-item > a {
		gap: 10px;
	}

	.kvnews-thumb {
		flex: 0 0 120px;
		width: 120px;
	}

	.kvnews-date {
		font-size: 1.1rem;
	}

	.kvnews-title {
		font-size: 1.2rem;
		line-height: 1.5;
	}

	.kvnews-nav {
		width: 32px;
		height: 32px;
	}

	.kvnews-nav-prev { left: -16px; }
	.kvnews-nav-next { right: -16px; }
}

/* スマホは1件ずつ送る */
@media screen and (max-width: 767px) {
	.indexkv-title {
		bottom: 24%;
	}

	.kvlink-headline {
		width: calc(100vw - 20px);
		padding: 12px 16px 14px;
	}

	.kvlink-headline-label {
		margin-bottom: 8px;
		font-size: 1.2rem;
	}

	.kvnews {
		flex-direction: row;
		gap: 12px;
	}

	.kvnews-item {
		flex: 0 0 100%;
	}

	.kvnews-thumb {
		flex: 0 0 104px;
		width: 104px;
	}

	.kvnews-nav {
		width: 30px;
		height: 30px;
	}

	.kvnews-nav-prev { left: -8px; }
	.kvnews-nav-next { right: -8px; }
}


/* 大見出しのグラデーションが流れ続ける (2026-09-06) --------------------------
   参考：i-thisis.me/maki_otani の .introduction-heading（heading-gradation）
   もともと3色の横グラデーションで、両端が同じ色なので、
   背景を2倍に広げて位置を1周ぶん動かすと切れ目なく色が変化し続ける。
--------------------------------------------------------------------------- */
.section-title strong {
	background-size: 200% auto;
	background-clip: text;
	animation: forwards-title-gradation 6s linear infinite;
}

@keyframes forwards-title-gradation {
	from { background-position: 0% center; }
	to   { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
	.section-title strong {
		animation: none;
	}
}




@media (prefers-reduced-motion: reduce) {
	.about_2025kv-bg::after {
		transition: none;
	}
}


/* NEWSカード ---- サムネイルを上、説明を下に (2026-09-06) --------------------
   枠の高さは 180px → 240px。1画面に5件並べ、残りは左右ボタンで送る。
--------------------------------------------------------------------------- */
.kvnews-item {
	flex: 0 0 calc((100% - 72px) / 5);
}

.kvnews-item > a {
	flex-direction: column;
	gap: 8px;
}

.kvnews-thumb {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.kvnews-date {
	font-size: 1.15rem;
}

.kvnews-title {
	margin-top: 2px;
	font-size: 1.25rem;
	line-height: 1.5;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvnews-item {
		flex-basis: calc((100% - 48px) / 5);
	}

	.kvnews-thumb {
		flex: 0 0 auto;
		width: 100%;
	}

	.kvnews-title {
		font-size: 1.15rem;
	}
}

@media screen and (max-width: 767px) {
	/* スマホは横並びのまま、1件ずつ送る */
	.kvnews-item > a {
		flex-direction: row;
		gap: 12px;
		align-items: flex-start;
	}

	.kvnews-thumb {
		flex: 0 0 104px;
		width: 104px;
		aspect-ratio: 16 / 10;
	}

	.kvnews-title {
		font-size: 1.3rem;
	}
}

/* 枠の高さを 240px 前後に収める微調整 */
.kvlink-headline {
	padding: 18px 26px 20px;
}

.kvnews-item > a {
	gap: 6px;
}

.kvnews-thumb {
	aspect-ratio: 2 / 1;
}

.kvnews-date {
	font-size: 1.1rem;
}

.kvnews-title {
	margin-top: 0;
	font-size: 1.2rem;
	line-height: 1.45;
}


/* NEWS枠を次のセクションに跨がせる (2026-09-06) -----------------------------
   .indexkv は z-index:1、.indexvision は z-index:3 で、
   KV画像の下側は .indexvision に覆われて透ける設計になっている。
   枠だけを前面に出したいので、枠を .indexkv の外（.indexkvwrap 直下）へ移し、
   ラッパーには z-index を付けない＝重なり順を親と共有させて、
   枠自身の z-index:4 が .indexvision(3) に勝つようにしている。
--------------------------------------------------------------------------- */
.indexkvwrap {
	position: relative;
}

.kvlink-headline {
	z-index: 4;
	bottom: -5px;
	padding: 18px 26px 60px;
}

/* NEWS の見出しは大きく斜体。色はテーマ既定の --ac-color-orange-02 (#eaa13c) */
.kvlink-headline-label {
	margin-bottom: 10px;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: .1em;
	color: var(--ac-color-orange-02);
}

.kvnews-nav span {
	border-top-color: var(--ac-color-orange-02);
	border-right-color: var(--ac-color-orange-02);
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvlink-headline {
		padding: 14px 18px 52px;
	}

	.kvlink-headline-label {
		margin-bottom: 8px;
		font-size: 2rem;
	}
}

/* スマホ ------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* タイトルは旧サイトと同じ位置（KVの下寄り）に戻す */
	.indexkv-title {
		bottom: 12%;
	}

	.kvlink-headline {
		bottom: -50px;
		left: 10px;
		width: calc(100vw - 20px);
		padding: 10px 14px 12px;
	}

	.kvlink-headline-label {
		margin-bottom: 6px;
		font-size: 1.8rem;
	}

	.kvnews-item > a {
		flex-direction: row;
		gap: 10px;
		align-items: flex-start;
	}

	.kvnews-thumb {
		flex: 0 0 88px;
		width: 88px;
		aspect-ratio: 16 / 10;
	}

	.kvnews-date {
		font-size: 1.05rem;
	}

	.kvnews-title {
		font-size: 1.2rem;
		line-height: 1.5;
	}

	/* 枠が下りてくるぶん、OUR VISION と本文を下げて重ならないようにする */
	.indexvision {
		padding-top: 34vw;
	}

	.indexvision-deco {
		top: 15vw;
	}
}

@media screen and (max-width: 767px) {
	/* スマホは1件ずつ全幅で送る */
	.kvnews-item {
		flex: 0 0 100%;
	}
}

@media screen and (max-width: 767px) {
	/* サムネイル左・日付+タイトル右。flex だと3つとも横並びになるので grid で組む */
	.kvnews-item > a {
		display: grid;
		grid-template-columns: 88px 1fr;
		grid-template-rows: auto auto;
		column-gap: 10px;
		row-gap: 2px;
		align-items: start;
	}

	.kvnews-thumb {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 88px;
		aspect-ratio: 16 / 10;
	}

	.kvnews-date {
		grid-column: 2;
		grid-row: 1;
	}

	.kvnews-title {
		grid-column: 2;
		grid-row: 2;
	}
}

/* 位置と透過の調整 (2026-09-06) */
.kvlink-headline {
	bottom: 25px;
	left: 86px;
	width: min(calc(100vw - 132px), 1223px);
	background: rgba(255, 255, 255, .3);
}

@media screen and (max-width: 767px) {
	.kvlink-headline {
		bottom: -50px;
		left: 10px;
		width: calc(100vw - 20px);
	}
}


/* サービスカード ---- 影を弱め、触ると浮き上がる (2026-09-06) ---------------- */
.indexservice-list > li,
.service-list > li {
	box-shadow:
		2px 2px 6px rgba(53, 53, 53, .06),
		-6px -6px 10px rgba(255, 255, 255, .9);
	transition:
		transform .4s cubic-bezier(.22, 1, .36, 1),
		box-shadow .4s ease;
}

.indexservice-list > li:hover,
.service-list > li:hover,
.indexservice-list > li:focus-within,
.service-list > li:focus-within {
	transform: translateY(-10px);
	box-shadow:
		0 16px 30px rgba(53, 53, 53, .13),
		-6px -6px 12px rgba(255, 255, 255, .9);
}


/* 3つの導線カード ---- 左から順に、上から落ちてフェードイン (2026-09-06) ----- */
.indexinformation-list > li.animation {
	opacity: 0;
	transform: translateY(-40px);
	transition:
		opacity .8s cubic-bezier(.22, 1, .36, 1),
		transform .9s cubic-bezier(.22, 1, .36, 1);
}

.indexinformation-list > li.animation.on {
	opacity: 1;
	transform: translateY(0);
}

.indexinformation-list > li.animation:nth-child(2) { transition-delay: .18s; }
.indexinformation-list > li.animation:nth-child(3) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
	.indexservice-list > li,
	.service-list > li,
	.indexinformation-list > li.animation {
		transition: none;
	}

	.indexservice-list > li:hover,
	.service-list > li:hover {
		transform: none;
	}

	.indexinformation-list > li.animation {
		opacity: 1;
		transform: none;
	}
}

/* Shape Your Heart のセクションの縦幅を詰める (2026-09-06)
   78vh - 70px → 78vh - 130px → 60vh - 130px と段階的に狭めている。
   中の文字は position:fixed で画面中央基準なので、
   画面の高さに比例させないと文字がこの窓からはみ出す。 */
.indexinterlude {
	height: calc(60vh - 130px);
}

/* /about/ のFVの流れる文字 ---- 触ると止まる (2026-09-06) */
.about_2025kv-deco-01:hover span,
.about_2025kv-deco-02:hover span {
	animation-play-state: paused;
}

/* /about/ の大きな英字 ---- 触ると流れる (2026-09-06) ------------------------
   STRENGTH / LOGO は右へ、COMPANY は左へ。
   親に background-clip:text が掛かっていて子の文字は塗られないので、
   複製側にも同じグラデーションを inherit で渡している。
--------------------------------------------------------------------------- */
.about_2025strength-deco .titlemarquee > b,
.about_2025company-deco .titlemarquee > b {
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.21) 0%, rgba(233, 232, 70, 0.21) 48%, rgba(242, 183, 133, 0.21) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: inherit;
	font-style: inherit;
}

.about_2025logo-deco .titlemarquee > b,
.about_2025message-deco-01 .titlemarquee > b,
.about_2025message-deco-02 .titlemarquee > b {
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.06) 0%, rgba(233, 232, 70, 0.06) 48%, rgba(242, 183, 133, 0.06) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: inherit;
	font-style: inherit;
}

.about_2025strength-deco:hover .titlemarquee,
.about_2025logo-deco:hover .titlemarquee,
.about_2025company-deco:hover .titlemarquee,
.about_2025message-deco-01:hover .titlemarquee,
.about_2025message-deco-02:hover .titlemarquee {
	animation-play-state: running;
}


/* 本文の文字を2px大きく (2026-09-06) ----------------------------------------
   本文まわりは 14px が既定だったので 16px にそろえる。
   見出し・ナビ・ボタン・注記など、本文でないものは触っていない。
   スマホは別途サイズ指定があるので、PC・タブレットだけに効かせる。
--------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.section-text,
	.indexservice-list-content-text,
	.service-list-content-text,
	.indexservice-list-content-text,
	.indexmessage-text,
	.indexinformation-key-text,
	.indexvoice-list-text,
	.indexpres-text,
	.indexpres-list > li,
	.indexfuture-text,
	.indexstaff-list-description,
	.concept-text,
	.servicestrength-list-text,
	.servicecontent-list-text,
	.servicedetail-text,
	.terms-lead,
	.terms-list-text,
	.terms-list > li dl dd,
	.fieldsec p,
	.fieldsec-list > li,
	.fieldlist-item-desc,
	.about_2025kv-block-text,
	.about_2025strength-list-text,
	.about_2025logo-text,
	.about_2025message-text,
	.about_2025message-list > li,
	.about_2025creator-text,
	.about_2025creator-list-text,
	.about_2025company-list dd {
		font-size: 16px;
	}
}

/* NEWS枠 ---- 位置・文字サイズ・サムネイル高さの調整 (2026-09-06) */
.kvlink-headline {
	bottom: 45px;
	left: 136px;
	width: min(calc(100vw - 182px), 1223px);
}

.kvnews-thumb {
	aspect-ratio: auto;
	height: 130px;
}

.kvnews-date {
	font-size: 1.25rem;
}

.kvnews-title {
	font-size: 1.45rem;
	line-height: 1.5;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvnews-thumb {
		height: 100px;
	}

	.kvnews-title {
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 767px) {
	.kvlink-headline {
		bottom: -50px;
		left: 10px;
		width: calc(100vw - 20px);
	}

	.kvnews-thumb {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.kvnews-title {
		font-size: 1.3rem;
	}

	.kvnews-date {
		font-size: 1.1rem;
	}
}

/* NEWSカードのカテゴリタグ (2026-09-06) */
.kvnews-thumb {
	position: relative;
}

.kvnews-cat {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 6px 0 6px 0;
	background: rgba(234, 161, 60, .92);
	color: #FFF;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.6;
	letter-spacing: .06em;
}

/* 代表あいさつ ---- 背景写真をじんわり出す (2026-09-06) ----------------------
   本体の background-image は透明度を単独で制御できないので ::before へ移し、
   ::before（右上）と ::after（左下）の2枚を .on でフェードインさせる。
--------------------------------------------------------------------------- */
.about_2025message.animation-bg {
	background-image: none;
}

.about_2025message.animation-bg::before {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-image: url('../img/about_2025/bg_message_01.webp');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: calc(833 / 1440 * 100vw) calc(899 / 1400 * 100vw);
	opacity: 0;
	transition: opacity 4.5s ease .6s;
	pointer-events: none;
	content: '';
}

.about_2025message.animation-bg::after {
	opacity: 0;
	transition: opacity 4.5s ease 1.1s;
}

.about_2025message.animation-bg.on::before,
.about_2025message.animation-bg.on::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.about_2025message.animation-bg::before,
	.about_2025message.animation-bg::after {
		opacity: 1;
		transition: none;
	}
}


/* LINE・電話のブロック ---- 影を弱め、地色を白寄りに、触ると浮く (2026-09-06)
   3枚の画像はいずれも背景が透明（四隅 alpha 0）なので、
   ブロックの地色を変えても画像側に段差は出ない。
--------------------------------------------------------------------------- */
.linelink-block {
	background: #F4F4F4;
	/* 影は方向を持たせず、上下左右へ均等に薄く広げる */
	box-shadow: 0 0 12px rgba(53, 53, 53, .06);
}

/* .animation の transition:all 1.25s のままだと hover が鈍いので上書き */
.linelink-block.on {
	transition:
		opacity .8s ease,
		transform .45s cubic-bezier(.22, 1, .36, 1),
		box-shadow .45s ease;
}

.linelink-block:hover,
.linelink-block:focus-within {
	transform: translate(0, -8px);
	box-shadow: 0 0 24px rgba(53, 53, 53, .10);
}

@media (prefers-reduced-motion: reduce) {
	.linelink-block:hover,
	.linelink-block:focus-within {
		transform: none;
	}
}


/* NEWS枠 ---- 位置・矢印・内側の余白 (2026-09-06) ---------------------------
   矢印は枠の外から中の右上へ。左右そろえて常に表示し、
   送り先が無いときは消さずに薄くする。
--------------------------------------------------------------------------- */
.kvlink-headline {
	left: 166px;
	width: min(calc(100vw - 212px), 1223px);
	padding: 38px 26px 28px;
}

/* サムネイルの上に余白を足し、中身を下へ寄せる */
.kvlink-headline-label {
	margin-bottom: 30px;
}

.kvnews-nav {
	top: 20px;
	bottom: auto;
	transform: none;
	width: 34px;
	height: 34px;
}

.kvnews-nav-prev {
	left: auto;
	right: 68px;
}

.kvnews-nav-next {
	left: auto;
	right: 26px;
}

/* 送れないときは消さずに薄く */
.kvnews-nav[disabled] {
	opacity: .3;
	pointer-events: none;
}

.kvnews-nav.is-hidden {
	opacity: 0;
	pointer-events: none;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvlink-headline {
		padding: 30px 18px 20px;
	}

	.kvlink-headline-label {
		margin-bottom: 22px;
	}

	.kvnews-nav {
		top: 14px;
		width: 30px;
		height: 30px;
	}

	.kvnews-nav-prev { right: 58px; }
	.kvnews-nav-next { right: 20px; }
}

@media screen and (max-width: 767px) {
	.kvlink-headline {
		left: 10px;
		width: calc(100vw - 20px);
		padding: 14px 14px 14px;
	}

	.kvlink-headline-label {
		margin-bottom: 12px;
	}

	.kvnews-nav {
		top: 10px;
		width: 28px;
		height: 28px;
	}

	.kvnews-nav-prev { left: auto; right: 48px; }
	.kvnews-nav-next { left: auto; right: 14px; }
}

/* ロゴセクションにも同じスポットライト (2026-09-06) --------------------------
   セクション自身の背景写真の上に光を重ねるので、
   z-index:0 で重なりの基準を作り、::before を -1 に置いて本文の下へ入れる。
--------------------------------------------------------------------------- */
.about_2025logo {
	z-index: 0;
}

.about_2025logo::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(circle 440px at var(--spot-x, 50%) var(--spot-y, 50%),
		rgba(255, 250, 236, .50) 0%,
		rgba(255, 242, 212, .26) 38%,
		rgba(255, 236, 196, .09) 60%,
		rgba(255, 255, 255, 0) 78%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
	content: '';
}

.about_2025logo.is-spot::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.about_2025logo::before {
		transition: none;
	}
}


/* NEWSカードを左から順に出す＋矢印を線だけのオレンジに (2026-09-06) --------
   カードは枠（.kvlink-headline）に .on が付いたタイミングを合図にして、
   nth-child で少しずつ遅らせて出す。
--------------------------------------------------------------------------- */
.kvlink-headline .kvnews-item {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .7s ease,
		transform .7s cubic-bezier(.22, 1, .36, 1);
}

.kvlink-headline.on .kvnews-item {
	opacity: 1;
	transform: translateY(0);
}

.kvlink-headline.on .kvnews-item:nth-child(1) { transition-delay: .15s; }
.kvlink-headline.on .kvnews-item:nth-child(2) { transition-delay: .27s; }
.kvlink-headline.on .kvnews-item:nth-child(3) { transition-delay: .39s; }
.kvlink-headline.on .kvnews-item:nth-child(4) { transition-delay: .51s; }
.kvlink-headline.on .kvnews-item:nth-child(5) { transition-delay: .63s; }
.kvlink-headline.on .kvnews-item:nth-child(6) { transition-delay: .75s; }
.kvlink-headline.on .kvnews-item:nth-child(7) { transition-delay: .87s; }
.kvlink-headline.on .kvnews-item:nth-child(8) { transition-delay: .99s; }

/* 矢印：塗りなし・オレンジの枠線・矢印もオレンジ */
.kvnews-nav {
	width: 44px;
	height: 44px;
	border: 2px solid var(--ac-color-orange-02);
	background: transparent;
	box-shadow: none;
}

.kvnews-nav span {
	width: 11px;
	height: 11px;
	border-top: 2px solid var(--ac-color-orange-02);
	border-right: 2px solid var(--ac-color-orange-02);
}

.kvnews-nav:hover {
	background: rgba(234, 161, 60, .12);
}

.kvnews-nav-prev { right: 80px; }
.kvnews-nav-next { right: 26px; }

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvnews-nav {
		width: 38px;
		height: 38px;
	}

	.kvnews-nav-prev { right: 66px; }
	.kvnews-nav-next { right: 20px; }
}

@media screen and (max-width: 767px) {
	.kvnews-nav {
		width: 34px;
		height: 34px;
	}

	.kvnews-nav-prev { left: auto; right: 56px; }
	.kvnews-nav-next { left: auto; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.kvlink-headline .kvnews-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ロゴ画像 ---- hover でふわっと拡大 (2026-09-06) ---------------------------
   外側の div は .animation の transform（入場アニメ）を使っているので、
   中の img 側を拡大してぶつからないようにしている。
--------------------------------------------------------------------------- */
.about_2025logo-top-image img,
.about_2025logo-bottom-image img {
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.about_2025logo-top-image:hover img,
.about_2025logo-bottom-image:hover img {
	transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
	.about_2025logo-top-image img,
	.about_2025logo-bottom-image img {
		transition: none;
	}

	.about_2025logo-top-image:hover img,
	.about_2025logo-bottom-image:hover img {
		transform: none;
	}
}

/* 山の背景（左下）は、署名までスクロールしてきたところで出す (2026-09-06)
   セクションが非常に縦長で、上端を合図にすると
   ここへ着く頃にはフェードが終わってしまうため。
   :has() が使えない環境では、これまで通りセクション上端が合図になる。 */
.about_2025message.animation-bg::after {
	transition: opacity 5s ease;
}

@supports selector(:has(*)) {
	.about_2025message.animation-bg.on::after {
		opacity: 0;
	}

	.about_2025message.animation-bg:has(.about_2025message-body-name.on)::after {
		opacity: 1;
	}
}

/* フッターの copyright を左の文字から順に出す (2026-09-06) ------------------
   .animation は「画面に入った合図（.on）」だけ借りて、
   要素そのもののフェードは打ち消し、1文字ずつのアニメーションに任せる。
--------------------------------------------------------------------------- */
.footercopy.animation {
	opacity: 1;
	transform: none;
	transition: none;
}

.footercopy .char {
	display: inline-block;
}

/* JS が動いているときだけ隠す。JS が無い／失敗した場合は最初から見える */
.js-kv .footercopy .char {
	opacity: 0;
	transform: translateY(-8px);
}

.js-kv .footercopy.on .char {
	animation: forwards-char-in .5s ease forwards;
	/* 1文字あたり 30ms ずつ遅らせる */
	animation-delay: calc(var(--i) * .03s);
}

@media (prefers-reduced-motion: reduce) {
	.footercopy .char,
	.js-kv .footercopy .char,
	.js-kv .footercopy.on .char {
		opacity: 1;
		transform: none;
		animation: none;
	}
}


/* HEADLINE NEWS ラベル／カテゴリを日付の右へ／矢印の微調整 (2026-09-06) ----- */
.kvlink-headline-label {
	font-size: 2.9rem;
}

/* 日付とカテゴリを1行に並べる */
.kvnews-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.kvnews-cat {
	position: static;
	flex: 0 1 auto;
	overflow: hidden;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(234, 161, 60, .92);
	color: #FFF;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.6;
	letter-spacing: .04em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 矢印を下へ5px・左へ3px */
.kvnews-nav {
	top: 25px;
}

.kvnews-nav-prev { right: 83px; }
.kvnews-nav-next { right: 29px; }

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvlink-headline-label {
		font-size: 2.2rem;
	}

	.kvnews-nav {
		top: 19px;
	}

	.kvnews-nav-prev { right: 69px; }
	.kvnews-nav-next { right: 23px; }
}

@media screen and (max-width: 767px) {
	.kvlink-headline-label {
		font-size: 1.9rem;
	}

	/* グリッドの2行目・1列目の割り当てを .kvnews-meta に移す */
	.kvnews-meta {
		grid-column: 2;
		grid-row: 1;
	}

	.kvnews-nav {
		top: 15px;
	}

	.kvnews-nav-prev { left: auto; right: 59px; }
	.kvnews-nav-next { left: auto; right: 17px; }
}


/* NEWS枠 ---- 通常はもっと透明に、hover で濃く (2026-09-06) -----------------
   .animation の transition:all 1.25s のままだと色の変化まで1.25秒かかるので、
   背景色だけ別の速さを持たせる（入場のフェード自体はそのまま）。
--------------------------------------------------------------------------- */
.kvlink-headline {
	background: rgba(255, 255, 255, .14);
}

.kvlink-headline.on {
	transition:
		opacity 1.25s ease,
		transform 1.25s ease,
		background-color .4s ease;
}

.kvlink-headline:hover {
	background: rgba(255, 255, 255, .5);
}


/* 代表あいさつの写真 ---- hover で1.4倍 (2026-09-06) ------------------------
   外枠の div は .animation の transform（入場）で使っているので、
   拡大は -inner 側に持たせる。-inner は overflow:hidden なので、
   img を拡大するとトリミングになってしまう点に注意。
--------------------------------------------------------------------------- */
.about_2025message-body-image-inner {
	transform-origin: center center;
	transition:
		transform .65s cubic-bezier(.22, 1, .36, 1),
		box-shadow .65s ease;
	will-change: transform;
}

/* 拡大中は他の写真やテキストより手前へ */
.about_2025message-body-image:hover {
	z-index: 5;
}

.about_2025message-body-image:hover .about_2025message-body-image-inner {
	transform: scale(1.4);
	box-shadow: 0 0 30px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
	.about_2025message-body-image-inner {
		transition: none;
	}

	.about_2025message-body-image:hover .about_2025message-body-image-inner {
		transform: none;
		box-shadow: none;
	}
}


/* 制作実績一覧 ---- 左から順に1つずつ出す (2026-09-06) ----------------------
   件数が多いので通し番号で遅らせると後半が待たされる。
   列の位置（3列なので 3n）で遅らせて、各行が左から順に出るようにする。
--------------------------------------------------------------------------- */
.archive-item.animation:nth-of-type(3n + 2) { transition-delay: .13s; }
.archive-item.animation:nth-of-type(3n + 3) { transition-delay: .26s; }

@media screen and (max-width: 767px) {
	/* スマホは2列 */
	.archive-item.animation:nth-of-type(3n + 2),
	.archive-item.animation:nth-of-type(3n + 3) {
		transition-delay: 0s;
	}

	.archive-item.animation:nth-of-type(2n) {
		transition-delay: .13s;
	}
}


/* 会社概要ページの見出し ---- 影なし・オレンジ (2026-09-06) -----------------
   mystyle.css 側で白文字＋影になっていたものを上書き。
--------------------------------------------------------------------------- */
.page-head-title-en,
.page-head-title-jp {
	color: var(--ac-color-orange-02);
}

.page-head-title-en span,
.page-head-title-jp span {
	text-shadow: none;
}

/* NEWS枠とサムネイルの角丸をなくす (2026-09-06) */
.kvlink-headline,
.kvnews-thumb {
	border-radius: 0;
}

/* カテゴリタグ ---- 塗りなし・オレンジの枠線・オレンジ文字 (2026-09-06) */
.kvnews-cat {
	border: 1px solid var(--ac-color-orange-02);
	background: transparent;
	color: var(--ac-color-orange-02);
}

/* NEWSタイトル ---- hoverで下線なし・白文字＋オレンジが左から伸びる (2026-09-06)
   サイト既存のマーカー演出（.marker-orange-02）と同じ、
   背景グラデーションの幅を 0 → 100% にする手法。
--------------------------------------------------------------------------- */
.kvnews-title {
	padding: 0 5px;
	margin: 0 -5px;
	background-image: linear-gradient(var(--ac-color-orange-02), var(--ac-color-orange-02));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	transition:
		background-size .45s cubic-bezier(.22, 1, .36, 1),
		color .25s ease .15s;
}

.kvnews-item > a:hover .kvnews-title,
.kvnews-item > a:focus-visible .kvnews-title {
	background-size: 100% 100%;
	color: #FFF;
	text-decoration: none;
	text-underline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kvnews-title {
		transition: none;
	}
}


/* 領域カード ---- サービスカードと同じ見た目に／見出し中央／文字を大きく (2026-09-06)
   .indexservice-list > li と同じ地色・角丸・影にそろえる。
--------------------------------------------------------------------------- */
.fieldlist-item > a {
	border-radius: 8px;
	background: #F9F9F9;
	box-shadow:
		2px 2px 6px rgba(53, 53, 53, .06),
		-6px -6px 10px rgba(255, 255, 255, .9);
	transition:
		transform .4s cubic-bezier(.22, 1, .36, 1),
		box-shadow .4s ease;
}

.fieldlist-item > a:hover,
.fieldlist-item > a:focus-visible {
	transform: translateY(-10px);
	box-shadow:
		0 16px 30px rgba(53, 53, 53, .13),
		-6px -6px 12px rgba(255, 255, 255, .9);
}

/* 見出し（英字＋日本語）は中央、本文は左のまま。サービスカードと同じ組み方 */
.fieldlist-item-en,
.fieldlist-item-name {
	text-align: center;
}

.fieldlist-item-en {
	font-size: 2.8rem;
}

.fieldlist-item-name {
	font-size: 2.3rem;
}

.fieldlist-item-desc {
	font-size: 1.6rem;
}

.fieldlist-item-count {
	font-size: 1.5rem;
}

.fieldlist-item-count b {
	font-size: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.fieldlist-item > a {
		transition: none;
	}

	.fieldlist-item > a:hover,
	.fieldlist-item > a:focus-visible {
		transform: none;
	}
}

/* 「提供するサービス」等の下のオレンジの線を左から出す (2026-09-06) --------
   画像（title_strength_deco.webp）なので、幅を変えると絵が潰れる。
   clip-path で右側を隠しておき、左から開いていく形にする。
   .animation が付いていない場合は最初から見えたまま。
--------------------------------------------------------------------------- */
.section-title-sub.animation::after,
.about_2025strength-title.animation::after {
	clip-path: inset(0 100% 0 0);
	/* 見出しの文字が出そろってから線が伸び始めるよう、遅らせている */
	transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1) .75s;
}

.section-title-sub.animation.on::after,
.about_2025strength-title.animation.on::after {
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.section-title-sub.animation::after,
	.about_2025strength-title.animation::after {
		clip-path: none;
		transition: none;
	}
}

/* インフォメーションの区切り線を細く・間隔も細かく (2026-09-06)
   線の太さ 3px → 1px、破線の周期 16px → 6px（線3px＋空き3px）。 */
.indexinformation-news-list > li {
	background-image: linear-gradient(to right, var(--ac-color-gray), var(--ac-color-gray) 3px, rgba(255, 255, 255, 0) 3px);
	background-size: 6px 1px;
}

@media screen and (max-width: 767px) {
	.indexinformation-news-list > li {
		background-size: 5px 1px;
		background-image: linear-gradient(to right, var(--ac-color-gray), var(--ac-color-gray) 2.5px, rgba(255, 255, 255, 0) 2.5px);
	}
}


/* インフォメーション ---- hoverで文字が左からオレンジに変わる (2026-09-06)
   background-clip:text で「地の色＝元の文字色」の上に、
   オレンジの層を左から広げる。文字自体の塗りは透明にしている。
--------------------------------------------------------------------------- */
.indexinformation-news-list > li a dl dt,
.indexinformation-news-list > li a dl dd {
	background-image: linear-gradient(var(--ac-color-orange-02), var(--ac-color-orange-02));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background-size .6s cubic-bezier(.22, 1, .36, 1);
}

.indexinformation-news-list > li a dl dt {
	background-color: var(--ac-color-gray);
}

.indexinformation-news-list > li a dl dd {
	background-color: var(--text-color);
}

.indexinformation-news-list > li a:hover dl dt,
.indexinformation-news-list > li a:hover dl dd,
.indexinformation-news-list > li a:focus-visible dl dt,
.indexinformation-news-list > li a:focus-visible dl dd {
	background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.indexinformation-news-list > li a dl dt,
	.indexinformation-news-list > li a dl dd {
		transition: none;
	}
}


/* HEADLINE NEWS の枠を2秒遅らせて出す (2026-09-06) --------------------------
   遅延は opacity / transform だけに掛ける。
   transition-delay でまとめて指定すると、hover時の背景色まで2秒待たされる。
--------------------------------------------------------------------------- */
.kvlink-headline.on {
	transition:
		opacity 1.25s ease 2s,
		transform 1.25s ease 2s,
		background-color .4s ease;
}

/* 中のカードは枠が出たあとに続くよう、各遅延に2秒を足す */
.kvlink-headline.on .kvnews-item:nth-child(1) { transition-delay: 2.15s; }
.kvlink-headline.on .kvnews-item:nth-child(2) { transition-delay: 2.27s; }
.kvlink-headline.on .kvnews-item:nth-child(3) { transition-delay: 2.39s; }
.kvlink-headline.on .kvnews-item:nth-child(4) { transition-delay: 2.51s; }
.kvlink-headline.on .kvnews-item:nth-child(5) { transition-delay: 2.63s; }
.kvlink-headline.on .kvnews-item:nth-child(6) { transition-delay: 2.75s; }
.kvlink-headline.on .kvnews-item:nth-child(7) { transition-delay: 2.87s; }
.kvlink-headline.on .kvnews-item:nth-child(8) { transition-delay: 2.99s; }

/* サムネイルの濃さ ---- 通常50%、hoverで95% (2026-09-06) */
.kvnews-thumb img {
	opacity: .5;
	transition: opacity .4s ease, transform .5s ease;
}

.kvnews-item > a:hover .kvnews-thumb img,
.kvnews-item > a:focus-visible .kvnews-thumb img {
	opacity: .95;
}


/* グローバルナビを左から1つずつ下から出す (2026-09-06) ----------------------
   既定では隠さず、body.is-kv-ready が付いたときだけアニメーションを走らせる。
   （transition で隠す作りにすると、JSが止まったときにナビが消えてしまう）
   fill-mode: backwards で、遅延中は開始状態＝透明のまま待つ。
--------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.js-kv body.is-kv-ready .header .gnav-list > li {
		animation: forwards-nav-in .6s cubic-bezier(.22, 1, .36, 1) backwards;
	}

	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(1) { animation-delay: .25s; }
	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(2) { animation-delay: .25s; }
	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(3) { animation-delay: .35s; }
	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(4) { animation-delay: .45s; }
	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(5) { animation-delay: .55s; }
	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(6) { animation-delay: .65s; }
	.js-kv body.is-kv-ready .header .gnav-list > li:nth-child(7) { animation-delay: .75s; }
}

@keyframes forwards-nav-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv body.is-kv-ready .header .gnav-list > li {
		animation: none;
	}
}

/* NEWS枠 ---- 白をさらに薄く・影なし／サムネイルはhoverで完全に不透明 (2026-09-06) */
.kvlink-headline {
	background: rgba(255, 255, 255, .07);
	box-shadow: none;
}

.kvlink-headline:hover {
	background: rgba(255, 255, 255, .38);
}

.kvnews-item > a:hover .kvnews-thumb img,
.kvnews-item > a:focus-visible .kvnews-thumb img {
	opacity: 1;
}


/* 領域カード ---- 件数の上に横線／中央配置・一回り大きく (2026-09-06)
   線はサービスカード（.indexservice-list-btn::before）と同じ 3px / #F2F2F2。
   a に左右パディングがあるので、負のマージンでカード幅いっぱいに伸ばす。
--------------------------------------------------------------------------- */
.fieldlist-item-count {
	position: relative;
	margin-top: auto;
	padding-top: 26px;
	text-align: center;
	font-size: 1.7rem;
}

.fieldlist-item-count::before {
	position: absolute;
	top: 0;
	left: -28px;
	width: calc(100% + 56px);
	height: 3px;
	background: #F2F2F2;
	content: '';
}

.fieldlist-item-count b {
	font-size: 2.8rem;
}

@media screen and (max-width: 767px) {
	.fieldlist-item-count::before {
		left: -20px;
		width: calc(100% + 40px);
	}
}




/* 件数まわりの微調整 (2026-09-06)
   横線をもっと下へ（＝上の余白を詰める。ブロックは margin-top:auto で下端固定）。 */
.fieldlist-item-count {
	padding-top: 14px;
	font-weight: 700;
}

.fieldlist-item-count b {
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-style: italic;
}

/* 説明文がいちばん長いカードでは線が本文に接してしまうので、最低限の間隔を確保する */
.fieldlist-item-desc {
	margin-bottom: 16px;
}

/* カウントアップ中に桁が増えても幅が動かないように */
.fieldlist-item-count b {
	font-variant-numeric: tabular-nums;
}

/* HEADLINE NEWS のブロックを20px下へ (2026-09-06) */
.kvlink-headline {
	bottom: 25px;
}

/* HEADLINE NEWS ---- 半透明の白い枠自体をなくす (2026-09-06)
   位置と余白はそのまま、背景だけ透明にする。 */
.kvlink-headline,
.kvlink-headline:hover {
	background: transparent;
	box-shadow: none;
}


/* 領域カードの背景写真 (2026-09-06) -----------------------------------------
   右側に写真、左へ向かってグラデーションで消えていく。
   画像は data-field ごとに --field-bg で差し替える。
   画像が無い領域は ::before が何も描かないだけなので、置いた分から順に効く。
--------------------------------------------------------------------------- */
.fieldlist-item > a {
	position: relative;
	overflow: hidden;
}

.fieldlist-item > a::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--field-bg, none);
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	opacity: .8;
	/* 左へ行くほど消えていく */
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .7) 72%, #000 100%);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .7) 72%, #000 100%);
	pointer-events: none;
	content: '';
}

/* 中身は写真より前面に */
.fieldlist-item > a > * {
	position: relative;
	z-index: 1;
}

.fieldlist-item[data-field="public"] > a    { --field-bg: url(../img/field/bg_public.webp); }
.fieldlist-item[data-field="regional"] > a  { --field-bg: url(../img/field/bg_regional.webp); }
.fieldlist-item[data-field="education"] > a { --field-bg: url(../img/field/bg_education.webp); }
.fieldlist-item[data-field="welfare"] > a   { --field-bg: url(../img/field/bg_welfare.webp); }
.fieldlist-item[data-field="business"] > a  { --field-bg: url(../img/field/bg_business.webp); }

/* SERVICE セクションの斜めストライプを削除 (2026-09-06) */
.indexservice,
.pageservice {
	background-image: none;
}

/* 自治体・行政の写真だけ 140% に拡大し、右へ60px寄せる (2026-09-06)
   cover は高さ基準で効いているので、auto 140% がちょうど1.4倍にあたる。 */
.fieldlist-item[data-field="public"] > a::before {
	background-size: auto 140%;
	background-position-x: right -60px;
	background-position-y: center;
}

/* 左側をもっと白く飛ばす／数字を一回り大きく (2026-09-06) */
.fieldlist-item > a::before {
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .5) 78%, #000 100%);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .5) 78%, #000 100%);
}

.fieldlist-item-count b {
	font-size: 3.4rem;
}

/* 数字をさらに拡大／「制作実績」「件」を黒寄りに (2026-09-06) */
.fieldlist-item-count {
	color: #4A4A4A;
}

.fieldlist-item-count b {
	font-size: 4rem;
}

/* 件数の上の横線は削除 (2026-09-06) */
.fieldlist-item-count::before {
	display: none;
}

/* 固定ヘッダーのロゴを、最初のヘッダーと同じ大きさ・位置に (2026-09-06)
   光彩（.header-logo-bg）も固定ヘッダー側に置いたので、
   スクロール後も見た目が変わらない。 */
.fixedheader-logo img {
	top: 26px;
	left: 23px;
	width: 149px;
	height: 104px;
}

/* ロゴは hover で「少し右へ → 一瞬止まる → すーっと進んで消える → 左から戻る」 (2026-09-06)
   1つの keyframes 内で区間ごとに timing-function を切り替えている。 */
.header-logo:hover img,
.fixedheader-logo:hover img {
	animation: forwards-logo-dash 1.35s both;
}

@keyframes forwards-logo-dash {
	/* ちょっとだけ右へ */
	0% {
		transform: translateX(0);
		opacity: 1;
		animation-timing-function: cubic-bezier(.3, .9, .5, 1);
	}
	13% {
		transform: translateX(10%);
		opacity: 1;
		animation-timing-function: linear;
	}
	/* そこで一瞬止まる */
	28% {
		transform: translateX(10%);
		opacity: 1;
		animation-timing-function: cubic-bezier(.45, 0, .75, .55);
	}
	/* すーっと進みながら消える */
	56% {
		/* 画面幅の60%まで進んでから消える */
		transform: translateX(60vw);
		opacity: 0;
		animation-timing-function: steps(1, end);
	}
	/* 見えないうちに左へ回り込む */
	57% {
		transform: translateX(-25vw);
		opacity: 0;
		animation-timing-function: cubic-bezier(.16, 1, .3, 1);
	}
	/* 左から戻って止まる */
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-logo:hover img,
	.fixedheader-logo:hover img {
		animation: none;
	}
}
}

/* 光彩は装飾なのでクリック・hoverを拾わせない (2026-09-06)
   固定ヘッダーは非表示時も画面外へ 70px ずらしているだけなので、
   そのままだと光彩（上へ95pxはみ出す）がページ上部に重なってしまう。
   固定ヘッダーが出ているときだけ見えるようにする。 */
.header-logo-bg {
	pointer-events: none;
}

.fixedheader .header-logo-bg {
	opacity: 0;
	transition: opacity .3s;
}

.fixedheader.is-fixed .header-logo-bg {
	opacity: 1;
}

/* 固定ヘッダーはロゴを大きくしたぶん、画面外へずらすだけでは隠れない (2026-09-06)
   （translate は自身の高さ70pxぶんだけ。ロゴは下へ130pxまで伸びる）
   表示・非表示は opacity で明確に切り替える。 */
.fixedheader {
	opacity: 0;
	pointer-events: none;
	transition: transform .3s, opacity .3s;
}

.fixedheader.is-fixed {
	opacity: 1;
	pointer-events: auto;
}

/* オレンジのラインは hover で右から消えていく (2026-09-06)
   出現とは逆に、右の inset を 0 → 100% へ戻す。 */
.section-title-sub.animation.on:hover::after,
.about_2025strength-title.animation.on:hover::after {
	clip-path: inset(0 100% 0 0);
	transition: clip-path .7s cubic-bezier(.22, 1, .36, 1) 0s;
}

/* 送りボタン ---- 円の間隔を10px広げる／縁のオレンジ線は常に回り、hoverで止まる (2026-09-06)
   同じ色の円を回しても動いて見えないので、
   土台のリングは薄くしておき、その上を濃いオレンジの弧が回る形にしている。
   hover 中は弧を止めて、土台のリングを本来の濃さに戻す。
--------------------------------------------------------------------------- */
.kvnews-nav-prev { right: 93px; }

.kvnews-nav {
	border-color: rgba(234, 161, 60, .28);
}

.kvnews-nav::before {
	position: absolute;
	inset: -2px;
	border: 2px solid transparent;
	border-top-color: var(--ac-color-orange-02);
	border-radius: 50%;
	opacity: 1;
	animation: forwards-nav-spin 2.2s linear infinite;
	pointer-events: none;
	content: '';
}

/* 左（前へ）の弧は、矢印の向きに合わせて逆回りにする */
.kvnews-nav-prev::before {
	animation-direction: reverse;
}

.kvnews-nav:hover {
	border-color: var(--ac-color-orange-02);
}

.kvnews-nav:hover::before {
	animation-play-state: paused;
}

@keyframes forwards-nav-spin {
	to { transform: rotate(360deg); }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.kvnews-nav-prev { right: 79px; }
}

@media screen and (max-width: 767px) {
	.kvnews-nav-prev { left: auto; right: 69px; }
}

@media (prefers-reduced-motion: reduce) {
	.kvnews-nav::before {
		animation: none;
	}
}

/* 「関わってきた領域」も SERVICE と同じ組みに (2026-09-06)
   背景に大きく FIELD、その下に小さな日本語見出し＋オレンジのライン。
   大きな英字を置くぶん、上の余白を広げる。 */
.indexfield {
	padding: 12vw 0 110px;
}



/* 領域カードの hover ---- 上へ跳ねるのをやめ、手前に近づく感じに (2026-09-06)
   縦移動をなくして拡大に置き換え、影を少し広げて浮きを表現する。 */
.fieldlist-item > a:hover,
.fieldlist-item > a:focus-visible {
	transform: scale(1.035);
	box-shadow:
		0 10px 26px rgba(53, 53, 53, .11),
		-6px -6px 12px rgba(255, 255, 255, .9);
}

/* NEWSタイトルのhover ---- 背景ではなく文字自体が左からオレンジに (2026-09-06)
   インフォメーション一覧と同じ background-clip:text 方式にそろえる。 */
.kvnews-title {
	padding: 0;
	margin: 0;
	background-color: var(--text-color);
	background-image: linear-gradient(var(--ac-color-orange-02), var(--ac-color-orange-02));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background-size .5s cubic-bezier(.22, 1, .36, 1);
}

.kvnews-item > a:hover .kvnews-title,
.kvnews-item > a:focus-visible .kvnews-title {
	background-size: 100% 100%;
	color: transparent;
	text-decoration: none;
}

/* サムネイルは常に不透明にする (2026-09-06)
   白い枠をなくしたことで、50%だと後ろのKV写真が透けて見えてしまうため。 */
.kvnews-thumb img,
.kvnews-item > a:hover .kvnews-thumb img,
.kvnews-item > a:focus-visible .kvnews-thumb img {
	opacity: 1;
}

/* 縦書きcopyright ---- hoverで上から順にオレンジへ (2026-09-06)
   90度回転しているので、文字の並び順＝画面の上から下。
   1文字ずつの span に遅延を付けて、上から染まっていくようにする。 */
.kvcopy .char {
	transition: color .25s ease;
}

.kvcopy:hover .char {
	color: var(--ac-color-orange-02);
	transition-delay: calc(var(--i) * .02s);
}

/* 「デザインで地域へ貢献する」 (2026-09-12)
   hover での変化はやめ、表示されたあと少し置いて
   「地域へ貢献」だけがふわっとオレンジに変わるようにした。 */
.indexinformation-key-title {
	color: var(--text-color);
}

.indexinformation-key-title span {
	color: inherit;
	transition: color 1s ease;
}

.indexinformation-key-title.animation.on span {
	color: var(--ac-color-orange-02);
	transition-delay: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
	.indexinformation-key-title span {
		color: var(--ac-color-orange-02);
		transition: none;
	}
}


/* 3つの導線カード ---- hoverで見出しが左からオレンジに (2026-09-06)
   アイコンの色は変えない。見出しだけ background-clip:text で左から染める。 */
.indexinformation-list-title {
	background-color: var(--text-color);
	background-image: linear-gradient(var(--ac-color-orange-02), var(--ac-color-orange-02));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background-size .5s cubic-bezier(.22, 1, .36, 1);
}

.indexinformation-list > li a:hover .indexinformation-list-title,
.indexinformation-list > li a:focus-visible .indexinformation-list-title {
	background-size: 100% 100%;
}

/* Shape Your Heart だけは常に流れ、hoverで止まる (2026-09-12)
   他の見出し（hoverで動き出す）とは逆の挙動。 */
.indexinterlude .titlemarquee {
	animation-play-state: running;
}

.indexinterlude:hover .titlemarquee {
	animation-play-state: paused;
}


/* ファーストビューのタイトル (2026-09-12) -----------------------------------
   FORWARDS と コピーは支給SVGをそのまま使う（変形・フィルターなし）。
   罫線はCSS、その下の2行はHTMLテキスト。
   間隔はすべて親（.indexkv-title）の幅に対する % なので、
   ブレークポイントで幅が変わっても比率は崩れない。
--------------------------------------------------------------------------- */
.indexkv-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* 下のコピーの文字サイズを親幅基準にするため */
	container-type: inline-size;
}

.indexkv-title-logowrap,
.indexkv-title-copywrap {
	display: block;
	position: relative;
	width: 100%;
}

.indexkv-title-copywrap {
	width: 82%;
	margin-top: 8.4%;
}

/* 既存の `.indexkv-title img { width:100% }` より詳細度を上げる必要がある */
.indexkv-title img.indexkv-title-logo,
.indexkv-title img.indexkv-title-copy {
	display: block;
	width: 100%;
	height: auto;
}

/* 残像用の複製。本体の少し後ろを追いかけて消える */
.indexkv-title img.indexkv-title-ghost {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	pointer-events: none;
}

.indexkv-title-rule {
	display: block;
	width: 87%;
	height: 1px;
	margin-top: 4.3%;
	background: rgba(53, 53, 53, .6);
}

.indexkv-title-lead {
	display: block;
	margin-top: 2.7%;
	font-weight: 700;
	/* cqw 非対応環境向けのフォールバック（親が 29vw のときの実寸） */
	font-size: 1.62vw;
	font-size: 5.6cqw;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--text-color);
	/* font-style:italic は Noto Sans JP だと傾きすぎるので、控えめに skew する */
	font-style: normal;
	transform: skewX(-6deg);
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
	.indexkv-title-lead {
		font-size: 2.07vw;
		font-size: 5.6cqw;
	}
}

@media screen and (max-width: 767px) {
	.indexkv-title-lead {
		font-size: 4.14vw;
		font-size: 5.6cqw;
	}
}


/* FVのオープニング (2026-09-12) ---------------------------------------------
   ローディング終了の合図（body.is-kv-ready）から、
   ① FORWARDS → ② コピーSVG → ③ 横線 → ④ 下部コピー の順に出す。

   JS が動かない場合は .js-kv が付かないので、最初から全部見えている。
   色の変化は SVG を編集せず filter: brightness() で行う。
   brightness(0) は元の色に関係なく真っ黒になるので、
   0 → 1 へ動かすと「黒 → 本来のオレンジ」に染まっていく。
--------------------------------------------------------------------------- */
.js-kv .indexkv-title-logowrap,
.js-kv .indexkv-title-copywrap,
.js-kv .indexkv-title-lead {
	opacity: 0;
}

.js-kv .indexkv-title-logo {
	filter: brightness(0);
}

.js-kv .indexkv-title-rule {
	transform: scaleX(0);
	transform-origin: left center;
}

/* ① FORWARDS ---- 左から入り、進みながら黒→オレンジ */
.js-kv body.is-kv-ready .indexkv-title-logowrap {
	animation: fv-slide-in .8s cubic-bezier(.16, 1, .3, 1) both;
}

.js-kv body.is-kv-ready .indexkv-title-logo {
	animation: fv-logo-color .8s cubic-bezier(.33, 0, .5, 1) both;
}

/* 残像は本体より 70ms 遅れて追いかけ、途中で消える */
.js-kv body.is-kv-ready .indexkv-title-logowrap .indexkv-title-ghost {
	animation: fv-ghost .8s cubic-bezier(.16, 1, .3, 1) .07s both;
	filter: brightness(0);
}

/* ② コピーSVG ---- 同じ動き。色は黒のまま変えない */
.js-kv body.is-kv-ready .indexkv-title-copywrap {
	animation: fv-slide-in .7s cubic-bezier(.16, 1, .3, 1) .8s both;
}

.js-kv body.is-kv-ready .indexkv-title-copywrap .indexkv-title-ghost {
	animation: fv-ghost .7s cubic-bezier(.16, 1, .3, 1) .86s both;
}

/* ③ 横線 ---- 左端から右へ伸びる */
.js-kv body.is-kv-ready .indexkv-title-rule {
	animation: fv-rule .4s cubic-bezier(.22, 1, .36, 1) 1.5s both;
}

/* ④ 下部コピー ---- 少し下からふわっと */
.js-kv body.is-kv-ready .indexkv-title-lead {
	animation: fv-lead .6s cubic-bezier(.22, 1, .36, 1) 2s both;
}

@keyframes fv-slide-in {
	0% {
		opacity: 0;
		transform: translateX(-58%);
	}
	26% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fv-logo-color {
	0%,
	26% {
		filter: brightness(0);
	}
	100% {
		filter: brightness(1);
	}
}

@keyframes fv-ghost {
	0% {
		opacity: 0;
		transform: translateX(-58%);
	}
	18% {
		opacity: .24;
	}
	100% {
		opacity: 0;
		transform: translateX(0);
	}
}

@keyframes fv-rule {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes fv-lead {
	0% {
		opacity: 0;
		/* 斜体（skew）を保ったまま少しだけ下から */
		transform: skewX(-6deg) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: skewX(-6deg) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .indexkv-title-logowrap,
	.js-kv .indexkv-title-copywrap,
	.js-kv .indexkv-title-lead {
		opacity: 1;
	}

	.js-kv .indexkv-title-logo {
		filter: none;
	}

	.js-kv .indexkv-title-rule {
		transform: scaleX(1);
	}

	.js-kv body.is-kv-ready .indexkv-title-logowrap,
	.js-kv body.is-kv-ready .indexkv-title-logo,
	.js-kv body.is-kv-ready .indexkv-title-copywrap,
	.js-kv body.is-kv-ready .indexkv-title-rule,
	.js-kv body.is-kv-ready .indexkv-title-lead,
	.js-kv body.is-kv-ready .indexkv-title-ghost {
		animation: none;
	}

	.js-kv .indexkv-title-ghost {
		display: none;
	}
}

/* OUR VISION の本文を3段落に分けたので、段落間に余白を入れる (2026-09-12) */
.indexvision-summary .section-text + .section-text {
	margin-top: 1.6em;
}

/* コピーSVGの黒を少し落とす (2026-09-12)
   透明度で薄くすると背景が透けてしまうので、invert で真っ黒→濃いグレーにする。
   （invert(.18) は #000 を #2E2E2E に変換する。不透明のまま）
   横線もこれと同じ色にそろえる。 */
.indexkv-title-copywrap img {
	filter: invert(.18);
}

.indexkv-title-rule {
	background: #2E2E2E;
}


/* OUR VISION セクションの登場順 (2026-09-12) --------------------------------
   FVのNEWSサムネイルが出そろう（is-kv-ready から約3.6秒）のを待ってから、
   ① オレンジの背景 → ② OUR VISION → ③ その他のテキスト の順に出す。

   スクロール検知（.animation → .on）だと「NEWSのあと」という順番を保証できないので、
   このセクションだけ is-kv-ready を合図にした CSS アニメーションに切り替えている。
   fill-mode: both なので、あとからスクロールしてきた場合は表示済みの状態で見える。

   背景色はセクション本体に直接指定されていて単独でフェードできないため、
   ::before（グラデーション）側に色を移して opacity を動かしている。
--------------------------------------------------------------------------- */
.js-kv .indexvision.animation-bg {
	background-color: transparent;
}

.js-kv .indexvision.animation-bg::before {
	background-color: rgba(234, 161, 60, .2);
	opacity: 0;
}

/* スクロール検知では出さない（順番を is-kv-ready 側で管理するため） */
.js-kv .indexvision-deco.animation,
.js-kv .indexvision-title.animation,
.js-kv .indexvision-subtitle.animation,
.js-kv .indexvision-summary .section-text.animation {
	opacity: 0;
	transform: none;
	transition: none;
}

.js-kv .indexvision-subtitle .animation-marker {
	background-size: 0 5px;
	transition: none;
}

/* ① オレンジの背景 */
.js-kv body.is-kv-ready .indexvision.animation-bg::before {
	animation: vision-bg 1.2s ease 3.8s both;
}

/* ② OUR VISION */
.js-kv body.is-kv-ready .indexvision-deco {
	animation: vision-in-right .9s cubic-bezier(.22, 1, .36, 1) 4.6s both;
}

/* ③ 見出し・本文 */
.js-kv body.is-kv-ready .indexvision-title {
	animation: vision-in-up .9s cubic-bezier(.22, 1, .36, 1) 5.2s both;
}

.js-kv body.is-kv-ready .indexvision-subtitle {
	animation: vision-in-up .9s cubic-bezier(.22, 1, .36, 1) 5.5s both;
}

.js-kv body.is-kv-ready .indexvision-subtitle .animation-marker {
	animation: vision-marker .8s ease 5.9s both;
}

.js-kv body.is-kv-ready .indexvision-summary .section-text:nth-of-type(1) {
	animation: vision-in-up .9s cubic-bezier(.22, 1, .36, 1) 6.1s both;
}

.js-kv body.is-kv-ready .indexvision-summary .section-text:nth-of-type(2) {
	animation: vision-in-up .9s cubic-bezier(.22, 1, .36, 1) 6.25s both;
}

.js-kv body.is-kv-ready .indexvision-summary .section-text:nth-of-type(3) {
	animation: vision-in-up .9s cubic-bezier(.22, 1, .36, 1) 6.4s both;
}

@keyframes vision-bg {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes vision-in-up {
	from {
		opacity: 0;
		transform: translate(0, 20px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes vision-in-right {
	from {
		opacity: 0;
		transform: translate(48px, 0);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes vision-marker {
	from { background-size: 0 5px; }
	to   { background-size: 100% 5px; }
}

@media screen and (max-width: 767px) {
	.js-kv .indexvision.animation-bg::before {
		background-color: rgba(234, 161, 60, .6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .indexvision.animation-bg::before,
	.js-kv .indexvision-deco.animation,
	.js-kv .indexvision-title.animation,
	.js-kv .indexvision-subtitle.animation,
	.js-kv .indexvision-summary .section-text.animation {
		opacity: 1;
	}

	.js-kv .indexvision-subtitle .animation-marker {
		background-size: 100% 5px;
	}

	.js-kv body.is-kv-ready .indexvision.animation-bg::before,
	.js-kv body.is-kv-ready .indexvision-deco,
	.js-kv body.is-kv-ready .indexvision-title,
	.js-kv body.is-kv-ready .indexvision-subtitle,
	.js-kv body.is-kv-ready .indexvision-subtitle .animation-marker,
	.js-kv body.is-kv-ready .indexvision-summary .section-text {
		animation: none;
	}
}

/* 「創るのは、お客様の未来です。」のブロックを下へ (2026-09-12)
   30px → さらに30px で合計60px。
   その後リード文を40px上げたぶん、ブロックが連れて上がらないよう +40px して100pxに。 */
.about_2025kv-block {
	margin-top: 100px;
}

/* リード文だけ40px上へ */
.about_2025kv-lead {
	margin-top: -40px;
}


/* FVの背景を動画化し、人物を独立レイヤーに (2026-09-12) -----------------------
   レイヤー構造
     .indexkv-video  … 日の出の背景動画（素材の動きのみ。ズーム・パンは足さない）
     .indexkv-veil   … 明るさ・白っぽさを現行の静止画に合わせるためのベール
     .indexkv-person … 人物＋コラージュ（背景に焼き込まず独立）
     .indexkv-title  … FVのロゴ・コピー（既存のまま）

   人物の配置は、現行の静止画 kv_2026.webp に対して
   位置合わせ（総当たりでの差分最小化）を行って求めた値：
     幅 79.5% / 左 20.62% / 上 0%
   動画の高さ 61.6% は「.indexkv の可視領域 ÷ .indexkv-image の高さ」。
   この範囲なら動画の16:9とほぼ一致するので、左右の切り落としが最小で済む。
--------------------------------------------------------------------------- */
.indexkv-image {
	background-image: none;
	background-color: #FFF;
}

.indexkv-video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 61.6%;
	object-fit: cover;
	object-position: center center;
	/* 素材が暗いので、現行の静止画の明るさ・淡さに寄せる */
	filter: brightness(1.85) contrast(.72) saturate(.7);
	pointer-events: none;
}

/* 上に重ねる白〜淡いオレンジのベール。下端は白へ抜けて元の静止画と同じ終わり方にする */
.indexkv-veil {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(
			to bottom,
			rgba(255, 252, 244, .52) 0%,
			rgba(255, 250, 238, .50) 18%,
			rgba(255, 252, 246, .54) 38%,
			rgba(255, 254, 252, .62) 52%,
			rgba(255, 255, 255, .88) 60%,
			#FFF 64%,
			#FFF 100%
		);
	pointer-events: none;
	content: '';
}

.indexkv-person {
	position: absolute;
	top: 0;
	left: 20.62%;
	z-index: 2;
	width: 79.5%;
	height: auto;
	pointer-events: none;
}

/* 人物は ④下部コピー（.indexkv-title-lead）と同じタイミングで出はじめ、
   左からふわっと、ゆっくり時間をかけて濃くなる。 */
.js-kv .indexkv-person {
	opacity: 0;
}

.js-kv body.is-kv-ready .indexkv-person {
	animation: fv-person-in 2.4s cubic-bezier(.25, .6, .3, 1) 2s both;
}

@keyframes fv-person-in {
	0% {
		opacity: 0;
		transform: translateX(-60px);
	}
	60% {
		opacity: .55;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .indexkv-person {
		opacity: 1;
	}

	.js-kv body.is-kv-ready .indexkv-person {
		animation: none;
	}
}

/* スマホの背景動画・人物レイヤー (2026-09-12) -------------------------------
   スマホ版は PC とは別の構図（kv_2026_sp.webp）なので、
   人物の大きさ・位置を SP 用に個別指定する。
   レイアウトに影響しないよう、動画・人物とも position:absolute のまま。
--------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.indexkv-video {
		height: 100%;
		object-position: center 42%;
		/* 縦長に切り出されるぶん、明るさは PC より少し抑える */
		filter: brightness(1.75) contrast(.74) saturate(.72);
	}

	.indexkv-veil {
		background:
			linear-gradient(
				to bottom,
				rgba(255, 252, 244, .50) 0%,
				rgba(255, 250, 238, .48) 22%,
				rgba(255, 252, 246, .52) 46%,
				rgba(255, 254, 252, .58) 70%,
				rgba(255, 255, 255, .72) 88%,
				rgba(255, 255, 255, .85) 100%
			);
	}

	.indexkv-person {
		top: 1.4%;
		left: -52.6%;
		width: 167%;
	}
}

/* 人物レイヤーは img の max-width:100% に縛られると SP で縮んでしまう */
.indexkv-person {
	max-width: none;
}

@media screen and (max-width: 767px) {
	/* あとから入れたPC用の bottom:25px が SP にも効いてしまうので戻す */
	.kvlink-headline {
		bottom: -70px;
	}
}


/* /about/ FVの登場順 (2026-09-12) -------------------------------------------
   ① 背景（そのまま表示）→ ② Our Mission → ③ あなたの架け橋として
   → ④ リード文 → ⑤ 創るのは、お客様の未来です。

   /about/ には loading 動画が無く is-kv-ready が付かない場合があるため、
   既存のスクロール検知（.animation → .on）を合図にしている。
   レイアウトは動かさず、opacity と translateX だけで表現する。
--------------------------------------------------------------------------- */
.about_2025kv-title.animation span,
.about_2025kv-title.animation b {
	display: block;
	opacity: 0;
	transform: translateX(-60px);
	transition:
		opacity .75s cubic-bezier(.16, 1, .3, 1),
		transform .75s cubic-bezier(.16, 1, .3, 1);
}

/* ② Our Mission ---- 少し勢いよく */
.about_2025kv-title.animation.on span {
	opacity: 1;
	transform: translateX(0);
	transition-delay: .5s;
}

/* ③ あなたの架け橋として ---- 少しゆっくり柔らかく */
.about_2025kv-title.animation b {
	transform: translateX(-52px);
	transition-duration: 1.15s;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.about_2025kv-title.animation.on b {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 1.15s;
}

/* ④ リード文 ---- ブロックごと、ほんの少し左から */
.about_2025kv-lead.animation {
	opacity: 0;
	transform: translateX(-30px);
	transition:
		opacity .9s ease,
		transform .9s cubic-bezier(.22, 1, .36, 1);
}

.about_2025kv-lead.animation.on {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 1.75s;
}

/* ⑤ 創るのは、お客様の未来です。---- 見出し → オレンジの線 → 本文 の順に出す。
   ブロックごと動かすと3つが同時に出てしまうので、
   外枠は動かさず（.on を受け取る役だけ）、中の3つを個別にずらしている。 */
.about_2025kv-block.animation {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ⑤-1 見出し ---- 左から */
.about_2025kv-block.animation .about_2025kv-block-title {
	opacity: 0;
	transform: translateX(-46px);
	transition:
		opacity .8s cubic-bezier(.16, 1, .3, 1),
		transform .8s cubic-bezier(.16, 1, .3, 1);
}

.about_2025kv-block.animation.on .about_2025kv-block-title {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 3s;
}

/* ⑤-2 オレンジの線 ---- 見出しが止まってから左へ伸びる。
   テーマ側の .animation.on.animation-marker（transition ショートハンド）に
   負けないよう、詳細度を上げて delay を指定する。 */
.about_2025kv-block .animation.on.animation-marker {
	transition: background-size .7s cubic-bezier(.22, 1, .36, 1) 3.8s;
}

/* ⑤-3 本文 ---- 最後にふわっと */
.about_2025kv-block.animation .about_2025kv-block-text {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity .9s ease,
		transform .9s cubic-bezier(.22, 1, .36, 1);
}

.about_2025kv-block.animation.on .about_2025kv-block-text {
	opacity: 1;
	transform: none;
	transition-delay: 4.5s;
}

@media (prefers-reduced-motion: reduce) {
	.about_2025kv-title.animation span,
	.about_2025kv-title.animation b,
	.about_2025kv-lead.animation {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.about_2025kv-block.animation .about_2025kv-block-title,
	.about_2025kv-block.animation .about_2025kv-block-text {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.about_2025kv-block .animation.on.animation-marker {
		transition: none;
	}
}

/* スマホのFV下部 (2026-09-12) ------------------------------------------------
   ・HEADLINE NEWS の帯は白地にして、KVとOUR VISIONの間の区切りにする
   ・縦書きのcopyrightを画面左端へ寄せる（rotate しているので left で調整）
--------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.kvlink-headline {
		left: 0;
		width: 100%;
		padding: 14px 16px 16px;
		background: #FFF;
	}

	.kvlink-headline:hover {
		background: #FFF;
	}

	.kvlink-copyright small {
		left: -158px;
	}
}


/* /about/ FVの背景を動画化 (2026-09-12) ------------------------------------
   元は <img> が高さを決めていたので、同じ縦横比を .about_2025kv-bg に持たせて
   レイアウトが動かないようにし、動画は絶対配置＋cover で流し込む。
   loop を付けていないので、最後のフレームで停止する。
--------------------------------------------------------------------------- */
.about_2025kv-bg {
	position: relative;
	overflow: hidden;
}

/* 動画をフローに置いて高さを決めさせ、負のマージンで下だけ100px詰める。
   （コンテナを縮めて cover させると構図が変わってしまうため、
     動画の大きさ・位置はそのままにして、はみ出した下側を切っている） */
.about_2025kv-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1440 / 1183;
	height: auto;
	object-fit: cover;
	object-position: center center;
	/* 上を60px（動画ごと持ち上げて切る）、下を200px。
	   拡大も object-position の変更もしていないので構図は元のまま。 */
	margin-top: -60px;
	/* 下側は「本文の下に空く余白の半分」を切る。
	   動画の高さは幅に比例して伸びるのに本文の位置はほぼ固定なので、
	   固定pxだと画面幅ごとに余白が変わってしまう。
	   実測（1440px / 2470px）から余白の増え方を直線で近似して、その半分を詰めている。 */
	margin-bottom: min(-100px, calc(85.5px - 23.8vw));
}

/* 文字は一式50px上へ。同じぶんFVの下も削っているので、本文の下の余白は変わらない。 */
@media screen and (min-width: 768px) {
	.about_2025kv_wrapper {
		top: -10px;
	}

	/* そこからさらに50px上へ。
	   上を流れる FORWARDS DESIGN はヘッダーに潜ってしまうので動かさず、
	   Our Mission から下だけを引き上げる。 */
	.about_2025kv-title {
		margin-top: -50px;
	}

	/* 「創るのは、お客様の未来です。」とオレンジの線だけ20px上へ。
	   本文は動かしたくないので、見出しの負のマージンぶんを本文で戻している。 */
	.about_2025kv-block-title {
		margin-top: -20px;
	}
}

@media screen and (max-width: 767px) {
	.about_2025kv-video {
		aspect-ratio: 375 / 1097;
		object-position: center 40%;
		/* スマホは縦の余裕が少ないので詰めるのは100pxまで */
		margin-top: 0;
		margin-bottom: -100px;
	}
}


/* /about/ FV ---- 動画の上に黒のグラデーションを重ねる (2026-09-12)
   上は透明のまま、下へいくほど真っ黒に。水面が明るく本文が読みにくくなるため。
   動画そのものは加工していない。
   下端はセクション背景（#060606）と同じ色まで落として、切れ目を見せない。 */
.about_2025kv-bg::before {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(6, 6, 6, 0) 0%, rgba(6, 6, 6, .18) 30%, rgba(6, 6, 6, .45) 50%, rgba(6, 6, 6, .78) 67%, rgba(6, 6, 6, .93) 78%, rgba(6, 6, 6, .99) 88%, #060606 100%);
	pointer-events: none;
	content: '';
}


/* セクション見出しを「日本語（小・上）＋英字（大・下）＋オレンジの下線」に統一 (2026-09-12)
   /about/ の Creator / Forwards と同じ組み。
   日本語はテキストノードなので order を持てないが、
   無名フレックスアイテムは order:0 のままなので figure 側を order:2 にすれば下へ回る。
--------------------------------------------------------------------------- */
.section-title:has(> figure > .title-en) {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 2rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1.4;
	letter-spacing: .12em;
}

.section-title:has(> figure > .title-en) > figure {
	order: 2;
	margin: 4px 0 0;
}

.section-title:has(> figure > .title-en) .title-en {
	margin-bottom: 0;
	padding: 0 10px 9px;
	font-size: 4.2rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: .05em;
	color: var(--text-color);
	background-image: linear-gradient(90deg, #e29c3e, #e29c3e);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 5px;
}

/* 線は画面に入ってから左へ伸びる。JSが無ければ最初から線あり。
   テーマ既存の .animation（.on を即座に付ける）では、読み込み時に
   画面内にある見出しが「線なし」の状態を1フレームも描かずに終わってしまうので、
   script.js 側で専用の監視を持たせている。 */
.js-kv .section-title:has(> figure > .title-en) .title-en {
	background-size: 0 5px;
}

.js-kv .section-title:has(> figure > .title-en) .title-en.is-drawn {
	background-size: 100% 5px;
	/* 日本語＋英字が出たあとに、少し置いて線が左から伸びる */
	transition: background-size .9s cubic-bezier(.22, 1, .36, 1) .55s;
}

@media screen and (max-width: 767px) {
	.section-title:has(> figure > .title-en) {
		font-size: 1.6rem;
	}

	.section-title:has(> figure > .title-en) .title-en {
		font-size: 3.2rem;
	}
}


/* ろうそくの灯り (2026-09-12) ------------------------------------------------
   暗いセクションで、カーソルの少し後ろを追いかける小さな炎。
   位置・光量・広がりは JS が CSS変数へ書き込む（script.js の「ろうそくの灯り」）。
   色は白や青ではなく、キャンドル特有のアンバー〜ゴールド。
   中心だけ明るく、外へ向かってなだらかに闇へ戻す多段グラデーション。
--------------------------------------------------------------------------- */
.candlelight {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(
			circle var(--candle-r, 300px) at var(--candle-x, 50%) var(--candle-y, 50%),
			rgba(255, 214, 152, calc(.46 * var(--candle-i, 1))) 0%,
			rgba(255, 194, 122, calc(.30 * var(--candle-i, 1))) 18%,
			rgba(255, 172,  92, calc(.165 * var(--candle-i, 1))) 36%,
			rgba(255, 154,  74, calc(.078 * var(--candle-i, 1))) 55%,
			rgba(255, 142,  62, calc(.028 * var(--candle-i, 1))) 74%,
			rgba(255, 136,  56, 0) 100%
		);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity .7s ease;
	pointer-events: none;
	will-change: background;
}

.candlelight.is-lit {
	opacity: 1;
}

/* 光は背景の上・本文の下に置く */
.about_2025message > .candlelight,
.indexpres > .candlelight {
	z-index: 0;
}

.about_2025message > .inner,
.indexpres > .inner {
	position: relative;
	z-index: 1;
}

/* 大きな英字は position:absolute のままにしておく
   （relative にすると流れに戻ってしまい、上に大きな空きができる） */
.about_2025message > .about_2025message-deco-01,
.about_2025message > .about_2025message-deco-02 {
	z-index: 1;
}

/* タッチ端末では出さない */
@media (hover: none) {
	.candlelight {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.candlelight {
		display: none;
	}
}


/* フッターのリンク ---- hoverで文字が左からオレンジに染まる (2026-09-12)
   文字の背景に「オレンジ｜元の色」の2色を敷き、background-clip:text で文字型に抜いて
   その背景を左へスライドさせている。文字そのものを塗り替えるので、
   背景のオレンジが文字の後ろに伸びるのとは見え方が違う。
--------------------------------------------------------------------------- */
.footer-nav a {
	background-image: linear-gradient(90deg, #e29c3e 50%, currentColor 50%);
	background-repeat: no-repeat;
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position .55s cubic-bezier(.22, 1, .36, 1);
}

/* 全体の a:hover（opacity .6）は、色の変化が濁るので効かせない */
.footer-nav a:hover,
.footer-nav a:focus-visible {
	opacity: 1;
	background-position: 0 0;
}

/* 〉は背景の外にあるので、色は個別に変える */
.footer-nav-list-child > li > a::before {
	-webkit-text-fill-color: currentColor;
	transition: color .4s ease;
}

.footer-nav-list-child > li > a:hover::before,
.footer-nav-list-child > li > a:focus-visible::before {
	color: #e29c3e;
}

@media (prefers-reduced-motion: reduce) {
	.footer-nav a {
		transition: none;
	}
}


/* /about/ FV ---- スマホの詰め (2026-09-12) ----------------------------------
   見出しから下を40px引き上げ、「創るのは、お客様の未来です。」はさらに上へ。 */
@media screen and (max-width: 767px) {
	.about_2025kv-title {
		margin-top: -40px;
	}

	.about_2025kv-block {
		margin-top: 30px;
	}
}


/* OUR FIELD ---- OUR VISION と同じ大きさに (2026-09-12)
   .section-title strong の 160px に対し、.indexvision-deco は 124px。
   並んで見える2つなので、FIELD 側を VISION に合わせる。
   （スマホはもともと両方 55px で揃っている） */
@media screen and (min-width: 768px) {
	.indexfield .section-title strong {
		font-size: calc(124 / 1440 * 100vw);
	}
}


/* 代表名の「陽」---- 最初は白、遅れてふわっとオレンジへ (2026-09-12)
   親（.about_2025message-head-summary）が画面に入って .on を受け取ってから、
   本文が出そろうのを待って色が変わる。 */
.about_2025message-head-summary.animation .about_2025message-head-name .fc-orange-02 {
	color: #FFF;
	transition: color 1.2s ease;
}

.about_2025message-head-summary.animation.on .about_2025message-head-name .fc-orange-02 {
	color: var(--ac-color-orange-02);
	transition-delay: 1.3s;
}

@media (prefers-reduced-motion: reduce) {
	.about_2025message-head-summary.animation .about_2025message-head-name .fc-orange-02 {
		color: var(--ac-color-orange-02);
		transition: none;
	}
}


/* CTAボタンの hover を共通で刷新 (2026-09-12) --------------------------------
   ・押し込む（inset影）のをやめる
   ・枠をオレンジの線がぐるぐる回り続ける
   ・中の文字が左から一文字ずつオレンジに変わる
   ・最後に矢印がふわっと出てくる（待機時は矢印を出さない）

   文字の分解と、矢印を待たせる時間（--btn-arrow-delay）は script.js が付ける。
   JSが無い場合は、文字色も矢印も従来どおり（矢印は出たまま）になる。
--------------------------------------------------------------------------- */
@property --btn-orbit {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* ① 押し込みをやめる ---- 待機時と同じ影のまま */
.btn:hover,
.btn-small.btn:hover {
	box-shadow: 0 3px 4px -2px rgba(10,2,4,.37), -4px -4px 2px rgba(255,255,255,1), inset 0 3px 4px -2px rgba(255, 255, 255, 0), inset -4px -4px 2px rgba(255, 255, 255, 0);
}

.btn-small.btn,
.btn-small.btn:hover {
	box-shadow: 0 2px 3px -2px rgba(10,2,4,.37), -1px -1px 3px rgba(255,255,255,1), inset 0 2px 3px -2px rgba(255, 255, 255, 0), inset -1px -1px 3px rgba(255, 255, 255, 0);
}

.btn.btn-normal,
.btn.btn-normal:hover {
	box-shadow: unset;
}

/* ② 枠を回るオレンジの線 ---- 角丸に沿った2pxのリングを、円錐グラデで一周させる。
   リングは「2pxの透明ボーダーに円錐グラデ（border-box）＋内側をボタン色で塗り潰す
   （padding-box）」で作る。mask を使うと、描画が切り替わる瞬間に
   マスクが外れて面ごとオレンジに見えることがあるため。
   z-index:-1 でボタンの背景の上・文字の下に置く。 */
.btn::before {
	position: absolute;
	inset: -2px;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: inherit;
	background:
		linear-gradient(var(--btn-face, var(--bg-color)), var(--btn-face, var(--bg-color))) padding-box,
		conic-gradient(
			from var(--btn-orbit),
			rgba(234, 161, 60, 0) 0deg,
			rgba(234, 161, 60, 0) 232deg,
			rgba(234, 161, 60, .35) 268deg,
			#eaa13c 310deg,
			#eaa13c 344deg,
			rgba(234, 161, 60, 0) 360deg
		) border-box;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	content: '';
}

/* 内側の塗りは、ボタンの背景色に合わせる */
.btn-white { --btn-face: #FFF; }
.btn-gray { --btn-face: #E7E7E7; }

.btn:hover::before,
.btn:focus-visible::before {
	opacity: 1;
	animation: btn-orbit 1.7s linear infinite;
}

@keyframes btn-orbit {
	to { --btn-orbit: 360deg; }
}

/* ③ 文字が左から一文字ずつオレンジに ---- 遅延は script.js が1文字ずつ付ける */
.btn .btn-char {
	display: inline-block;
	transition: color .25s ease;
}

.btn:hover .btn-char,
.btn:focus-visible .btn-char {
	color: var(--ac-color-orange-02);
}

/* ④ 矢印は最後にふわっと ---- JSが入ったときだけ待機時は隠す */
.js-kv .btn .arrow-right-black,
.js-kv .btn .arrow-right-orange,
.js-kv .btn .arrow-right-green {
	opacity: 0;
	transform: translateY(-50%) translateX(-8px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.js-kv .btn .arrow-left-black {
	opacity: 0;
	transform: translateY(-50%) translateX(8px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.js-kv .btn:hover .arrow-right-black,
.js-kv .btn:hover .arrow-right-orange,
.js-kv .btn:hover .arrow-right-green,
.js-kv .btn:hover .arrow-left-black,
.js-kv .btn:focus-visible .arrow-right-black,
.js-kv .btn:focus-visible .arrow-right-orange,
.js-kv .btn:focus-visible .arrow-right-green,
.js-kv .btn:focus-visible .arrow-left-black {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	transition-delay: var(--btn-arrow-delay, .5s);
}

@media (prefers-reduced-motion: reduce) {
	.btn::before {
		display: none;
	}

	.btn .btn-char {
		transition: none;
	}

	.js-kv .btn .arrow-right-black,
	.js-kv .btn .arrow-right-orange,
	.js-kv .btn .arrow-right-green,
	.js-kv .btn .arrow-left-black {
		opacity: 1;
		transform: translateY(-50%);
		transition: none;
	}
}


/* 見出しを1文字ずつ出す (2026-09-12) ----------------------------------------
   script.js が文字を .js-char に包み、遅延を1文字ずつずらす。
   ブロックごとのフェードは二重になるので止め、文字側だけで見せる。
   JSが動かない場合は .js-char が無いので、そのまま普通に表示される。 */
.js-chars.animation {
	opacity: 1;
	transform: none;
	transition: none;
}

.js-chars .js-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(.3em);
	transition:
		opacity .55s ease,
		transform .55s cubic-bezier(.22, 1, .36, 1);
}

.js-chars.animation.on .js-char,
.animation.on .js-chars .js-char {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-chars .js-char {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* 下層ページの大きな英字 (2026-09-12) ---------------------------------------
   /about/ の STRENGTH と同じ見え方のものを、
   事業案内・制作実績・会社概要・お問い合わせにも置く。
   流れる向き（左／右）は script.js が読み込みごとにランダムで決める。
--------------------------------------------------------------------------- */
.pagecontent,
.pageservice {
	position: relative;
}

.pagedeco {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	overflow: hidden;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.pagedeco strong {
	font-size: calc(160 / 1440 * 100vw);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
	background: linear-gradient(86deg, rgba(242, 183, 133, 0.21) 0%, rgba(233, 232, 70, 0.21) 48%, rgba(242, 183, 133, 0.21) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 本文は英字より前へ */
.pagecontent > .inner,
.pagecontent > .container,
.pageservice > .service > .inner {
	position: relative;
	z-index: 1;
}

/* JSが向きを付けられなかったとき（動きを減らす設定など）は複製を出さない */
.js-marquee-random:not(.titlemarquee-left):not(.titlemarquee-right) > *:nth-child(2) {
	display: none;
}

@media screen and (max-width: 767px) {
	.pagedeco strong {
		font-size: calc(55 / 375 * 100vw);
	}
}


/* 制作実績カテゴリーページ ---- 親の「制作実績」をオレンジに (2026-09-12) */
.section-title-parent {
	color: var(--ac-color-orange-02);
}


/* 制作実績のカテゴリー切り替え (2026-09-12) ----------------------------------
   見た目は事業案内のタブ（.servicetab）に合わせた小さい版。
   10項目を1行に収めたいので、文字と余白を詰め、折り返さず横スクロールにする。
   一覧ページではページを移動せず、その場で絞り込む（script.js）。
--------------------------------------------------------------------------- */
.cattabs {
	margin: 0 0 46px;
}

.cattabs-scroll {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 5px;
	width: 100%;
	border-bottom: 2px solid #E1E1E1;
	overflow-x: auto;
	scrollbar-width: none;
}

.cattabs-scroll::-webkit-scrollbar {
	display: none;
}

.cattab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 24px;
	border-radius: 5px 5px 0 0;
	background: #E1E1E1;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: .08em;
	line-height: 1;
	color: var(--text-color);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.cattab:hover,
.cattab:focus-visible,
.cattab.is-active {
	opacity: 1;
	background: var(--ac-color-orange);
	color: #FFF;
}

.cattabs-count {
	display: flex;
	align-items: baseline;
	/* 最後のタブ（その他）の下あたりに置く */
	justify-content: flex-end;
	gap: .4em;
	margin: 16px 0 0;
	padding-right: 4px;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: .2em;
	color: #9A948C;
}

/* 数字だけ大きく。0から数え上げ、止まったところでオレンジへ */
.cattabs-count b {
	font-family: "Figtree", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 3.2rem;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	color: var(--text-color);
	font-variant-numeric: tabular-nums;
	transition: color .8s ease;
}

.cattabs-count.is-done b {
	color: var(--ac-color-orange);
}

@media (prefers-reduced-motion: reduce) {
	.cattabs-count b {
		transition: none;
	}
}

.catempty {
	padding: 40px 0 60px;
	font-size: 1.4rem;
	letter-spacing: .08em;
	color: #8C8C8C;
	text-align: center;
}

/* 絞り込み中の一覧 ---- 隙間は gap で作る。
   もとの margin-right + :nth-of-type(3n) だと、隠れた項目まで数えてしまい
   列の右端がずれるため。幅と余白の値は今までと同じ。 */
.archive-list.js-catgrid {
	gap: 50px 4%;
}

.archive-list.js-catgrid > .archive-item,
.archive-list.js-catgrid > .archive-item:nth-of-type(3n) {
	width: calc(92% / 3);
	margin-right: 0;
	margin-bottom: 0;
}

.archive-list.js-catgrid > .archive-item.is-cat-hidden {
	display: none;
}

/* 切り替え中はいったん薄くする */
.archive-list.js-catgrid.is-fading {
	opacity: .3;
	transition: opacity .18s ease;
}

/* 新しく出てくる項目は、下から少しだけ上がりながら */
.archive-list.js-catgrid > .archive-item.is-enter {
	opacity: 0;
	transform: translateY(10px);
	transition: none;
}

.archive-list.js-catgrid > .archive-item.is-enter-active {
	opacity: 1;
	transform: none;
	transition:
		opacity .35s ease,
		transform .35s cubic-bezier(.22, 1, .36, 1);
}

@media screen and (max-width: 767px) {
	/* スマホは件数を中央に戻す */
	.cattabs-count {
		justify-content: center;
		padding-right: 0;
	}

	/* スマホも1行のまま。端で切れることで横へスワイプできると分かる */
	.cattabs-scroll {
		justify-content: flex-start;
		padding: 0 20px;
		margin: 0 -20px;
		-webkit-overflow-scrolling: touch;
	}

	.archive-list.js-catgrid {
		gap: 40px 6%;
	}

	.archive-list.js-catgrid > .archive-item,
	.archive-list.js-catgrid > .archive-item:nth-of-type(3n),
	.archive-list.js-catgrid > .archive-item:nth-of-type(2n),
	.archive-list.js-catgrid > .archive-item:nth-of-type(4n) {
		width: 47%;
		margin-right: 0;
		margin-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.archive-list.js-catgrid.is-fading {
		opacity: 1;
		transition: none;
	}

	.archive-list.js-catgrid > .archive-item.is-enter,
	.archive-list.js-catgrid > .archive-item.is-enter-active {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* サービスページの大きな英字見出し ---- 文字間を半分に (2026-09-12)
   Strength / Service / Voice など、0.3em だったものをまとめて 0.15em に。 */
.servicestrength-title .title-en,
.servicecontent-title .title-en,
.serviceflow-title .title-en,
.serviceportfolio-title .title-en {
	letter-spacing: .15em;
}


/* Point ブロックの登場順 (2026-09-12) ----------------------------------------
   ① Point N（1文字ずつ左から）→ ② 線が左から伸びる
   → ③ 写真が左から残像とともに → ④ 見出しの文字
   → ⑤ オレンジのマーカー → ⑥ 本文
   合図は既存の <li class="animation"> が受け取る .on。
   JSが動かない場合（.js-kv が付かない）は、今までどおり全部見えている。
--------------------------------------------------------------------------- */
.servicestrength-list > li.animation {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ② 線 ---- 左から伸びる */
.js-kv .servicestrength-list-point::before {
	transform: scaleX(0);
	transform-origin: left center;
}

.js-kv .servicestrength-list > li.animation.on .servicestrength-list-point::before {
	transform: scaleX(1);
	transition: transform .7s cubic-bezier(.22, 1, .36, 1) .75s;
}

/* ③ 写真 ---- 左から。残像は本体より遅れて追いかけ、途中で消える */
.servicestrength-list-img {
	position: relative;
}

.servicestrength-list-img .is-ghost {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

.js-kv .servicestrength-list-img > img {
	opacity: 0;
}

.js-kv .servicestrength-list > li.animation.on .servicestrength-list-img > img:not(.is-ghost) {
	animation: point-photo-in .75s cubic-bezier(.16, 1, .3, 1) 1.35s both;
}

.js-kv .servicestrength-list > li.animation.on .servicestrength-list-img > .is-ghost {
	animation: point-photo-ghost .75s cubic-bezier(.16, 1, .3, 1) 1.44s both;
}

@keyframes point-photo-in {
	from {
		opacity: 0;
		transform: translateX(-46px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes point-photo-ghost {
	0% {
		opacity: 0;
		transform: translateX(-46px);
	}
	28% {
		opacity: .5;
	}
	100% {
		opacity: 0;
		transform: translateX(0);
	}
}

/* ④ 見出しの文字 */
.js-kv .servicestrength-list-title {
	opacity: 0;
}

.js-kv .servicestrength-list > li.animation.on .servicestrength-list-title {
	opacity: 1;
	transition: opacity .6s ease 2.05s;
}

/* ⑤ オレンジのマーカー ---- 文字が出たあとに左から引かれる */
.js-kv .servicestrength-list-title .marker-orange {
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
}

.js-kv .servicestrength-list > li.animation.on .servicestrength-list-title .marker-orange {
	background-size: 100% 100%;
	transition: background-size .6s cubic-bezier(.22, 1, .36, 1) 2.6s;
}

/* ⑥ 本文 */
.js-kv .servicestrength-list-text {
	opacity: 0;
	transform: translateY(10px);
}

.js-kv .servicestrength-list > li.animation.on .servicestrength-list-text {
	opacity: 1;
	transform: none;
	transition:
		opacity .6s ease 3.05s,
		transform .6s cubic-bezier(.22, 1, .36, 1) 3.05s;
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .servicestrength-list-point::before {
		transform: none;
	}

	.js-kv .servicestrength-list-img > img,
	.js-kv .servicestrength-list-title,
	.js-kv .servicestrength-list-text {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.servicestrength-list-img .is-ghost {
		display: none;
	}

	.js-kv .servicestrength-list-title .marker-orange {
		background-size: 100% 100%;
	}
}


/* カテゴリータブ ---- スマホで「まだ続きがある」ことを示す矢印 (2026-09-12)
   右端をぼかして矢印を出す。端まで送ると消える（.is-scroll-end は script.js）。 */
.cattabs {
	position: relative;
}

.cattabs-fade,
.cattabs-more {
	display: none;
}

@media screen and (max-width: 767px) {
	/* 右端のぼかし。ここは押せなくてよいので触れない */
	.cattabs-fade {
		display: block;
		position: absolute;
		top: 0;
		right: -20px;
		width: 58px;
		height: 44px;
		background: linear-gradient(to right, rgba(249, 249, 249, 0) 0%, var(--bg-color) 58%);
		opacity: 1;
		transition: opacity .25s ease;
		pointer-events: none;
	}

	/* 矢印は押せるボタン。押すと1画面ぶん右へ送る（script.js） */
	.cattabs-more {
		display: flex;
		position: absolute;
		top: 0;
		right: -20px;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		opacity: 1;
		transition: opacity .25s ease;
		cursor: pointer;
	}

	.cattabs-more::after {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 8px solid var(--ac-color-orange);
		animation: cattabs-nudge 1.6s ease-in-out infinite;
		content: '';
	}

	/* 右端まで送ったら消す。送る先が無いときも出さない */
	.cattabs.is-scroll-end .cattabs-fade,
	.cattabs.is-scroll-end .cattabs-more,
	.cattabs.is-scroll-none .cattabs-fade,
	.cattabs.is-scroll-none .cattabs-more {
		opacity: 0;
		pointer-events: none;
	}
}

@keyframes cattabs-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.cattabs-more::after {
		animation: none;
	}
}


/* LINE・電話のブロック ---- 浮き上がりをやめ、枠をオレンジの線が回る (2026-09-12)
   仕組みはCTAボタンの縁と同じ（2pxの透明ボーダーに円錐グラデ＋内側は地色）。
   電話番号は画像なので、左から少しずつ現れる形（steps）で1文字ずつに見せている。
--------------------------------------------------------------------------- */
.linelink-block {
	position: relative;
	z-index: 0;
	--btn-face: #F4F4F4;
}

.linelink-block:hover,
.linelink-block:focus-within {
	transform: none;
	box-shadow: 0 0 12px rgba(53, 53, 53, .06);
}

.linelink-block::before {
	position: absolute;
	inset: -2px;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: 14px;
	background:
		linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
		conic-gradient(
			from var(--btn-orbit),
			rgba(234, 161, 60, 0) 0deg,
			rgba(234, 161, 60, 0) 232deg,
			rgba(234, 161, 60, .35) 268deg,
			#eaa13c 310deg,
			#eaa13c 344deg,
			rgba(234, 161, 60, 0) 360deg
		) border-box;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	content: '';
}

.linelink-block:hover::before,
.linelink-block:focus-within::before {
	opacity: 1;
	animation: btn-orbit 2.6s linear infinite;
}

/* 電話番号 ---- 左からふわっと現れる。
   境目をぼかしたマスクを右から左へ動かしながら、全体もフェードさせる。 */
.js-kv .linelink-info-tel img {
	opacity: 0;
	-webkit-mask-image: linear-gradient(to right, #000 52%, rgba(0, 0, 0, 0) 88%);
	-webkit-mask-size: 240% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-image: linear-gradient(to right, #000 52%, rgba(0, 0, 0, 0) 88%);
	mask-size: 240% 100%;
	mask-repeat: no-repeat;
	mask-position: 100% 0;
}

.js-kv .linelink-block.animation.on .linelink-info-tel img {
	animation: tel-soft 1.6s cubic-bezier(.33, .7, .3, 1) .4s both;
}

@keyframes tel-soft {
	0% {
		opacity: 0;
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
	35% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

/* 電話・メール ---- hoverでオレンジに。
   画像の不透明な部分（文字と絵）だけをマスクに使って、上からオレンジを乗せる。 */
.linelink-info-tel,
.linelink-info-mail {
	position: relative;
}

.linelink-info-tel::after,
.linelink-info-mail::after {
	position: absolute;
	inset: 0;
	background: var(--ac-color-orange);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	content: '';
}

.linelink-info-tel::after {
	-webkit-mask: url(../img/common/img_line_tel.webp) no-repeat center / contain;
	mask: url(../img/common/img_line_tel.webp) no-repeat center / contain;
}

.linelink-info-mail::after {
	-webkit-mask: url(../img/common/img_line_mail.webp) no-repeat center / contain;
	mask: url(../img/common/img_line_mail.webp) no-repeat center / contain;
}

.linelink-info-tel:hover::after,
.linelink-info-tel:focus-visible::after,
.linelink-info-mail:hover::after,
.linelink-info-mail:focus-visible::after {
	opacity: 1;
}

/* 画像そのものの薄まり（a:hover の opacity .6）は要らない */
.linelink-info-tel:hover,
.linelink-info-mail:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.linelink-block::before {
		display: none;
	}

	.js-kv .linelink-info-tel img {
		opacity: 1;
		-webkit-mask-image: none;
		mask-image: none;
		animation: none;
	}
}


/* スマホのナビ ---- 「制作実績」そのものをタップで一覧へ (2026-09-12)
   ＋／− の部分は今までどおり開閉に使えるよう、リンクは文字の幅だけにする。 */
@media screen and (max-width: 767px) {
	.gnav-list-title > a {
		display: inline-block;
	}
}


/* トップの3カード ---- hoverで枠をオレンジの線が回る (2026-09-12)
   仕組みはCTAボタン・LINEブロックと同じ。 */
.indexinformation-list > li {
	position: relative;
	z-index: 0;
	--btn-face: #F9F9F9;
}

.indexinformation-list > li::before {
	position: absolute;
	inset: -2px;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: 18px;
	background:
		linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
		conic-gradient(
			from var(--btn-orbit),
			rgba(234, 161, 60, 0) 0deg,
			rgba(234, 161, 60, 0) 232deg,
			rgba(234, 161, 60, .35) 268deg,
			#eaa13c 310deg,
			#eaa13c 344deg,
			rgba(234, 161, 60, 0) 360deg
		) border-box;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	content: '';
}

.indexinformation-list > li:hover::before,
.indexinformation-list > li:focus-within::before {
	opacity: 1;
	animation: btn-orbit 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.indexinformation-list > li::before {
		display: none;
	}
}


/* PORTFOLIO のリード (2026-09-12) --------------------------------------------
   ① 見出しが左から1文字ずつ → ② 本文が遅れてフェード
   → ③ 最後に「その一瞬で、」だけオレンジに変わる。
   ①は .js-chars の仕組み（script.js）をそのまま使う。 */
.indexportfolio .section-lead.js-chars .fc-orange {
	color: var(--text-color);
}

.indexportfolio .section-lead.js-chars.animation.on .fc-orange {
	color: var(--ac-color-orange);
	transition: color .9s ease 2.3s;
}

.indexportfolio .section-text.animation.on {
	transition-delay: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
	.indexportfolio .section-lead.js-chars .fc-orange {
		color: var(--ac-color-orange);
		transition: none;
	}

	.indexportfolio .section-text.animation.on {
		transition-delay: 0s;
	}
}


/* 制作実績カード ---- hoverで枠をオレンジが回り、案件名が左からオレンジへ (2026-09-12)
   枠はサムネイルの角丸に沿った2pxのリング。
   .image は overflow:hidden なので、はみ出させず内側に描く。 */
.archive-item .image {
	position: relative;
	z-index: 0;
	--btn-face: #F9F9F9;
}

.archive-item .image::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: inherit;
	background:
		linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
		conic-gradient(
			from var(--btn-orbit),
			rgba(234, 161, 60, 0) 0deg,
			rgba(234, 161, 60, 0) 232deg,
			rgba(234, 161, 60, .35) 268deg,
			#eaa13c 310deg,
			#eaa13c 344deg,
			rgba(234, 161, 60, 0) 360deg
		) border-box;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
	content: '';
}

.archive-item:hover .image::after,
.archive-item:focus-within .image::after {
	opacity: 1;
	animation: btn-orbit 2.2s linear infinite;
}

/* 案件名 ---- 文字そのものが左からオレンジに染まる */
.archive-item .tit h2 {
	background-image: linear-gradient(90deg, #e29c3e 50%, currentColor 50%);
	background-repeat: no-repeat;
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position .55s cubic-bezier(.22, 1, .36, 1);
}

.archive-item:hover .tit h2,
.archive-item:focus-within .tit h2 {
	background-position: 0 0;
}

/* 全体の a:hover（opacity .6）は色が濁るので効かせない */
.archive-item a:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.archive-item .image::after {
		display: none;
	}

	.archive-item .tit h2 {
		transition: none;
	}
}


/* サービスカード ---- 浮き上がりをやめ、枠をオレンジの線が回る (2026-09-12)
   「詳しくみる」の文字は、カードに触れた時点で左から順にオレンジへ。 */
.indexservice-list > li,
.service-list > li {
	position: relative;
	z-index: 0;
	--btn-face: #F9F9F9;
}

.indexservice-list > li:hover,
.service-list > li:hover,
.indexservice-list > li:focus-within,
.service-list > li:focus-within {
	transform: none;
	box-shadow:
		2px 2px 6px rgba(53, 53, 53, .06),
		-6px -6px 10px rgba(255, 255, 255, .9);
}

.indexservice-list > li::before,
.service-list > li::before {
	position: absolute;
	inset: -2px;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: 10px;
	background:
		linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
		conic-gradient(
			from var(--btn-orbit),
			rgba(234, 161, 60, 0) 0deg,
			rgba(234, 161, 60, 0) 232deg,
			rgba(234, 161, 60, .35) 268deg,
			#eaa13c 310deg,
			#eaa13c 344deg,
			rgba(234, 161, 60, 0) 360deg
		) border-box;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	content: '';
}

.indexservice-list > li:hover::before,
.service-list > li:hover::before,
.indexservice-list > li:focus-within::before,
.service-list > li:focus-within::before {
	opacity: 1;
	animation: btn-orbit 2.4s linear infinite;
}

/* カードに触れたら「詳しくみる」も左から染まる。ボタン自身の縁は回さない */
.indexservice-list > li:hover .btn .btn-char,
.service-list > li:hover .btn .btn-char,
.indexservice-list > li:focus-within .btn .btn-char,
.service-list > li:focus-within .btn .btn-char {
	color: var(--ac-color-orange-02);
}

@media (prefers-reduced-motion: reduce) {
	.indexservice-list > li::before,
	.service-list > li::before {
		display: none;
	}
}


/* 領域カード ---- 拡大をやめ、枠をオレンジの線が回る (2026-09-12)
   カードには背景写真が入るので、リングはカードの外側（li）に描く。
   角丸を10px（カードの8px＋ボーダー2px）にすると、
   リングの内側がカードの外形とぴったり重なるので、内側の塗りは一切見えない。 */
.fieldlist-item {
	position: relative;
	z-index: 0;
	--btn-face: #F9F9F9;
}

.fieldlist-item > a:hover,
.fieldlist-item > a:focus-visible {
	transform: none;
	box-shadow:
		2px 2px 6px rgba(53, 53, 53, .06),
		-6px -6px 10px rgba(255, 255, 255, .9);
}

.fieldlist-item::before {
	position: absolute;
	inset: -2px;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: 10px;
	background:
		linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
		conic-gradient(
			from var(--btn-orbit),
			rgba(234, 161, 60, 0) 0deg,
			rgba(234, 161, 60, 0) 232deg,
			rgba(234, 161, 60, .35) 268deg,
			#eaa13c 310deg,
			#eaa13c 344deg,
			rgba(234, 161, 60, 0) 360deg
		) border-box;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	content: '';
}

.fieldlist-item:hover::before,
.fieldlist-item:focus-within::before {
	opacity: 1;
	animation: btn-orbit 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.fieldlist-item::before {
		display: none;
	}
}


/* 会社概要の地図 ---- 縦をしっかり取る (2026-09-12) */
.ggmap iframe {
	display: block;
	width: 100%;
	height: 700px;
	border: 0;
}

@media screen and (max-width: 767px) {
	.ggmap iframe {
		height: 440px;
	}
}


/* ヘッダーのロゴ ---- 黒で出て、最後にふわっとオレンジへ (2026-09-12)
   SVGは編集せず filter: brightness() で色を送る。
   brightness(0) は元の色に関係なく真っ黒になるので、0 → 1 で「黒 → 本来のオレンジ」。
   トップはローディングが明けてから（body.is-kv-ready）、下層ページは読み込み直後から。 */
.js-kv .header-logo img {
	animation: logo-color 1.3s ease 1.2s both;
}

.js-kv body.home .header-logo img {
	animation: none;
	filter: brightness(0);
}

.js-kv body.home.is-kv-ready .header-logo img {
	animation: logo-color 1.3s ease 1.2s both;
}

@keyframes logo-color {
	from { filter: brightness(0); }
	to   { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .header-logo img,
	.js-kv body.home .header-logo img,
	.js-kv body.home.is-kv-ready .header-logo img {
		animation: none;
		filter: none;
	}
}


/* 送信前の確認モーダル (2026-09-12) ------------------------------------------
   「営業はお断り」ではなく、キャラクターが送信前に確認してくれる形。
   お問い合わせフォームの送信と、メールアドレスのリンクで使う。
--------------------------------------------------------------------------- */
.sendcheck {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sendcheck[hidden] {
	display: none;
}

.sendcheck-veil {
	position: absolute;
	inset: 0;
	background: rgba(28, 24, 20, .55);
	opacity: 0;
	transition: opacity .3s ease;
	cursor: pointer;
}

.sendcheck.is-open .sendcheck-veil {
	opacity: 1;
}

.sendcheck-box {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: auto;
	padding: 0 40px 36px;
	border-radius: 22px;
	background: #FFF;
	box-shadow: 0 24px 60px rgba(28, 24, 20, .22);
	opacity: 0;
	transform: translateY(16px) scale(.96);
	transition:
		opacity .35s ease,
		transform .35s cubic-bezier(.22, 1, .36, 1);
}

.sendcheck.is-open .sendcheck-box {
	opacity: 1;
	transform: none;
}

/* --- キャラクターと吹き出し --- */
.sendcheck-head {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	margin-top: -46px;
}

.sendcheck-char {
	flex: 0 0 auto;
	width: 178px;
	margin: 0;
	opacity: 0;
	transform: translateY(15px) scale(.96);
	transition:
		opacity .4s ease .12s,
		transform .45s cubic-bezier(.22, 1.4, .5, 1) .12s;
}

.sendcheck.is-open .sendcheck-char {
	opacity: 1;
	transform: none;
}

.sendcheck-char img {
	display: block;
	width: 100%;
	height: auto;
}

.sendcheck-balloon {
	position: relative;
	flex: 0 0 auto;
	margin: 0 0 112px;
	padding: 12px 18px;
	border-radius: 14px;
	background: #FFF;
	box-shadow: 0 4px 14px rgba(28, 24, 20, .14);
	font-weight: 700;
	font-size: 1.7rem;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--ac-color-orange);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(8px) scale(.94);
	transition:
		opacity .35s ease .3s,
		transform .4s cubic-bezier(.22, 1.4, .5, 1) .3s;
}

.sendcheck.is-open .sendcheck-balloon {
	opacity: 1;
	transform: none;
}

/* 吹き出しの先端（右のキャラクターへ向ける） */
.sendcheck-balloon::after {
	position: absolute;
	right: -8px;
	bottom: 13px;
	width: 0;
	height: 0;
	border-left: 9px solid #FFF;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	filter: drop-shadow(2px 1px 2px rgba(28, 24, 20, .08));
	content: '';
}

/* --- 本文 --- */
.sendcheck-body {
	margin-top: 4px;
	text-align: center;
}

.sendcheck-title {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--text-color);
}

.sendcheck-text {
	margin: 0 0 24px;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: .06em;
	color: #6B6560;
}

/* --- チェックボックス --- */
.sendcheck-agree {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #F7F5F2;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--text-color);
	text-align: left;
	cursor: pointer;
	transition: background-color .25s ease;
}

.sendcheck-agree:hover {
	background: #F2EEE8;
}

.sendcheck-agree input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sendcheck-agree-box {
	display: block;
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid #D8D2C9;
	border-radius: 7px;
	background: #FFF;
	transition: border-color .2s ease, background-color .2s ease;
}

.sendcheck-agree-box::after {
	position: absolute;
	top: 3px;
	left: 7px;
	width: 5px;
	height: 10px;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	transform: rotate(45deg) scale(.6);
	opacity: 0;
	transition: opacity .2s ease, transform .2s cubic-bezier(.22, 1.4, .5, 1);
	content: '';
}

.sendcheck-agree input:checked + .sendcheck-agree-box {
	border-color: var(--ac-color-orange);
	background: var(--ac-color-orange);
}

.sendcheck-agree input:checked + .sendcheck-agree-box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.sendcheck-agree input:focus-visible + .sendcheck-agree-box {
	outline: 2px solid var(--ac-color-orange);
	outline-offset: 3px;
}

/* --- ボタン --- */
.sendcheck-go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 32px;
	background: var(--ac-color-orange);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: .12em;
	color: #FFF;
	cursor: pointer;
	transition: background-color .25s ease, opacity .25s ease;
}

.sendcheck-go[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.sendcheck-go:not([disabled]):hover {
	background: #F5B274;
}

.sendcheck-go-arrow {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid #FFF;
	transition: transform .25s ease;
}

.sendcheck-go:not([disabled]):hover .sendcheck-go-arrow {
	transform: translateX(3px);
}

.sendcheck-back {
	display: inline-block;
	margin: 16px auto 0;
	padding: 6px 10px;
	border: 0;
	background: transparent;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: .08em;
	color: #8C857D;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .25s ease;
}

.sendcheck-back:hover {
	color: var(--text-color);
}

/* 背面のスクロールを止める */
body.is-sendcheck-open {
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	.sendcheck {
		padding: 20px 4%;
		align-items: flex-start;
	}

	.sendcheck-box {
		max-width: 92%;
		padding: 0 20px 28px;
		border-radius: 20px;
	}

	.sendcheck-head {
		margin-top: -34px;
		gap: 4px;
	}

	.sendcheck-char {
		width: 128px;
	}

	.sendcheck-balloon {
		margin-bottom: 78px;
		padding: 10px 14px;
		font-size: 1.5rem;
	}

	.sendcheck-title {
		font-size: 1.7rem;
	}

	.sendcheck-text {
		font-size: 1.3rem;
		line-height: 1.9;
	}

	.sendcheck-agree {
		font-size: 1.2rem;
	}

	.sendcheck-go {
		min-height: 54px;
		font-size: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sendcheck-veil,
	.sendcheck-box,
	.sendcheck-char,
	.sendcheck-balloon {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* 確認モーダル ---- 電話番号を押したとき (2026-09-12) -------------------------
   「営業電話はご遠慮ください」。怒っているのではなく、
   電話対応に追われるキャラクターが困りながらお願いしている見せ方。
   フォーム送信・メールとは役割が違うので、文言とキャラクターだけ差し替える。
--------------------------------------------------------------------------- */
/* .sendcheck-char img { display:block } に負けない詳細度で出し分ける */
.sendcheck-char img.sendcheck-char-call {
	display: none;
}

.sendcheck.is-tel .sendcheck-char img.sendcheck-char-mail {
	display: none;
}

.sendcheck.is-tel .sendcheck-char img.sendcheck-char-call {
	display: block;
}

.sendcheck.is-tel .sendcheck-box {
	max-width: 620px;
}

/* 横長の絵なので、吹き出しはキャラクターの頭の上に置く */
.sendcheck.is-tel .sendcheck-head {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	margin-top: -22px;
}

.sendcheck.is-tel .sendcheck-char {
	width: 100%;
}

.sendcheck.is-tel .sendcheck-balloon {
	margin: 0 7% -14px 0;
	color: var(--text-color);
}

.sendcheck.is-tel .sendcheck-balloon::after {
	top: auto;
	right: 26px;
	bottom: -8px;
	left: auto;
	border-top: 9px solid #FFF;
	border-right: 7px solid transparent;
	border-bottom: 0;
	border-left: 7px solid transparent;
	filter: drop-shadow(0 3px 2px rgba(28, 24, 20, .08));
}

/* 「営業電話はご遠慮ください。」は一番に読ませたいので少し大きく */
.sendcheck.is-tel .sendcheck-title {
	font-size: 2.2rem;
}

/* 「大歓迎です！」はオレンジで前向きに */
.sendcheck-text b {
	display: inline-block;
	margin-bottom: 2px;
	font-weight: 700;
	color: var(--ac-color-orange);
}

@media screen and (max-width: 767px) {
	.sendcheck.is-tel .sendcheck-box {
		max-width: 92%;
	}

	.sendcheck.is-tel .sendcheck-head {
		margin-top: -16px;
	}

	.sendcheck.is-tel .sendcheck-balloon {
		margin: 0 5% -10px 0;
	}

	.sendcheck.is-tel .sendcheck-title {
		font-size: 1.9rem;
	}
}


/* OUR VISION のキャラクター (2026-09-12) -------------------------------------
   「地域と人に、前進する力を。」の下、左の空いているところに置く。
   下から残像とともに駆け上がってきて、少し遅れて GO FORWARD が出る。
   絶対配置なので、ほかの要素の位置は動かない。
--------------------------------------------------------------------------- */
.indexvision-char {
	/* いったん非表示（2026-09-12）。再開するときはこの1行を消す */
	display: none;

	position: absolute;
	/* オレンジの帯から少しはみ出して立たせる */
	bottom: -100px;
	left: 21%;
	z-index: 4;
	width: min(18vw, 252px);
	margin: 0;
	pointer-events: none;
}

.indexvision-char img {
	display: block;
	width: 100%;
	height: auto;
}

.indexvision-char .indexvision-char-ghost {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

/* 線画とカラーを重ねて置き、スクロールに合わせて入れ替える。
   線画は中身が透明（線だけ）なので、カラーを上に重ねて不透明度で切り替える。
   割合は script.js が --char-sketch に書き込む（1＝線画のみ、0＝カラーのみ）。
   2枚とも同じ 401×512 のキャンバスで書き出しているので位置はぴったり重なる。 */
.indexvision-char-main {
	display: block;
	position: relative;
}

.indexvision-char .indexvision-char-sketch {
	opacity: var(--char-sketch, 1);
}

.indexvision-char .indexvision-char-color {
	position: absolute;
	top: 0;
	left: 0;
	opacity: calc(1 - var(--char-sketch, 1));
}

/* GO FORWARD ---- キャラクターの左上に手書き風で */
.indexvision-char-go {
	position: absolute;
	top: -13%;
	left: -13%;
	font-family: "Dancing Script", "Figtree", cursive;
	font-size: min(2vw, 28px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .02em;
	color: #FFF;
	white-space: nowrap;
	transform: rotate(-8deg);
	text-shadow: 0 2px 10px rgba(160, 96, 20, .25);
}

/* 出現の順番（トップのローディング明けを合図にする）。
   JSが動かない場合は最初から見えている。 */
.js-kv .indexvision-char > .indexvision-char-main,
.js-kv .indexvision-char-go {
	opacity: 0;
}

.js-kv body.is-kv-ready .indexvision-char > .indexvision-char-main {
	animation: vision-char-in .8s cubic-bezier(.16, 1, .3, 1) 6.6s both;
}

.js-kv body.is-kv-ready .indexvision-char .indexvision-char-ghost {
	animation: vision-char-ghost .8s cubic-bezier(.16, 1, .3, 1) 6.7s both;
}

.js-kv body.is-kv-ready .indexvision-char-go {
	animation: vision-char-go .9s ease 7.4s both;
}

@keyframes vision-char-in {
	from {
		opacity: 0;
		transform: translateY(60px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes vision-char-ghost {
	0% {
		opacity: 0;
		transform: translateY(60px);
	}
	30% {
		opacity: .45;
	}
	100% {
		opacity: 0;
		transform: translateY(0);
	}
}

@keyframes vision-char-go {
	from {
		opacity: 0;
		transform: rotate(-8deg) translateY(10px);
	}
	to {
		opacity: 1;
		transform: rotate(-8deg) translateY(0);
	}
}

/* 画面が狭いと右の本文とぶつかるので、1080px 未満では出さない
   （1100pxで残り19px、1280pxで100pxの余裕。1080pxを境にした） */
@media screen and (max-width: 1079px) {
	.indexvision-char {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .indexvision-char > .indexvision-char-main,
	.js-kv .indexvision-char-go {
		opacity: 1;
		animation: none;
	}

	.indexvision-char .indexvision-char-sketch {
		opacity: 0;
	}

	.indexvision-char .indexvision-char-color {
		opacity: 1;
	}

	.indexvision-char .indexvision-char-ghost {
		display: none;
	}
}


/* /about/ FV ---- 最後に「架け橋」だけオレンジへ (2026-09-12)
   .about_2025kv-title span（Our Mission用）の指定が中の span にも効いてしまうので、
   大きさ・表示・登場アニメーションはすべて b から引き継ぐように戻している。 */
.about_2025kv-title b .kv-accent,
.about_2025kv-title.animation b .kv-accent,
.about_2025kv-title.animation.on b .kv-accent {
	display: inline;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-shadow: inherit;
	opacity: 1;
	transform: none;
}

.about_2025kv-title b .kv-accent,
.about_2025kv-title.animation b .kv-accent {
	color: inherit;
	transition: color 1.1s ease;
}

.about_2025kv-title.animation.on b .kv-accent {
	color: var(--ac-color-orange);
	/* 「創るのは〜」の本文（3.05秒開始・0.6秒）まで出そろってから */
	transition-delay: 3.9s;
}

@media (prefers-reduced-motion: reduce) {
	.about_2025kv-title b .kv-accent,
	.about_2025kv-title.animation b .kv-accent {
		color: var(--ac-color-orange);
		transition: none;
	}
}


/* 「創造力」の左にキャラクター (2026-09-12) ----------------------------------
   絶対配置なので、見出しと本文の位置は動かない。
   li が画面に入ったら、少し遅れてふわっと出る。 */
.about_2025strength-char {
	position: absolute;
	top: 50%;
	left: 12%;
	z-index: 1;
	width: min(12vw, 152px);
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.about_2025strength-char img {
	display: block;
	width: 100%;
	height: auto;
}

.js-kv .about_2025strength-char {
	opacity: 0;
	transform: translateY(calc(-50% + 16px)) scale(.96);
	transition:
		opacity .6s ease,
		transform .6s cubic-bezier(.22, 1.3, .5, 1);
}

.js-kv .about_2025strength-list > li.animation.on .about_2025strength-char {
	opacity: 1;
	transform: translateY(-50%) scale(1);
	transition-delay: .35s;
}

/* 狭い画面では見出し・本文と重なるので出さない */
@media screen and (max-width: 1079px) {
	.about_2025strength-char {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .about_2025strength-char {
		opacity: 1;
		transform: translateY(-50%);
		transition: none;
	}
}


/* 「推進力」の本文の右にキャラクター (2026-09-12)
   左に置いたもの（創造力）と同じ仕組みで、位置だけ右へ。 */
.about_2025strength-char-right {
	left: auto;
	right: 4%;
	width: min(15vw, 196px);
}


/* 「未来の笑顔を実現する。」---- 文字が出そろってから「笑顔を実現」がオレンジに (2026-09-12) */
.about_2025message-lead.js-chars .fc-orange-02 {
	color: #FFF;
	transition: color 1.1s ease;
}

.about_2025message-lead.js-chars.animation.on .fc-orange-02 {
	color: var(--ac-color-orange-02);
	transition-delay: 1.8s;
}

@media (prefers-reduced-motion: reduce) {
	.about_2025message-lead.js-chars .fc-orange-02 {
		color: var(--ac-color-orange-02);
		transition: none;
	}
}


/* オレンジの文字は、まわりの文字が出そろってから遅れて色が変わる (2026-09-12)
   スクロールで出てくるブロック（.animation）の中にあるものが対象。
   出た直後は本文と同じ色で、1.1秒置いてからオレンジへ。
   個別に秒数を決めている箇所（FVや見出しなど）は、そちらの指定が優先される。
--------------------------------------------------------------------------- */
.animation .fc-orange,
.animation.fc-orange,
.animation .fc-orange-02,
.animation.fc-orange-02 {
	color: inherit;
	transition: color 1.1s ease;
}

.animation.on .fc-orange,
.animation.on.fc-orange {
	color: var(--ac-color-orange);
	transition-delay: 1.1s;
}

.animation.on .fc-orange-02,
.animation.on.fc-orange-02 {
	color: var(--ac-color-orange-02);
	transition-delay: 1.1s;
}

@media (prefers-reduced-motion: reduce) {
	.animation .fc-orange,
	.animation.fc-orange {
		color: var(--ac-color-orange);
		transition: none;
	}

	.animation .fc-orange-02,
	.animation.fc-orange-02 {
		color: var(--ac-color-orange-02);
		transition: none;
	}
}


/* 制作実績の詳細ページ ---- 案件名・URL・PROJECTをサムネイルの左へ (2026-09-16)
   左に案件の情報、右にサムネイル。文字は一回り大きく。
   DETAIL は見出しを出さず本文だけにしている。
--------------------------------------------------------------------------- */
.single-head {
	display: flex;
	align-items: center;
	gap: 5%;
	margin-bottom: 50px;
}

.single-head-info {
	flex: 0 0 25%;
}

.single-head #single-works {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.single-head #single-works p {
	margin: 0;
}

/* 左の文字は大きめに */
.single-head-info .tit h1 {
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .06em;
}

.single-head-info .time-tit {
	margin-bottom: 36px;
}

.single-head-info .time-tit a {
	font-size: 1.7rem;
	letter-spacing: .04em;
}

.single-head-info .tit h2 {
	font-size: 1.4rem;
	letter-spacing: .12em;
	margin-bottom: 10px;
}

.single-head-info .sec {
	margin-bottom: 0;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .06em;
}

/* DETAIL は見出しが無いぶん、上の余白を少し詰める */
#single-portfolio .sec-detail {
	margin-top: -10px;
}

@media screen and (max-width: 767px) {
	/* スマホは縦積み。これまでどおりサムネイルを先に見せる */
	.single-head {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		margin-bottom: 40px;
	}

	.single-head #single-works {
		order: 1;
	}

	.single-head-info {
		order: 2;
		flex: 0 0 auto;
	}

	.single-head-info .tit h1 {
		font-size: 2.5rem;
	}

	.single-head-info .sec {
		font-size: 1.5rem;
	}

	.single-head-info .time-tit {
		margin-bottom: 24px;
	}
}


/* 制作実績の詳細ページ ---- 下部の自信作9件 (2026-09-16)
   一覧と同じカードをそのまま使う。隙間は gap で取るので、
   隠れた項目があっても列がずれない。 */
.pickup {
	margin-top: 90px;
}

.pickup .archive-list {
	gap: 50px 4%;
}

.pickup .archive-item,
.pickup .archive-item:nth-of-type(3n) {
	width: calc(92% / 3);
	margin-right: 0;
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.pickup {
		margin-top: 50px;
	}

	.pickup .archive-list {
		gap: 40px 6%;
	}

	.pickup .archive-item,
	.pickup .archive-item:nth-of-type(3n),
	.pickup .archive-item:nth-of-type(2n),
	.pickup .archive-item:nth-of-type(4n) {
		width: 47%;
		margin-right: 0;
		margin-bottom: 0;
	}
}


/* 制作実績の詳細ページ ---- DETAIL・CREDITの幅を上下のブロックとそろえる (2026-09-16)
   もとは 1000px を中央寄せしていたため、左は案件名より内側・右は余りが出ていた。
   サムネイルの段や一覧カードと同じ幅にして、左右のマージンをそろえる。 */
#single-portfolio {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* サムネイルは実際のサイトへのリンクにする */
#single-works > a {
	display: block;
}

#single-works > a:hover {
	opacity: .85;
}


/* 制作実績の詳細ページ ---- Portfolio の下の間隔を30px詰める (2026-09-16) */
body.single-portfolio .section-title {
	margin-bottom: 50px;
}


/* 制作実績の詳細ページ ---- サイトURLのリンク (2026-09-16)
   Figtree の斜体で、触るとオレンジに。 */
.single-head-info .time-tit a {
	font-family: "Figtree", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	font-style: italic;
	font-weight: 700;
	transition: color .3s ease;
}

.single-head-info .time-tit a:hover,
.single-head-info .time-tit a:focus-visible {
	opacity: 1;
	color: var(--ac-color-orange);
}


/* 実績カード ---- hoverでサムネイルがゆっくり寄っていく (2026-09-16)
   .image は overflow:hidden なので、中の画像だけを拡大すると枠内で寄る。
   再生アイコンは .image 側に置いてあるので一緒には動かない。 */
.archive-item .image img {
	/* カーソルを離したときは、すっと元に戻す */
	transition: transform .9s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.archive-item:hover .image img,
.archive-item:focus-within .image img {
	/* 触れている間はじわじわ寄り続け、最後は2.5倍まで。
	   等速にして「止まらずに近づいていく」感じを出す。 */
	transform: scale(2.5);
	transition: transform 14s linear;
}

@media (prefers-reduced-motion: reduce) {
	.archive-item .image img,
	.archive-item:hover .image img {
		transform: none;
		transition: none;
	}
}


/* 制作実績の詳細ページ ---- サムネイルと本文の間をさらに詰める (2026-09-16)
   .pagecontent .wrapper-single の下マージン 100px が効いていたので、この頁だけ縮める。 */
body.single-portfolio .pagecontent .wrapper-single {
	margin-bottom: 40px;
}

/* 2026-10-03 公開前チェック：短い見出しの1〜2文字泣き別れ対策（lang="ja" 前提で文節改行） */
.kvnews-title,
.indexinformation-list-text,
.indexskill-list-title,
.servicecontent-similarities-list-title,
.serviceflow-list-title {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* 2026-10-03 /about/ FVの背景英字を「FORWARDS」に変更 → 文字幅に合わせて間隔を詰める */
.about_2025kv-deco-01 span,
.about_2025kv-deco-01 span:nth-child(n) {
	width: max-content;
	padding-right: 0.6em;
}

/* 2026-10-03 /about/ 本文の最終行が「す。」だけにならないように */
.about_2025kv-block-text,
.about_2025strength-list-text,
.about_2025creator-list-text,
.about_2025logo-text {
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* 両端揃えのままだと文節改行で字間が開くため、左揃えに統一 */
.about_2025strength-list-text,
.about_2025logo-text {
	text-align: left;
}

/* 2026-10-03 /about/ 会社概要セクション削除に伴い、背景英字「LOGO」が本文に重ならないよう下余白を確保 */
.about_2025logo {
	padding-bottom: 22vw;
}

.about_2025logo-deco {
	bottom: 3vw;
}

@media screen and (max-width: 767px) {
	.about_2025logo {
		padding-bottom: 26vw;
	}

	.about_2025logo-deco {
		bottom: 5vw;
	}
}

/* 2026-10-03 LINE・電話・メールブロック：画像（旧アドレス・旧受付時間が焼き込み）をテキストに置き換え */
.linelink-text {
	display: flex;
	flex-direction: column;
	color: #363636;
	transition: color .3s ease;
}

.linelink-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.linelink-main {
	display: flex;
	align-items: center;
	gap: 0.25em;
	font-style: italic;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.linelink-tel .linelink-main {
	font-size: 40px;
}

.linelink-mail .linelink-main {
	font-size: 22px;
}

.linelink-icon {
	flex-shrink: 0;
	width: 0.8em;
	height: 0.8em;
	fill: currentColor;
}

.linelink-sub {
	padding-left: 1.05em;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.linelink-tel .linelink-sub {
	padding-left: calc(40px * 1.05);
}

/* hover：画像マスクの代わりに文字色をオレンジに */
.linelink-info-tel::after,
.linelink-info-mail::after {
	content: none;
}

.linelink-info-tel:hover .linelink-text,
.linelink-info-tel:focus-visible .linelink-text,
.linelink-info-mail:hover .linelink-text,
.linelink-info-mail:focus-visible .linelink-text {
	color: var(--ac-color-orange);
}

/* 電話番号の「左からふわっと」演出をテキストにも */
.js-kv .linelink-info-tel .linelink-text {
	opacity: 0;
	-webkit-mask-image: linear-gradient(to right, #000 52%, rgba(0, 0, 0, 0) 88%);
	-webkit-mask-size: 240% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-image: linear-gradient(to right, #000 52%, rgba(0, 0, 0, 0) 88%);
	mask-size: 240% 100%;
	mask-repeat: no-repeat;
	mask-position: 100% 0;
}

.js-kv .linelink-block.animation.on .linelink-info-tel .linelink-text {
	animation: tel-soft 1.6s cubic-bezier(.33, .7, .3, 1) .4s both;
}

@media (prefers-reduced-motion: reduce) {
	.js-kv .linelink-info-tel .linelink-text {
		opacity: 1;
		-webkit-mask-image: none;
		mask-image: none;
		animation: none;
	}
}

@media screen and (max-width: 767px) {
	.linelink-tel .linelink-main {
		font-size: 34px;
	}

	.linelink-tel .linelink-sub {
		padding-left: calc(34px * 1.05);
		font-size: 11px;
	}

	.linelink-mail .linelink-main {
		font-size: 20px;
	}
}

/* 2026-10-03 実績カードの見出し：<wbr> で指定した位置と空白でだけ折り返す（inc/portfolio-display.php の forwards_card_title_html） */
.archive-item .tit h2,
.archive-item .tit h3 {
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: balance;
}


/* ==========================================================================
   制作実績の詳細ページ ---- 充実版（2026-10-03）
   inc/portfolio-case-fields.php の追加項目が入っている実績だけ、この見た目になる。
   左揃え・罫線で区切る・影なし。セクション番号は表示した順に 01〜。
   ========================================================================== */
.single-head.is-rich {
	align-items: flex-start;
}

.single-head.is-rich .single-head-info {
	flex: 0 0 34%;
}

.case-catch {
	margin-top: 14px;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: .08em;
}

.case-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.case-tags span {
	padding: 2px 10px;
	border: 1px solid #DDD;
	border-radius: 4px;
	font-size: 1.2rem;
	letter-spacing: .06em;
	color: #666;
}

.case-meta {
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 8px 12px;
	padding-top: 16px;
	border-top: 1px solid #E2E2E2;
	font-size: 1.4rem;
	line-height: 1.7;
	letter-spacing: .06em;
}

.case-meta dt {
	color: #888;
}

.case-sec {
	position: relative;
	padding: 64px 0;
	border-top: 1px solid #E2E2E2;
}

.case-label {
	margin-bottom: 6px;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--ac-color-orange);
}

.case-no {
	margin-right: 12px;
}

.case-h {
	margin-bottom: 24px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .12em;
}

.case-text {
	max-width: 760px;
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: .06em;
	color: #444;
}

.case-text p + p {
	margin-top: 1em;
}

/* ポイント3行 */
.case-sum {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 2px solid #363636;
}

.case-sum > div {
	padding: 20px 24px 0 0;
}

.case-sum > div + div {
	padding-left: 24px;
	border-left: 1px solid #E2E2E2;
}

.case-sum b {
	display: block;
	margin-bottom: 6px;
	font-size: 1.3rem;
	letter-spacing: .14em;
	color: var(--ac-color-orange);
}

.case-sum p {
	font-size: 1.5rem;
	line-height: 1.9;
	letter-spacing: .06em;
}

/* 背景と進め方の2列 */
.case-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}

.case-two.is-single {
	grid-template-columns: 1fr;
}

/* 制作のながれ */
.case-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border-top: 2px solid #363636;
	list-style: none;
}

.case-steps li {
	padding: 16px 16px 0 0;
	font-size: 1.5rem;
	line-height: 1.7;
	letter-spacing: .06em;
}

.case-steps li span {
	display: block;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ac-color-orange);
}

/* 制作物 */
.case-gal-screen {
	display: grid;
	grid-template-columns: 1fr 22%;
	gap: 24px;
	align-items: start;
}

.case-gal-screen.is-single {
	grid-template-columns: 1fr;
}

.case-gal-screen figure,
.case-gal-print figure {
	margin: 0;
}

.case-gal-screen img,
.case-gal-print img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: #F9F9F9;
}

.case-gal-screen figcaption {
	margin-top: 8px;
	font-size: 1.2rem;
	letter-spacing: .1em;
	color: #888;
}

.case-gal-print {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 32px;
}

.case-gal-movie {
	margin-top: 32px;
}

.case-gal-movie iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* 配慮したこと */
.case-care {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.case-care b {
	display: block;
	margin-bottom: 8px;
	padding-left: 12px;
	border-left: 2px solid var(--ac-color-orange);
	font-size: 1.6rem;
	letter-spacing: .08em;
}

.case-care p {
	font-size: 1.4rem;
	line-height: 1.9;
	letter-spacing: .06em;
	color: #555;
}

/* ご担当者さまの声（現在は非表示） */
.case-voice p {
	font-size: 1.9rem;
	line-height: 1.9;
	letter-spacing: .1em;
}

.case-voice cite {
	display: block;
	margin-top: 10px;
	font-size: 1.3rem;
	font-style: normal;
	color: #888;
}

/* 同じ領域の実績 */
.case-related {
	margin-top: 30px;
	padding-top: 64px;
	border-top: 1px solid #E2E2E2;
	margin-bottom: 60px;
}

.case-related .archive-list {
	gap: 50px 4%;
}

.case-related .archive-item,
.case-related .archive-item:nth-of-type(3n) {
	width: calc(92% / 3);
	margin-right: 0;
	margin-bottom: 0;
}

.case-related .tit h3 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
}

@media screen and (max-width: 767px) {
	.single-head.is-rich .single-head-info {
		flex: 0 0 auto;
	}

	.case-sec {
		padding: 44px 0;
	}

	.case-h {
		font-size: 2rem;
	}

	.case-sum,
	.case-two,
	.case-care {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.case-sum > div + div {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid #E2E2E2;
	}

	.case-gal-screen {
		grid-template-columns: 1fr 34%;
		gap: 12px;
	}

	.case-gal-print {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.case-related .archive-list {
		gap: 40px 6%;
	}

	.case-related .archive-item,
	.case-related .archive-item:nth-of-type(3n),
	.case-related .archive-item:nth-of-type(2n),
	.case-related .archive-item:nth-of-type(4n) {
		width: 47%;
	}

	.case-related .archive-item:nth-of-type(3) {
		display: none;
	}
}

/* 充実版の文章は文節で折り返し、最終行が短くならないように */
.case-catch,
.case-meta dd,
.case-sum p,
.case-text,
.case-steps li,
.case-care p,
.case-voice p {
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* 制作物の画面 ---- ページ全体の縦長画像を、枠の中で上から下へ自動スクロール（2026-10-03）
   object-position を 上→下→上 と動かす。触れている間は止まる。動きを減らす設定の人には動かさない。 */
.case-screen {
	overflow: hidden;
	border-radius: 12px;
	background: #F9F9F9;
}

.case-screen.is-scroll.is-pc {
	aspect-ratio: 16 / 10;
}

.case-screen.is-scroll.is-sp {
	aspect-ratio: 375 / 812;
}

.case-screen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.case-screen.is-scroll img {
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	animation: case-screen-scroll var(--scroll-dur, 20s) ease-in-out infinite;
}

.case-screen.is-scroll:hover img {
	animation-play-state: paused;
}

@keyframes case-screen-scroll {
	0%, 8% {
		object-position: 50% 0;
	}
	46%, 54% {
		object-position: 50% 100%;
	}
	92%, 100% {
		object-position: 50% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-screen.is-scroll img {
		animation: none;
	}
}

@media screen and (max-width: 767px) {
	/* スマホでは横並びだと枠の高さがそろわないので、PC → スマホの順に縦に積む */
	.case-gal-screen {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.case-gal-screen figure.is-sp {
		width: 48%;
	}
}

/* 実績詳細 ---- 冒頭の「サイトを見る」ボタン（2026-10-03） */
.case-sitebtn {
	margin-top: 28px;
}

/* 2026-10-04 /about/ スマホ：Our Mission〜本文をまとめて60px下げる
   （上の背景英字の下余白15pxと相殺されるため、-40px → 35px で実測60px） */
@media screen and (max-width: 767px) {
	.about_2025kv-title {
		margin-top: 35px;
	}
}

/* 2026-10-04 無料ツールの一覧（/tools/） */
.fwtools {
	position: relative;
	padding: 120px 0 100px;
}

.fwtools-lead {
	margin: 0 0 48px;
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: .08em;
}

.fwtools-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	list-style: none;
}

.fwtools-item a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	border-radius: 12px;
	background: #fff;
	color: #363636;
	transition: color .3s ease;
}

.fwtools-en {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .14em;
	/* 白地の小さい文字なので、明るいオレンジ（2.2:1）ではなく濃いオレンジ（5.0:1） */
	color: #a65d0b;
}

.fwtools-name {
	margin: 6px 0 14px;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: .08em;
	word-break: auto-phrase;
}

.fwtools-text {
	flex: 1;
	font-size: 1.5rem;
	line-height: 1.9;
	letter-spacing: .06em;
	color: #555;
	word-break: auto-phrase;
	text-wrap: pretty;
}

.fwtools-more {
	margin-top: 20px;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.fwtools-more span {
	margin-left: .5em;
}

.fwtools-item a:hover,
.fwtools-item a:focus-visible {
	opacity: 1;
	color: var(--ac-color-orange-02);
}

@media screen and (max-width: 767px) {
	.fwtools {
		padding: 80px 0 64px;
	}

	.fwtools-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fwtools-item a {
		padding: 24px;
	}

	.fwtools-name {
		font-size: 2rem;
	}
}

/* 2026-10-04 /about/ スマホ：「創るのは、お客様の未来です。」〜本文を50px下げる */
@media screen and (max-width: 767px) {
	.about_2025kv-block {
		padding-top: 50px;
	}
}


/* ==========================================================================
   2026-10-04 アクセシビリティ（WCAG 2.1 AA / JIS X 8341-3 配慮）
   ========================================================================== */

/* 本文へスキップ：Tabで最初にフォーカスしたときだけ左上に出る */
.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 10px 16px;
	border-radius: 4px;
	background: #2E2E2E;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .06em;
	transform: translateY(-200%);
	transition: transform .2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	outline: 3px solid var(--ac-color-orange);
	outline-offset: 2px;
}

#main-content:focus {
	outline: none;
}

/* 制作実績のカテゴリタブ：オレンジ地の白文字はコントラスト不足（2.09:1）→ チャコール文字（約6:1） */
.cattab:hover,
.cattab:focus-visible,
.cattab.is-active {
	color: #2E2E2E;
}

/* 動きの停止ボタン（背景動画・ロゴスライダー） */
.motion-toggle {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: rgba(46, 46, 46, .82);
	color: #fff;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	cursor: pointer;
}

.motion-toggle:hover {
	background: #2E2E2E;
}

.motion-toggle:focus-visible {
	outline: 3px solid var(--ac-color-orange);
	outline-offset: 2px;
}

.motion-toggle svg {
	width: 10px;
	height: 10px;
	fill: currentColor;
}

.motion-toggle.is-video {
	right: 12px;
	bottom: 12px;
}

.indexclient-slick-container {
	position: relative;
}

.motion-toggle.is-slider {
	right: 0;
	bottom: -40px;
}

/* 2026-10-04 /about/ スマホ：本文の下の黒い余白を詰める
   余白は幅に比例して増える（実測 360px→196px / 414px→309px）ので、どの幅でも約70px残るよう幅に応じて切る */
@media screen and (max-width: 767px) {
	.about_2025kv-video {
		margin-bottom: min(-100px, calc(527px - 209vw));
	}
}

/* 2026-10-04 プロダクト制作（WEB・LP）：アクセシビリティへの配慮
   見出し・本文ともページ内のほかの段と同じ左端・同じ本文の書式にする */
.servicea11y {
	padding: 100px 0 60px;
}

.servicea11y-text {
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: .2em;
	word-break: auto-phrase;
	text-wrap: pretty;
}

@media screen and (max-width: 767px) {
	.servicea11y {
		padding: 50px 0 20px;
	}
}

/* 2026-10-04 サービス内容の本文も文節で折り返す（最終行「ます。」だけ残るのを防ぐ） */
.servicecontent-list-text {
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* 見出し：このページの「英字（大）＋右に日本語ラベル」は短い語向けなので、
   この段だけ英字の下に日本語のキャッチを置く（左端はほかの段と同じ） */
.servicea11y .servicestrength-title {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 40px;
}

.servicea11y .servicestrength-title > span {
	width: auto;
	font-size: 2.4rem;
	line-height: 1.5;
	letter-spacing: .12em;
	word-break: auto-phrase;
}

@media screen and (max-width: 767px) {
	.servicea11y .servicestrength-title {
		margin-bottom: 24px;
	}

	.servicea11y .servicestrength-title > span {
		font-size: 2rem;
	}
}

/* 2026-10-04 スマホの本文を14px→15pxに（読みやすさ）
   字間が広い（.2em）本文は、1行の文字数が減りすぎないよう .1em に */
@media screen and (max-width: 767px) {
	.section-text,
	.indexservice-list-content-text,
	.indexinformation-list-text,
	.indexpres-text,
	.indexvoice-list-text,
	.service-list-content-text,
	.servicedetail-text,
	.servicestrength-list-text,
	.servicecontent-list-text,
	.servicea11y-text,
	.about_2025kv-block-text,
	.about_2025strength-list-text,
	.about_2025logo-text,
	.about_2025message-text,
	.about_2025creator-text,
	.about_2025creator-list-text {
		font-size: 1.5rem;
		word-break: auto-phrase;
		text-wrap: pretty;
	}

	.indexinformation-list-text,
	.indexpres-text,
	.indexvoice-list-text,
	.servicedetail-text,
	.servicestrength-list-text,
	.servicea11y-text {
		letter-spacing: .1em;
	}
}

/* 2026-10-04 言語切り替え（JP / EN / 中文） */
.langswitch {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.langswitch li + li::before {
	content: "/";
	margin: 0 6px;
	opacity: .4;
}

.langswitch a {
	/* 押せる範囲を24px以上に（WCAG 2.2 ターゲットサイズ） */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 4px 2px;
	color: #5f5f5f;
	transition: color .25s;
}

.langswitch a:hover {
	color: #2E2E2E;
}

/* 今の言語：文字はチャコール（コントラスト確保）、オレンジは下線で示す */
.langswitch a.is-current {
	color: #2E2E2E;
	text-decoration: underline;
	text-decoration-color: var(--ac-color-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.langswitch-pc {
	margin-left: 48px;
}

.langswitch-sp {
	display: none;
}

/* 768〜1300px はメニューが詰まるので、切り替えはメニューの右上に小さく置く */
@media screen and (min-width: 768px) and (max-width: 1300px) {
	.langswitch-pc {
		position: absolute;
		top: -18px;
		right: 0;
		margin-left: 0;
		font-size: 1.1rem;
	}

	.langswitch-pc a {
		padding: 0 2px;
		min-height: 24px;
	}

	.langswitch-pc li {
		white-space: nowrap;
	}
}

@media screen and (max-width: 767px) {
	.langswitch-pc {
		display: none;
	}

	.langswitch-sp {
		display: flex;
		position: absolute;
		top: 12px;
		right: 70px;
		z-index: 99999;
		padding: 6px 10px;
		border-radius: 4px;
		background: rgba(255, 255, 255, .85);
		font-size: 1.3rem;
	}

	.langswitch-sp li + li::before {
		margin: 0 4px;
	}
}

/* 中国語ページは簡体字の書体で表示する */
.lang-zh,
.lang-zh .font-figtree {
	font-family: "Figtree", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.lang-zh {
	font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 英語ページ：トップ「Information」横の縦書きキャッチは、英語では横書きにする */
.lang-en .indexinformation-key-title,
.lang-en .indexinformation-key-text {
	writing-mode: horizontal-tb;
	white-space: normal;
	text-wrap: balance;
}

.lang-en .indexinformation-key-title {
	margin: 0 4vw 0 5vw;
	font-size: 2.6rem;
	line-height: 1.4;
	letter-spacing: .02em;
}

.lang-en .indexinformation-key-text {
	margin: 24px 4vw 0 5vw;
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: .02em;
	text-wrap: pretty;
}

@media screen and (max-width: 767px) {
	.lang-en .indexinformation-key-title {
		margin: 0 20px;
		font-size: 2.2rem;
	}

	.lang-en .indexinformation-key-text {
		margin: 16px 20px 0;
	}
}

/* 中国語ページ：script.js が単語の切れ目に <wbr> を入れるので、単語の途中では折り返さない
   （JS が動かない環境でも、はみ出さないよう overflow-wrap で保険をかける） */
/* 日本語用の word-break: auto-phrase（各所に指定あり）は中国語では効かず、どこでも折り返してしまうので上書きする */
body.lang-zh,
body.lang-zh * {
	word-break: keep-all !important;
}

/* JS が動かず <wbr> が無いときの保険（本文だけ。縦書きのSNSリンク等には効かせない） */
body.lang-zh main :is(p, li, dd, dt, h2, h3) {
	overflow-wrap: anywhere;
}

/* 見出し・短い段落は行の長さを均して、最後の行だけ極端に短くならないようにする */
.lang-zh main :is(h2, h3, dt),
.lang-zh .linelink-sub {
	text-wrap: balance;
}

/* フッターの無料ツール欄：長いカタカナ語は「アクセシビリティ／チェッカー」のように語の切れ目で折り返す */
.footer-nav-list-child.-small a {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 2026-10-05 制作実績の詳細ページ：社名の見出しは「株式会社」などの法人格と名前の間で折り返す
   （例「株式会社エンジニアキャピ／タル様」を「株式会社／エンジニアキャピタル様」に）。
   名前が1行に入らないほど長いときは、名前の中で普通に折り返す（はみ出さない） */
.single-portfolio .tit h1 .tit-pre,
.single-portfolio .tit h1 .tit-name {
	display: inline-block;
	max-width: 100%;
}

/* 名前の中も語の切れ目で折り返す。1語が入りきらないときだけ文字の途中で折る */
.single-portfolio .tit h1 .tit-name {
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}

/* スマホ：トップ Vision「地域に陽を灯し、次のステージへ。」の下線 (2026-10-05)
   行間が文字と同じ18pxしかなく、1行目の下線が2行目の文字に重なっていた。
   行間を広げ、行ごとに下線を引く（box-decoration-break: clone）。 */
@media screen and (max-width: 767px) {
	.indexvision-subtitle {
		line-height: 2.1;
	}

	.indexvision-subtitle .marker-white {
		padding-bottom: 6px;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

/* スマホ：トップ「デザインで地域へ貢献する」を縦書き→横書きに (2026-10-05 社長指示)
   英語ページと同じく横書き・左揃え。改行は文節（auto-phrase）に任せる。 */
@media screen and (max-width: 767px) {
	.indexinformation-key-title,
	.indexinformation-key-text {
		writing-mode: horizontal-tb;
		white-space: normal;
		word-break: auto-phrase;
		text-wrap: balance;
	}

	.indexinformation-key-title {
		margin: 0 20px;
		font-size: 2.6rem;
		line-height: 1.5;
		letter-spacing: .08em;
	}

	.indexinformation-key-text {
		margin: 18px 20px 0;
		font-size: 1.5rem;
		line-height: 1.9;
		letter-spacing: .08em;
	}

	.indexinformation-key-text br {
		display: none;
	}
}

/* フッター：アコーディオン（スマホのみ）・無料ツールは最後の列 (2026-10-05) */
.footer-acc {
	display: none;
}

@media screen and (max-width: 767px) {
	.footer-nav-list > li.has-acc {
		position: relative;
		margin-bottom: 0;
		padding: 14px 0;
		border-top: 1px solid rgba(0, 0, 0, .12);
	}

	.footer-nav-list > li.has-acc:last-of-type {
		border-bottom: 1px solid rgba(0, 0, 0, .12);
	}

	.footer-nav-list > li.has-acc > a {
		display: inline-block;
		padding-right: 56px;
		line-height: 1.6;
	}

	.footer-acc {
		display: block;
		position: absolute;
		top: 4px;
		right: 0;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.footer-acc span,
	.footer-acc span::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 2px;
		margin: -1px 0 0 -8px;
		background: var(--ac-color-orange-02);
		transition: transform .3s ease;
	}

	.footer-acc span::after {
		content: '';
		top: 0;
		left: 0;
		margin: 0;
		transform: rotate(90deg);
	}

	.has-acc.is-open .footer-acc span::after {
		transform: rotate(0);
	}

	.footer-nav-list > li.has-acc > .footer-nav-list-child {
		display: none;
		padding-top: 4px;
	}

	.footer-nav-list > li.has-acc.is-open > .footer-nav-list-child {
		display: flex;
	}

	/* 上のブロック（お知らせ・私たちについて）との間 */
	.footer-nav-list > li:first-of-type {
		margin-bottom: 8px;
	}
}

@media screen and (min-width: 768px) {
	.footer-nav-list > li > a,
	.footer-nav-list-sub > a {
		white-space: nowrap;
	}
}

/* お知らせ記事の見出し：単語の途中で折れないよう文節で改行・行数をならす (2026-10-05) */
.tit h1 {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* スマホ：フッター「お知らせ」もアコーディオンに。「私たちについて」も同じ行の形にそろえる (2026-10-05) */
@media screen and (max-width: 767px) {
	.footer-nav-list > li:first-of-type {
		margin-bottom: 0;
	}

	.footer-nav-list-sub {
		position: relative;
		margin-bottom: 0;
		padding: 14px 0;
		border-top: 1px solid rgba(0, 0, 0, .12);
	}

	.footer-nav-list-sub > a {
		display: inline-block;
		padding-right: 56px;
		line-height: 1.6;
	}

	.footer-nav-list-sub.has-acc > .footer-nav-list-child {
		display: none;
		padding-top: 4px;
	}

	.footer-nav-list-sub.has-acc.is-open > .footer-nav-list-child {
		display: flex;
	}
}

/* グローバルメニュー：メガメニュー（PCのみ） (2026-10-05)
   「事業案内」「制作実績」にマウスを乗せると、ヘッダー直下に全幅のパネルを出す。
   位置（top/left/width）は script.js がヘッダーの位置から計算して入れる。 */
.gnav-mega {
	display: none;
}

@media screen and (min-width: 768px) {
	.has-mega > .gnav-subchild {
		display: none;
	}

	.gnav-mega {
		display: block;
		visibility: hidden;
		opacity: 0;
		position: absolute;
		z-index: 50;
		padding-top: 0;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, .06);
		transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
		font-weight: 400;
		text-align: left;
	}

	/* ヘッダーとパネルのすき間でも閉じないように */
	.gnav-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--mega-gap, 30px);
	}

	.has-mega.is-mega-open > .gnav-mega {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .25s ease, transform .25s ease, visibility 0s;
	}

	.gnav-mega-inner {
		display: flex;
		gap: 56px;
		max-width: 1240px;
		margin: 0 auto;
		padding: 72px 40px 52px;
	}

	.gnav-mega-head {
		flex: 0 0 220px;
	}

	.gnav-mega-en {
		font-weight: 800;
		font-size: 4.4rem;
		line-height: 1;
		letter-spacing: .04em;
		color: var(--text-color, #333);
	}

	.gnav-mega-en span {
		color: var(--ac-color-orange-02);
	}

	.gnav-mega-jp {
		margin-top: 10px;
		font-weight: 700;
		font-size: 1.5rem;
		letter-spacing: .12em;
	}

	.gnav-list > li .gnav-mega-all {
		display: inline-flex;
		gap: 8px;
		margin-top: 28px;
		padding-bottom: 4px;
		border-bottom: 1px solid currentColor;
		font-weight: 700;
		font-size: 1.4rem;
		letter-spacing: .08em;
	}

	.gnav-mega-list {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 26px 22px;
	}

	.gnav-list > li .gnav-mega-list a {
		display: block;
	}

	.gnav-mega-img {
		display: block;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		background: #F7F3EE;
	}

	.gnav-mega-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .5s ease;
	}

	.gnav-mega-service .gnav-mega-img img {
		object-fit: contain;
		padding: 10px;
	}

	.gnav-mega-list a:hover .gnav-mega-img img,
	.gnav-mega-list a:focus-visible .gnav-mega-img img {
		transform: scale(1.06);
	}

	.gnav-mega-name {
		display: block;
		margin-top: 10px;
		font-weight: 700;
		font-size: 1.4rem;
		line-height: 1.5;
		letter-spacing: .06em;
	}

	.gnav-mega-desc {
		display: block;
		margin-top: 2px;
		font-size: 1.2rem;
		line-height: 1.6;
		color: #666;
		letter-spacing: .04em;
	}

	.gnav-mega-list a:hover .gnav-mega-name {
		color: var(--ac-color-orange);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gnav-mega,
	.gnav-mega-img img {
		transition: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
	.gnav-mega-inner {
		gap: 28px;
		padding: 72px 24px 40px;
	}

	.gnav-mega-head {
		flex-basis: 150px;
	}

	.gnav-mega-en {
		font-size: 3.2rem;
	}

	.gnav-mega-list {
		gap: 20px 14px;
	}

	.gnav-mega-desc {
		display: none;
	}
}

/* =========================================================
   お知らせ詳細ページ（2026-10-05 社長指示：参考＝本文＋目次＋右に最新記事）
   ========================================================= */
.news-page {
	--news-o: #F07D1A;
	--news-o-text: #B5590C;   /* 白地の小さい文字用（コントラスト確保） */
	--news-band: #FCE8D6;
	--news-r: 8px;
	padding: 150px 0 100px;
	background: #F7F7F5;
}

.news-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.news-crumbs.crumbs-nav {
	margin: 0 0 36px;
	padding: 0;
	background: none;
}

.news-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 64px;
	align-items: start;
}

.news-main {
	min-width: 0;
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.news-meta time {
	font-family: "Figtree", sans-serif;
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: .06em;
	color: var(--news-o-text);
}

.news-cat {
	padding: 3px 10px;
	border: 1px solid var(--news-o-text);
	border-radius: 4px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--news-o-text);
}

.news-title {
	font-weight: 900;
	font-size: 3.2rem;
	line-height: 1.5;
	letter-spacing: .04em;
	word-break: auto-phrase;
	text-wrap: balance;
}

.news-eyecatch {
	margin: 32px 0 0;
	border-radius: var(--news-r);
	overflow: hidden;
}

.news-eyecatch img {
	display: block;
	width: 100%;
	height: auto;
}

/* 本文 */
.news-body {
	margin-top: 36px;
	font-size: 1.7rem;
	line-height: 2;
	letter-spacing: .06em;
	counter-reset: news-h2;
}

.news-body > * + * {
	margin-top: 1.4em;
}

.news-body h2 {
	counter-increment: news-h2;
	margin-top: 72px;
	padding: 18px 24px;
	border-radius: var(--news-r);
	background: var(--news-band);
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 1.5;
	letter-spacing: .05em;
	scroll-margin-top: 100px;
	word-break: auto-phrase;
	text-wrap: balance;
}

.news-body h2::before {
	content: counter(news-h2) ". ";
	font-family: "Figtree", sans-serif;
	color: var(--news-o-text);
}

.news-body h3 {
	margin-top: 44px;
	padding-left: 14px;
	border-left: 5px solid var(--news-o);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.5;
}

.news-body a {
	color: var(--news-o-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.news-body ul,
.news-body ol {
	padding-left: 1.4em;
}

.news-body ul > li {
	list-style: disc;
}

.news-body ol > li {
	list-style: decimal;
}

.news-body li + li {
	margin-top: .4em;
}

.news-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--news-r);
}

/* 目次 */
.news-toc {
	margin-top: 44px;
	padding: 30px 34px;
	border-radius: var(--news-r);
	background: #fff;
}

.news-toc-title {
	font-weight: 900;
	font-size: 2rem;
	letter-spacing: .1em;
}

.news-body .news-toc-list {
	margin-top: 14px;
	padding-left: 0;
	counter-reset: news-toc;
}

.news-body .news-toc-list > li {
	list-style: none;
	counter-increment: news-toc;
	position: relative;
	padding-left: 40px;
	line-height: 1.6;
}

.news-body .news-toc-list > li + li {
	margin-top: 12px;
}

.news-toc-list > li::before {
	content: counter(news-toc);
	position: absolute;
	top: 1px;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #8A8A8A;
	color: #fff;
	font-family: "Figtree", sans-serif;
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 26px;
	text-align: center;
}

.news-body .news-toc-list a {
	color: var(--text-color, #333);
	font-weight: 700;
	text-decoration: none;
}

.news-body .news-toc-list a:hover {
	color: var(--news-o-text);
	text-decoration: underline;
}

.news-back {
	margin-top: 64px;
	font-weight: 700;
}

.news-back a:hover {
	color: var(--news-o-text);
}

/* サイドバー */
.news-side {
	min-width: 0;
}

.news-side-title {
	padding-bottom: 12px;
	border-bottom: 3px solid var(--news-o);
	font-weight: 900;
	font-size: 2rem;
	letter-spacing: .08em;
}

.news-side-list > li {
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.news-side-list a {
	display: flex;
	gap: 16px;
	padding: 18px 0;
}

.news-side-img {
	flex: 0 0 120px;
	height: 75px;
	border-radius: var(--news-r);
	overflow: hidden;
	background: #E9E6E1;
}

.news-side-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.news-side-list a:hover .news-side-img img {
	transform: scale(1.06);
}

.news-side-text time {
	display: block;
	font-family: "Figtree", sans-serif;
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--news-o-text);
}

.news-side-name {
	display: block;
	margin-top: 4px;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.6;
	word-break: auto-phrase;
}

.news-side-list a:hover .news-side-name {
	color: var(--news-o-text);
}

.news-side-banner {
	position: relative;
	display: block;
	margin-top: 32px;
	padding: 26px 26px 24px;
	border-radius: var(--news-r);
	background: #2E2E2E;
	color: #fff;
	overflow: hidden;
}

.news-side-banner::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -50px;
	width: 160px;
	height: 160px;
	background: var(--news-o);
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	opacity: .9;
	transition: transform .4s ease;
}

.news-side-banner:hover::after {
	transform: translateX(-10px);
}

.news-side-banner.is-contact {
	margin-top: 16px;
	background: var(--news-o);
}

.news-side-banner.is-contact::after {
	background: #fff;
	opacity: .25;
}

.news-side-banner > span {
	position: relative;
	z-index: 1;
	display: block;
}

.news-side-banner-en {
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: .14em;
	color: var(--news-o);
}

.news-side-banner.is-contact .news-side-banner-en {
	color: #2E2E2E;
}

.news-side-banner-jp {
	margin-top: 6px;
	font-weight: 900;
	font-size: 2rem;
	line-height: 1.5;
}

.news-side-banner-text {
	margin-top: 8px;
	max-width: 230px;
	font-size: 1.3rem;
	line-height: 1.8;
	opacity: .9;
}

.news-side-banner-btn {
	margin-top: 14px;
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: .06em;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 記事内のツールカード（.news-tools） */
.news-body .news-tools {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 24px;
	margin-top: 28px;
	padding: 0;
}

.news-body .news-tools > li {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--news-r);
	background: #fff;
	overflow: hidden;
}

.news-tools-img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.news-body .news-tools-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	border-radius: 0;
	transition: transform .5s ease;
}

.news-tools-img:hover img {
	transform: scale(1.04);
}

.news-tools-in {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 22px;
}

.news-tools-en {
	font-family: "Figtree", sans-serif;
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: .12em;
	color: var(--news-o-text);
}

.news-tools-name {
	margin-top: 4px;
	font-weight: 900;
	font-size: 1.9rem;
	line-height: 1.5;
}

.news-tools-desc {
	margin-top: 8px;
	font-size: 1.5rem;
	line-height: 1.8;
}

.news-tools-use {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	background: #F7F3EE;
	font-size: 1.4rem;
	line-height: 1.7;
}

.news-tools-use b {
	color: var(--news-o-text);
}

.news-tools-url {
	margin-top: 12px;
	font-family: "Figtree", sans-serif;
	font-size: 1.3rem;
	word-break: break-all;
}

.news-body .news-tools-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding: 12px 16px;
	border-radius: 6px;
	background: #2E2E2E;
	color: #fff;
	font-weight: 800;
	font-size: 1.4rem;
	text-decoration: none;
	transition: background .25s;
}

.news-tools-url + .news-tools-btn,
.news-tools-in > .news-tools-btn {
	margin-top: 14px;
}

.news-body .news-tools-btn:hover {
	background: var(--news-o);
}

.news-point {
	padding: 24px 28px;
	border-radius: var(--news-r);
	background: #fff;
}

.news-body .news-point > li + li {
	margin-top: 8px;
}

@media screen and (max-width: 1024px) {
	.news-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.news-side {
		position: static;
	}
}

@media screen and (max-width: 767px) {
	.news-page {
		padding: 90px 0 64px;
	}

	.news-wrap {
		padding: 0 20px;
	}

	.news-crumbs.crumbs-nav {
		margin-bottom: 24px;
	}

	.news-title {
		font-size: 2.4rem;
	}

	.news-eyecatch {
		margin-top: 22px;
	}

	.news-body {
		font-size: 1.6rem;
		line-height: 1.95;
	}

	.news-body h2 {
		margin-top: 52px;
		padding: 14px 18px;
		font-size: 2rem;
	}

	.news-toc {
		padding: 22px 20px;
	}

	.news-body .news-tools {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

.news-body .news-tools-name {
	margin-top: 4px;
	padding-left: 0;
	border-left: 0;
	font-size: 1.9rem;
	word-break: auto-phrase;
	text-wrap: balance;
}

.news-body .news-tools-in > * + * {
	margin-top: 8px;
}

.news-body .news-tools-in > .news-tools-name {
	margin-top: 4px;
}

.news-body li,
.news-tools-desc,
.news-tools-use {
	word-break: auto-phrase;
	text-wrap: balance;
}

.news-body .news-tools-img img {
	margin: 0;
}

/* ボタンの位置をカード同士でそろえる */
.news-body .news-tools-in > .news-tools-url {
	margin-top: auto;
	padding-top: 12px;
}

/* 本文の段落：文節で改行し、6行以下の段落は行の長さをならして泣き別れを防ぐ */
.news-body p {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* 無料ツール一覧：わくラボ調の3Dアイコン (2026-10-05) */
.fwtools-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
}

.fwtools-icon {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.fwtools-item a:hover .fwtools-icon,
.fwtools-item a:focus-visible .fwtools-icon {
	transform: translateY(-6px) rotate(-6deg);
}

.fwtools-headtext {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fwtools-head .fwtools-name {
	margin: 4px 0 0;
	text-wrap: balance;
}

/* 各ツールのページ：見出しの上にアイコン */
.fwtool-pageicon {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto 8px;
}

@media screen and (max-width: 767px) {
	.fwtools-icon {
		flex-basis: 76px;
		width: 76px;
		height: 76px;
	}

	.fwtool-pageicon {
		width: 96px;
		height: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fwtools-icon {
		transition: none;
	}
}

/* 記事内ツールカード：アイコン版（写真の代わりに3Dアイコンを大きく） */
.news-tools-img.is-icon {
	display: grid;
	place-items: center;
	background: #FFF4E6;
}

.news-body .news-tools-img.is-icon img {
	width: 46%;
	height: auto;
	object-fit: contain;
}

/* =========================================================
   教えて！ハッシー先生（ブログ）の会話の吹き出し (2026-10-05)
   ハッシー先生＝左・白い吹き出し／フォンくん＝右・薄オレンジの吹き出し
   ========================================================= */
.news-body .blog-talk {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 32px 0;
}

.news-body .blog-talk.is-fon {
	flex-direction: row-reverse;
}

.blog-talk-face {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: #FFF4E6;
}

.is-fon .blog-talk-face {
	background: #2E2E2E;
}

.news-body .blog-talk-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

.blog-talk-bubble {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 560px;
	padding: 16px 20px;
	border-radius: 8px;
	background: #fff;
	font-size: 1.6rem;
	line-height: 1.9;
}

.is-fon .blog-talk-bubble {
	background: #FCE8D6;
}

/* しっぽ（角丸の三角） */
.blog-talk-bubble::before {
	content: "";
	position: absolute;
	top: 26px;
	left: -10px;
	width: 14px;
	height: 16px;
	background: inherit;
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.is-fon .blog-talk-bubble::before {
	left: auto;
	right: -10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.blog-talk-name {
	display: block;
	margin-bottom: 4px;
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: .08em;
	color: #B5590C;
}

.news-body .blog-talk-bubble p {
	margin: 0;
}

.news-body .blog-talk-bubble p + p {
	margin-top: .6em;
}

/* ツールへの導線ボタン */
.news-body .blog-tool-cta {
	margin-top: 40px;
}

.news-body .blog-tool-cta a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	border-radius: 8px;
	background: #2E2E2E;
	color: #fff;
	font-weight: 800;
	font-size: 1.8rem;
	text-decoration: none;
	transition: background .25s;
}

.news-body .blog-tool-cta a::after {
	content: "→";
	font-family: "Figtree", sans-serif;
}

.news-body .blog-tool-cta a:hover {
	background: #F07D1A;
}

@media screen and (max-width: 767px) {
	.blog-talk-face {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.news-body .blog-talk {
		gap: 12px;
	}

	.blog-talk-bubble {
		padding: 12px 16px;
		font-size: 1.5rem;
	}

	.blog-talk-bubble::before {
		top: 20px;
	}

	.news-body .blog-tool-cta a {
		padding: 18px 20px;
		font-size: 1.6rem;
	}
}