@charset "UTF-8";
/********************************************************************************

common.css

********************************************************************************/
/*============================================================
 css変数
*============================================================*/
:root {
    --common-vh: 100vh;                         /* jsで変動 */

	--common-inner-max-width: 1128px;           /* 通常サイト幅 */
	--common-inner-max-width-wide: 1280px;      /* ワイドサイト幅 */
	--common-inner-padding: 24px;               /* 通常サイト幅内余白 */
	--common-inner-padding-wide: 24px;          /* ワイドサイト幅内余白 */

    --common-color-text: #032742;           /* 基本テキスト色 */
    --common-color-main: #6BBBA5;         /* メイン色 */
    --common-color-sub: #032742;            /* サブ色 */
    --common-color-background1: #F4F4F4;       /* 背景色1 */
    --common-color-background2: linear-gradient(180deg, #81C5B2 0%, #6BBBA5 100%);       /* 背景色2 */
    --common-color-accent: #FAA43F;            /* アクセント色 */
    --common-color-attention: #F7223C;      /* 注意色 */

    --common-font-family: 'Noto Sans JP', sans-serif;
    --common-font-family-en: 'Lato', sans-serif;

    --common-header-height: 0;                  /* jsで変動 */
    --common-footer-height: 0;                  /* jsで変動 */
}

body {
    --inner-max-width: var(--common-inner-max-width);
    --inner-padding: var(--common-inner-padding);
}

/*============================================================
 system
*============================================================*/
/* pc-sp display switch
---------------------------------------- */
.forPC {
    display: inherit;
}
.forSP {
    display: none;
}

/*============================================================
 format
*============================================================*/
/* ベース
---------------------------------------- */
html {
    display: block;
    background-color: #fff;
}
body {
    width: 100%;
    font-family: var(--common-font-family);
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 160%;
    color: var(--common-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0 0 0 0;
	background: var(--common-color-background1);
}
*[data-font="en"] {
    font-family: var(--common-font-family-en); 
}

body.page-lower {
    /* padding-top: var(--common-header-height); */
}

/* レイアウト
---------------------------------------- */
#main-contents {
	overflow: hidden;
    width: 100%;
}

/* コンテンツ内
---------------------------------------- */
h1,h2,h3 {
	font-weight: bold;
	line-height: 1.6;
}
h1 {
	font-size: 40px;
}
h2 {
	font-size: 32px;
	margin-bottom: 24px;
}
h3 {
	font-size: 24px;
	margin-bottom: 16px;
}
h4 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 16px;
}

.section {
    margin-bottom: 64px;
}
.section:last-child {
    margin-bottom: 0;
}

.inner {
    width: 100%;
    max-width: var(--inner-max-width);
    padding: 0 var(--inner-padding);
    margin: 0 auto;
}
main .inner > *:not(h1, h2, h3, h4) {
    margin-bottom: 32px;
}
main .inner > *:last-child {
    margin-bottom: 0;
}

main .block, main .inner .block {
    margin-bottom: 48px;
}
main .block:last-child {
    margin-bottom: 0;
}

main .block > *:not(h1, h2, h3, h4) {
    margin-bottom: 32px;
}
main .block > *:last-child {
    margin-bottom: 0;
}


p {}
img {
    max-width: 100%;
    height: auto;
}
svg {
    max-width: 100%;
    height: auto;    
}
span {
    font-weight: inherit;
}
a[href^="tel:"] {
    pointer-events: none;
}
strong {}
.attention {
    font-size: 12px;
    line-height: 160%;
    color: var(--common-color-attention);
}
.notice {
    font-size: 12px;
    line-height: 160%;
	margin-top: 8px;
}
.list-date {
    font-size: 12px;
    line-height: 160%;
}

/*============================================================
 メインビジュアル(下層)
*============================================================*/
.page-lower #mainvisual {
	color: #fff;
    background: var(--common-color-background2);
    padding-top: calc( var(--common-header-height) + 32px);
	padding-bottom: 40px;
	margin-bottom: 64px;
}

/*============================================================
 パンくずリスト
*============================================================*/
/* TOPページでは非表示
---------------------------------------- */
#page-top #breadcrumb {
    display: none;
}

