/*
 Theme Name:   Twenty Twenty-Five-Mitsuwatech
 Description:  This Theme was created for mitsuwatech.jp as a child of Twenty Twenty-Five Theme.
 Author:       okunagak@flowplus.jp
 Author URI:   https://flowplus.jp
 Template:     twentytwentyfive
 Version:      1.0.0 
*/

/* 全体 */
/*
 - hn要素のマージンはサイトエディタ＞見出しブロックのスタイルで設定。
 - h4とh5は同サイズにしており、違いは下記のclearプロパティのみ。
*/
h1, h2, h3, h4 {
    clear: both;
}
h2 {
	padding: 0.3rem 0.5rem 0.1rem 0.5rem;
	background-color: var(--wp--preset--color--custom-light-gray-01);
	border: solid 1px var(--wp--preset--color--custom-light-gray-01);
	border-right-color: var(--wp--preset--color--custom-light-gray-02);
	border-bottom-color: var(--wp--preset--color--custom-light-gray-02);
}
h3 {
	padding-bottom: 0.3rem;
	border-bottom: solid 1px #004e87;
}
.subtitle {
	color: var(--wp--preset--color--accent-6);
	font-size: var(--wp--preset--font-size--large);
}
.to_page_top {
    clear: both;
}
li.pdf {
    list-style-image: url(/wp-content/uploads/2025/04/icon_pdf.gif);
}
.clearBoth {
    clear: both;
}
.top1em {
    margin-top: 1em;
}
.comment {
    margin-left: 25%;
    color: var(--wp--preset--color--accent-2);
    font-size: var(--wp--preset--font-size--small);
}
.caution {
    color: var(--wp--preset--color--custom-red);;
}
.blue {
    color: var(--wp--preset--color--custom-blue);;
}
.maroon {
    color: var(--wp--preset--color--custom-maroon);;
}
table {
    margin-top: 0.5em;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0em;
}
th {
	padding: 0.3em 0.5em 0em 0.5em;
	border: solid 1px var(--wp--preset--color--custom-light-gray-02);
	background-color: var(--wp--preset--color--custom-light-gray-01);
	font-weight: 500;
    text-align: left;
    vertical-align: middle;
    word-break: keep-all;
}
td {
	padding: 0.3em 0.5em 0em 0.5em;
	border: solid 1px var(--wp--preset--color--custom-light-gray-02);
    word-break: keep-all;
}
td>ul, td>ol {
    margin: 0;
}
th.num {
    text-align: right;
}
th.item {
    text-align: left;
}
table.parts {
    font-size: var(--wp--preset--font-size--small);
}
table.parts td {
    text-align: right;
}

/* サイドバー */
.mitsuwatech-sidebar {
    font-size: var(--wp--preset--font-size--small);
}
.mitsuwatech-sidebar ul {
    padding-inline-start: 0;
}
.mitsuwatech-sidebar li>ul {
    padding-inline-start: 1.5rem;
}
.mitsuwatech-sidebar li {
    list-style-type: none;
    line-height: 1.2;
    padding-top: 0.5rem;
}
.mitsuwatech-sidebar li a:link,
.mitsuwatech-sidebar li a:visited,
.mitsuwatech-sidebar li a:active,
.mitsuwatech-sidebar li.mouse_out a {
	color: var(--wp--preset--color--accent-6);
	text-decoration: none;
}
.mitsuwatech-sidebar li a:hover,
.mitsuwatech-sidebar li.mouse_over>a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}


/* フッター */
.mitsuwatech-footer {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--accent-6);
}
.mitsuwatech-footer li {
    list-style-type: none;
    line-height: 1.2;
    padding-top: 0.5rem;
}
.mitsuwatech-footer li>ul>li {
    list-style-type: disc;
}
.mitsuwatech-footer ul.catalog-right {
    padding-top: 1.5rem;
}
.mitsuwatech-footer li a:link,
.mitsuwatech-footer li a:visited,
.mitsuwatech-footer li a:active,
.mitsuwatech-footer li.mouse_out a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}
.mitsuwatech-footer li a:hover,
.mitsuwatech-footer li.mouse_over>a {
	color: var(--wp--preset--color--accent-5);
	text-decoration: underline;
}

