@charset "utf-8";

/* -----------------------------------------------------------------------------
 環境設定
----------------------------------------------------------------------------- */
/* 定義 */
:root {
	/* 色 */
	--main-color: #00A8B5; /* メインカラー */
	--sub-color: #1E5AC4; /* サブカラー */
	--accent-color: #eade38; /* アクセントカラー */
	--dark-color: #0A1F3D; /* ダークカラー */
	--light-color: #080807; /* ライトカラー */
	
	/* フォントfamily */
	--font-mincho: "Shippori Mincho", "Yu Mincho", serif;

	/* 全体 */
	--body-font-family: 'Noto Sans JP', sans-serif; /* フォントfamily */
	--body-font-size: 16px; /* 文字サイズ */
	--body-line-height: 2; /* 行間 */
	--body-font-color: #333; /* 文字色*/
	--body-bg-color: #fff; /* 背景色 */
	--link-a-color: var(--main-color); /* リンク文字色 */
	--link-a-hover-color: var(--accent-color); /* リンク文字色 hover */
	
	
	/* ヘッダー */
	--header-bg-color: var(--dark-color); /* 背景色 */
	--header-logo-color: #fff; /* ロゴ色 */
	--header-menu-txt-color: #eee; /* メニュー文字色 */
	--header-sub-menu-color: #aaa; /* ハンバーガーメニュー色 */
	--header-sub-menu-bg-color: #333; /* サブメニュー背景色 */
	
	/* タイトル */
	--h1-main-font-family: inherit; /* メイン フォントfamily */
	--h1-main-font-weight: 900; /* メイン 文字太さ */
	--h1-main-color: var(--main-color); /* メイン色 */
	--h1-sub-font-family: inherit; /* サブ フォントfamily */
	--h1-sub-font-weight: 300; /* サブ 文字太さ */
	--h1-sub-color: var(--sub-color); /* サブ文字色 */
	
	/* コンテンツ タイトル */
	--h2-contents1-color: var(--dark-color); /* 文字色 */
	--h2-contents1-weight: 900; /* 文字太さ */
	
	/* コンテンツ */
	--list-style-color: var(--main-color); /* リストアイコン色 */
	--col-line-height: 1.6; /* 2分割・3分割・4分割の行間 */
	
	/* 会社概要 */
	--cpn-table-border: #ccc; /* table線色 */
	--cpn-th-color: #aaa; /* th色 */
	
	/* お問合せ */
	--contact-tel-font-family: 'Noto Sans JP', sans-serif; /* TELフォントfamily */
	--contact-tel-font-weight: 700; /* TEL文字太さ */
	--contact-tel-color: #fff; /* TEL文字色 */
	--contact-center-line-color: #ccc; /* 中央線 */
	--contact-form-btn-txt-color: #fff; /* フォームボタン文字色 */
	--contact-form-btn-bg-color: #333; /* フォームボタン背景色 */
	
	/* フッター */
	--footer-bg-color: var(--main-color); /* 背景色 */
	--footer-txt-color: #fff; /* 文字色 */
	--footer-txt-hover-color: var(--light-color); /* 文字色 hover */
	--footer-arrow-color: #fff; /* TOPへ戻る矢印色 */
	--footer-arrow-bg-color: var(--dark-color); /* TOPへ戻る矢印背景色 */
	--footer-arrow-hover-color: var(--accent-color); /* TOPへ戻る矢印色 hover */
	--footer-arrow-hover-bg-color: var(--light-color); /* TOPへ戻る矢印背景色 hover */
	--footer-top-border-size: 0px; /* border-top 太さ */
	--footer-top-border-color: var(--dark-color); /* border-top 色 */
	--footer-logo-width: 100px; /* ロゴ 横幅 */
	--footer-name-font-size: 1.2rem; /* 会社名 文字サイズ */
	--footer-name-font-weight: 700; /* 会社名 文字太さ */
	
	/* 常駐ボタン */
	--side-btn-txt-color: #fff; /* 文字色 */
	--side-btn-txt-weight: 700; /* 文字太さ */
	--side-btn-bg-color: #E77B3A; /* 背景色(上) */
	--side-btn-bg-color2: var(--main-color); /* 背景色(下) */
}




/* -----------------------------------------------------------------------------
 Header
----------------------------------------------------------------------------- */
header {
	height: 50px;
}
header a {
	text-decoration: none !important;
}
header > .inner {
	width: 100%;
	background-color: var(--header-bg-color);
	box-shadow: 0px 3px 10px 0px rgba(204,204,204,0.20);
}
header > .inner > .logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 50px 0 10px;
	border: none;
}
header > .inner > .logo h1{
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
	color: var(--header-logo-color);
	margin-right: 8px;
}
header > .inner > .logo h1:before{
	content: '';
	display: inline-block;
	width: 80px;
	height: 46px;
	background: url("../../p-img/101623_1/logo.png")left center/contain no-repeat;
	vertical-align: middle;
	margin-right: 15px;
}
header > .inner > navi > ul {
	display: block;
}
header > .inner > navi > ul > li {
	padding-left: 0;
	text-indent: 0;
}
header > .inner > navi > ul > li a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 15px;
	color: var(--header-menu-txt-color);
	margin: 0;
	padding: 5px 20px;
	border: none;
}
header > .inner > navi > ul > li a:hover {
	color: var(--accent-color);
	opacity: 1;
}
header > .inner > navi > .translation {
	padding: 5px 20px;
	display: block;
}


/* bt-menu */
#bt-menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	background-color: var(--header-bg-color);
	z-index: 10;
	cursor: pointer;
}
#bt-menu span {
	position: absolute;
	top: 24px;
	right: 10px;
	width: 30px;
	height: 2px;
	background-color: var(--header-sub-menu-color);
	transition: .3s;
}
#bt-menu span::before {
	position: absolute;
	top: -10px;
	right: 0;
	content: "";
	width: 30px;
	height: 2px;
	background-color: var(--header-sub-menu-color);
	display: block;
	transition: .3s;
}
#bt-menu span::after {
	position: absolute;
	top: 10px;
	right: 0;
	content: "";
	width: 30px;
	height: 2px;
	background-color: var(--header-sub-menu-color);
	display: block;
	transition: .3s;
}
#bt-menu.open span {
	background-color: transparent;
	transition: .3s;
}
#bt-menu.open span::before {
	top: 0;
	transform: rotate(45deg);
	transition: .3s;
}
#bt-menu.open span::after {
	top: 0;
	transform: rotate(-45deg);
	transition: .3s;
}

/* style1 */
header.style1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--header-bg-color);
	z-index: 999;
}
header.style1 > .inner > .logo {
	height: 50px;
	vertical-align: middle;
}
header.style1 > .inner > navi {
	position: absolute;
	top: 50px;
	right: 0;
	padding: 5px 0 10px;
	background-color: var(--header-sub-menu-bg-color);
	opacity: 0;
}	


/* powered by Sangyo Navi */
.powered {
	display: block;
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	color: #bbb;
	text-align: right;
	margin: 0 10px 0;
	padding: 3px 5px 0;
}


/* -----------------------------------------------------------------------------
 Top Contents
----------------------------------------------------------------------------- */
#top-contents {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 0;
}
#top-contents .slider img {
	width: 100%;
	height: auto;
	min-height: 500px;
	object-fit: cover;
}
#top-contents .slider {
	position: relative;
	z-index: 1;
}
#top-contents .layer1 {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	z-index: 5;
}
#top-contents .layer1 h2{
	font-weight: 900;
	font-size: calc(1em + 3vw);
	line-height: 1.5;
	color: #fff;
}
#top-contents .layer2 {
	position: absolute;
	bottom: 2%;
	right: 2%;
	z-index: 7;
}
#top-contents .layer2 p{
	font-weight: 400;
	font-size: .9em;
	line-height: 1.5;
	color: #eee;
	padding: 0 15px;
}
#top_bottom{
	background-color: #f1f1f1;
	padding: 12px 15px;
}
#top_bottom p{
	font-size: .8em;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------------
 Breadcrumb