/* 下層ページでは表示
---------------------------------------- */
#breadcrumb {
	margin-bottom: 16px;
}
#breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    font-size: 12px;
    line-height: 140%;
}
#breadcrumb li a {
    text-decoration-line: underline;
}
/* セパレーター(テキストの場合) */
#breadcrumb li:not(:last-child)::after {
    content: "/";
    display: inline-block;
    margin-left: 8px;
}
/* セパレーター(画像の場合) */
/* #breadcrumb li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 100%;
    background-image: url(../images/common/icon-bread-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px auto;
    margin-left: 8px;
    vertical-align: text-bottom;
} */



/*============================================================
 共通ブロック
*============================================================*/
/* 要素幅超スクロール
---------------------------------------- */
.block-wscroll {
    width: calc(100vw - ((100vw - 100%) / 2));
    overflow-x: auto;
}
.block-wscroll .block-wscroll-inner {
    width: max-content;
    padding: 0 var(--inner-padding) 16px 0;
}
.block-wscroll .block-wscroll-inner > * {
    width: auto;
    white-space: nowrap;
}

/* 共通設定
---------------------------------------- */
.block-common .inner > * {
	margin-bottom: 40px;
}
.block-common .inner > h2 {
	margin-top: 80px;
}
.block-common .inner > h3 {
	margin-top: 56px;
}
.block-common .inner > *:first-child {
	margin-top: 0;
}
.block-common .inner > .parts-btn {
	margin-top: 80px;
}
.block-common .inner ul,
.block-common .inner ol {
	background: #fff;
	border-radius: 8px;
	padding: 24px 24px 24px 40px;
}
.block-common .inner ul li {
	list-style-type: disc;
	margin-bottom: 16px;
}
.block-common .inner ol li {
	list-style-type: decimal;
	margin-bottom: 16px;
}
.block-common .inner ul ol,
.block-common .inner ol ul {
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 0;
}
.block-common .inner ul li ol li {
	list-style-type: decimal;
}
.block-common .inner ol li ul li {
	list-style-type: disc;
}
.block-common .inner ul li:last-child,
.block-common .inner ol li:last-child {
	margin-bottom: 0;
}
.block-common .inner ul li a,
.block-common .inner ol li a{
	text-decoration: underline;
	color: var(--common-color-main);
}
.block-common .inner ul > p {
	margin-left: -20px;
	font-weight: bold;
	margin-bottom: 16px;
}
.block-common .inner dl > div {
	padding-bottom: 16px;
	border-bottom: 1px solid #999999;
	margin-bottom: 16px;
}
.block-common .inner dl dt {
	float: left;
	font-weight: bold;
}
.block-common .inner dl dd {
	margin-left: 260px;
}
.block-common .inner dl dd a {
	text-decoration: underline;
	color: var(--common-color-main);
}
.block-common .inner > img {
	border-radius: 24px;
	overflow: hidden;
}
.block-common .inner > img.size-large,
.block-common .inner > img.size-full {
	width: 100%;
}
.block-common .inner > p img {
	border-radius: 24px;
	overflow: hidden;
}
.block-common .inner > p img.size-large,
.block-common .inner > p img.size-full {
	margin-top: 32px;
	width: 100%;
}
.block-common .inner .wp-caption {
	width: 100%!important;
}
.block-common .inner .wp-caption .wp-caption-text {
	font-size: 14px;
	color: #B4B4B4;
	margin-top: 12px;
}
.block-common .inner .wp-block-image figcaption {
	font-size: 14px;
	color: #B4B4B4;
	margin-top: 8px;
	margin-bottom: 0;
}
.block-common .inner .wp-block-media-text {
	grid-gap: 40px;
}
.block-common .inner .wp-block-media-text .wp-block-media-text__content {
	padding: 0;
}
.block-common .inner p a {
	text-decoration: underline;
	color: var(--common-color-main);
}
.block-common .inner p .color {
	font-weight: bold;
	color: var(--common-color-main);
}
.block-common .inner p strong {
	font-weight: bold;
}
.block-common .inner table td {
	vertical-align:middle;
	padding: 24px 0;
} 
.block-common .inner table td:first-child {
	font-weight: bold;
}
.block-common .inner table tr {
	border-bottom: 1px solid #999999;
}
.block-common .inner .wp-block-table td,
.block-common .inner .wp-block-table th {
	border: none;
}
.block-common .su-button-center a {
	text-decoration: underline;
}

