/*
Theme Name: CPI Child
Template: cpi-web
Description: 株式会社協栄情報（cpinfo.jp / www.cp-info.co.jp）の子テーマ。親テーマ cpi-web は本番のまま変更せず、修正はすべてこの子テーマで行う。
Author: 株式会社協栄情報
Version: 1.1.0
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: cpi-web-child
*/

/* 子主题的自定义样式写在这里（会在父主题 CSS 之后加载） */

/* ------------------------------------------------------------
   [review H-3] 键盘焦点可见
   父主题 base.css 用 *:focus{outline:none} 去掉了所有焦点框，
   slick / iaichat 的 CSS 里也有 outline:none。
   :focus-visible 只在键盘操作时显示，鼠标点击时不显示。
   红色外框 + 白色内圈：在白色背景和深色背景（页头、子菜单、页脚）上都看得清。
------------------------------------------------------------ */
:focus-visible {
	outline: 3px solid #dd122b !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* ------------------------------------------------------------
   [review H-4] 汉堡菜单 div → button 后的样式复位
------------------------------------------------------------ */
button.l-gnavi-hum {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}
@media (min-width: 1321px) {
	/* PC 宽度下父主题没有给汉堡菜单写样式（div 是空的看不见），button 需要明确隐藏 */
	button.l-gnavi-hum {
		display: none;
	}
}
@media (max-width: 1320px) {
	/* 抽屉菜单关闭时只是移到了屏幕外，Tab 键仍会进入里面的链接，所以关闭时设为 hidden。
	   父主题的 transition: all .3s 会让 visibility 在滑出动画结束后才切换 */
	body:not(.is-gnavi-hum-open) nav.l-gnavi,
	body:not(.is-gnavi-hum-open) nav.l-gnavi .l-gnavi-list__subnavi {
		/* 子菜单在父主题里明确写了 visibility: visible，所以也要单独设置 */
		visibility: hidden !important;
	}
}

/* ------------------------------------------------------------
   [review M-8] 分页：手机上不超出屏幕
   页码数量由 cpi_pagination() 控制（首页 / 末页 / 当前页前后各 1 页），
   这里再允许换行，并在窄屏下缩小间距。
------------------------------------------------------------ */
/* case.css 用 ul.pagination，news.css 用 .p-sub-news-wrap .p-sub-news-wrap__main ul.pagination（优先级更高），两种都写 */
ul.pagination,
.p-sub-news-wrap .p-sub-news-wrap__main ul.pagination {
	flex-wrap: wrap;
	row-gap: 10px;
}
ul.pagination li.dots,
.p-sub-news-wrap .p-sub-news-wrap__main ul.pagination li.dots {
	padding-left: 0;
	padding-right: 0;
	color: #dd122b;
}
ul.pagination li a:not([href]) {
	cursor: default;
}
@media (max-width: 599px) {
	ul.pagination li,
	.p-sub-news-wrap .p-sub-news-wrap__main ul.pagination li {
		margin-right: 8px;
		padding: 4px 10px;
		font-size: 16px;
	}
	ul.pagination li:last-child,
	.p-sub-news-wrap .p-sub-news-wrap__main ul.pagination li:last-child {
		margin-right: 0;
	}
}

/* ------------------------------------------------------------
   [review L-6] 服务菜单的 HOT 标签（以前是行内 style，数值不变）
------------------------------------------------------------ */
.l-gnavi-list__subnavi .cpi-hot-badge {
	background-color: #dd122b;
	color: #fff;
	font-size: 10px;
	width: 65px;
	margin-top: 3px;
	padding: 4px 10px;
}

/* ------------------------------------------------------------
   [review M-4] 标题层级：logo 的 h1 → div（首页页头除外），页面标题 h2 / p → h1。
   父主题的 CSS 选择器带着标签名（h1.l-header-in__logo、.m-common-h2-in h2、p.m-page-maincopy），
   这里把 common.css / subpage.css 里对应的规则原样复制一份给新标签（自动生成，数值不变）。
------------------------------------------------------------ */
.l-header-in div.l-header-in__logo {
	width: 110px;
	position: absolute;
	top: 18px;
	left: 50px;
}
@media (max-width: 599px) {
	.l-header-in div.l-header-in__logo {
		width: 86px;
		position: absolute;
		top: 9px;
		left: 3%;
	}
}
.l-footer-in__logobox div.l-footer-in__logobox-logo {
	width: 110px;
}
@media (max-width: 599px) {
	.l-footer-in__logobox div.l-footer-in__logobox-logo {
		width: 85px;
	}
}
.m-common-h2 .m-common-h2-in h1 {
	width: 100%;
	margin: 0 auto 24px;
	padding-top: 50px;
	padding-left: 30px;
	border-left: 1px solid #dd122b;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.1;
	color: #FFF;
}
.m-common-h2 .m-common-h2-in h1 span {
	display: block;
	margin-bottom: 20px;
	font-family: 'Comfortaa', cursive;
	font-size: 20px;
	font-weight: 400;
	color: #dd122b;
}
@media (max-width: 599px) {
	.m-common-h2 .m-common-h2-in h1 {
		width: 100%;
		margin: 0 auto 30px;
		padding-top: 40px;
		padding-left: 5%;
		border-left: 1px solid #dd122b;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 7vw;
		font-weight: bold;
		line-height: 1.3;
		color: #FFF;
	}
}
@media (max-width: 599px) {
	.m-common-h2 .m-common-h2-in h1 span {
		display: block;
		margin-bottom: 10px;
		font-family: 'Comfortaa', cursive;
		font-size: 5vw;
		font-weight: 400;
		color: #dd122b;
	}
}
.m-page-mainttl h1.m-page-maincopy {
	width: 100%;
	margin: 0 auto 26px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
.m-page-mainttl h1.m-page-maincopy span.marker {
	background: linear-gradient(transparent 60%, #ff9800 60%);
}
@media (max-width: 599px) {
	.m-page-mainttl h1.m-page-maincopy {
		width: 100%;
		margin: 0 auto 20px;
		font-size: 7.0vw;
		font-weight: bold;
		text-align: center;
	}
}

/* ------------------------------------------------------------
   [review M-11] 对比度：按钮橙色 #E78A00 → #b86e00（白字 2.61:1 → 3.99:1，大字标准 3:1），
   灰字 #7f7f92 → #5f5f73（3.92:1 → 6.23:1，标准 4.5:1）。按钮下方的阴影 #B25700 → #7a4700。
   从父主题的 common / subpage / case / news / service.css 自动生成，只替换颜色。
   subpage.css、service.css 在固定页面上通过 custom-css 在本文件之后加载，所以加 html body 提高优先级。
------------------------------------------------------------ */
html body ul.m-contact-in__main li.m-contact-in__main-item p.m-contact-in__main-item__btn a {
	background: #b86e00;
	box-shadow: 0 5px 0 0 #7a4700;
}
@media (max-width: 1120px) {
	html body ul.m-contact-in__main li.m-contact-in__main-item p.m-contact-in__main-item__btn a {
		background: #b86e00;
		box-shadow: 0 5px 0 0 #7a4700;
	}
}
@media (max-width: 1120px) {
	html body ul.m-contact-in__main li.m-contact-in__main-item p.m-contact-in__main-item__btn a:hover {
		box-shadow: 0 0px 0 0 #7a4700;
	}
}
@media (max-width: 599px) {
	html body ul.m-contact-in__main li.m-contact-in__main-item p.m-contact-in__main-item__btn a {
		background: #b86e00;
		box-shadow: 0 5px 0 0 #7a4700;
	}
}
html body h5.m-common-h5 {
	color: #5f5f73;
	border-bottom: 1px solid #5f5f73;
}
@media (min-width: 1400px) {
	html body h5.m-common-h5 {
		color: #5f5f73;
		border-bottom: 1px solid #5f5f73;
	}
}
@media (max-width: 599px) {
	html body h5.m-common-h5 {
		color: #5f5f73;
		border-bottom: 1px solid #5f5f73;
	}
}
html body .p-sub-case-wrap__main-textbox-data {
	color: #5f5f73;
	border-bottom: 1px solid #5f5f73;
}
html body .p-sub-case-wrap__main .p-sub-case-wrap__main-textbox ul.p-sub-case-wrap__main-textbox-tag li {
	color: #5f5f73;
	border: 1px solid #5f5f73;
}
html body .case-editor h5 {
	color: #5f5f73;
	border-bottom: 1px solid #5f5f73;
}
@media (min-width: 1400px) {
	html body .case-editor h5 {
		color: #5f5f73;
		border-bottom: 1px solid #5f5f73;
	}
}
@media (max-width: 599px) {
	html body .case-editor h5 {
		color: #5f5f73;
		border-bottom: 1px solid #5f5f73;
	}
}
html body .p-sub-news-wrap__article h1 {
	border-bottom: 1px solid #5f5f73;
}
html body .p-sub-news-wrap__article h4 {
	color: #5f5f73;
	border-bottom: 1px solid #5f5f73;
}
@media (max-width: 599px) {
	html body .p-sub-news-wrap__article h1 {
		border-bottom: 1px solid #5f5f73;
	}
}
@media (max-width: 599px) {
	html body .p-sub-news-wrap__article h4 {
		color: #5f5f73;
		border-bottom: 1px solid #5f5f73;
	}
}
html body ul.p-service-feature-wrap.two-column li p.p-service-feature-wrap__maintext {
	border-top: 1px solid #5f5f73;
}
@media (min-width: 1400px) {
	html body ul.p-service-feature-wrap.two-column li p.p-service-feature-wrap__maintext {
		border-top: 1px solid #5f5f73;
	}
}
@media (max-width: 599px) {
	html body ul.p-service-feature-wrap.two-column li p.p-service-feature-wrap__maintext {
		border-top: 1px solid #5f5f73;
	}
}
html body .p-migration_feature-wrap .p-migration_feature-wrap_textbox p.maintext {
	border-top: 1px solid #5f5f73;
}
@media (min-width: 1400px) {
	html body .p-migration_feature-wrap .p-migration_feature-wrap_textbox p.maintext {
		border-top: 1px solid #5f5f73;
	}
}
@media (max-width: 599px) {
	html body .p-migration_feature-wrap .p-migration_feature-wrap_textbox p.maintext {
		border-top: 1px solid #5f5f73;
	}
}
html body .p-service-point-wrap {
	border-bottom: 1px solid #5f5f73;
}
@media (max-width: 599px) {
	html body .p-service-point-wrap {
		border-bottom: 1px solid #5f5f73;
	}
}
html body .d-diagnosis-report__ttl {
	color: #5f5f73;
	border-bottom: 2px solid #5f5f73;
}
@media (min-width: 1400px) {
	html body .d-diagnosis-report__ttl {
		color: #5f5f73;
		border-bottom: 2px solid #5f5f73;
	}
}
@media (max-width: 599px) {
	html body .d-diagnosis-report__ttl {
		color: #5f5f73;
		border-bottom: 2px solid #5f5f73;
	}
}

/* ------------------------------------------------------------
   [review M-12] slick-theme.css 的 .slick-loading 背景图 ajax-loader.gif 不存在（404）。
   ragchat 页面的轮播初始化的一瞬间会请求它，这里去掉背景图。
   slick-theme.css 通过页面的 custom-css 在本文件之后加载，所以加 html 提高优先级。
------------------------------------------------------------ */
html .slick-loading .slick-list {
	background-image: none;
}

/* ------------------------------------------------------------
   [review H-6] common.css 的背景图 PNG → 子主题的 WebP（同尺寸）。
   img_contact_bg 566KB→9KB、img_contact_bg_sp 519KB→8KB、ban_bg_blog 378KB→19KB、ban_bg_recruit 310KB→14KB、bg_contents 343KB→24KB。
   common.css 的媒体查询里也有同样的规则，所以加 html 提高优先级，只换 background-image。
------------------------------------------------------------ */
html .l-wrap {
	background-image: url("assets/images/common/bg_contents.webp");
}
html .m-link .m-link__ban a.m-link__ban-blog::after {
	background-image: url("assets/images/common/ban_bg_blog.webp");
}
html .m-link .m-link__ban a.m-link__ban-recruit::after {
	background-image: url("assets/images/common/ban_bg_recruit.webp");
}
html .m-contact {
	background-image: url("assets/images/common/img_contact_bg.webp");
}
@media (max-width: 599px) {
	html .m-contact {
		background-image: url("assets/images/common/img_contact_bg_sp.webp");
	}
}

/* [review H-6] wp_get_attachment_image()（cpi_attachment_img()）输出的 <img> 带 width / height 属性。
   base.css 只有 img{width:100%}，不加 height:auto 的话高度会按属性值显示，图片会被拉伸。 */
img[class*="attachment-"] {
	height: auto;
}

/* 404 ページ（error.html）のパンくず：現在地はリンクなしの span（見た目は subpage.css のリンクと同じ） */
.m-common-h2 .m-common-breadcrumb ul.m-common-breadcrumb-in li span[aria-current="page"] {
	display: block;
	font-size: 14px;
	color: #ff9800;
}