----------------------------------------------------------------------------- */
#breadcrumb {
	font-size: 0.85em;
	max-width: 100%;
	margin: 0 auto;
	padding: 15px 10px;
	text-align: left;
	background-color: var(--body-bg-color);
}
#breadcrumb .login {
	width: 120px;
	text-align: right;
	float: right;
}
#breadcrumb .login img {
	margin-right: 5px;
	vertical-align: top;
}
#breadcrumb .login a {
	color: var(--body-font-color);
	text-decoration:none;
	border: none;
}
#breadcrumb .login a:hover {
	color: var(--link-a-hover-color);
	text-decoration:none;
	border: none;
}
#breadcrumb .bc img {
	width: 14px;
	vertical-align: top;
}
#breadcrumb .bc a {
	color: var(--body-font-color);
	text-decoration:none;
	border: none;
}
#breadcrumb .bc a:hover {
	color: var(--link-a-hover-color);
	text-decoration: none;
	border: none;
}


/* -----------------------------------------------------------------------------
 contents
----------------------------------------------------------------------------- */
main .contents {
	background-color: var(--body-bg-color);
	overflow: hidden;
}
main .contents.fixed {
	background-color: transparent;
}
main .contents .fixed-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}
/* パララックス帯：背景画像を見せるための高さ確保（元テンプレのinline height相当）
   .w1200 の height:auto!important を上書きするため!important必須 */
.w1200.parallax-band-inner {
	height: 120px !important;
	margin-left: 0;
	margin-right: 0;
}

.w1200 {
	height: auto !important;
	margin: 60px 10px;
}
.w1200.bg {
	background-color: #fff;
	padding: 20px;
}

.layer {
	position: static;
	width: 100% !important;
}

.contents section {
	margin: 0 10px 40px;
}


/* -----------------------------------------------------------------------------
 Footer
----------------------------------------------------------------------------- */
footer {
	position: relative;
	font-size: 0.92em;
	padding: 50px 0 30px;
	border-top: var(--footer-top-border-size) solid var(--footer-top-border-color);
	background-color: var(--footer-bg-color);
	background-size: cover;
	box-sizing: border-box;
	margin-bottom: 50px;
}
footer .pagetop a {
	position: absolute;
	top: calc(-25px - var(--footer-top-border-size));
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	background-color: var(--footer-arrow-bg-color);
	text-decoration: none;
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
}
footer .pagetop a::before {
	color: var(--footer-arrow-color);
	font-size: 20px;
	content: "▲";
	margin-top: 14px;
	text-align: center;
	line-height: 1em;
	display: block;
	transition: .3s;
}
footer .inner {
	margin: 0 10px;
}
footer .pagetop a span {
	display: none;
}
footer .login {
	margin: 40px auto 5px;
	text-align: center;
	display: block;
}
footer .login img {
	width: 14px;
	margin-right: 5px;
	vertical-align: 0;
}
footer .login a {
	font-size: 14px;
	color: var(--footer-txt-color);
	text-decoration: none;
	border: none;
	display: inline-block;
}
footer.login a:hover {
	color: var(--footer-txt-hover-color);
	text-decoration: none;
	border: none;
}
footer .copy {
	font-size: 13px;
	line-height: 2;
	color: var(--footer-txt-color);
	text-align: center;
}
footer .copy a{
	border: none;
}
footer .copy img{
	width: 124px;
}
.footer-info{
	color: var(--footer-txt-color);
	text-align:center;
}

.footer-info .logo{
	width: var(--footer-logo-width);
	box-sizing: border-box;
	margin: 0 auto 10px;
}
.footer-info .name{
	font-weight: var(--footer-name-font-weight);
	font-size: var(--footer-name-font-size);
}
.footer-info .mail{
	margin-top: 10px;
}
.footer-info .mail a{
	display: table;
	text-decoration: none;
	color: var(--footer-bg-color);
	background-color: var(--footer-txt-color);
	border-radius: 60px;
	padding: 0 30px;
	margin: auto;
}
.footer-info .mail a:hover{
	opacity: 1;
	transform: scale(1.1);
}
.footer-info .mail a i{
	margin-right: 3px;
}


/* -----------------------------------------------------------------------------
 共通 parts
----------------------------------------------------------------------------- */
/* parts-h1 */
.parts-h1 {
	font-family: var(--h1-main-font-family);
	font-weight: var(--h1-main-font-weight);
	font-size: calc(1.5em + 1.5vw);
	text-align: center;
	color: var(--h1-main-color);
	line-height: 1.6;
	letter-spacing: 2px;
	margin-bottom: 1em;
}
.parts-h1 .small{
	display: block;
	font-family: var(--h1-sub-font-family);
	font-weight: var(--h1-sub-font-weight);
	font-size: .4em;
	color: var(--main-color);
	text-shadow: none;
	margin-top: 10px;
}

/* parts-h2 */
.parts-h2 {
	font-weight: var(--h2-contents1-weight);
	font-size: calc(1.3em + 1vw);
	color: var(--h2-contents1-color);
	text-align: center;
	line-height: 1.5;
	margin-bottom: .5em;
}

/* parts-h3 */
.parts-h3 {
	font-size: calc(1em + .5vw);
	line-height: 1.5;
	color: var(--dark-color);
	border-bottom: 1px solid var(--dark-color);
	padding-bottom: .3em;
	margin-bottom: 1em;
}

/* parts-h4 */
.parts-h4 {
	font-weight: 300;
	font-size: 1em;
}

/* parts-img */
.parts-img {
	margin-bottom: 2em;
}
.parts-img img {
	height: auto;
	width: auto;
}

/* parts-map */
.parts-map {
	max-width: 100%;
	margin-bottom: 2em;
}

/* parts-news */
.parts-news {
	height: 200px;
	margin-bottom: 2em;
	padding: 15px;
	background-color: var(--body-bg-color);
	border: 1px solid #999;
	overflow-y: scroll;
	box-sizing: border-box;
}
.parts-news.show {
	height: auto !important;
	overflow-y: visible;
}
.parts-news > p {
	margin-bottom: 1em;
}
.parts-news a{
	color: var(--link-a-color);
}


/* -----------------------------------------------------------------------------
 財団カスタマイズ
----------------------------------------------------------------------------- */

/* 共通 */
body {
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--body-font-color);
}

*, *::before, *::after {
  box-sizing: border-box;
}

img{
	width: 100%;
	max-width: 100%;
	vertical-align: top;
}

a.anchor{
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}

.txt_area a:link, .txt_area a:visited, .txt_area a:active {
    color: var(--link-a-color);
	text-decoration: none;
	border-bottom: 1px solid var(--link-a-color);
	transition: .3s;
}
.txt_area a:hover {
    color: var(--link-a-hover-color);
	border-bottom: 1px solid var(--link-a-hover-color);
}
.txt_area p{
	margin-bottom: 1.5em;
}

.font_b{
	font-size: 1.3em;
	line-height: 1;
	margin: 0 3px;
}
.font_s{
	font-size: .7em;
	margin: 0 2px;
}

.inblock{
	display: inline-block;
}
.tbl_auto{
	display: table;
	margin: auto;
}