.mitsuwatech-footer .company-info {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.mitsuwatech-footer .company-info p {
    margin-right: 1rem;
}
.mitsuwatech-footer .company-info a:link,
.mitsuwatech-footer .company-info a:visited,
.mitsuwatech-footer .company-info a:active,
.mitsuwatech-footer .company-info.mouse_out a {
    color: var(--wp--preset--color--accent-6);
	text-decoration: none;
}
.mitsuwatech-footer .company-info a:hover,
.mitsuwatech-footer .company-info.mouse_over>a {
	text-decoration: underline;
}


/* フロントページ */
.mitsuwatech-front-page .mitsuwatech-top-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* コンテンツエリア */
.mitsuwatech-breadcrumb {
    padding-left: 215px;
}

.mitsuwatech-finished {
    clear: both;
    margin: 2em 1em;
    padding: 1em;
    border: solid 3px var(--wp--preset--color--accent-5);
    border-radius: 7px;
    background: #FFFCDB;
    font-size: var(--wp--preset--font-size--x-large);
}
.mitsuwatech-finished h2 {
    background: none;
    border: none;
    margin-top: 0;
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 600;
    text-align: center;
}
.mitsuwatech-finished p {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.1em;
    margin-top: 1em;
}

.imgBoxL,
.imgBoxR,
.imgBoxC {
	width: 260px;
	margin: 10px;
	text-align: center;
}
.imgBoxL {
	float: left;
}
.imgBoxR {
	float: right;
}
.imgBoxC {
	clear: both;
	float: left;
}
.width_unset {
    width: unset;
}
.imgBoxWindow {
    width: 300px;
    height: 300px;
}
.imgBoxL .imgBoxR {
    float: right;
}
.imgBoxL img,
.imgBoxR img,
.imgBoxC img {
	margin: 0px;
	padding: 0px;
	text-align: center;
	border: solid 1px var(--wp--preset--color--custom-light-gray-02);
}
.imgBoxL .caption,
.imgBoxR .caption,
.imgBoxC .caption {
	margin: 3px 5px 20px 5px;
	color: var(--wp--preset--color--custom-accent-6);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.3em;
	text-align: center;
	clear: both;
}

/* 個別ページ：リンクページ */
.link_page h3 {
    border-color: var(--wp--preset--color--custom-light-gray-02);
    padding-top: 2rem;
}
.link_page .imgBoxL img {
    text-align: left;
}

/* 個別ページ：会社概要 */
.company_page th {
    text-align: left;
}

/* お問い合わせフォーム */
.inquiry_form {
    font-size: var(--wp--preset--font-size--small);
}
.inquiry_form table h3,
.inquiry_form table h4 {
    width: auto;
    margin-block-end: 0.3em;
    font-size: var(--wp--preset--font-size--default);
}
.inquiry_form table p {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    text-wrap: wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}
.inquiry_form input[type="text"],
.inquiry_form input[type="tel"],
.inquiry_form input[type="email"],
.inquiry_form input[type="number"],
.inquiry_form input[type="submit"],
.inquiry_form button,
.inquiry_form textarea {
	font-size: var(--wp--preset--font-size--default);
    font-weight: 400;
    color: var(--wp--preset--color--contrast);
    border: solid 1px var(--wp--preset--color--accent-6);
	background-color: var(--wp--preset--color--custom-light-gray-01);
    padding: 0.5em;
    margin: 0.5em 0;
    width: auto;
	line-height: 1.1em;
	letter-spacing: 0.05em;
}
.inquiry_form input[type="submit"],
.inquiry_form button {
    width: 12em;
    margin: auto 0.5em;
    border: solid 2px var(--wp--preset--color--accent-1);
    border-radius: 5px;
    color: var(--wp--preset--color--accent-1);
}
.inquiry_form .btnArea {
    text-align: center;
    margin: 2em 0 1em 0;
}
.inquiry_form .btnArea br {
    /* ContactForm7でボタン間に挿入される<br>を無視させる */
    display: none;
}
#defaultForm .required th {
    color: var(--wp--preset--color--custom-red);
}
#defaultForm .required td input {
	background-color: var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--contrast);
}
#confirmScreen fieldset {
    border: none;
}
#confirmScreen output[name="catalog"]:not([hidden]) {
    display: list-item;
    list-style: disc;
    margin-left: 1em;
}
#confirmScreen output[name="otherMsgs"]:not([hidden]) {
    display: block;
    white-space: pre;
}

/*=========================================================*
 * トップページと商品一覧ページのareaDsp設定用のCSS
 *=========================================================*/
.areaDsp {
	position: static;
	float: none;
	margin: 0;
	padding: 0;
    font-size: var(--wp--preset--font-size--small);
}
/*--------------------------------------------------------*/
.areaDsp div.dspBox,
.areaDsp div.dspBox_title {
	/*
	 * 子要素のh5をdspBox内での絶対配置とさせるため、
	 * dspBoxは相対配置とする。
	 */
    position: relative;
	float: left;
	width: 160px;
    height: 160px;
	margin: 0 5px 5px 0;
	padding: 0;
	overflow: hidden;	/* dspBoxからはみ出した部分は非表示。 */
	border: solid 1px;
	background-color: transparent;
	text-align: center;	/* imgを中央揃えさせる。 */
}

