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

common-sp.css

********************************************************************************/
/*============================================================
 css変数
*============================================================*/
:root {
	--common-inner-max-width: 100%;           /* 通常サイト幅 */
	--common-inner-max-width-wide: 100%;      /* ワイドサイト幅 */
	--common-inner-padding: 16px;               /* 通常サイト幅内余白 */
	--common-inner-padding-wide: 16px;          /* ワイドサイト幅内余白 */
}

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

/*============================================================
 format
*============================================================*/
/* コンテンツ内
---------------------------------------- */
h1 {
  font-size: 32px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 16px;
}

/*============================================================
 メインビジュアル(下層)
*============================================================*/
.page-lower #mainvisual {
	margin-bottom: 40px;
}

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

/* 共通設定
---------------------------------------- */
.block-common .inner > * {
	margin-bottom: 24px;
}
.block-common .inner > h2 {
	margin-top: 56px;
}
.block-common .inner > h3 {
	margin-top: 40px;
}
.block-common .inner > h4 {
	margin-top: 40px;
}

/* 導入事例
---------------------------------------- */
.block-case {
	--col: 1;
}
.block-case .item {
	width: 100%;
	max-width: 480px;
}

/*============================================================
 サイドバー付き画面分割
*============================================================*/
#div-wrap {
	gap: 80px;
	flex-direction: column;
}
#div-wrap #contents {
	width: 100%;
}
#div-wrap #sidebar {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
#div-wrap #sidebar .bg-wrap {
	padding: 24px 16px 8px;
}
#div-wrap #sidebar .bg-wrap .title {
	position: relative;
}
#div-wrap #sidebar .bg-wrap .title:before {
	content: "";
	transition: all .3s;
	position: absolute;
	background: url(../images/common/icon-arrow.svg);
	background-size: contain;
	width: 24px;
	height: 24px;
	top: 50%;
	right: 8px;
	transform: translatey(-50%) rotate(90deg);
}
#div-wrap #sidebar .bg-wrap .title.open:before {
	transform: translatey(-50%) rotate(270deg);
}

/*============================================================
 CTA
*============================================================*/
/* お問い合わせ
---------------------------------------- */
#cta-contact {
	padding: 56px 0 64px;
}
#cta-contact h2 {
	font-size: 32px;
}
#cta-contact p {
	font-size: 16px;
	margin-bottom: 32px;
}

/* 用語集
---------------------------------------- */
#cta-glossary {
	padding: 32px 16px;
}

/*============================================================
 サイト内検索結果
*============================================================*/
#page-search #sec-search-results .summary {
	flex-direction: column;
	align-items: flex-start;
}
#page-search #sec-search-results .summary .search {
	margin-bottom: 24px;
}
#page-search #sec-search-results .summary .result p {
	text-align: left;
}
#page-search #sec-search-results .block-search-results .item {
	padding-right: 48px;
}
#page-search #sec-search-results .block-search-results .item .title {
	font-size: 20px;
}
#page-search #sec-search-results .block-search-results .item .lead {
	padding-left: 16px;
}

/*============================================================
 目次
*============================================================*/
#toc_container .toc_list li a {
	font-size: 16px;
}

/*============================================================
 footer
*============================================================*/
#site-footer .parts-boxes .logo {
	width: 120px;
}

/* メニューリスト
---------------------------------------- */
#site-footer #fnav .menu-list {
	flex-direction: column;
    text-align: center;
}

@media screen and (max-width: 720px) {
	#wpmem_login label, #wpmem_reg label {
		width: initial!important;
		padding: 0!important;
	}
}


@media screen and (max-width: 480px) {
	.page-lower #mainvisual {
		padding-top: calc( var(--common-header-height) + 16px);
	}
	
	#cta-contact .parts-btn-group {
		flex-direction: column;
		align-items: center;
	}	
	
	#site-footer {
		padding: 40px 0;
	}
	#site-footer .parts-boxes {
		margin-bottom: 24px;
	}
	#site-footer .parts-boxes .info {
		text-align: center;
	}
}