span.dots{
    background-image: radial-gradient(circle at center, #ed2323 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    padding-top: 0.15em;
}

/* 2分割・3分割・4分割 */
.half,
.trisection,
.quarter{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3vw;
	margin: 20px auto;
}
.half .left,
.half .right,
.trisection .left,
.trisection .center,
.trisection .right,
.quarter .left1,
.quarter .left2,
.quarter .right1,
.quarter .right2{
	width: 100%;
	box-sizing: border-box;
	line-height: var(--col-line-height);
}

/* parts-txt-img */
.parts-txt-img{
	max-width: 100%;
	margin: 0 auto 2em;
	overflow: hidden;
}
.parts-txt-img .r-img,
.parts-txt-img .l-img{
	width: 48%;
	box-sizing: border-box;
}
.parts-txt-img .r-img{
	float: right;
	margin-left: 20px;
}
.parts-txt-img .l-img{
	float: left;
	margin-right: 20px;
}

/* ful-half */
.ful-half{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 480px;
	align-items: stretch;
}
.ful-half.r-img .left,
.ful-half.l-img .right{
	display: flex;
}
.ful-half.r-img .right,
.ful-half.l-img .left{
	height: 300px;
}
.ful-half .left,
.ful-half .right{
	width: 100%;
	box-sizing: border-box;
}
.ful-half .txt{
	padding: 15px;
}
.ful-half .txt .inner{
	max-width: 600px;
	box-sizing: border-box;
	margin: 20px auto;
}
.ful-half .img{
	height: 100%;
	position: relative;
	overflow: hidden;
}
.ful-half .img img{
	position: absolute;
	width: 100%;
	height: auto;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* parts-table */
.parts-table{
	margin: 0 auto 2em;
}
.parts-table table{
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	margin: auto;
}
.parts-table th{
	font-size: .9em;
}
.parts-table th,
.parts-table td{
	vertical-align: text-top;
	border-bottom: 1px solid #ddd;
	padding: 5px 10px;
}

/* parts-list */
.parts-list ul{
	padding-left: 1.5em;
}
.parts-list ul li{
	line-height: 1.6;
	margin-bottom: 1em;
	position: relative;
}
.parts-list ul li:before{
	content: '';
	display: inline-block;
	position: absolute;
	top: .5em;
	left: -1.1em;
	width: 8px;
	height: 8px;
	background-color: var(--main-color);
}

/* flow 横 */
.flow-area1 ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}
.flow-area1 ul li{
	background-color: var(--body-bg-color);
	border: 2px solid var(--main-color);
	border-radius: 20px;
	padding: 10px 20px;
	margin: 2em auto 20px;
	position: relative;
}
.flow-area1 ul li:before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
    top: 100%;
	margin: 0 auto;
    width: 40px;
    height: 20px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
	background-color: var(--main-color);
}
.flow-area1 ul li:last-child:before{
	height: 0;
}
.flow-area1 ul li .num{
	position: absolute;
	left: 10px;
	top: -.85em;
	font-size: 3.5em;
	font-weight: 900;
	line-height: 1;
	color: var(--main-color);
}
.flow-area1 ul li .flow_head{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--main-color);
	text-align: center;
}
.flow-area1 ul li img{
	display: block;
	width: 70%;
	object-fit: contain;
	margin: 5px auto;
}
.flow-area1 ul li .flow_bottom{
	display: table;
	font-size: .9em;
	line-height: 1.5;
	margin: .5em auto;
}

/* ScrollTrigger */
.visible, .invisible {
    opacity: 0.0;
    transition: opacity 1s ease;
}
.visible {
    opacity: 1.0;
}