.areaDsp div.dspBox_title {
	clear: left;
}

.areaDsp div.dspBox_title h5 {
	margin: 10px;
	padding: 0;
    font-size: 120%;
	text-align: left;
    text-transform: none
}
.areaDsp div.dspBox h6 {
	z-index: 9;
	position: absolute;
	left: 0px;
	bottom: 0px;
	margin: 0px;
	padding: 5px 0;
	width: 100%;
	font-size: 100%;
	font-weight: 500;
	text-align: center;
    text-transform: none
}
.areaDsp div.dspBox h6.pdf {
    /* PDFアイコンを表示させる。 */
	background-image: url(/wp-content/uploads/2025/04/icon_pdf.gif);
	background-position: 3px center;
	background-repeat: no-repeat;
	padding-left: 35px;
	width: 125px;
}

.areaDsp div.dspBox img {
	margin: 0;
	border: none;
}


/* link: div.dspBox */
.areaDsp a:link div.dspBox,
.areaDsp a:visited div.dspBox,
.areaDsp a:active div.dspBox{
	border-color: var(--wp--preset--color--accent-1);
}
.areaDsp a:hover div.dspBox {
	border-color: var(--wp--preset--color--accent-3);
}
.areaDsp a:link div.dspBox h6,
.areaDsp a:visited div.dspBox h6,
.areaDsp a:active div.dspBox h6{
	background-color:#f0f0f0;
	-moz-opacity: 0.8;
    opacity: 0.8;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}
.areaDsp a:hover div.dspBox h6 {
    background-color: var(--wp--preset--color--accent-3);
	-moz-opacity: 1.0;
    opacity: 1.0;
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* link: div.dspBox_title */
.areaDsp a:link div.dspBox_title,
.areaDsp a:visited div.dspBox_title,
.areaDsp a:active div.dspBox_title {
	background-color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}
.areaDsp a:hover div.dspBox_title {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-3);
}
.areaDsp a:link div.dspBox_title h5,
.areaDsp a:visited div.dspBox_title h5,
.areaDsp a:active div.dspBox_title h5 {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.areaDsp a:hover div.dspBox_title h5 {
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
}

/*--------------------------------------------------------*
 * catalogページ用の上書き設定
 *--------------------------------------------------------*/
.areaDsp.catalog div.dspBox {
    width: 200px;
    height: 250px;
    margin: 0 10px 10px 0;
    display: flex;          /* Flexbox コンテナにする */
    flex-direction: column; /* 子要素を縦に並べる */
}
.areaDsp.catalog div.dspBox h6 {
	/* z-index: 9; */
	position: static;
	margin: 0;
	padding: 5px 3px;
	/* width: 100%; */
	font-size: 105%;
    font-weight: 500;
    line-height: 1.3em;
	/* 
	text-align: center;
    text-transform: none */
}
.areaDsp.catalog div.dspBox h6.pdf {
    /* PDFアイコンを表示させる。 */
	background-position: 5xp 5px;
	width: 165px;
    padding-left: 35px;
}
.areaDsp.catalog div.dspBox h6 .sub {
    font-size: 85%;
    font-weight: 400;
    color: var(--wp--preset--color--accent-1);
}
.areaDsp.catalog div.dspBox img {
    margin-top: auto;     /* ★これで画像が下に配置される */
    margin-bottom: 20px;
    /* 画像の左右中央揃えなど (任意) */
    display: block;       /* margin: auto 左右を効かせるため */
    margin-left: auto;
    margin-right: auto;
}

.areaDsp.catalog a:link div.dspBox,
.areaDsp.catalog a:visited div.dspBox,
.areaDsp.catalog a:active div.dspBox{
	border-color: var(--wp--preset--color--custom-light-gray-02);
}
.areaDsp.catalog a:hover div.dspBox {
	border-color: var(--wp--preset--color--accent-3);
}
.areaDsp.catalog a:link div.dspBox h6,
.areaDsp.catalog a:visited div.dspBox h6,
.areaDsp.catalog a:active div.dspBox h6{
	background-color: transparent;
	-moz-opacity: null;
    opacity: null;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.areaDsp.catalog a:hover div.dspBox h6,
.areaDsp.catalog a:hover div.dspBox h6 .sub {
	background-color: transparent;
	-moz-opacity: null;
    opacity: null;
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
}