/* 導入事例
---------------------------------------- */
.block-case {
    --gap: 48px;
    --col: 3;
    gap: var(--gap);
}
.block-case .item {
    display: block;
    width: calc((100% - var(--gap) * (var(--col) - 1)) / var(--col));
    border-radius: 16px;
    overflow: hidden;
    background-color: #fff;
}
.block-case .item .image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.block-case .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: .3s ease-in-out;
}
.block-case .item:hover .image img {
    transform: scale(1.1);
}
.block-case .item .info {
    padding: 16px 50px 24px 16px;
	position: relative;
}
.block-case .item .info:before {
	content: "";
	position: absolute;
	background: url(../images/common/icon-arrow.svg);
	background-size: contain;
	width: 32px;
	height: 32px;
	bottom: 32px;
	right: 12px;
}
.block-case .item .info .corp {
	font-size: 12px;
}
.block-case .item .info .title {
	font-size: 20px;
	max-height: 56px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
	color: var(--common-color-main);
}
.block-case .item .info .desc {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 51px;
	font-size: 12px;
}

/*============================================================
 モーダルカスタム(Modaal.js)
 ※z-index指定　ヘッダー < .modaal-overlay < .modaal-wrapper
*============================================================*/
.modaal-wrapper {
    z-index: 999999;
}
.modaal-overlay {
    z-index: 99999;
}


/*============================================================
 ページング
*============================================================*/
/* bones_page_navi使用時
---------------------------------------- */
.pagination {
	margin: 64px 0;
}
.pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin: 0 auto;
    gap: 8px;
}
.pagination .page-numbers li > * {
    display: block;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 32px;
    text-align: center;
}
.pagination .page-numbers li > a {
    background-color: #F5F5F5;
    border-radius: 2px;
}
.pagination .page-numbers li > .current {
    background-color: transparent;
    font-weight: bold;
}
.pagination .page-numbers li > a.prev,
.pagination .page-numbers li > a.next {
    padding: 8px;
    background-color: #000;
    color: #fff;
}
.pagination .page-numbers li > *.page-numbers.dots {
    background-color: transparent;
}

/*============================================================
 記事本文ブロック
*============================================================*/

/* 箇条書きリスト
---------------------------------------- */
.block-post-content ul {
    list-style-type: disc;
    margin-left: 1em;
    margin-bottom: 16px;
}
.block-post-content ul li {
    list-style-type: disc;
    margin-left: 0.6em;
}
/* 連番リスト
---------------------------------------- */
.block-post-content ol {
    list-style: decimal;
    margin-left: 0.6em;
    margin-bottom: 16px;
}
.block-post-content ol li {
    list-style: decimal;
    padding-left: 0.4em;
    margin-left: 0.6em;
}
/* 段落
---------------------------------------- */
.block-post-content p {
    margin-bottom: 16px;
}
.block-post-content a {
    text-decoration: underline;
}
.block-post-content strong {
    font-weight: bold;
}
/* 画像
---------------------------------------- */
.block-post-content figure {    
    margin-bottom: 16px;
}
.block-post-content figure figcaption { 
    font-size: 12px;
    line-height: 140%;
    color: var(--common-color-notice);
    margin: 8px 0 0 0;
}

/* 余白調整
---------------------------------------- */
.block-post-content .inner > *:first-child {
    margin-top: 0;
}

/*============================================================
 サイドバー付き画面分割
*============================================================*/
#div-wrap {
	gap: 48px;
	align-items: flex-start;
	margin-bottom: 80px;
}
#div-wrap #contents {
	width: calc(100% - 280px);
}
#div-wrap #sidebar {
	width: 232px;
}
#div-wrap #sidebar .bg-wrap {
	background: #ddd;
	border-radius: 16px;
	padding: 24px 16px;
}
#div-wrap #sidebar .bg-wrap .inner {
	padding: 0;
}
#div-wrap #sidebar .bg-wrap .title {
	font-weight: bold;
	text-align: center;
	margin-bottom: 16px;
}
#div-wrap #sidebar .bg-wrap ul li {
	margin-bottom: 8px;
}
#div-wrap #sidebar .bg-wrap ul li:last-child {
	margin-bottom: 0;
}
#div-wrap #sidebar .bg-wrap ul li a {
	display: block;
	transition: all .3s;
	background: #fff;
	line-height: 1.6;
	font-size: 14px;
	font-weight: bold;
	border-radius: 8px;
	padding: 16px 26px 16px 8px;
}
#div-wrap #sidebar .bg-wrap ul li a:before {
	width: 16px;
	height: 16px;
	right: 8px;
}
#div-wrap #sidebar .bg-wrap ul li a:hover {
	opacity: 0.7;
}
#div-wrap #sidebar .parts-btn {
	margin-top: 16px;
}
#div-wrap #sidebar .parts-btn a {
	padding: 12px 40px;
	font-size: 14px;
	line-height: 1.6;
}