.visible.translateY,.invisible.translateY {
	transform: translateY(100px);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateY {
	transform: translateY(0);
}

.visible.translateToLeft,.invisible.translateToLeft {
	transform: translateX(100px);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateToLeft {
	transform: translateX(0);
}

.visible.translateToRight,.invisible.translateToRight {
	transform: translateX(-100px);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateToRight {
	transform: translateX(0);
}

.visible.translateScaleUp,.invisible.translateScaleUp {
	transform: scale(.5);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateScaleUp {
	transform: scale(1);
}

.visible.translateScaleDown,.invisible.translateScaleDown {
	transform: scale(1.4);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateScaleDown {
	transform: scale(1);
}

.visible.translateRotate,.invisible.translateRotate {
	transform: rotate(360deg);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateRotate {
	transform: rotate(0deg);
}

#app .wrapper{
	height: 50vh;
	display: flex;
	width: 100%;
	align-items: center;
}
.str-animation{
	display: flex;
	justify-content: center;
	font-size: 1.2rem;
}
.str-animation .str{
	will-change: auto;
	min-width: .3rem;
	transform: translateY(0);
	opacity: 0;
}


/* マーカー */
.c-marker {
    background: -webkit-linear-gradient(left, rgba(251,238,6,0.50) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgba(251,238,6,0.50) 50%, transparent 50%);
    background: linear-gradient(left, rgba(251,238,6,0.50) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .5em;
}

/* 会社概要 */
.cpn_tbl table{
	border-collapse: collapse;
	margin: 20px auto;
}
.cpn_tbl table th,
.cpn_tbl table td{
	display: block;
	border-bottom: 1px solid var(--cpn-table-border);
	text-align: left;
	padding: 5px 20px;
}
.cpn_tbl table th{
	font-size: .9em;
	font-weight: 500;
	color: var(--cpn-th-color);
	white-space: nowrap;
	border-bottom: none;
	padding: 7px 0 0 5px;
}

/* お問合せ */
.contact i{
	font-size: 1em;
	line-height: 1.2em;
	margin-right: 10px;
}
.contact .tel a{
	display: block;
	font-family: var(--contact-tel-font-family);
	font-weight: var(--contact-tel-font-weight);
	font-size: calc(2em + .7vw);
	line-height: 1.7;
	text-align: center;
	color: var(--contact-tel-color);
}
.form_sub{
	font-size: .75em;
	color: #888;
	text-align: center;
	margin-top: 10px;
}
a.mail_button {
	display: inline-block;
	margin-top: 20px;
	padding: 1em 3em;/* ボタンのサイズはpaddingで調整 */
	background: var(--contact-form-btn-bg-color);
	border: 1px solid var(--contact-form-btn-bg-color); /* 枠線色 */
	color: var(--contact-form-btn-txt-color); /* 文字色 */
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	transition: all .3s;
}
a.mail_button:hover {
	opacity: 0.85;
}
a.mail_button i{
	transition: all .3s;
}
a.mail_button:hover i{
	transform: scale(1.3);
}


/* 横問合せボタン */
.cv_btn_area {
	width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 102;
	opacity: 0;
	overflow: hidden;
}
.cv_btn_area .btn{
	align-items: flex-end;
	display: flex;
}
.cv_btn_area .btn a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	line-height: 1.3;
    font-size: 14px;
	font-weight: var(--side-btn-txt-weight);
    letter-spacing: 1px;
    background: var(--side-btn-bg-color);
    color: var(--side-btn-txt-color);
    text-align: center;
	text-decoration: none;
	padding: 15px 0px;
	margin: 0;
	position: relative;
}
.cv_btn_area .btn a:last-child{
	background: var(--side-btn-bg-color2);
}
.cv_btn_area .btn a i {
	font-size: 1.5em;
	margin-right: 10px;
	transition: all .3s;
}
.cv_btn_area .btn a:hover i{
	transform: scale(1.3);
}
.cv_btn_area .btn a:hover i{
	transform: scale(1.3);
}
.cv_btn_area .btn a:after{
	display: table;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
	font: var(--fa-font-solid);
	content: "\f054";
	transition: all .3s;
}
.cv_btn_area .btn a:hover:after{
	right: 10px;
}
.cv_btn_area .btn a.mail_button {
	border: none;
	border-radius: 0;
}

.fade_on{
	opacity: 1;
}

/* TEL */
a[href^="tel:"] {
	color:inherit;
	text-decoration:none;
	border: none;
}

@media screen and (min-width: 768px){
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}

/* レスポンシブ出し分け */
.for-pc{
	display: none;
}
.for-tab{
	display: block;
}


/* Margin・Padding */
.mb0{
	margin-bottom: 0!important;
}



/* -----------------------------------------------------------------------------
	 個別設定
----------------------------------------------------------------------------- */

/* ヘッダー お問合せボタン */
header > .inner > navi > ul > li.header-contact a {
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--main-color);
	padding: 5px 20px;
	transition: background .25s;
}
header > .inner > navi > ul > li.header-contact a:hover {
	color: #fff;
	background: #008b96;
}

/* MV */
.mv-bg {
	position: relative;
	width: 100%;
	min-height: 500px;
	background: url(../../p-img/101623_1/mv01.webp) center center / cover no-repeat;
	display: flex;
	align-items: center;
}
.mv-content {
	position: relative;
	z-index: 1;
	width: calc(100% - 70px);
	max-width: 330px;
	margin: 0 auto;
	padding: 60px 20px;
	text-align: center;
	color: #fff;
	background: var(--dark-color);
}
.mv-tag-line {
	font-size: .5em;
	letter-spacing: .28em;
	color: var(--main-color);
	margin-bottom: 1.5em;
	line-height: 1.5;
}
.mv-sub-catch p {
	font-family: var(--font-mincho);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	margin-bottom: .8em;
}
.mv-catch {
	font-size: calc(1.3em + 2vw);
	font-weight: 900;
	color: #fff;
	line-height: 1.4;
	margin-bottom: .4em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.mv-catch-em {
	display: block;
	color: var(--main-color);
	font-size: 1.1em;
}
.mv-lead1 p {
	font-family: var(--font-mincho);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	margin: 1.2em 0 2.5em;
}
.mv-price {
	margin-bottom: 2em;
	text-align: center;
}
.mv-price p {
	display: inline-block;
	color: #fff;
	line-height: 1.3;
	font-family: var(--font-mincho);
	text-align: left;
}
.mv-price-badge {
	display: block;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: 0;
	color: var(--dark-color);
	background-color: #c9bc9c;
	border-radius: 15px;
	margin: 0;
	padding: 3px 15px;
	width: fit-content;
}
.mv-price-tax {
	font-size: .75rem;
	opacity: .85;
	vertical-align: bottom;
	margin-bottom: .3em;
	margin-left: .3em;
}
.mv-price-amount {
	font-weight: 700;
	font-size: 1rem;
}
.mv-price-num {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--accent-color);
	margin: 0 1px 0 .1em;
}
.mv-cta {
	text-align: center;
}
.mv-cta-btn,
.mv-cta-btn:link,
.mv-cta-btn:visited,
.mv-cta-btn:hover,
.mv-cta-btn:active {
	color: #fff;
	text-decoration: none;
	border: none;
}
.mv-cta-btn {
	position: relative;
	display: inline-block;
	background: var(--main-color);
	font-weight: 700;
	font-size: .92em;
	padding: .85em 4.3em;
	border-radius: 50px;
	text-decoration: none;
	letter-spacing: .05em;
	border: none;
	transition: all .3s cubic-bezier(.2, .7, .2, 1);
}
.mv-cta-btn:hover {
	background: #008b96;
	transform: translateY(-2px);
}
.mv-cta-btn::after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 300; /* light=細く */
	content: "\f061";
	position: absolute;
	right: 1.4em;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.mv-cta-btn:hover::after {
	transform: translate(6px, -50%);
}


/* =============================================================================
   ごきげんモニター 本文セクション（SP=デフォルト・1カラム / モバイルファースト）
   元LP <style> から移植。色は :root の既存カスタムプロパティを使用
   --ink→--dark-color(#0A1F3D) / --teal→--main-color(#00A8B5) / --blue→--sub-color
============================================================================= */
:root {
	--gm-ink: var(--dark-color);
	--gm-ink-2: #122E5B;
	--gm-blue: var(--sub-color);
	--gm-teal: var(--main-color);
	--gm-paper: #EDF0F5; /* ダークカラー(#0A1F3D)を薄めた青みグレー */
	--gm-bg: #fff;
	--gm-line: #DDE3EE;
	--gm-line-soft: #E8ECF3;
	--gm-gray: #5A6B82;
	--gm-gray-deep: #2C3D5A;
	--gm-mincho: "Shippori Mincho", "Yu Mincho", serif;
}

/* 各セクション共通の外枠余白 */
.trust-bar,
.problems-section,
.solution-section,
.features-section,
.admin-security-section,
.why-section,
.compare-section,
.usecase-section,
.cases-section,
.pricing-section,
.faq-section,
.final-cta-section {
	padding: 60px 0;
}

/* h2見出し配下のリード文 */
.problems-lead p,
.features-lead p,
.admin-security-lead p,
.why-lead p,
.compare-lead p,
.usecase-lead p,
.cases-lead p,
.pricing-lead p,
.faq-lead p {
	font-family: var(--gm-mincho);
	font-size: 19px;
	font-weight: 600;
	line-height: 2;
	text-align: center;
	color: var(--gm-gray);
	margin-bottom: 36px;
}
/* problemsのリード文だけ左寄せ */
.problems-lead p {
	text-align: left;
}

/* ---- TRUST BAR ---- */
/* 外枠背景：main .contents の background-color に詳細度で勝つため .contents 併記 */
main .contents.trust-bar { background: var(--gm-paper); }
main .contents.problems-section { background: var(--gm-bg); } /* 背景なし（白） */
main .contents.solution-section { background: var(--gm-paper); }
main .contents.features-section { background: var(--gm-bg); }
main .contents.admin-security-section { background: var(--gm-paper); }
main .contents.why-section { background: var(--gm-ink); }
main .contents.compare-section { background: var(--gm-bg); }
main .contents.usecase-section { background: var(--gm-paper); }
main .contents.cases-section { background: var(--gm-paper); }
main .contents.pricing-section { background: var(--gm-bg); }
main .contents.faq-section { background: var(--gm-paper); }
main .contents.final-cta-section { background: var(--gm-ink); }

.trust-bar {
	border-bottom: 1px solid var(--gm-line-soft);
	padding-top: 36px;
	padding-bottom: 36px;
}
/* trust-bar配下の上下margin・paddingを一旦すべて0に
   （.w1200 の上下60px / .contents section の下40px を打ち消す。左右は維持） */
.trust-bar .w1200,
.trust-bar section,
.trust-inner,
.trust-label,
.trust-label small,
.trust-item,
.trust-num,
.trust-num small,
.trust-caption {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.trust-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: center;
	justify-items: center;
	text-align: center;
}
.trust-label {
	grid-column: 1 / -1;
	font-family: var(--gm-mincho);
	font-size: 14px;
	font-weight: 700;
	color: var(--gm-ink);
	letter-spacing: .08em;
	line-height: 1.6;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gm-line);
}
.trust-label small {
	display: block;
	font-size: 10px;
	font-weight: 500;
	color: var(--gm-teal);
	letter-spacing: .2em;
	margin-bottom: 4px;
}
.trust-num {
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 30px;
	color: var(--gm-ink);
	line-height: 1;
}
.trust-num small {
	font-size: 14px;
	color: var(--gm-gray);
	margin-left: 3px;
	font-weight: 500;
}
.trust-caption {
	font-size: 11px;
	color: var(--gm-gray);
	margin-top: 8px;
}

/* ---- PROBLEMS ---- */
.problems-section { background: var(--gm-paper); }
/* 元LPデザイン：英字ラベル＋大きい明朝体見出し */
.problems-head-en {
	font-size: 11px;
	letter-spacing: .24em;
	font-weight: 500;
	color: var(--gm-blue);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.problems-head-en::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--gm-blue);
}
.problems-title {
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: clamp(27px, 7vw, 38px);
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--gm-ink);
	margin-bottom: 20px;
}
/* problems-head の下にくっつく画像（リード文との隙間を詰める） */
.problems-head-img {
	max-width: 350px;
	margin: 16px auto 0;
}
.problems-head-img img {
	width: 100%;
	height: auto;
}
.problems-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: flex-start;
}
/* 縦並び時（〜1199px）：head・listをtableで中央寄せ */
.problems-head {
	display: table;
	margin: 0 auto;
}
.problems-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--gm-line);
	margin: 0 auto;
}
.problems-item {
	background: #fff;
	padding: 24px 22px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	transition: all .25s;
}
.problems-num {
	font-size: 14px;
	color: var(--gm-teal);
	font-weight: 500;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid var(--gm-line);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s;
}
.problems-text {
	flex-grow: 1;
	padding-top: 4px;
	transition: color .25s;
}
.problems-text p {
	font-size: 16px;
	line-height: 1.85;
	color: var(--gm-ink);
	font-weight: 500;
	margin: 0;
}
.problems-text p em {
	font-style: normal;
	background: linear-gradient(180deg, transparent 70%, rgba(232,116,42,.25) 70%);
	font-weight: 700;
}
.problems-verdict {
	margin-top: 40px;
	background: var(--gm-ink);
	color: #fff;
	padding: 36px 24px;
	text-align: center;
}
.problems-verdict-label {
	font-size: 11px;
	letter-spacing: .24em;
	color: var(--gm-teal);
	margin-bottom: 16px;
}
.problems-verdict-text p {
	font-family: var(--gm-mincho);
	font-size: clamp(22px, 3.4vw, 26px); /* SP〜tab：17.5px〜26pxの可変 */
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .04em;
	margin: 0;
}
.problems-verdict-text p .em {
	background: linear-gradient(180deg, transparent 60%, rgba(0,168,181,.4) 60%);
	padding: 0 6px;
}

