/* ===================================================
PC表示の時は非表示の要素
=================================================== */
#media-header,
.works_card.s.media,
#flow .container img.media,
#ux-feature .container .content.media {
	display: none;
}

@media screen and (max-width:1025px) {
	/*
	ヘッダー（非表示）
	================================================== */
	#header {
		display: none;
	}
	/*
	ヘッダー（レスポンシブ表示） ============================== */
	#media-header {
		display: initial;
		position: fixed;
		z-index: 100;
		align-items: center;
		width: 100%;
		max-width: 100vw;
		height: 64px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
		background: var(--main-color);
	}
	#media-header .container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#media-header .logo {
		width: 128px;
		height: auto;
		padding-left: 12px;
		transition: all 0.2s ease;
	}
	#media-header .logo:hover {
		opacity: 0.7;
	}
	#media-header nav {
		position: relative;
		align-items: center;
		height: auto;
	}
	#media-header .media-btn {
		height: auto;
		padding: 12.5px;
		font-size: 1.4em;
		font-weight: bold;
		background-color: var(--orange-bg);
		color: var(--main-color);
		transition: all 0.2s;
	}
	#media-header .media-btn i {
		padding-left: 8px;
	}
	#media-header .media-btn .fa-bars {
		padding-right: 8px;
	}
	#media-header .media-btn:hover {
		background-color: #fdad49;
	}
	/* ユーザビリティ診断ページ用 */
	#usability #media-header .media-btn {
		background-color: var(--u1-blue);
	}
	#usability #media-header .media-btn:hover {
		background-color: #a3c4e1;
	}
	/* グロナビ ============================== */
	#drawer {
		position: relative;
	}
	#drawer .menu .menu-item {
		padding: 15px;
		border-bottom: solid 1px #e0e8ec;
		font-size: 18px;
		font-weight: bold;
		transition: all .2s ease;
	}
	#drawer .menu .menu-item:hover {
		color: var(--blue-text);
	}
	#drawer .menu .menu-item .link {
		display: inline-block;
		width: 290px;
	}
	.unshown {
		display:none;
	}
	#opener {
		display: inline-block;
		width: 56px;
		height: 22px;
		padding: 0 14px;
		vertical-align: middle;
		background-color: var(--main-color);
	}
	#opener span, #opener span::before, #opener span::after {
		position: absolute;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: var(--gray-text);
		display: block;
		content: "";
		cursor: pointer;
	}
	#opener span::before {
		bottom: -8px;
	}
	#opener span::after {
		bottom: -16px;
	}
	#close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--base-color);
		opacity: 0;
		transition: .3s ease-in-out;
	}
	#menu-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 85%;
		max-width: 330px;
		height: 100%;
		background: var(--gray-bg);
		transition: .3s ease-in-out;
		transform: translateX(-105%);
	}
	#input:checked ~ #close {
		display: block;
		opacity: .5;
	}
	#input:checked ~ #menu-content {
		transform: translateX(0%);
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
}
@media screen and (max-width:834px) {
	/* ===================================================
	ベース
	=================================================== */
	/*
	再利用、拡張が可能なレイアウトルールのパーツ
	=================================================== */
	.service #overview .title,
	.service .section-title {
		font-size: 28px;
	}
	#system #key_visual .title,
	#frontend #key_visual .title {
		display: block;
		padding: 8% 0;
	}
	/* ===================================================
	ホーム（index）
	=================================================== */
	#home-keyvisual .banner:hover {
		transform: none;
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
	}
	/*
	（index）事例紹介
	=================================================== */
	.works_card.card-text {
		display: none;
	}
	.works_card.s.media {
		display: initial;
	}
	.works_card.l {
		display: none;
	}
	.works_card.s .media {
		display: initial;
	}
	/*
	（index）事例紹介
	=================================================== */
	#home .works_card.s.media {
		display: initial;
	}
	#home-works .cards,
	.service .cards,
	#works_list .cards,
	#works_s .cards {
		padding: 0 20px;
	}
	/*
	（index）お取引先
	=================================================== */
	#clients .container .clients-logo {
		grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	}
		/*
	（index）当社の強み
	===================================================　*/
	#strength .content {
		max-width: 241px;
	}
	/*
	（index）メソッド
	=================================================== */
	#methods br {
		display: none;
	}
	#methods .text {
		max-width: 100%;
	}
	#methods .method {
		margin: 0 auto;
	}
	#methods .method-btns {
		top: 44%;
		left: 50%;
	}
	/* ===================================================
	サービスページ全体
	=================================================== */
	/*
	事例紹介
	=================================================== */

	/* ===================================================
	アプリ開発（app）
	=================================================== */
	/*
	Feature
	=================================================== */
	#app-feature .list .list-item .heading {
		font-size: 24px;
	}
	/* ===================================================
	Webシステム開発（system）
	=================================================== */
	/*
	Feature
	=================================================== */
	#system-feature .content img {
		max-width: 340px;
	}
	#system-feature .content .text {
		max-width: 370px;
	}
	/* ===================================================
	フロントエンド開発（frontend）
	=================================================== */
	/*
	Feature
	=================================================== */
	#frontend-feature .card {
		margin: 0 auto 48px;
	}
	#frontend-feature .card:last-child {
		margin-bottom: 0px;
	}
	#frontend-feature .card img {
		display: block;
		width: 80%;
		margin: 0 auto;
	}
	/* ===================================================
	UIデザイン（ui）
	=================================================== */
	#ui-feature .container .contents img {
		display: none;
	}
	/*
	UIのお悩み解決します（problem）
	=================================================== */
	#problem .container {
		transform: scale(0.9);
	}
	#problem .container img {
		transform: scale(0.9);
	}
	#problem .container .image .circle-green,
	#problem .container .image .circle-orange {
		left: -5%;
	}
	#problem .container .image .circle-blue,
	#problem .container .image .circle-pink {
		right: -5%;
	}
	#problem .container .image .circle-orange {
		width: 344px;
		height: 344px;
	}
	#problem .container .image .circle-pink {
		width: 360px;
		height: 360px;
	}
	#problem .container .image .isometric-lame,
	#problem .container .image .isometric-difficult {
		left: -5%;
	}
	#problem .container .image .isometric-many {
		left: 28%;
	}
	/*
	ユーザーに愛されるUIの条件（terms）
	=================================================== */
	#terms .css-br::before,
	#possible br {
		display: none;
	}
	#terms .container {
		padding-bottom: 64px;
	}
	#terms .container .cards {
		padding: 32px 22% 0;
	}
	/*
	画面デザインから開発・実装まで幅広い対応が可能（possible）
	=================================================== */
	#possible {
		padding: 64px 0 80px;
	}
	#possible .container .cards .card {
		margin: 0 auto 126px;
	}
	#possible .container .cards .card.last {
		margin: 0 auto;
	}
	/* ===================================================
	事例紹介_個別ページ（works--）
	=================================================== */
	#works_overview .content .text,
	#works_overview .content img {
		max-width: 100%;
	}
	#problem-solve .container .cards {
		justify-content: center;
	}
	#problem-solve .cards {
		flex-flow: column;
	}
	#problem-solve .container .card {
		width: 100%;
	}
	#problem-solve .container .cards .arrow {
		transform: rotate(90deg);
	}
	/* ===================================================
	会社情報（company）
	=================================================== */
	/*
	Focus on Usability（about）
	=================================================== */
	#about .container img {
		max-width: 367px;
		object-fit: contain;
	}
	#about .content .text {
		max-width: 45%;
	}
	#about .l-inner-bottom{
		padding-bottom: 0px;
	}
	/*
	認知の仕組みを知り、ストレスを取り除く（company-method）
	=================================================== */
	#company-method .content .large_icon {
		padding: 10% 0;
	}
	/*
	代表メッセージ（ceo_message）
	=================================================== */
	#ceo_message .contents {
		flex-flow: column;
	}
	#ceo_message .contents .content {
		padding-bottom: 160px;
	}
	#ceo_message .contents .text-content {
		max-width: 100%;
	}
	#ceo_message .container .content img {
		max-width: 346px;
	}
	#ceo_message .container .content .name {
		top: 462px;
	}
	/* ===================================================
	FAQ、お問い合わせ、資料DL（faq）
	=================================================== */
	#faq-list .menu {
		display: none;
	}
	/*
	資料ダウンロード（download）
	=================================================== */
	#download .container .content img {
		width: 344px;
		height: 164px;
	}
	/*
	お問い合わせ（contact）
	=================================================== */
	#contact .content {
		width: 100%;
	}
	#contact .form .form-text.l {
		height: 10em;
	}
	#contact .form .btn {
		margin: auto 0;
	}
	/* ===================================================
	ユーザビリティ診断（usability）
	=================================================== */
	#usability .css-br::before {
		display: none;
	}
	#usability-keyvisual .container {
		background-size: 64% auto;
	}
	#usability-keyvisual .container .content .text {
		background: rgba(255,255,255,.6);
	}
	/*
	ユーザビリティとは（usability-about）
	=================================================== */
	#usability-about .info {
		margin-bottom: 32px;
	}
	#usability-about .container .contents .title {
		max-width: 100%;
	}
	#usability-about .contents {
		justify-content: center;
	}
	#usability-about .container .other p {
		padding: 32px 80px;
	}
	#usability-about .container .other .carte-image,
	#usability-about .container .other .badge {
		bottom: -32px;
	}
	#usability-about .container .other .carte-image {
		left: 20%;
	}
	/*
	ユーザビリティ診断の効果（effect）
	=================================================== */
	#effect .container .contents .content {
		height: auto;
	}
	/*
	利用料金（charge）
	=================================================== */
	/*
	ユーザビリティ診断の流れ（flow）
	=================================================== */
	#flow .container {
		padding-top: 0px;
	}
	#flow .container .content .flow .text {
		padding: 68px 40px;
	}
	#flow .container .content .carte-image,
	#flow .container .content .badge {
		display: none;
	}
	#flow .container img.media {
		display: initial;
	}
	#flow .container .carte-image.media {
		z-index: 10;
		max-width: 360px;
		margin-left: 20%;
	}
	#flow .container .badge.media {
		z-index:11;
		max-width: 230px;
		margin-left: -80px;
	}
	/*
	診断後の具体策もご提案します（suggest）
	=================================================== */
	#suggest .container .cards {
		justify-content: center;
	}
	/*
	ユーザビリティ診断・改善事例（improvement_case）
	=================================================== */
	#improvement_case .cards .card .card-content {
		justify-content: center;
	}
	#improvement_case .cards .card .card-content .text {
		max-width: 100%;
	}
	#improvement_case .card .text .info {
		padding: 24px 0;
	}

	/* ===================================================
	ux.html
	=================================================== */
	#ux-feature .contents .content .blank {
		width: 20%;
	}
	#ux-feature .img {
		width: 45%;
		left: 58%;
		top: 50%;
	}
	#ux-feature .img.adjust {
		top: 50%;
	}
}
	@media screen and (max-width:768px) {
	/* ===================================================
	ベース
	=================================================== */
	body {
		overflow-x: hidden;
	}
	/*
	再利用、拡張が可能なレイアウトルールのパーツ
	=================================================== */
	/* 左右の余白 ============================== */
	/* 横幅1080px */
	.l-wrapper {
		padding: 0 20px;
	}
	/* 横幅1200px */
	.l-wrapper-wide {
		padding: 0 20px;
	}
	.l-wrapper-short {
		max-width: 1024px;
		padding: 0 20px;
	}
	/* 横幅1016px */
	.l-wrapper-narrow {
		max-width: 1080px;
		padding: 0 20px;
	}
	/* 横幅制限なし */
	.l-wrapper-full {
		max-width: 100%;
		padding: 0 20px;
	}

	/* 上下の余白 ============================== */
	.l-inner {
		padding-top: 32px;
		padding-bottom: 64px;
	}
	.l-inner-wide {
		padding-top: 40px;
		padding-bottom: 64px;
	}
	.l-inner-narrow {
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.l-inner-bg {
		padding: 32px 0 48px;
		background: var(--gray-bg);
	}
	.l-inner-top {
		padding-top: 40px;
	}
	.l-inner-top-wide {
		padding-top: 80px;
	}
	.l-inner-bottom {
	padding-bottom: 40px;
	}
	.l-inner-bottom-wide {
	padding-bottom: 80px;
	}
	/* ユーザビリティ診断ページ用 */
	.l-inner-bg-narrow {
		padding: 64px 0 80px;
		background: var(--gray-bg);
	}
	/*
	CTA ============================== */
	.cta-title {
		margin-bottom: 28px;
		border-bottom-width: 3px;
	}
	/* ctaボタン　下余白 */
	#cta .outline {
		margin-bottom: 64px;
	}
	#cta .btn {
		font-size: 18px;
	}
	/*
	フッター ============================== */
	/* 縦並び　左揃え */
	#footer .l-flex {
		flex-wrap: wrap;
		flex-flow: column;
		justify-content: left;
	}
	#footer .footer-nav {
		margin-top: 32px;
		padding-top: 16px;
		border-top: solid 1px #e0e8ec;
	}
	#footer {
		font-size: 16px;
	}
	/* パンクズ ============================== */
	.breadcrumb {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	/* レスポンシブ用クラス（プロパティ） ============================== */
	/* flexbox中央揃え */
	.l-flex-wrap {
		justify-content: center;
	}
	/* 改行 */
	.css-br::before {
		content: "\A" ;
		white-space: pre;
	}
	/* ctaタイトル */
	.needs_title {
		font-size: 24px;
	}
	.works_card.s {
		margin-bottom: 48px;
	}
	/* ===================================================
	ホーム（index）
	=================================================== */
	/*
	ファーストビュー
	=================================================== */
	#home-keyvisual {
		height: 640px;
		background-position: 64%;
		margin-bottom: 217px;
		padding: 298px 0 0 0;
	}
	/*
	キャッチコピー
	=================================================== */
	#home-keyvisual .content {
		border-left: 2px solid var(--main-color);
		margin-bottom: 48px;
		padding: 0 0 12px 12px;
	}
	#home-keyvisual .content .title {
		font-size: 28px;
		line-height: normal;
	}
	#home-keyvisual .content .info {
		line-height: normal;
	}
	/*
	バナー
	=================================================== */
	#home-keyvisual .banner {
		min-width: 320px;
		min-height: 146px;
	}
	#home-keyvisual .banner .text {
		padding: 32px 16px 32px 20px;
	}
	#home-keyvisual .banner .title {
		line-height: normal;
	}
	#home-keyvisual .banner .title strong {
		font-size: 18px;
	}
	#home-keyvisual .banner span {
		display: none;
	}
	/*
	（index）事例紹介
	=================================================== */
	.home-section .section-title {
		font-size: 24px;
		line-height: normal;
	}
	/* 事例カード ============================== */
	.works_card.s .card-text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 22px;
	}
	/*
	（index）お取引先
	=================================================== */
	#clients {
		margin-bottom: 50px;
		padding: 0px;
		background: var(--main-color);
	}
	#clients .container {
		display: block;
		width: 100%;
		margin: 0;
	}
	#clients .container .text {
		max-width: 100%;
		margin: 0;
		padding: 14% 16%;
		text-align: center;
		background-color: var(--gray-bg);
	}
	#clients .container .text .text-info {
		text-align: left;
	}
	#clients .container .clients-logo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(5, 1fr);
		column-gap: 40px;
		row-gap: 8px;
		padding: 8% 12%;
	}
	/*
	（index）当社の強み
	=================================================== */
	#strength .content {
		padding-bottom: 48px;
	}
	#strength .last {
		padding-bottom: 0;
	}
	#strength .content .title {
		font-size: 18px;
	}
	#strength .content img {
		padding-bottom: 20px;
	}
	/*
	（index）メソッド
	=================================================== */
	/* タイトル　==============================　*/
	#methods .title {
	margin-bottom: 28px;
	line-height: normal;
	font-weight: bold;
	font-size: 28px;
	color: var(--blue-text);
	}
	#methods .text {
		margin-bottom: 40px;
	}
	/* メソッド（カード全体）　=================================================== */
	#methods .method {
		position: static;
		max-width: 768px;
		height: 620px;
		margin-bottom: 0px;
	}
	/* メソッド（カード_テキスト部分）　=================================================== */
	#methods .method .method-text {
		width: 100%;
		height: 350px;
		padding: 24px 24px 80px 24px;
		background-color: var(--gray-bg);
	}
	#methods .method .method-title {
		position: relative;
		margin-bottom: 48px;
		font-weight: bold;
		font-size: 22px;
	}
	#methods .method .method-title::after {
		left: 5%;
	}
	/* ボタン部分 */
	#methods .method-btns {
		position: static;
		display: block;
		width: 100%;
		height: 320px;
		transform: translateY(-30%);
	}
	#methods .method-btn {
		padding: 32px 24px;
	}
	#methods .method-btn .btn-icon {
		max-width: 100%;
		height: 56px;
		font-size: 20px;
	}
	#methods .method-btn .under-arrow::after {
		width: 96%;
	}
	/*
	（index）サービス
	=================================================== */
	#home-service .contents .content  {
		width: 100%;
		align-items: center;
	}
	#home-service .contents .content .box.l {
		height: 328px;
	}
	#home-service .contents .content .box .title {
		font-size: 24px;
	}
	#home-service .contents .box {
		position: relative;
		box-shadow: 20px 18px 0px -5px #68cdf9;
	}
	#home-service .contents .content .box .text {
		width: 100.4%;
		height: 100.4%;
		padding: 96px 0;
		background-color: rgba(255, 255, 255, 0.8);
	}
	#home-service .contents .content .box .text-padding {
		padding: 32px 0;
	}
	#home-service .contents .content .box .title {
		font-size: 24px;
		font-weight: bold;
	}
	#home-service .contents .content .box .info {
		padding: 0 32px;
		line-height: 24px;
	}
	#home-service .contents .content .box .info-bottom {
		padding-bottom: 16px;
	}
	#home-service .contents .content .box .btn-box {
		flex-flow: column;
		padding: 0px 32px;
	}
	#home-service .contents .content .box .btn {
		margin: 0.8em;
	}
	#home-service .contents .content .box .btn-box.s {
		padding:  0px 32px ;
	}
	/* ===================================================
	事例紹介（works）
	=================================================== */
	/*
	一覧
	=================================================== */
	/* タブ ==============================　*/
	#works_list .tab {
		width: calc(100%/2);
	}
	#works_list .tab i {
		display: none;
	}
	/* ===================================================
	事例紹介_個別ページ（works--）
	=================================================== */
	#works-heading .main-title {
		font-size: 24px;
	}
	.works .title {
		padding: 16px 0;
		font-size: 22px;
	}
	/*
	課題解決のために行ったこと（problem-solve）
	=================================================== */
	#problem-solve .container .card {
		width: 100%;
		height: auto;
		padding: 12px 32px 32px;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.16);
	}
	/*
	アプリやプロジェクトの詳細（works_detail）
	=================================================== */
	#works_detail .list .list-item .title,
	#works_detail .list .list-item .info {
		padding: 48px 16px;
	}
	/* ===================================================
	サービス（共通）
	=================================================== */
	#key_visual .frame {
		width: 100%;
		height: 120px;
	}
	#key_visual .title {
		padding: 2% 0;
		font-size: 22px;
	}
	.service .l-flex,
	#company .l-flex  {
		flex-wrap: wrap;
	}
	.service .l-col,
	#company .l-col {
		width: 100%;
	}
	.service .section-title,
	.works .section-title {
		margin-bottom: 32px;
		font-size: 24px;
	}
	.service #overview .title {
		margin-bottom: 32px;
		font-size: 24px;
		text-align: left;
	}
	#implement .card-head {
		flex-flow: column;
		justify-content: center;
		margin-bottom: 24px;
	}

	/* ===================================================
	アプリ開発（app）
	=================================================== */
	/*
	Feature
	==============================　*/
	#app-feature .list .list-item .text .heading {
		font-size: 24px;
	}
	#app-feature .list .list-item .text {
		width: 100%;
	}
	#app-feature .list .list-item {
		display: inline-block;
	}
	#app-feature .list .list-item img {
		width: 100%;
		height: 200px;
	}
	/* ===================================================
	Webシステム開発（system）
	=================================================== */
	/*
	Feature
	==============================　*/
	#system-feature .content .text .title {
		margin-bottom: 16px;
		font-size: 24px;
	}
	#system-feature .content img {
		padding: 24px 0;
	}
	#system-feature .content.l-flex.replace {
		flex-direction: column-reverse;
	}
	#system-feature .content.l-flex {
		flex-direction: column;
	}
	/* ===================================================
	フロントエンド開発（frontend）
	=================================================== */
	/*
	Feature
	==============================　*/
	#frontend-feature .card {
		margin-bottom: 24px;
		padding: 20px 32px 40px;
		border-radius: 4px;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.16);
		background-color: var(--main-color);
	}
	/* ===================================================
	UIデザイン（ui）
	=================================================== */
	#ui .heading {
		font-size: 24px;
	}
	/*
	エンジニア×デザイナー（ui-feature）
	=================================================== */
	#ui-feature .container {
		height: auto;
	}
	#ui-feature .container .contents img {
		display: none;
	}
	#ui-feature .container .contents .content {
		width: 100%;
		padding: 0 32px;
	}
	#ui-feature .container .content .title {
		padding-bottom: 32px;
		line-height: 38px;
		font-size: 28px;
	}
	#ui-feature .container .content .title .sub_title {
		font-size: 18px;font-weight: bold;
	}
	#ui-feature .container .content .title .stripe {
		background-position: 0 18px;
	}
	#ui-feature .container .content p {
		line-height: 27px;
		font-weight: normal;
	}
	/*
	UIのお悩み解決します（problem）
	=================================================== */
	#company-method .content .large_icon {
		width: 100%;
	}
	.l-wrapper-figure {
		width: 100%;
		max-width: 380px;
		margin: 0 auto;
	}
	#problem {
		height: 2278px;
		background: rgb(255,255,255);
		background: linear-gradient(180deg, rgba(255,255,255,1) 8%, rgba(236,242,247,1) 8%, rgba(236,242,247,1) 96%, rgba(255,255,255,1) 96%);
	}
	#problem .container .content {
		width: 100%;
		height: auto;
		padding: 48px 32px 64px;
	}
	#problem .container .content .title {
		padding: 0 32px 32px;
		text-align: center;
		line-height: 44px;
		font-size: 32px;
		font-weight: bold;
	}
	#problem .container .content .title strong {
		font-size: 56px;
	}
	/* 背景の円（circle） ==============================　*/
	#problem .container .image .circle {
		width: 240px;
		height: 240px;
		background-size: cover;
		margin: 0 auto;
		left: 0;
	}
	#problem .container .image .circle .text {
		top: 30%;
		left: 10%;
		font-size: 22px;
	}
	#problem .container .image .circle-green {
		top: -24px;
	}
	#problem .container .image .circle-blue {
		top: 321px;
	}
	#problem .container .image .circle-pink {
		top: 1014px;
	}
	#problem .container .image .circle-orange {
		top: 1495px;
	}
	/* イメージ（isometric） ==============================　*/
	#problem .container .image .isometric {
		max-width: 260px;
		height: auto;
		left: auto;
		right: 0;
	}
	#problem.l-inner-bottom {
		padding-bottom: 0;
	}
	#problem .container .image .isometric-lame {
		top: 126px;
	}
	#problem .container .image .isometric-many {
		max-width: 230px;
		top: 480px;
	}
	#problem .container .image .isometric-messey {
		top: 1180px;
	}
	#problem .container .image .isometric-difficult {
		top: 1665px;
	}
	/* ユーザに愛されるUIの条件（terms）
	=================================================== */
	#terms {
		overflow: hidden;
		padding-top: 0;
	}
	#terms .container {
		padding-bottom: 0;
	}
	/* terms　card ==============================　*/
	#terms .container .cards {
		max-width: 233px;
	}
	#terms .container .cards .card {
		width: 160px;
		height: 160px;
		border-radius: 20px;
		color: var(--main-color);
		text-align: center;
		transform: rotate(45deg);
	}
	/* カードの上段、下段の箱 */
	#terms .container .cards .box {
		width: 233px;
		height: 320px;
		text-align: center;
	}
	#terms .container .l-wrapper-wide {
		padding-left: 0;
		padding-right: 0;
	}
	#terms .container .cards .bottom {
		margin-top: 0px;
		margin-left: 80px;
	}
	/* カード内テキスト */
	#terms .container .card .text {
		max-width: 233px;
		max-height: 233px;
		padding-top: 16px;
		transform: rotate(-45deg);
	}
	#terms .container .card .text .heading {
		padding-bottom: 0px;
		font-size: 20px;
		font-weight: bold;
	}
	#terms .container .card .text p {
		width: 130px;
	}
	/*
	画面デザインから開発・実装まで幅広い対応が可能（possible）
	=================================================== */
	#possible .container .title {
		padding-bottom: 148px;
	}
	#possible .container .cards .card {
		margin-bottom: 120px;
	}
	#possible .container .cards .card.last {
		margin-bottom: 0;
	}
	/*
	ユーザビリティ診断（usability-link）
	=================================================== */
	.usability-link .container {
		text-align: center;
	}
	.usability-link.container.css-br {
		display: none;
	}
	#usability_check .container .content {
		position: relative;
		z-index: 1;
		background: url(../img/t1-service-usability.png) no-repeat center center /cover;
		color: var(--u1-blue);
		border-radius: 8px;
	}
	#usability_check .container .content::after,
	#usability-dl .container .content::after {
		content: "";
		position: absolute;
		display: block;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,.8);
		border-radius: 8px;
		backdrop-filter: blur(2px)
	}
	.usability-link .container .content .heading {
		line-height: 42px;
		font-size: 26px;
	}
	.usability-link .container .content .info {
		text-align: left;
	}
	.usability-link .container .content .btn {
		margin-bottom: 5%;
	}
	.usability-link .container img {
		display: none;
	}
		/*
	（リンクバナー）ユーザビリティの教科書
	=================================================== */
	#usability-dl .container .content {
		color: var(--navy);
		border-radius: 8px;
	}
	.usability-link .container .content .heading {
		text-align: left;
	}
	#usability-dl .container .content .btn {
		background-color: var(--navy);
		color: var(--main-color);
	}
	#usability-dl .container .content .btn:hover {
		background-color: var(--gray-text);
	}
	/* ===================================================
	事例紹介（works）
	=================================================== */
	/*
	works_list ============================== */
	#works_list .title {
		padding: 24px 0 48px;
		font-size: 24px;
	}
	#works_list .content {
		padding: 48px 0 16px;
	}
	/* ===================================================
	FAQ、お問い合わせ、資料DL（faq）
	=================================================== */
	#faq .container .title {
		padding-bottom: 32px;
		font-size: 24px;
	}
	#faq #footer.container .title {
		padding-bottom: 0px;
	}
	/*
	#faq-list ============================== */
	#faq-list .container .label {
		padding: 100px 0 8px;
		font-size: 18px;
	}
	/*
	#contact ============================== */
	#contact .form .btn {
		margin: 0 auto;
		padding: 0.8em 3em;
		font-size: 18px;
	}
	/*
	#download ============================== */
	#download .container .content {
		padding-bottom: 48px;
	}
	#download .container .content img {
		max-width: 100%;
		height: 152px;
		margin-bottom: 16px;
	}
	#download .container .content .text {
		max-width: 100%;
	}
	/* ===================================================
	会社情報（company）
	=================================================== */
	/*
	#about ============================== */
	#about .container .title {
		padding-bottom: 48px;
	}
	#about .container .main_title {
		padding-bottom: 4px;
		margin-bottom: 3px;
		font-size: 28px;
	}
	#about .container .sub_title {
		font-size: 16px;
	}
	#about .content .text .text-title .title-first {
		font-size: 24px;
	}
	#about .content .text {
		max-width: 100%;
	}
	#about .content .text .info {
		width: 100%;
		height: auto;
	}
	#about .content .text .text-title .title-last {
		font-size: 18px;
	}
	#about .container .replace {
		flex-flow: column-reverse;
	}
	#about .container img {
		padding-bottom: 32px;
	}
	/*
	#company-method ============================== */
	#company-method .content .text {
		padding: 24px 24px 8px 24px;
	}
	#company-method .text .title {
		font-size: 24px;
	}
	#company-method .content .large_icon {
		text-align: center;
		padding-bottom: 24px;
	}
	#company-method .content .large_icon i {
		padding: 0px 0px;
		font-size: 150px;
	}
	/*
	#ceo_message ============================== */
	#ceo_message .contents .content {
		padding-bottom: 48px;
	}
	#ceo_message .container .title {
		padding-bottom: 20px;
		font-size: 20px;
	}
	#ceo_message .container .content img {
		width: 80%;
		height: auto;
	}
	#ceo_message .container .content .name {
		width: 205px;
		top: 86%;
		left: 0;
		padding: 16px;
		line-height: 24px;
	}
	#ceo_message .container .text-content .title {
		padding-top: 72px;
		text-indent: -0.5em;
		font-size: 22px;
		line-height: normal;
	}
	#ceo_message .container .content strong {
		margin-left: 8px;
	}
	/*
	#company_info ============================== */
	#company_info .container .title {
		font-size: 20px;
	}
	#company_info .container .content .info th {
		width: 25%;
	}
	/* ===================================================
	usability.html
	=================================================== */
	#usability .container .solution {
		font-size: 20px;
	}
	#usability .down_arrow {
		display: block;
		margin: 0 auto;
	}
	#usability .marker {
		display: inline;
		background: linear-gradient(transparent 70%, var(--u1-yellow) 0%);
	}
	#usability .heading {
		font-size: 22px;
	}
	#usability .common-title::before {
		width: 16px;
		height: 16px;
	}
	#usability .common-title {
		font-size: 24px;
	}
	/*
	#usability-keyvisual
	=================================================== */
	#usability-keyvisual .container {
		margin: 0 auto;
		background: url(../img/u1-key_visual.png) no-repeat center/ cover;
	}
	#usability-keyvisual .container .content {
		width: 100%;
		height: auto;
		padding: 64px 0px 0px 0px;
	}
	#usability-keyvisual .container .content .text {
		margin-bottom: 32px;
		padding: 48px 24px;
		background: rgba(255,255,255,.88);
	}
	#usability-keyvisual .container .content .title {
		padding-bottom: 32px;
		font-size: 24px;
	}
	#usability-keyvisual .container .content .title span {
		font-size: 28px;
	}
	/* ボタン */
	#usability-keyvisual .button {
		text-align: center;
	}
	#usability-keyvisual .button .btn-contact {
		margin-right: 0;
		margin-bottom: 20px;
		font-size: 21px;
	}
	/*
	#usability-about
	=================================================== */
	#usability-about .container .contents .title .heading {
		font-size: 24px;
	}
	#usability-about .container .contents .info {
		padding-bottom: 32px;
	}
	#usability-about .container .contents .content {
		width: 100%;
		height: auto;
	}
	#usability-about .container .contents .content {
		width: 100%;
		height: auto;
	}
	#usability-about .container .contents .title .emphasis {
		padding-bottom: 16px;
	}
	/* 図 */
	#usability-about .container .contents .content .box {
		flex-flow: column;
		padding: 28px;
	}
	#usability-about .container .contents .content img {
		width: 60%;
	}
	#usability-about .container .contents .content p {
		text-align: center;
	}
	#usability-about .container .contents .content .text-web_site {
		padding: 8px 0 24px;
	}
	#usability-about .container .contents .content .text-app {
		padding-top: 8px;
	}
	#usability-about .container .other {
		text-align: left;
	}
	#usability-about .container .other p {
		padding: 32px 0px;
	}
	#usability-about .container .other .carte-image {
		left: 0;
	}
	#usability-about .container .other .badge {
		max-width: 140px;
		right: 0;
	}
	#usability-about .container .other .carte-image,
	#usability-about .container .other .badge {
		bottom: 0;
	}
	/*
	#worries
	=================================================== */
	#worries .container .title {
		padding-bottom: 28px;
	}
	#worries .container .contents .content {
		padding-bottom: 24px;
	}
	#worries .balloon {
		margin-bottom: 48px;
		padding: 32px 24px;
	}
	/*
	#effect
	=================================================== */
	#effect {
		padding-top: 40px;
	}
	#effect .container .common-title {
		padding-bottom: 64px;
	}
	#effect .container .contents .content {
		width: 100%;
		height: auto;
		flex-flow: column;
		margin-bottom: 56px;
	}
	#effect .container .contents .content .text {
		width: 100%;
		padding: 24px 32px;
	}
	#effect .container .contents .content .text .label {
		top: -24px;
		left: 32px;
		font-size: 32px;
		font-weight: initial;
	}
	#effect .container .contents .content img {
		width: 100%;
		height: 220px;
	}
	#effect .container .contents .content.replace {
		flex-flow: column-reverse;
	}
	/*
	#charge
	=================================================== */
	#charge .container .title .info::before {
		position: absolute;
		content: "";
		z-index: -1;
		bottom: 60%;
		width: 150px;
		border-bottom: 8px solid var(--u1-yellow);
	}
	#charge .css-br::before {
		display: initial;
	}
	#charge .container .title .heading {
		font-size: 28px;
	}
	#charge .container .content .box {
		padding: 16px;
	}
	#charge .container .content .box .price {
		font-size: 26px;
		text-indent: 1em;

	}
	#charge .container .content .table {
		font-weight: normal;
	}
	#charge .container .content .table th {
		padding: 12px;
		background-color: var(--u1-yellow);
	}
	#charge .container .content .table td {
		padding: 12px;
		background-color: #fff9e5;
	}
	/*
	#flow ============================== */
	#flow .container .content .carte-image,
	#flow .container .content .badge {
		display: initial;
	}
	#flow .container img.media {
		display: none;
	}
	#flow .container .info {
		padding-bottom: 80px;
		color: var(--navy);
	}
	/* 図 */
	#flow .container .content {
		width: 100%;
		margin-bottom: 32px;
		flex-direction: column;
		align-items: center;
	}
	#flow .container .content .flow {
		max-width: 312px;
		transform: rotate(90deg);
	}
	#flow .container .content .flow .text {
		transform: rotate(-90deg);
		padding: 56px 80px;
	}
	#flow .container .content .survey {
		z-index: 2;
		margin-left: 0px;
		margin-top: 16px;
		background: url(../img/u1-flow-flow02.png) no-repeat center /contain;
	}
	#flow .container .content .carte {
		z-index: 3;
		margin-left: 0px;
		margin-top: 16px;
		background: url(../img/u1-flow-flow03.png) no-repeat center /contain;
		color: var(--main-color);
	}
	/* カルテのイメージ */
	#flow .container .content .carte-image {
		max-width: 260px;
	}
	#flow .container .content .badge {
		max-width: 130px;
		margin: -130px 0 0 130px;
	}
	/*
	#suggest ============================== */
	#suggest .container .card {
		padding: 48px 32px 80px 32px;
	}
	#suggest .container .card .heading {
		padding-bottom: 16px;
		font-size: 22px;
		line-height: 32px;
	}
	/*
	#improvement_case ============================== */
	#improvement_case .l-wrapper-narrow {
		width: 100%;
		padding: 0;
	}
	#improvement_case .cards .card {
		padding: 32px;
	}
	#improvement_case .card .text .info {
		padding-bottom: 24px;
	}
	#improvement_case .card img {
		width: 100%;
		height: auto;
		padding-bottom: 28px;
		object-fit: cover;
	}
	/*
	#present
	=================================================== */
	#usability .usability-link.l-inner-bg {
		padding: 80px 0px;
	}
	#present .container .content .text {
		padding-top: 34px;
		padding-bottom: 28px;
		font-weight: normal;
	}
	#present .container .content .text .title {
		padding: 8px 0;
		font-size: 22px;
		font-weight: bold;
	}
	#present .container .content img {
		margin-left: 0px;
	}
	/* ===================================================
	salesforce.html
	=================================================== */
	#salesforce #key_visual br {
		display: none;
	}
	/* ===================================================
	ux.html
	=================================================== */
	#ux-feature .contents .content {
		position: relative;
		margin-bottom: 113px;
	}
	#ux-feature .container .content.pc {
		display: none;
	}
	#ux-feature .container .content.media {
		display: initial;
	}
	#ux-feature .container .content .text {
		margin-bottom: 64px;
		padding: 32px 16px 32px;
	}
	#ux-feature .container .content .text.adjust {
		margin-bottom: 168px;
	}
	#ux-feature .container .content .text.last {
		margin-bottom: 80px;
	}
	#ux-feature .contents .content .text .label {
		padding: 2px 32px 2px 8px;
		border-radius: 2px;
	}
	#ux-feature .contents .content .text .title {
		font-size: 24px;
	}
	#ux-feature .img {
		width: 80%;
		left: 10%;
		top: 78%;
	}
	#ux-feature .img.middle {
		width: 80%;
		left: 10%;
		top: 93%;
	}
	#ux-feature .img.bottom {
		top: 73%;
	}
	#ux-feature #works_l.l-inner-wide {
		padding-top: 80px;
	}
}