/*============================================================
 CTA
*============================================================*/
/* お問い合わせ
---------------------------------------- */
#cta-contact {
    padding: 72px 0;
	background: url(../images/common/cta-contact-bg.webp) no-repeat center center / cover;
	color: #fff;
	text-align: center;
}
#cta-contact h2 {
	font-size: 48px;
	line-height: 1.8;
	margin-bottom: 16px;
}
#cta-contact p {
	letter-spacing: 0.16em;
	font-weight: bold;
	font-size: 18px;
	max-width: 900px;
	line-height: 2;
	margin: 0 auto 48px;
}

/* 用語集
---------------------------------------- */
#cta-glossary {
	text-align: center;
	background: #fff;
	padding: 80px 24px 100px;
	margin-bottom: 0;
}
#cta-glossary .inner {
	padding: 40px;
	max-width: 1080px;
	background: var(--common-color-main);
	position: relative;
	overflow: hidden;
	color: #fff;
	border-radius: 16px;
}
#cta-glossary .icon {
	margin-bottom: 16px;
}
#cta-glossary .bg-img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
#cta-glossary h2 {
	line-height: 1.4;
}
#cta-glossary .parts-btn a img {
	margin-left: 10px;
	padding-top: 4px;
}
#sidebar #cta-glossary .parts-btn a img {
	margin-top: -4px;
}
#cta-glossary .parts-btn a img.hover {
	display: none;
}
#cta-glossary .parts-btn a:hover img.hover {
	display: inline-block;
}
#cta-glossary .parts-btn a:hover img.normal {
	display: none;
}
#cta-glossary .parts-btn {
	position: relative;
	z-index: 2;
}

/*============================================================
 サイト内検索フォーム
*============================================================*/
#searchform {
	position: relative;
}
#searchform 
#searchform > div > * {
    vertical-align: middle;
}
#searchform input {
	width: 240px;
	height: 48px;
	background: rgba(241,241,241,0.3);
	border-radius: 50px;
	padding: 10px 42px 10px 16px;
	font-size: 14px;
	line-height: 2;
}
#searchform input::placeholder {
	color: #498171;
}
#searchform button {
	position: absolute;
	background: none;
	display: block;
	width: 48px;
	height: 48px;
	top: 0;
	right: 0;
}
#fixed-header.scrolled #searchform input {
	background: #F1F1F1;
}
#fixed-header.scrolled #searchform input::placeholder {
	color: #ccc;
}


/*============================================================
 サイト内検索結果
*============================================================*/
/* 結果リスト
---------------------------------------- */
#page-search #sec-search-results {
	margin-bottom: 80px;
}
#page-search #sec-search-results .summary {
    margin-bottom: 40px;
}
#page-search #sec-search-results .summary .search-label {
	color: #888;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 8px;
}
#page-search #sec-search-results .summary .search-keyword {
	font-size: 20px;
	font-weight: bold;
	color: var(--common-color-main);
}
#page-search #sec-search-results .summary .result p {
	font-size: 14px;
	font-weight: bold;
	color: #888;
	line-height: 1.6;
	text-align: right;
}
#page-search #sec-search-results .block-search-results {
    flex-direction: column;
    gap: 32px;
}
#page-search #sec-search-results .block-search-results .item {
	display: block;
	background: #fff;
	padding: 24px 80px 24px 24px;
	border-radius: 8px;
	transition: all .3s;
}
#page-search #sec-search-results .block-search-results .item:hover {
	opacity: 0.5;
}
#page-search #sec-search-results .block-search-results .item .title {
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 16px;
}
#page-search #sec-search-results .block-search-results .item .lead {
	font-size: 11px;
	color: #767676;
	line-height: 1.6;
	padding-left: 32px;
	border-left: 1px solid #B4B4B4;
	margin-bottom: 16px;
}
#page-search #sec-search-results .block-search-results .item .link-text {
	font-size: 11px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: #A8A8A8;
}
#page-search #sec-post-data-none {
	margin-bottom: 80px;
}

/*============================================================
 目次
*============================================================*/
#toc_container {
	background: #fff;
	border-radius: 16px;
	padding: 24px 16px;
	margin-bottom: 80px;
}
#toc_container .toc_title {
	font-size: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 16px;
}
#toc_container .toc_list {
	margin-left: 0;
	margin-bottom: 0;
	padding: 0;
	background: #fff;
	list-style: none;
}
#toc_container .toc_list li {
	list-style: none;
	margin-bottom: 24px;
	margin-left: 0;
}
#toc_container .toc_list li a {
	text-decoration: underline;
	color: var(--common-color-main);
	font-size: 18px;
}