/* ---- SOLUTION ---- */
.solution-section { background: var(--gm-paper); }
/* 背景装飾：bg01/bg02.svg を白単色化して配置（filterで全色を白に変換・HTMLを汚さない） */
main .contents.solution-section {
	position: relative;
	overflow: hidden;
}
.solution-section::before,
.solution-section::after {
	content: "";
	position: absolute;
	z-index: 0;
	background-repeat: no-repeat;
	pointer-events: none;
	/* 多色SVGを完全な白単色に変換 */
	filter: brightness(0) invert(1);
	opacity: 0.9;
}
/* 右上 bg02 */
.solution-section::before {
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background-image: url("../../p-img/101623_1/bg02.svg");
	background-position: top right;
	background-size: contain;
}
/* 左下 bg01 */
.solution-section::after {
	bottom: 0;
	left: 0;
	width: 50%;
	height: 50%;
	background-image: url("../../p-img/101623_1/bg01.svg");
	background-position: bottom left;
	background-size: contain;
}
/* コンテンツを装飾より前面へ */
.solution-section > .w1200 {
	position: relative;
	z-index: 1;
}
/* SP〜tab：枠をラッパーに持たせ、テキスト＋画像を1つの枠内に見せる
   （node_003内にimgを入れない規約を守りつつ「枠の中」を実現） */
.def-block-wrap {
	position: relative;
	margin-bottom: 48px;
	background: var(--gm-bg);
	border: 1px solid var(--gm-line);
	border-left: 4px solid var(--gm-ink);
	padding: 32px 24px;
}
.def-block {
	background: transparent;
	border: none;
	padding: 0;
}
/* 画像はテキストの下・枠の中に通常配置 */
.def-block-img {
	margin-top: 20px;
	text-align: right;
}
.def-block-img img {
	width: 70%;
	max-width: 260px;
	height: auto;
}
.def-block-label {
	margin-bottom: 16px;
}
.def-block-label p {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
}
.def-block-text p {
	font-family: var(--gm-mincho);
	font-size: 16px;
	line-height: 2.1;
	color: var(--gm-ink);
	font-weight: 500;
}
.def-block-text + .def-block-text {
	margin-top: 1.6em; /* 前半と後半の段落間隔（元の<br><br>相当） */
}
.def-block-text strong {
	font-weight: 700;
	background: linear-gradient(180deg, transparent 65%, rgba(0,168,181,.25) 65%);
}
.def-block-text .accent {
	font-weight: 700;
	background: linear-gradient(180deg, transparent 65%, rgba(232,116,42,.25) 65%);
}
.flow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.flow-step {
	background: var(--gm-bg);
	border: 1px solid var(--gm-line);
	padding: 36px 28px 28px;
	position: relative;
	text-align: center;
}
.flow-num {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: 0 16px;
}
.flow-num span {
	font-family: var(--gm-mincho);
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--gm-teal);
	font-weight: 700;
}
.flow-icon-wrap {
	margin-top: 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
}
.flow-icon { width: 52px; height: 52px; color: var(--gm-ink); }
.flow-title {
	font-family: var(--gm-mincho);
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	background-color: var(--main-color);
	margin-bottom: 10px;
}
.flow-desc p {
	font-size: 13px;
	color: var(--gm-gray);
	line-height: 1.9;
	margin: 0;
}

/* ---- テキストログ vs 動画 比較体験（SP=1カラム） ---- */
.log-compare-lead p {
	font-family: var(--gm-mincho);
	font-size: 18px;
	font-weight: 700;
	line-height: 2;
	color: var(--gm-gray);
	margin-top: 48px;
	margin-bottom: 24px;
	text-align: center;
}
.log-compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.log-compare-col {
	background: #fff;
	border: 1px solid var(--gm-line);
	border-top: 3px solid var(--gm-gray);
	padding: 28px 24px;
}
.log-compare-col--new {
	border-top-color: var(--gm-teal);
}
.log-compare-tab {
	font-size: 19px;
	font-weight: 700;
	text-align: center;
	color: var(--gm-gray-deep);
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gm-line);
}
.log-compare-tab--new { color: var(--gm-teal); }
.log-compare-title {
	font-family: var(--gm-mincho);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 18px;
	position: relative;
	padding-left: 1.6em; /* アイコン分のぶら下げインデント */
}
.log-compare-title i {
	position: absolute;
	left: 0;
	top: 0.35em; /* テキスト1行目に視覚的に合わせる */
}
.log-compare-title--old { color: var(--warn, #E8742A); }
.log-compare-title--new { color: var(--gm-teal); }
.log-compare-screen {
	margin-bottom: 18px;
}
.log-compare-screen--code {
	background: #0b0f1a;
	border-radius: 4px;
	padding: 20px 18px;
}
.log-compare-screen--code p {
	font-family: "JetBrains Mono", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.9;
	color: #4ade80;
	word-break: break-all;
}
.log-compare-screen--img img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	border: 1px solid var(--gm-line);
}
.log-compare-note p {
	font-size: 15px;
	line-height: 1.95;
	color: var(--gm-gray-deep);
}
.log-compare-note strong {
	font-weight: 700;
	background: linear-gradient(180deg, transparent 65%, rgba(0,168,181,.2) 65%);
}

/* ---- デモ動画（16:9レスポンシブ） ---- */
.demo-video {
	margin-top: 56px;
	text-align: center;
}
.demo-video-title {
	font-family: var(--gm-mincho);
	font-size: 18px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.6;
	margin-bottom: 24px;
}
.demo-video-frame {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.demo-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* YouTubeファサード（再生前のサムネ＋再生ボタン） */
.demo-video-frame.js-youtube-facade {
	cursor: pointer;
	overflow: hidden;
	border-radius: 4px;
	background: #000;
}
.demo-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.demo-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(0,0,0,.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding-left: 4px; /* 再生アイコンの視覚的中央寄せ */
	transition: background .25s, transform .25s;
	pointer-events: none;
}
.demo-video-frame.js-youtube-facade:hover .demo-video-thumb {
	transform: scale(1.03);
}
.demo-video-frame.js-youtube-facade:hover .demo-video-play {
	background: var(--gm-teal);
	transform: translate(-50%, -50%) scale(1.08);
}
.demo-video-frame.is-loaded .demo-video-thumb,
.demo-video-frame.is-loaded .demo-video-play {
	display: none;
}

/* ---- FEATURES ---- */
.features-section { background: var(--gm-bg); } /* 背景 白 */
.feat-hero {
	background: var(--gm-ink);
	color: #fff;
	padding: 32px 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-bottom: 1px;
}
.feat-hero-label {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
	margin-bottom: 16px;
}
.feat-hero-title {
	font-family: var(--gm-mincho);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 20px;
}
.feat-hero-title .teal { color: var(--gm-teal); }
.feat-hero-desc {
	margin-bottom: 28px;
}
.feat-hero-desc p {
	font-size: 15px;
	line-height: 2;
	color: rgba(255,255,255,.82);
}
.feat-hero-stats { display: flex; gap: 20px; }
.feat-hero-stat { flex: 1; }
.feat-hero-stat-num {
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 26px;
	color: var(--gm-teal);
	line-height: 1;
}
.feat-hero-stat-num small { font-size: 13px; color: rgba(255,255,255,.6); margin-left: 4px; }
.feat-hero-stat-label {
	font-size: 10px;
	color: rgba(255,255,255,.6);
	letter-spacing: .06em;
	margin-top: 6px;
}
.feat-hero-visual {
	overflow: hidden;
	max-width: 600px;
	margin: 0 auto;
}
.feat-hero-visual img {
	width: 100%;
	height: auto;
	display: block;
}
.feat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--gm-line);
}
.feat-card {
	background: var(--gm-bg);
	padding: 32px 28px;
	transition: all .25s;
}
.feat-card-num {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .14em;
	margin-bottom: 18px;
}
.feat-card-icon {
	width: 32px; height: 32px;
	color: var(--gm-ink);
	margin-bottom: 18px;
	transition: color .25s;
}
.feat-card-title {
	font-family: var(--gm-mincho);
	font-size: 22.3px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.55;
	margin-bottom: 12px;
	transition: color .25s;
}
/* SP〜tab：強制改行を無効化（inblockで折り返し位置のヒントだけ残す） */
.feat-card-title .br-pc {
	display: none;
}
.feat-card-desc {
	margin-bottom: 18px;
}
.feat-card-desc p {
	font-size: 15px;
	color: var(--gm-gray);
	line-height: 1.95;
	transition: color .25s;
}
.feat-card-metric {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px dashed var(--gm-line);
}
.feat-card-metric-label {font-size: 14px;color: var(--gm-gray);}
.feat-card-metric-value {
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 26px;
	color: var(--gm-ink);
	margin-left: auto;
	transition: color .25s;
}
.feat-card-metric-value small {
	font-size: 15px;
	color: var(--gm-ink);
	font-weight: 500;
}
/* feat-card-metric下の画像 */
.feat-card-img {
	margin-top: 18px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.feat-card-img img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

/* ---- WHY US ---- */
.why-section { background: var(--gm-ink); color: #fff; }
.why-section .parts-h1 { color: #fff; }
.why-lead p { color: rgba(255,255,255,.78); }
.why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(255,255,255,.1);
}
.why-card {
	background: var(--gm-ink);
	padding: 40px 28px;
	transition: all .3s;
	position: relative;
	overflow: hidden;
}
/* 右上に薄く重ねる装飾画像（ボックスの約1/2サイズ・背景的） */
.why-card-deco {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	line-height: 0;
	opacity: .12;
	pointer-events: none;
}
.why-card-deco img {
	width: 100%;
	height: auto;
	display: block;
}
.why-card-num {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 24px;
	position: relative; /* 装飾画像より前面に */
}
.why-card-num-en {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
}
.why-card-title {
	font-family: var(--gm-mincho);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.65;
	margin-bottom: 18px;
	color: #fff;
	position: relative; /* 装飾画像より前面に */
}
.why-card-desc {
	position: relative; /* 装飾画像より前面に */
}
.why-card-title .hl { color: var(--gm-teal); }
.why-card-title .deco {
	background: linear-gradient(180deg, transparent 70%, rgba(0,168,181,.35) 70%);
	padding: 0 4px;
}
.why-card-desc p {
	font-size: 14px;
	line-height: 2.1;
	color: rgba(255,255,255,.78);
	margin-bottom: 1em;
}
.why-card-desc p:last-child { margin-bottom: 0; }
.why-card-desc strong { color: #fff; font-weight: 500; }

/* ---- COMPARE ---- */
.compare-section { background: var(--gm-bg); }
/* 背景装飾：bg01/bg02.svg をグレー単色化して配置（SOLUTIONと同じ・HTMLを汚さない） */
main .contents.compare-section {
	position: relative;
	overflow: hidden;
}
.compare-section::before,
.compare-section::after {
	content: "";
	position: absolute;
	z-index: 0;
	background-repeat: no-repeat;
	pointer-events: none;
	/* 多色SVGを黒単色化 → opacityで薄めグレーに見せる */
	filter: brightness(0);
	opacity: 0.05;
}
/* 右上 bg02 */
.compare-section::before {
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background-image: url("../../p-img/101623_1/bg02.svg");
	background-position: top right;
	background-size: contain;
}
/* 左下 bg01 */
.compare-section::after {
	bottom: 0;
	left: 0;
	width: 50%;
	height: 50%;
	background-image: url("../../p-img/101623_1/bg01.svg");
	background-position: bottom left;
	background-size: contain;
}
/* コンテンツを装飾より前面へ */
.compare-section > .w1200 {
	position: relative;
	z-index: 1;
}
/* =========================================================================
   比較表：ベースはカード表示（モバイルファースト）
   〜999pxはテーブルだと横スクロール・文字折り返しで読みづらいため、
   1項目=1カード（紺の見出し＋5製品の縦並び）をベースにする。
   1000px以上は下の @media min-width:1000px でテーブルに上書き。
   HTMLは1セットのまま、display操作だけで切替（内容の重複なし）。
   ========================================================================= */
.compare-table-wrap {
	position: relative;
	z-index: 1;
}
.compare-table {
	width: 100%;
}
/* tr＝1項目カード */
.compare-table tbody tr {
	display: block;
	background: var(--gm-bg);
	border: 1px solid var(--gm-line);
	border-radius: 6px;
	margin-bottom: 20px;
	overflow: hidden;
}
.compare-table thead { display: none; } /* 製品名は各セルの::beforeで表示 */
.compare-table tbody td { display: block; }
/* 1列目td＝カード見出し（項目名） */
.compare-table tbody td:first-child {
	background: var(--gm-ink);
	color: #fff;
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 15px;
	padding: 12px 16px;
}
/* 製品セル共通 */
.compare-table tbody td {
	border-bottom: 1px solid var(--gm-line-soft);
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.7;
	vertical-align: middle;
	text-align: center; /* カード時は中央寄せ（1000px以上のテーブルではleftに戻す） */
}
.compare-table tbody td:last-child { border-bottom: none; }
/* 製品名を各セル頭にラベル表示（列順で固定） */
.compare-table tbody td:not(:first-child)::before {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--gm-gray);
	margin-bottom: 2px;
}
.compare-table tbody td:nth-child(2)::before { content: "ごきげんモニター"; color: var(--gm-teal); }
.compare-table tbody td:nth-child(3)::before { content: "IT資産統合管理 会社A"; }
.compare-table tbody td:nth-child(4)::before { content: "パソコン監視ソフトB"; }
.compare-table tbody td:nth-child(5)::before { content: "操作ログツールC"; }
.compare-table tbody td:nth-child(6)::before { content: "在宅勤務監視ツールD"; }
/* ごきげんモニター列はカード内でも強調（4辺を3pxで囲む） */
.compare-table tbody td.us {
	background: rgba(0,168,181,.06);
	border-left: 3px solid var(--gm-teal);
	border-right: 3px solid var(--gm-teal);
	border-bottom: 3px solid var(--gm-teal);
}
.compare-table .us strong {
	display: block;
	color: var(--main-color);
	font-family: var(--gm-mincho);
	font-size: 18px;
	margin-bottom: 4px;
	font-weight: 700;
}
.compare-small {
	display: block;
	font-size: 11px;
	color: var(--gm-gray);
	margin-top: 4px;
	font-weight: 400;
}

/* =========================================================================
   比較表：1000px以上はテーブル表示（追加ブレイクポイント）
   理由：広い画面では全製品を横並びで一覧比較できるテーブルが見やすいため、
   上のカード用ベース指定を打ち消してテーブルレイアウトに戻す。
   ========================================================================= */
@media screen and (min-width: 1000px) {
	.compare-table-wrap {
		border: 1px solid var(--gm-line);
		overflow-x: auto;
		/* 背景装飾(疑似要素)が表を透けないよう不透明な白地を敷く */
		background: var(--gm-bg);
	}
	.compare-table {
		border-collapse: collapse;
		min-width: 760px;
		table-layout: fixed; /* 列幅を固定して競合列を等幅に */
	}
	/* カード用のブロック表示を打ち消してテーブル構造に戻す */
	.compare-table thead { display: table-header-group; }
	/* tab.cssのグリッド(display:grid)を打ち消す。残るとテーブルが崩れる */
	.compare-table tbody {
		display: table-row-group;
		grid-template-columns: none;
		gap: 0;
	}
	.compare-table tbody tr {
		display: table-row;
		background: none;
		border: none;
		border-radius: 0;
		margin-bottom: 0;
		overflow: visible;
	}
	.compare-table tbody td { display: table-cell; }
	/* 製品名ラベル(::before)はthead復活で不要になるため消す */
	.compare-table tbody td:not(:first-child)::before { content: none; }
	/* 競合A〜D列（3〜6列目）を等幅に */
	.compare-table thead th:nth-child(n+3),
	.compare-table tbody td:nth-child(n+3) {
		width: 17%;
	}
	.compare-table th,
	.compare-table td {
		padding: 16px 14px;
		text-align: left;
		border-bottom: 1px solid var(--gm-line-soft);
		border-right: 1px solid var(--gm-line-soft); /* 列の区切り縦線 */
		font-size: 15px;
		line-height: 1.75;
	}
	/* 表の右端は外枠borderと二重になるため打ち消し */
	.compare-table th:last-child,
	.compare-table td:last-child {
		border-right: none;
	}
	/* カード用の td:last-child{border-bottom:none}（media外）がテーブルにも効いて
	   右端列(D列)の行の横罫線が抜けるため、テーブル表示では横線を復活させる */
	.compare-table tbody td:last-child {
		border-bottom: 1px solid var(--gm-line-soft);
	}
	.compare-table thead th {
		background: var(--gm-paper);
		font-family: var(--gm-mincho);
		font-weight: 700;
		color: var(--gm-gray-deep);
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid var(--gm-line);
		border-right: 1px solid var(--gm-line); /* ヘッダーにも列の区切り縦線を引く */
	}
	.compare-table thead th.us {
		font-size: 16px;
		line-height: 1.3;
		background: var(--gm-ink);
		color: #fff;
		/* ごきげんモニター列は紺背景で独立して見せるため右の縦線は引かない */
		border-right: none;
	}
	.compare-table thead th.us::before {
		content: "OURS";
		display: block;
		font-size: 10px;
		color: var(--gm-teal);
		letter-spacing: .24em;
		margin-bottom: 6px;
	}
	/* 1列目td＝項目名セル（カードの紺見出しを通常セルに戻す） */
	.compare-table tbody td:first-child {
		font-family: var(--gm-mincho);
		font-weight: 700;
		color: var(--gm-ink);
		background: var(--gm-paper);
		width: 120px;
		vertical-align: middle;
		font-size: 15px;
		padding: 16px 14px;
		border-bottom: 1px solid var(--gm-line); /* 背景色に埋もれないようthと同色の横線を引く */
	}
	/* table-layout:fixedはthead基準のため1列目ヘッダーも同幅に */
	.compare-table thead th:first-child {
		width: 135px;
	}
	.compare-table tbody td.us {
		background: rgba(0,168,181,.04);
		color: var(--gm-ink);
		font-weight: 500;
		border-left: 3px solid var(--gm-teal);
		border-right: 3px solid var(--gm-teal);
		border-bottom: 1px solid var(--gm-teal); /* ベースの3pxを1pxに打ち消し */
	}
	/* 最後の行だけ下を3pxで締める */
	.compare-table tbody tr:last-child td.us { border-bottom: 3px solid var(--gm-teal); }
	.compare-table .us strong {
		font-size: 17px;
	}
}

/* =========================================================================
   比較表：769〜999pxは項目カードを2枚横並び（担当者指定の追加ブレイクポイント）
   範囲限定メディアなので1000px以上のテーブル表示には一切影響しない。
   STEP1：まず2列に並べるだけ（各製品行の横線揃えはこの段階では行わない）。
   ========================================================================= */
@media screen and (min-width: 769px) and (max-width: 999.98px) {
	.compare-table tbody {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		align-items: start; /* 高さの違うカードが上端で揃うように */
	}
	.compare-table tbody tr {
		margin-bottom: 0; /* gapで間隔を取るのでベースのmargin-bottomは打ち消し */
	}
	/* JSがheightをセットしてもpaddingで膨らまないようborder-box固定 */
	.compare-table tbody td {
		box-sizing: border-box;
	}
}

/* ---- USE CASES ---- */
.usecase-section { background: var(--gm-paper); }
.uc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--gm-line);
}
.uc-card {
	background: var(--gm-bg);
	padding: 40px 28px;
	transition: all .3s;
}
.uc-card-num {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
	margin-bottom: 18px;
	transition: color .25s;
}
.uc-card-icon {
	width: 40px; height: 40px;
	color: var(--gm-ink);
	margin-bottom: 20px;
	transition: color .25s;
}
.uc-card-title {
	font-family: var(--gm-mincho);
	font-size: 20px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.6;
	margin-bottom: 14px;
	transition: color .25s;
}
.uc-card-desc p {
	font-size: 13px;
	color: var(--gm-gray);
	line-height: 2;
	transition: color .25s;
}
.uc-card-desc strong { color: var(--gm-ink); font-weight: 700; }