/*============================================================
 クリップボードコピー用メッセージ
*============================================================*/
#clipbord-msg {
    width: 100%;
    position: fixed;
    bottom: -190px;
    left: 0;
    z-index: 999999;
	-webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
}
#clipbord-msg .msg {
    width: fit-content;
    padding: 12px 32px;
	background: var(--common-color-background1);
    border-radius: 100px;
	font-weight: bold;
    letter-spacing: 0.04em;
    color: var(--common-color-text);
    margin: 0 auto;
}
#clipbord-msg.copySuccess,
#clipbord-msg.copyError {
    bottom: 56px;
}

/*============================================================
 会員登録フォーム
*============================================================*/
#wpmem_login,
#wpmem_reg {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}
#wpmem_login legend,
#wpmem_reg legend {
	display: none;
}
#wpmem_login label,
#wpmem_reg label {
	display: inline-block;
	margin-bottom: 12px;
	position: relative;
}
#wpmem_login .div_text, #wpmem_reg .div_number, #wpmem_reg .div_text, #wpmem_reg .div_textarea {
	margin: 0 0 48px 0;
}
#wpmem_login input[type=password], #wpmem_login input[type=text], #wpmem_reg input[type=date], #wpmem_reg input[type=email], #wpmem_reg input[type=number], #wpmem_reg input[type=password], #wpmem_reg input[type=text], #wpmem_reg input[type=url], #wpmem_reg textarean {
	border: 1px solid #999;
	border-radius: 6px;
}
#wpmem_reg .req {
	color: transparent;
}
#wpmem_reg .req:before {
	content: "必須";
	position: absolute;
	background: var(--common-color-attention);
	color: #fff;
	font-size: 12px;
	width: 36px;
	height: 26px;
	padding: 8px 0;
	text-align: center;
	font-weight: bold;
	top: -2px;
	right: -42px;
}
.logged-in #wpmem_login .button_div,
#wpmem_reg .button_div {
	text-align: center;
	padding: 0;
	margin-top: 48px;
}
.logged-in #wpmem_login .button_div input, 
#wpmem_reg .button_div input {
	width: 200px;
    height: 56px;
    border-radius: 56px;
	cursor: pointer;
    display: inline-block;
    font-weight: bold;
    background: var(--common-color-sub);
    color: #fff;
}
#wpmem_reg .noinput {
	width: 100%;
	height: 56px;
	padding: 16px 8px;
	margin: 0;
	border-radius: 6px;
}
#wpmem_login .req-text,
#wpmem_reg .req-text {
	display: none;
}
#wpmem_login input {
	background: var(--common-color-sub);
	color: #fff;
	cursor: pointer;
	padding: 4px 12px;
	font-size: 14px;
}
#wpmem_login input[type=checkbox] {
	vertical-align: sub;
}
#wpmem_login, #wpmem_msg, #wpmem_reg, .wpmem_msg {
	width: 100%;
}

/*============================================================
 システムエラー　404
*============================================================*/
#page-system-error #sec-system-error {
    height: max(600px, calc(var(--common-vh) - var(--common-footer-height) - 64px));
    padding: 200px 0 0 0;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
}

#page-system-error #sec-system-error .system-error-num {
    font-weight: 900;
    font-size: 120px;
    line-height: 100%;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

#page-system-error #sec-system-error .system-error-sts {
    font-weight: bold;
    font-size: 32px;
    line-height: 180%;
    margin-bottom: 24px;
}

#page-system-error #sec-system-error .system-error-lead {
    margin-bottom: 56px;
}
#page-system-error #sec-system-error .parts-btn {
    margin: 0 auto;
}


/*============================================================
 footer
*============================================================*/
#site-footer {
    padding: 72px 0;
	background: #fff;
}
#site-footer .inner {
	max-width: 800px;
}
#site-footer .parts-boxes {
	gap: 40px;
	margin-bottom: 56px;
}
#site-footer .parts-boxes .logo {
	width: 310px;
}
#site-footer .parts-boxes .logo img {
	width: 100%;
}
#site-footer .parts-boxes .info {
}
#site-footer .parts-boxes .info span {
	font-size: 12px;
}

/* Copyright
---------------------------------------- */
#site-footer #copyright {
    font-size: 14px;
    text-align: center;
}