/* ---- CASE STUDIES ---- */
.cases-section { background: var(--gm-paper); }
.case-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.case-card {
	background: var(--gm-bg);
	border: 1px solid var(--gm-line);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	transition: all .3s;
}
.case-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--gm-line-soft);
}
.case-card-num {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
}
.case-card-industry {
	font-family: var(--gm-mincho);
	font-size: 11px;
	color: var(--gm-gray);
	letter-spacing: .08em;
}
.case-card-company {
	font-family: var(--gm-mincho);
	font-size: 18px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.55;
	margin-bottom: 6px;
}
.case-card-meta {
	font-size: 12px;
	color: var(--gm-gray);
	margin-bottom: 24px;
}
.case-card-effect {
	background: var(--gm-paper);
	padding: 18px 22px;
	margin-bottom: 20px;
	border-left: 3px solid var(--gm-teal);
}
.case-card-effect-label {
	font-size: 10px;
	color: var(--gm-teal);
	letter-spacing: .2em;
	margin-bottom: 8px;
}
.case-card-effect-num {
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 34px;
	color: var(--gm-ink);
	line-height: 1;
	margin-bottom: 6px;
}
.case-card-effect-num small {
	font-size: 16px;
	color: var(--gm-gray);
	margin-left: 4px;
	font-weight: 500;
}
.case-card-effect-text {
	font-size: 11px;
	color: var(--gm-gray);
	line-height: 1.6;
}
.case-card-quote {
	font-family: var(--gm-mincho);
	font-size: 14px;
	line-height: 2.05;
	color: var(--gm-ink);
	flex-grow: 1;
	margin-bottom: 20px;
	font-weight: 500;
}
.case-card-quote strong {
	font-weight: 700;
	background: linear-gradient(180deg, transparent 65%, rgba(0,168,181,.2) 65%);
}
.case-card-person {
	font-size: 12px;
	color: var(--gm-gray);
	padding-top: 18px;
	border-top: 1px solid var(--gm-line-soft);
}
.case-card-person strong {
	display: block;
	color: var(--gm-ink);
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 13px;
}
.cases-disclaimer p {
	text-align: center;
	color: var(--gm-gray);
	margin-top: 32px;
	line-height: 1.8;
}

/* ---- PRICING ---- */
.pricing-section { background: var(--gm-bg); }
.pricing-wrap {
	background: #fff;
	padding: 32px 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	border: 1px solid var(--gm-line);
}
.pricing-left {
	border-bottom: 1px dashed var(--gm-line);
	padding-bottom: 32px;
}
.pricing-plan-label {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
	margin-bottom: 16px;
}
.pricing-plan-title {
	font-family: var(--gm-mincho);
	font-size: 24px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.6;
	margin-bottom: 12px;
}
.pricing-plan-sub {
	font-size: 13px;
	color: var(--gm-gray);
	margin-bottom: 32px;
	line-height: 1.8;
}
.pricing-items { margin-bottom: 28px; }
.pricing-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 20px 0;
	border-bottom: 1px solid var(--gm-line-soft);
}
.pricing-item:last-child { border-bottom: none; }
.pricing-item-label {
	font-family: var(--gm-mincho);
	font-size: 13px;
	color: var(--gm-gray-deep);
	font-weight: 700;
}
.pricing-item-value {
	font-family: var(--gm-mincho);
	font-size: 24px;
	font-weight: 700;
	color: var(--gm-ink);
}
.pricing-item-value.pricing-item-value-sm { font-size: 18px; line-height: 1.3; text-align: right; }
.pricing-item-note {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gm-gray);
	margin-top: 6px;
}
.pricing-item-value .yen { font-size: 13px; color: var(--gm-gray); margin-right: 2px; font-weight: 500; }
.pricing-item-value .unit { font-size: 12px; color: var(--gm-gray); margin-left: 4px; font-weight: 500; }
.pricing-item-value .teal { color: var(--gm-teal); }
.pricing-notes {
	background: var(--gm-paper);
	padding: 20px 22px;
}
.pricing-notes p {
	font-size: 12px;
	color: var(--gm-gray);
	line-height: 2;
}
.pricing-notes strong { color: var(--gm-ink); }
.pricing-notes em { font-style: normal; color: var(--gm-teal); font-weight: 700; }
.pricing-steps-title {
	font-family: var(--gm-mincho);
	font-size: 22px;
	font-weight: 700;
	color: var(--gm-ink);
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
}
.pricing-steps-title::before {
	content: "STEPS";
	font-size: 10px;
	color: var(--gm-teal);
	letter-spacing: .24em;
	font-weight: 500;
	padding: 4px 8px;
	border: 1px solid var(--gm-teal);
}
.step {
	display: flex;
	gap: 20px;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--gm-line-soft);
}
.step:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.step-num {
	width: 36px; height: 36px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--gm-ink);
	color: var(--gm-ink);
	font-family: var(--gm-mincho);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}
.step-title {
	font-family: var(--gm-mincho);
	font-size: 18px;
	font-weight: 700;
	color: var(--gm-ink);
	margin-bottom: 6px;
}
.step-desc p {
	font-size: 12px;
	color: var(--gm-gray);
	line-height: 1.8;
	margin: 0;
}

/* ---- FAQ ---- */
.faq-section { background: var(--gm-paper); }
/* 背景装飾：bg01/bg02.svg を白単色化して配置（SOLUTIONと同じ・HTMLを汚さない） */
main .contents.faq-section {
	position: relative;
	overflow: hidden;
}
.faq-section::before,
.faq-section::after {
	content: "";
	position: absolute;
	z-index: 0;
	background-repeat: no-repeat;
	pointer-events: none;
	/* 多色SVGを完全な白単色に変換 */
	filter: brightness(0) invert(1);
	opacity: 0.9;
}
/* 右上 bg02 */
.faq-section::before {
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background-image: url("../../p-img/101623_1/bg02.svg");
	background-position: top right;
	background-size: contain;
}
/* 左下 bg01 */
.faq-section::after {
	bottom: 0;
	left: 0;
	width: 50%;
	height: 50%;
	background-image: url("../../p-img/101623_1/bg01.svg");
	background-position: bottom left;
	background-size: contain;
}
/* コンテンツを装飾より前面へ */
.faq-section > .w1200 {
	position: relative;
	z-index: 1;
}
.faq-list {
	border-top: 1px solid var(--gm-line);
}
.faq-item {
	border-bottom: 1px solid var(--gm-line);
	background: var(--gm-bg);
	transition: background .25s;
}
.faq-item[open] { background: var(--gm-bg); }
.faq-q {
	padding: 22px 16px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q-mark {
	font-family: var(--gm-mincho);
	font-size: 20px;
	font-weight: 700;
	color: var(--gm-teal);
	flex-shrink: 0;
	line-height: 1.3;
}
.faq-q-text {
	flex-grow: 1;
	font-family: var(--gm-mincho);
	font-size: 16px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.7;
	padding-top: 2px;
}
.faq-icon {
	flex-shrink: 0;
	width: 24px; height: 24px;
	position: relative;
	margin-top: 4px;
	transition: transform .3s;
}
.faq-icon::before,
.faq-icon::after {
	content: "";
	position: absolute;
	background: var(--gm-ink);
	transition: all .3s;
}
.faq-icon::before { top: 11px; left: 4px; width: 16px; height: 1px; }
.faq-icon::after { top: 4px; left: 11px; width: 1px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item[open] .faq-icon::before { background: var(--gm-teal); }
.faq-a {
	padding: 0 16px 24px 46px;
}
.faq-a p {
	font-size: 15px;
	color: var(--gm-gray-deep);
	line-height: 2.1;
	margin: 0;
}
.faq-a p strong {
	color: var(--gm-ink);
	background: linear-gradient(180deg, transparent 70%, rgba(0,168,181,.2) 70%);
	font-weight: 700;
}

/* ---- COMPANY（会社概要：既存 .cpn_tbl / .parts-map を活用） ---- */
.company-section { background: var(--gm-bg); }
/* 事業内容・許認可の箇条書き（td内） */
.cpn-biz-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cpn-biz-list li {
	position: relative;
	padding-left: 1.2em;
	line-height: 1.8;
}
.cpn-biz-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--gm-teal);
}
/* 所在地 */
.cpn-office-main {
	line-height: 1.8;
	margin: 0 0 .6em;
}
.cpn-office-sub {
	font-size: .9em;
	color: var(--gm-gray);
	line-height: 1.7;
	margin: 0;
}
/* 親会社注記 */
.cpn-parent-note p {
	text-align: center;
	font-size: 13px;
	color: var(--gm-gray);
	margin-bottom: 2rem;
}
/* GoogleMap：iframeをレスポンシブ化（.parts-map 補完） */
.parts-map iframe {
	width: 100%;
	height: 320px;
	display: block;
	border: 1px solid var(--gm-line);
}

/* ---- FINAL CTA ---- */
.final-cta-section { background: var(--gm-ink); color: #fff; }
.final-cta-section .parts-h1 { color: #fff; }
.final-head { text-align: center; margin-bottom: 40px; }
.final-title-text {
	margin-bottom: 20px;
}
.final-title-text p {
	font-family: var(--gm-mincho);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.55;
}
.final-title-text .teal { color: var(--gm-teal); }
.final-lead p {
	font-size: 15px;
	line-height: 2;
	color: rgba(255,255,255,.78);
}
.final-points {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(255,255,255,.1);
	margin-bottom: 40px;
}
.final-point {
	background: var(--gm-ink);
	padding: 32px 28px;
	transition: background .3s;
}
.final-point-num {
	font-size: 11px;
	color: var(--gm-teal);
	letter-spacing: .24em;
	margin-bottom: 16px;
}
.final-point-title {
	font-family: var(--gm-mincho);
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	line-height: 1.65;
	margin-bottom: 10px;
}
.final-point-desc p {
	font-size: 12px;
	color: rgba(255,255,255,.65);
	line-height: 1.85;
	margin: 0;
}
.final-cta-section .half.contact {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	padding: 28px 20px;
	margin-bottom: 24px;
}
/* お問合せフォーム箱：濃紺セクション内で白地に */
.final-cta-section .contact {
	background: var(--gm-bg);
	color: var(--gm-ink);
	border-radius: 8px;
	padding: 28px 20px;
	margin-bottom: 24px;
}
.contact-title-img {
	text-align: center;
	margin-bottom: 24px;
}
.contact-title-img img {
	max-width: 260px;
	width: 100%;
	height: auto;
}












/* ---- ADMIN SECURITY ---- */
.admin-security-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.admin-security-card {
	background: var(--gm-bg);
	border: 1px solid var(--gm-line);
	border-radius: 12px;
	padding: 28px 24px;
}
.admin-security-title {
	font-family: var(--gm-mincho);
	font-size: 20px;
	font-weight: 700;
	color: var(--gm-ink);
	line-height: 1.5;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--gm-teal);
}
.admin-security-desc p {
	font-size: 14px;
	line-height: 1.9;
	color: var(--gm-gray-deep);
	margin: 0;
}
.admin-security-img {
	margin-top: 16px;
}
.admin-security-img img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}


/* *****************************************************************************
   スマートフォン用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 480px) {

	

	
	
	
	
	
	
}