/* ===================================================================
 * common.css 
 * =================================================================== */

@charset "utf-8";

@import url("//fast.fonts.net/t/1.css?apiType=css&projectid=cfca8a76-348d-437b-9ce2-1dba7fd7240d");

/*@font-face{
font-family:"AxisStd-ExtraLight";
src:url("//sendgrid.kke.co.jp/fonts/cae76507-fde0-48d2-8060-f95b67662772.eot?#iefix");
src:url("//sendgrid.kke.co.jp/fonts/cae76507-fde0-48d2-8060-f95b67662772.eot?#iefix") format("eot"),url("//sendgrid.kke.co.jp/fonts/9adc0413-55bd-4001-9bc0-f823476aa22e.woff2") format("woff2"),url("//sendgrid.kke.co.jp/fonts/25516da4-2e65-456a-bc9c-cc6960f6c384.woff") format("woff"),url("//sendgrid.kke.co.jp/fonts/8c439ac8-83ef-4635-a477-df9c64f97b62.ttf") format("truetype"),url("//sendgrid.kke.co.jp/fonts/93d1f11a-903e-4293-a2f1-cd55b87b5087.svg#93d1f11a-903e-4293-a2f1-cd55b87b5087") format("svg");
}*/
@font-face{
font-family:"AxisStd-Light";
/*src:url("//sendgrid.kke.co.jp/fonts/aa7c9f5f-bd2d-4fbb-a4a5-82ba2cd0189c.eot?#iefix");
src:url("//sendgrid.kke.co.jp/fonts/aa7c9f5f-bd2d-4fbb-a4a5-82ba2cd0189c.eot?#iefix") format("eot"),url("//sendgrid.kke.co.jp/fonts/ca94208f-21dd-4dc8-ab7c-057d8dbfcccb.woff2") format("woff2"),url("//sendgrid.kke.co.jp/fonts/18820f9e-d51e-43be-9d0f-e510d9d1878a.woff") format("woff"),url("//sendgrid.kke.co.jp/fonts/cb3a3886-7dec-420d-bf42-698737ce3561.ttf") format("truetype"),url("//sendgrid.kke.co.jp/fonts/9bdde1f9-7637-4fa1-994d-2f2ad4929b1f.svg#9bdde1f9-7637-4fa1-994d-2f2ad4929b1f") format("svg");*/
src:url(/hc/theming_assets/01J1XKNYFSRT2HV92ZHP09BJGX) format("woff");
}
@font-face{
font-family:"AxisStd-Regular";
/*src:url("//sendgrid.kke.co.jp/fonts/7e908add-1f72-4926-8e0d-33613fad3a87.eot?#iefix");*/
/*src:url("//sendgrid.kke.co.jp/fonts/7e908add-1f72-4926-8e0d-33613fad3a87.eot?#iefix") format("eot"),url("//sendgrid.kke.co.jp/fonts/d226afef-6536-4b18-9b28-defffcc4baae.woff2") format("woff2"),url("//sendgrid.kke.co.jp/fonts/6e9eb620-9339-4b2e-bb9b-d514def96de7.woff") format("woff"),url("//sendgrid.kke.co.jp/fonts/a71ba532-858c-440c-8abd-e89a2ae8efea.ttf") format("truetype"),url("//sendgrid.kke.co.jp/fonts/5d948218-1de1-4508-b1a6-fe03ccced886.svg#5d948218-1de1-4508-b1a6-fe03ccced886") format("svg");*/
src:url(/hc/theming_assets/01J1XKNYJ9C7NSP3ARKNR50MGP) format("woff");
}
@font-face{
font-family:"AxisStd-Medium";
/*src:url("//sendgrid.kke.co.jp/fonts/724feca3-e632-4df0-811e-d0184d5e569c.eot?#iefix");*/
/*src:url("//sendgrid.kke.co.jp/fonts/724feca3-e632-4df0-811e-d0184d5e569c.eot?#iefix") format("eot"),url("//sendgrid.kke.co.jp/fonts/3e49aace-6c5a-4a76-a80e-21ab7ad44f14.woff2") format("woff2"),url("//sendgrid.kke.co.jp/fonts/2a67f3cb-4bfa-4ec5-9167-73e8c4e78635.woff") format("woff"),url("//sendgrid.kke.co.jp/fonts/f09ad952-d955-4c72-a632-1313427634d0.ttf") format("truetype"),url("//sendgrid.kke.co.jp/fonts/c60a0c5e-c39d-4513-b578-1a5858cbecde.svg#c60a0c5e-c39d-4513-b578-1a5858cbecde") format("svg");*/
src:url(/hc/theming_assets/01KMYNNN76DBWEY0YEC4GH24DX) format("woff");
}
/*
@font-face{
font-family:"AxisStd-Bold";
src:url("//sendgrid.kke.co.jp/fonts/c560bf6b-69f6-4f4d-bdb5-871df542e091.eot?#iefix");
src:url("//sendgrid.kke.co.jp/fonts/c560bf6b-69f6-4f4d-bdb5-871df542e091.eot?#iefix") format("eot"),url("//sendgrid.kke.co.jp/fonts/155d7ef4-60ae-4836-a63c-2aef89997f65.woff2") format("woff2"),url("//sendgrid.kke.co.jp/fonts/046ac2c8-1355-4a58-99e3-77b70cdc7d2d.woff") format("woff"),url("//sendgrid.kke.co.jp/fonts/695b31e6-82e7-479e-9f53-be80bea18972.ttf") format("truetype"),url("//sendgrid.kke.co.jp/fonts/4a75d965-22ab-4673-9e14-6b3e8f4bbec6.svg#4a75d965-22ab-4673-9e14-6b3e8f4bbec6") format("svg");
}*/



/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;

}

html {
	font-size: 62.5%;
}

body,
table,
input,
textarea,
select,
option,
button {
	font-family: "AxisStd-Light";
	line-height: 1.1;
}

input[type="checkbox"] {
	vertical-align: middle;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
	display: block;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

img {
	vertical-align: top;
}

a,
a:link {
	/* color: #424752; */
	color: #1A82E2;
	text-decoration: none;
}

a:visited {
	/* color: #424752; */
	color: #1A82E2;
	text-decoration: none;
}

a:hover {
	/* color: #424752; */
	color: #64c3e7;
	/* text-decoration: underline; */
}

a:active {
	color: #64c3e7;
	/* text-decoration: underline; */
}

hr {
	border: none;
	border-top: 2px solid #009ed9;
	margin: 0;
	padding: 0;
}

/***** 投票ボタンの設置 *****/
/* 1. 投票セクション全体のレイアウト調整 */
.article-votes {
  text-align: center; 
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 2. 質問文のスタイル */
.article-votes-question {
  display: block; 
  margin-bottom: 10px; 
  font-weight: bold;
}

/* 3. ボタンコンテナのスタイル */
.article-votes-controls {
  display: inline-block; 
  margin-bottom: 10px; 
}

/* 4. 投票ボタンの視覚化（横幅統一と縦幅調整） */
.article-vote {
  display: inline-block; 
  /* 縦幅を短くするために上下のパディングを減らす */
  padding: 8px 16px; 
  /* 横幅を統一するために固定幅を設定（例: 80px） */
  width: 80px; 
  /* テキストを中央揃えにする */
  text-align: center;
  
  background-color: #ffffff; 
  border: 1px solid #000000; 
  color: #333333 !important; 
  border-radius: 4px;
  margin: 0 5px; 
  text-decoration: none; 
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease-in-out; 
  /* box-sizingを追加し、widthがpaddingとborderを含んだサイズになるようにする */
  box-sizing: border-box; 
}

/* 5. 投票ボタンのタイトルを表示 (はい/いいえ) */
.article-vote-up::after {
  content: "はい";
  color: #333333 !important; 
}
.article-vote-down::after {
  content: "いいえ";
  color: #333333 !important;
}

/* 6. 選択済みボタンのスタイル（文字色を白に強制） */
.button-primary { 
  background-color: #000000; /* 選択時の背景：黒 */
  color: #ffffff !important; /* 選択ボタン全体の文字色：白 */
  border-color: #000000; /* 選択時の枠線：黒 */
}

.button-primary::after {
  color: #ffffff !important; 
}

/* 7. 投票カウント部分のスタイル */
.article-votes-count {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #666666;
  margin-top: 15px;
}

/* 8. ホバー時のスタイル（背景：黒、文字色：白） */
.article-vote:hover {
  background-color: #000000; 
  color: #ffffff !important; 
}
.article-vote:hover::after {
  /* ホバー時もテキストの色を白に強制 */
  color: #ffffff !important; 
}

/***** 投票ボタンの設置  *****/

/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft {
	text-align: left !important;
}

.taCenter {
	text-align: center !important;
}

.taRight {
	text-align: right !important;
}

/* フォントの大きさ（プラス） */
.fsP1 {
	font-size: 1.08em !important;
}

.fsP2 {
	font-size: 1.16em !important;
}

.fsP3 {
	font-size: 1.24em !important;
}

.fsP4 {
	font-size: 1.32em !important;
}

.fsP5 {
	font-size: 1.4em !important;
}

/* フォントの大きさ（マイナス） */
.fsM1 {
	font-size: 0.92em !important;
}

.fsM2 {
	font-size: 0.84em !important;
}

.fsM3 {
	font-size: 0.76em !important;
}

.fsM4 {
	font-size: 0.68em !important;
}

.fsM5 {
	font-size: 0.6em !important;
}

/* フォントの太さ */
.fwNormal {
	font-weight: normal !important;
}

.fwBold {
	font-weight: bold !important;
}

/*------------------------------------------------------------
	微調整用クラス（※多用しないこと）
------------------------------------------------------------*/
.mt0 {
	margin-top: 0 !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.t_center {
	text-align: center !important;
}

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
* html .clearfix {
	zoom: 1;
}

*+html .clearfix {
	zoom: 1;
}

.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

/*------------------------------------------------------------
	リンク・インプットをタップ時のクラス
------------------------------------------------------------*/
a.tapCtrl,
input.tapCtrl,
.tapCtrl a,
.tapCtrl input {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.tap {}

.floatL {
	float: left !important;
}

.floatR {
	float: right !important;
}


/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	min-width: 990px;
	color: #424752;
	font-size: 1.0rem;
	line-height: 1.5;
	background-color: #FBFBFD;
	-webkit-text-size-adjust: none;
	background: #424752;
}

#container {
	text-align: left;
	background: #fbfbfc;
	padding-top: 68px;
}

@media (max-width: 736px) {
	#container {
		padding-top: 56px;
	}
}

#main {
	margin: 0 auto;
	width: 990px;
}

#main.widthAuto {
	width: auto;
}

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	position: relative;
	/*margin-bottom: -48px;
	padding-bottom: 48px;
	background: url(https://sendgrid.kke.co.jp/images/common/header_bg02.gif) repeat-x left bottom;*/
	margin-top: -80px;
}

#gHeader .hInner {
	background: url(https://sendgrid.kke.co.jp/images/common/header_bg.gif) repeat-x left bottom;
}

#gHeader .hInner .innerBox {
	background: #FFF;
}

#gHeader .hBox {
	margin: 0 auto;
	width: 990px;
	height: 80px;
	position: relative;
}

#gHeader .hBox a {
	color: #424752;
}

#gHeader .hBox a:hover {
	color: #64c3e7;
}

#gHeader .menu {
	display: none;
}

#gHeader .logo {
	position: absolute;
	top: 26px;
	left: 0;
	width: 134px;
	height: 24px;
}

#gHeader .hInner .rBox {
	float: right;
}

#gHeader .hInner .hLink {
	float: left;
	margin-right: 15px;
}

#gHeader .hInner .hLink li {
	margin-right: 39px;
	display: inline;
	font-size: 1.4rem;
	line-height: 80px;
}

#gHeader .hInner .hLink li a {
	padding-left: 17px;
	display: inline-block;
	background: url(https://sendgrid.kke.co.jp/images/common/icon01.gif) no-repeat left center;
}

#gHeader .hInner .hLink li a:hover {
	text-decoration: none;
	background: url(https://sendgrid.kke.co.jp/images/common/icon01_over.png) no-repeat left center;
}

#gHeader .hInner p {
	float: left;
	font-size: 1.4rem;
	line-height: 80px;
}

#gHeader .hInner p a {
	margin-left: 16px;
}

#gHeader .hInner p .txtLink:hover {
	text-decoration: none;
}

#gHeader .hInner p .btn {
	margin-top: 26px;
	width: 83px;
	float: right;
	display: block;
	padding: 5px 0;
	color: #FFF;
	font-size: 1.2rem;
	text-align: center;
	border-radius: 2px;
	box-shadow: 0 0 10px #DDD;
	background-color: #009ed9;
	position: relative;
	behavior: url(/js/pie.htc);
	line-height: 1.5;
}

#gHeader .hInner p .btn:hover {
	text-decoration: none;
}

#gHeader .menuBox,
#gHeader .topMenu {
	display: none;
}

#gHeader .hWarn {
	background: #A3330A;
	color: #FFFFFF;
}

/*------------------------------------------------------------
	gNavi
------------------------------------------------------------*/
#gNavi {
	background-color: #424752;
	height: 70px;
	overflow: hidden;
	clear: both;
}

#gNavi ul {
	margin: 0 auto;
	width: 990px;
	text-align: center;
}

#gNavi ul li {
	margin: 0 27px;
	display: inline;
	font-size: 1.6rem;
	line-height: 70px;
}

#gNavi ul li a {
	padding: 0 15px;
	display: inline-block;
	color: #FFF;
	height: 100%;
}

#gNavi ul li a:hover {
	color: #64c3e7;
	text-decoration: none;
}

/*------------------------------------------------------------
	pagePath
------------------------------------------------------------*/
#pagePath {
	padding: 13px 0 21px;
	/*background: url(https://sendgrid.kke.co.jp/images/common/pagepath_bg.gif) repeat-x left bottom;*/
	background: url(https://sendgrid.kke.co.jp/images/common/pagepath_bg.png) repeat-x left top;
}

#pagePath ul {
	margin: 0 auto;
	width: 990px;
}

#pagePath li {
	margin-right: 5px;
	display: inline;
	font-size: 1.4rem;
	font-family: "AxisStd-Regular";
}

#pagePath li a {
	margin-right: 8px;
	/* color: #0070cd; */
}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	padding: 25px 0 27px;
	overflow: hidden;
	background-color: #424752;
}

#gFooter .fInner {
	margin: 0 auto;
	width: 990px;
}

#gFooter .fInner .lBox {
	margin-top: 8px;
	float: left;
	width: 510px;
}

#gFooter .fInner .lBox .logoBox {
	margin-bottom: 12px;
}

#gFooter .fInner .lBox .logoBox .fLogo {
	float: left;
	margin: -8px 37px 0 0;
}

#gFooter .fInner .lBox .logoBox .fLogo img {
	width: 136px;
}

#gFooter .fInner .lBox .logoBox .logo02 img {
	width: 146px;
}

#gFooter .fInner .lBox p {
	margin-bottom: 25px;
	color: #FFF;
	font-size: 1.2rem;
}

#gFooter .fInner .lBox .copyright {
	margin-bottom: 0;
	color: #bebfbf;
}

#gFooter .fInner .fBox {
	float: right;
	width: 480px;
}

#gFooter .fInner .fNavi {
	float: left;
	width: 300px;
}

#gFooter .fInner .fNavi li {
	padding-top: 11px;
}

#gFooter .fInner .fNavi li:first-child {
	padding-top: 0;
}

#gFooter .fInner .fNavi li a {
	padding-left: 22px;
	display: inline-block;
	color: #FFF;
	font-size: 1.4rem;
	background: url(https://sendgrid.kke.co.jp/images/common/icon03.png) no-repeat left 5px;
}

#gFooter .fInner .fNavi li a:hover {
	color: #64c3e7;
	text-decoration: none;
	background: url(https://sendgrid.kke.co.jp/images/common/icon01_over.png) no-repeat left 5px;
}

#gFooter .fInner .linkInner {
	margin-top: 21px;
	/*30px;*/
	float: left;
	width: 180px;
}

#gFooter .fInner .linkInner .btnList {
	float: left;
	margin-top: 22px;
	/*13px;*/
}

#gFooter .fInner .linkInner .btnList li {
	margin-right: 30px;
	float: left;
}

#gFooter .fInner .linkInner .btnList li a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

#gFooter .fInner .linkInner .pageTop {
	float: right;
}

#gFooter .fInner .linkInner .pageTop a {
	display: block;
}

#gFooter .fInner .linkInner .pageTop a figure {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid #FFF;
	border-radius: 50%;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	transition: background 0.2s;
	box-sizing: border-box;
}

#gFooter .fInner .linkInner .pageTop a figure img {
	position: absolute;
	top: 2px;
	left: 6px;
}

#gFooter .fInner .linkInner .pageTop a span {
	display: block;
	text-align: center;
	color: #FFF;
	margin-top: 8px;
	font-size: 1.2rem;
	transition: color 0.2s;
}

#gFooter .fInner .linkInner .pageTop a:hover figure {
	background: #64c3e7;
}

#gFooter .fInner .linkInner .pageTop a:hover figure img {
	animation: pagetop 0.4s;
}

#gFooter .fInner .linkInner .pageTop a:hover span {
	color: #64c3e7;
}

@keyframes pagetop {
	0% {
		transform: translate3d(0, 0px, 0);
	}

	50% {
		transform: translate3d(0, -50px, 0);
	}

	51% {
		transform: translate3d(0, 50px, 0);
	}

	100% {
		transform: translate3d(0, -0px, 0);
	}
}


/**
 * mypage.cssから移植
 */
/*#gHeader .hInner .rBox p {
	display: none;
}*/


/* header */
.sp__item {
	display: none !important;
}

@media (max-width: 736px) {
	.sp__item {
		display: block !important;
	}
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: #fbfbfc;
	box-shadow: 0px -25px 30px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 736px) {
	.header.active {
		height: 100vh;
		overflow-y: scroll;
		overscroll-behavior: contain;
	}
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: clamp(990px, calc(100% - 20px), 1200px);
	height: 68px;
	margin: 0 auto;
	position: relative;
}

@media (max-width: 736px) {
	.header__inner {
		display: block;
		height: 56px;
		width: 100%;
	}
}

.header__logo-box {
	display: flex;
	align-items: center;
	height: 32px;
}

@media (max-width: 736px) {
	.header__logo-box {
		height: 100%;
		margin-left: 24px;
		margin-right: auto;
	}
}

.header__logo {
	display: flex;
	align-items: center;
	width: 134px;
	height: 100%;
}
@media (max-width: 1120px) {
	.header__logo {
		width: 110px;
	}
}

@media (max-width: 736px) {
	.header__logo {
		width: 100px;
		height: 30px;
	}
}

.header__logo img {
	width: 100%;
}

.header__kkelogo {
	margin-left: 16px;
	padding-left: 16px;
	border-left:1px solid #D1D9E2;
	width: 116px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.header__kkelogo span {
	color: #657190;
	font-size: 1rem;
	line-height: 1;
	display: block;
	font-family: "AxisStd-Medium";
	margin-bottom: 3px;
}

@media (max-width: 1120px) {
	.header__kkelogo {
		margin-left: 10px;
		padding-left: 10px;
		width: 104px;
		height: 30px;
	}
}

.header__kkelogo img {
	width: 100%;
}

.sp__menu {
	display: none;
}

@media (max-width: 736px) {
	.sp__menu {
		display: block;
	}
}

.sp__menu input {
	display: none;
}

.menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 64px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
}

.menu-state:checked ~ .menu {
	gap: 0;
}

.menu__line {
	width: 16px;
	height: 2px;
	background-color: #0E1C28;
	display: block;
	transition: .2s ease-out;
}

.menu-state:checked ~ .menu .menu__line:nth-child(1) {
	rotate:45deg;
}

.menu-state:checked ~ .menu .menu__line:nth-child(2) {
	display: none;
}

.menu-state:checked ~ .menu .menu__line:nth-child(3) {
	rotate:135deg;
	margin-top: -2px;
}

@media (max-width: 736px) {
	.navigation {
		opacity: 0;
		pointer-events: none;
		transition: .2s ease-out;
	}

	.active .navigation {
		opacity: 1;
		pointer-events: all;
		padding-bottom: 60px;
	}
}

.navigation__inner {
	margin: 0 auto;
	position: relative;
}

@media (max-width: 736px) {
	.navigation__inner {
		width: 100%;
	}
}

.global-navigation {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap:20px;
	position: relative;
}

@media (max-width: 1120px) {
	.global-navigation {
		gap:12px;
	}
}

@media (max-width: 736px) {
	.global-navigation {
		display: block;
	}
	.global-navigation__item {
		border-bottom: 1px solid #D1D9E2;
		position: relative;
	}
	.global-navigation__item:first-child {
		border-top: 1px solid #D1D9E2;
	}
}

.global-navigation__item a {
	position: relative;
	color: #0E1C28;
}

.global-navigation__main-link {
	appearance: none;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
	line-height: inherit;
	text-align: inherit;
	color: #0E1C28;
}

.global-navigation__item.has-child .global-navigation__main-link {
	padding-right: 18px;
}

.global-navigation__item.has-child.support .global-navigation__main-link {
	padding-right: 0;
}

@media (min-width: 737px) {
	.global-navigation__item.has-child.active .global-navigation__main-link {
		color: #0C99AE;
		scale: 1.07692308;
	}
}

.global-navigation__item.has-child .global-navigation__main-link::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 2px;
	transform: translateY(-50%) rotate(135deg);
	transition: .2s ease-out;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.global-navigation__item.has-child.active .global-navigation__main-link::before {
	transform: translateY(-50%) rotate(-45deg);
	top: calc(50% + 2px);
}

.global-navigation__item.has-child.support .global-navigation__main-link::before {
	content: none;
}

@media (min-width: 737px) {
	.global-navigation__item.has-child.active .global-navigation__main-link::after {
		content: '';
		position: absolute;
		bottom: 13px;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: currentColor;
	}
}
.global-navigation__main-link {
	display: inline-block;
	padding: 15px 0;
	font-size: 1.3rem;
	font-family: "AxisStd-Medium";
}

@media (min-width: 737px) {
	.global-navigation__main-link:hover {
		color: #0C99AE;
	}
}

@media (max-width: 736px) {
	.global-navigation__item.has-child .global-navigation__main-link::before {
		right: 22px;
	}
	.global-navigation__main-link {
		background-color: #fbfbfc;
		padding: 15px 24px;
		width: 100%;
		box-sizing: border-box;
		font-size: 1.4rem;
	}
}

.global-navigation__main-link__icon {
	display: inline-block;
	width: 13px;
	aspect-ratio: 1 / 1;
	mask: url("https://sendgrid.kke.co.jp/images/common/icon_search.svg") no-repeat center center / contain;
	background-color: currentColor;
	margin-left: 7px;
	position: relative;
	top: 2px;
}

.global-navigation__local {
	margin: 0 auto;
	left: 50%;
	transform: translateX(-50%);
	color: #424752;
}

@media (min-width: 737px) {
	.global-navigation__local {
		width: 496px;
		position: fixed;
		font-size: 14px;
	}
	.global-navigation__local.has-video {
		width: 592px;
	}
}

@media (max-width: 736px) {
	.global-navigation__local {
		position: relative;
		width: 100%;
		display: none;
		font-size: 12px;
	}
}

.global-navigation__local .global-navigation__local__wrap {
	width: 100%;
	position: absolute;
	top: 3px;
	left: 0;
	transition: .3s ease-out;
	opacity: 0;
	pointer-events: none;
	border-radius: 8px;
	box-shadow: 0 0 35px 0px rgba(0, 0, 0, 0.25);
	background-color: #fbfbfc;
}

@media (max-width: 736px) {
	.global-navigation__local .global-navigation__local__wrap {
		position: relative;
		opacity: 1;
		box-shadow: none;
		transition: 0;
		top: 0;
	}
}

.global-navigation__item.has-child.active .global-navigation__local .global-navigation__local__wrap,
.global-navigation__item.has-child.active .global-navigation__local {
	opacity: 1;
	pointer-events: all;
	z-index: 999;
}

.global-navigation__local__inner {
	padding: 24px;
}

@media (max-width: 736px) {
	.global-navigation__local__inner {
		padding: 0;
	}
}

@media (min-width: 737px) {
	.global-navigation__local__inner a {
		pointer-events: none;
		display: block;
	}
}
.global-navigation__local:hover .global-navigation__local__inner a {
	pointer-events: all;
}

.global-navigation__local__list {
	display: flex;
	gap:32px;
}

@media (max-width: 736px) {
	.global-navigation__local__list {
		display: block;
		margin-top: -5px;
	}
	.about .global-navigation__local__list > li:first-child {
		margin-right: 0;
	}
}

.global-navigation__local__navi-area {
	flex:1;
}

@media (max-width: 736px) {
	.global-navigation__local__list>li>a {
		font-size: 1.3rem;
		margin-bottom: 10px;
		padding-inline:20px;
		display: block;
	}
}

.local__detail {
	padding-left: 10px;
}

@media (min-width: 737px) {
	.local__detail__list li:has(.local__detail__description) {
		margin-bottom: 12px;
	}
	.local__detail__list li:last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 736px) {
	.local__detail__list {
		padding: 0px 16px 15px 36px;
	}
	.local__detail__list:has(li:last-child :is(.local__detail__main-link, .local__detail__sub-link):last-child) {
		padding-bottom: 10px;
	}
	.local__detail__list li:not(:first-child) {
		border-top: 1px solid #D1D9E2;
		padding-top: 5px;
		margin-top: 10px;
	}
	.local__detail__list li a {
		font-size: 1.3rem;
		display: block;
		position: relative;
	}
}

@media (min-width: 737px) {
	.local__detail__main-link, 
	.local__detail__sub-link {
		position: relative;
		border-radius: 4px;
		display: block;
		margin-bottom: 6px;
	}
	:is(.local__detail__main-link, .local__detail__sub-link):only-child {
		margin-bottom: 0;
	}
	:is(.local__detail__main-link, .local__detail__sub-link)::before,
	:is(.local__detail__main-link, .local__detail__sub-link)::after {
		transition:translate .2s;
	}
	:is(.local__detail__main-link, .local__detail__sub-link)::before {
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		border: solid #0C99AE;
		border-width: 2px 2px 0 0;
		rotate:45deg;
		position: absolute;
		top: 50%;
		right: 23px;
		translate:0 -50%;
		z-index: 2;
	}
	.local__detail__sub-link::before {
		width: 4px;
		height: 4px;
		border-width: 1px 1px 0 0;
		right: 24px;
	}
	:is(.local__detail__main-link, .local__detail__sub-link)::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 14px;
		translate:0 -50%;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #fff;
		border: 1px solid #0C99AE;
	}
	.local__detail__sub-link::after {
		width: 14px;
		height: 14px;
		right: 17px;
	}
	:is(.local__detail__main-link, .local__detail__sub-link):hover::before,
	:is(.local__detail__main-link, .local__detail__sub-link):hover::after {
		translate: 4px -50%;
	}
	.local__detail__main-link {
		font-size: 1.6rem;
		background-color: #F3F7FC;
		padding: 4px 16px;
		font-family: "AxisStd-Medium";
	}
	.local__detail__main-link:hover {
		opacity: 1;
		background-color: #0AB7C7;
		color: #FFF;
	}
	.local__detail__sub-link {
		font-size: 1.4rem;
		padding: 4px 16px;
		font-family: "AxisStd-Regular";
	}
	.local__detail__sub-link:hover {
		opacity: 1;
		background-color: #EDF9F9;
		color: #117A8D;
	}
}

@media (max-width: 736px) {
	.local__detail__main-link {
		color: #0C99AE !important;
		font-family: "AxisStd-Medium";
		padding-block:10px 5px;
	}
	.local__detail__main-link::after {
		content: '';
		display: inline-block;
		width: 4px;
		height: 4px;
		border: solid currentColor;
		border-width: 1px 1px 0 0;
		rotate:45deg;
		margin-left: 4px;
		margin-bottom: 2px;
	}	
	.local__detail__sub-link {
		font-family: "AxisStd-Regular";
		margin-left: 13px;
		padding-block: 5px;
		text-decoration: underline !important;
		text-underline-offset: 2px;
	}
}
.local__detail__description {
	font-size: 1.3rem;
	color: #657190;
	margin: 6px 16px 0;
}

@media (max-width: 736px) {
	.local__detail__description {
		margin: -3px 0 0;
	}
}

.local__detail__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin:4px 16px 0;
}

.local__detail__categories li {
	margin: 0;
}

.local__detail__categories li a {
	font-size: 1.2rem;
	box-sizing: border-box;
	border-radius: 999px;
	border: 1px solid #474F61;
	display: flex;
	height: 20px;
	padding: 0 9px;
	justify-content: center;
	align-items: center;
}

.local__detail__categories li a::after {
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	border:solid currentColor;
	border-width:1px 1px 0 0;
	rotate:45deg;
	margin-left: 6px;
	transition: translate .2s;
}

.local__detail__categories li a:hover {
	background: #8394AE;
	color: #FFF;
}
.local__detail__categories li a:hover::after {
	translate: 2px 0;
}

.local__contents__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:8px;
}

@media (max-width: 736px) {
	.local__contents__list {
		display: none;
	}
}

.local__contents__list li {
	width: 192px;
}

.local__contents__list li a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.local__contents__list li a img {
	width: 100%;
}

.local__contents__list__image {
	width: 225px;
	aspect-ratio:225 / 139;
	position: relative;
}

.local__contents__list__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
}

.local__contents__list li a:hover {
	opacity: .7;
}

.global-navigation__local--button {
	width: 200px;
	height: 40px;
	background-color: #009ed9;
	border-radius: 2px;
	margin: 20px 0;
	position: relative;
}

.global-navigation__local--button a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 10;
}

.global-navigation__local--button::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #64c3e7;
	transition: transform 0.88s cubic-bezier(0, 1, 0, 1);
	transform-origin: 0 0 0;
	transform: scale3d(0, 1, 1);
}

@media (min-width: 737px) {
	.global-navigation__local--button:hover::after {
		transform: scale3d(1, 1, 1);
	}
}

.global-navigation__local--image {
	width: 70%;
	margin-top: 20px;
	margin-bottom: 20px;
}

.local__detail__attention li {
	font-size: 12px;
	margin-bottom: 10px;
	padding-left: 1em;
	text-indent: -1em;
}

.local__detail__attention li:last-child {
	margin-bottom: 0;
}

.local__detail__attention li a {
	color: #009ed9;
	display: inline;
}

@media (min-width: 737px) {
	.local__detail__attention li a:hover {
		opacity: .7;
	}
}

.member {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	margin-left: 18px;
}

@media (max-width: 736px) {
	.member {
		display: none;
	}
}

.member .topMenu > p {
  position: relative;
  z-index: 21;
}
@media (max-width: 736px) {
  .member .topMenu > p {
		position: relative;
    	z-index: 0;
	}
}


.member__contents {
	display: flex;
	align-items: center;
	font-size: 14px;
}

@media (max-width: 736px) {
	.member__contents {
		width: min(100%, 280px);
		margin-left: auto;
		margin-right: auto;
	}
}

.member__contents li a {
	color: #424752;
}

@media (min-width: 737px) {
	.member__contents li:nth-child(1) a:hover {
		opacity: .7;
	}
}

@media (max-width: 736px) {
	.member_sp {
		margin: 8px 0px 24px;
		opacity: 0;
		pointer-events: none;
		transition: .2s ease-out;
	}

	.active .member_sp {
		opacity: 1;
		pointer-events: all;
		position: relative;
	}

	.member__contents {
		display: block;
	}
}

.member__contents li.register__button {
	margin-right: 10px;
}

@media (max-width: 1120px) {
	.member__contents li.register__button {
		margin-right: 6px;
	}
}

@media (max-width: 736px) {
	.member__contents li.register__button {
		margin-right: 0px;
		margin-bottom: 8px;
	}
}

.member__contents li.register__button:last-child {
	margin-right: 0;
}

.member__contents li.register__button a {
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: #EF373C;
	border:1px solid #EF373C;
	color: #FFF;
	height: 40px;
	font-size: 1.3rem;
	line-height: 1;
	font-family: "AxisStd-Medium";
	padding: 0 14px;
	width: 121px;
	box-sizing: border-box;
	position: relative;
	transition-property: color, background;
	transition-duration: .2s, .2s;
}

@media (max-width: 1120px) {
	.member__contents li.register__button a {
		width: 116px;
	}
}


@media (max-width: 736px) {
	.member__contents li.register__button a {
		width: 100%;
		justify-content: center;
		font-size: 1.5rem;
	}
}

.member__contents li.register__button a:hover {
	opacity: 1;
	background: #FFF;
	color: #EF373C;
}

.member__contents li.register__button a::before ,
.member__contents li.register__button a::after {
	content: '';
	display: block;
	position: absolute;
	aspect-ratio:1 / 1;
	transition-property: border-color, background;
	transition-duration: .2s, .2s;
}

.member__contents li.register__button a::before {
	border-radius: 50%;
	background: #FFF;
	width: 14px;
	right: 14px;
	top: 50%;
	translate:0 -50%;
}

.member__contents li.register__button a::after {
	rotate:45deg;
	z-index: 2;
	border:solid #EF373C;
	border-width:1px 1px 0 0;
	width: 4px;
	right: 20px;
	translate:0 -50%;
	margin-top: 5px;
}

.member__contents li.register__button a:hover::before {
	background: currentColor;
}

.member__contents li.register__button a:hover::after {
	border-color: #FFF;
}

.member__contents li.register__button--login a {
	background: #FFF;
	color: #EF373C;
	border:1px solid currentColor;
	width: 108px;
}

@media (max-width: 1120px) {
	.member__contents li.register__button--login a {
		width: 102px;
	}
}

@media (max-width: 736px) {
	.member__contents li.register__button--login a {
		width: 100%;
	}
}

.member__contents li.register__button--login a::before {
	background: currentColor;
}

.member__contents li.register__button--login a::after {
	border-color: #FFF;
}

.member__contents li.register__button--login a:hover {
	background: #EF373C;
	color: #FFF;
	border-color:#EF373C;
}

.member__contents li.register__button--login a:hover::before {
	background: currentColor;
}

.member__contents li.register__button--login a:hover::after {
	border-color: #EF373C;
}

.topMenu-list {
	position: absolute;
	bottom: 0;
	right: -40px;
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: .3s ease-out;
	display: block !important;
	height: 0;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.10);
}

@media (max-width: 1250px) {
	.topMenu-list {
		right: -10px;
	}
}

.topMenu:hover .topMenu-list::before {
	position: absolute;
	top: -50px;
	right: 0;
	width: 68%;
	height: 50px;
	content: '';
	background-color: transparent;
}

.topMenu:hover .topMenu-list {
	opacity: 1;
	pointer-events: all;
	height: auto;
}

.topMenu p a {
	position: relative;
	padding: 3px 20px 2px 31px;
	background: url(https://sendgrid.kke.co.jp/images/common/icon_account.svg) no-repeat left top;
	background-size: contain;
	font-size: 1.3rem;
	color: #5EA7D2;
	font-family: "AxisStd-Medium";
}

.topMenu p a::before {
	position: absolute;
	top: calc(50% - 1px);
	right: 3px;
	width: 6px;
	height: 6px;
	content: '';
	transition: .2s ease-out;
	transform: translateY(-50%) rotate(135deg);
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

@media (max-width: 736px) {
	.member_sp .topMenu {
		margin-inline:24px;
	}
	.member_sp .topMenu p a::before {
		transform: translateY(-50%) rotate(45deg);
		top: calc(50% + 0px);
	}
	.topMenu ul {
		display: none;
	}
}

.topMenu:hover a::before {
	top: calc(50% + 3px);
	transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 736px) {
	.topMenu:hover a::before {
		top: calc(50% + 2px);
	}
}

.topMenu ul {
	padding: 0;
	width: 209px;
	clear: both;
	z-index: 20;
}

.topMenu ul li a {
	position: relative;
	padding: 13px 16px;
	display: flex;
	align-items: center;
	color: #0E1C28;
	font-size: 1.3rem;
	background-color: #FFFFFF;
	border-top: 1px solid #D1D9E2;
	font-family: "AxisStd-Medium";
}

.topMenu ul li a::after {
	content: '';
	display: block;
	aspect-ratio:1 / 1;
	width: 6px;
	position: absolute;
	right: 18px;
	top: 50%;
	translate:0 -50%;
	rotate:45deg;
	border:solid currentColor;
	border-width: 2px 2px 0 0;
}

.topMenu ul li a:has(svg)::after {
	content: none;
}

.topMenu ul li:last-child a {
	color: #5EA7D2;
	box-sizing: border-box;
}

.topMenu ul li a:hover {
	color: #009ed9;
}

.topMenu ul li a svg {
	top: 50%;
	position: absolute;
	right: 16px;
	translate:0 -50%;
}

.topMenu ul li a:hover svg path {
	fill: currentColor;
}

path {
	pointer-events: all;
}

.topMenu ul li:first-child a:hover .cls-1 {
	fill:#009ed9;
}


#gHeader .topMenu {
	display: block;
	position: relative;
	right: auto;
	top: auto;
	float: right;
	overflow: visible;
}

#gHeader .topMenu p.pc {
	/*margin: 0 27px 32px 0;
	display: block;
	width: 154px;*/
	margin-right: 0;
	margin-bottom: -2px;
	line-height: 80px;
}

#gHeader .topMenu p a {
	position: relative;
	padding: 7px 27px 9px 57px;
	background: url(https://sendgrid.kke.co.jp/images/common/icon16.gif) no-repeat left top;
}

#gHeader .topMenu p .on,
#gHeader .topMenu p a:hover {
	color: #64c3e7;
	text-decoration: none;
	background: url(https://sendgrid.kke.co.jp/images/common/icon16_on.gif) no-repeat left top;
}

#gHeader .topMenu p a:before {
	margin-top: -3px;
	width: 12px;
	height: 7px;
	background: url(https://sendgrid.kke.co.jp/images/common/icon15.gif) no-repeat;
	background-size: 12px 7px;
	position: absolute;
	top: 50%;
	right: 0;

	content: "";
}

#gHeader .topMenu p a:hover:before {
	background: url(https://sendgrid.kke.co.jp/images/common/icon15_hover.gif) no-repeat;
}

#gHeader .topMenu p .on:before,
#gHeader .topMenu p a.on:hover:before {
	background-image: url(https://sendgrid.kke.co.jp/images/common/icon15_on.gif);
}

#gHeader .topMenu ul {
	display: none;
	position: relative;
	padding: 0 9px 8px 8px;
	width: 256px;
	clear: both;
	z-index: 20;
	background: url(https://sendgrid.kke.co.jp/images/mypage/top_menu_bg.png) no-repeat center bottom;

	position: absolute;
	top: 80px;
	right: -9px;
}

#gHeader .topMenu ul li a {
	padding: 19px 21px;
	display: block;
	color: #FFF;
	font-size: 1.4rem;
	background-color: #546B81;
	border-bottom: 1px solid #FBFBFC;
}

#gHeader .topMenu ul li a img {
	margin: 2px 0 0 10px;
}

#gHeader .topMenu ul li:last-child a {
	color: #424752;
	background-color: #FBFBFC;
}



/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.sp {
	display: none !important;
}

#main h1 {
	margin-bottom: 20px;
	font-size: 4rem;
	line-height: 1.6;
	font-weight: lighter;
	text-align: center;
	font-family: "AxisStd-Light";
}

#main h2 {
	margin-bottom: 27px;
	font-size: 3.6rem;
	font-weight: lighter;
	text-align: center;
}

.reading h2,
#main h2 .line {
	display: block;
	padding-left: 20px;
	text-align: left !important;
	border-left: 8px solid #64c3e7;
}

#main h3 {
	margin-top: 12px;
	margin-bottom: 33px;
	font-size: 2.4rem;
	font-weight: lighter;
	text-align: center;
}

.reading h3,
#main h3 .line {
	display: block;
	padding-left: 20px;
	text-align: left !important;
	border-left: 4px solid #64c3e7;
}

#main h4 {
	margin-bottom: 25px;
	font-size: 1.8rem;
}

#main .color {
	color: #3ecadb;
}

#main h5 {
	margin-bottom: 25px;
	font-size: 1.6rem;
	font-weight: bold;
}

#main h6 {
	margin-bottom: 23px;
	font-size: 1.6rem;
	font-weight: lighter;
}

/*------------------------------------------------------------
	mainBox
------------------------------------------------------------*/
#main .mainBox {
	margin: 0 auto;
	padding: 47px 0;
	width: 990px;
}

#main .mainBox p,
#main .mainBox ul,
#main .mainBox ol,
#main .mainBox li {
	font-size: 1.6rem;
}

#main .mainBox ul {
	margin-bottom: 40px;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .mainBox ul {
		margin-bottom: 0;
	}
}

#main .mainBox li.item {
	font-size: 1.6rem;
	list-style-type: disc;
	margin-left: 24px;
}

#main .mainBox p {
	margin-bottom: 10px;
	text-align: center;
}

#main .mainBox p.notes {
	font-size: 1.2rem;
}

/*------------------------------------------------------------
	comTxtList
------------------------------------------------------------*/
#main .comTxtList {
	margin: 0 3px 35px;
}

#main .comTxtList li {
	padding-left: 1em;
	font-size: 1.6rem;
	text-indent: -1em;
	line-height: 2.2;
}

/*------------------------------------------------------------
	comTable
------------------------------------------------------------*/
#main .comTable {
	margin-bottom: 45px;
	width: 100%;
	border-collapse: collapse;
}

#main .comTable th,
#main .comTable td {
	padding: 23px 10px 23px 20px;
	font-size: 1.6rem;
	text-align: left;
	vertical-align: middle;
	border: 1px solid #BEBFBF;
}

#main .comTable th {
	color: #FFF;
	font-size: 1.4rem;
	font-weight: normal;
	background-color: #A7B3BE;
}

#main .comTableA th,
#main .comTableA td {
	padding: 17px;
	text-align: center;
}

#main .comTableA th {
	color: #424752;
	font-family: "AxisStd-Regular";
	background-color: #DCDDDD;
}

#main .comTableA td img {
	margin: -5px 0;
}

#main .comTableA th a,
#main .comTableA th .tip {
	margin: 0 -20px 0 20px;
	vertical-align: 2px;
}

#main .comTableA .trStyle th {
	color: #FFF;
	font-size: 1.8rem;
	background-color: #A7B3BE;
}

/*------------------------------------------------------------
	comLinkBtn
------------------------------------------------------------*/
#main .comLinkBtn {
	margin: 0 auto;
	width: 208px;
}

#main .comLinkBtn a {
	padding: 9px 0 10px;
	display: block;
	color: #FFF;
	font-size: 1.4rem;
	text-align: center;
	border-radius: 2px;
	box-shadow: 0 0 20px #DDD;
	background-color: #009ed9;
	position: relative;
	behavior: url(/js/pie.htc);
}

#main .comLinkBtn.comLinkBtnOrange {
	width: 250px;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .comLinkBtn.comLinkBtnOrange {
		width: 65%;
	}
}

#main .comLinkBtn.comLinkBtnOrange a {
	background-color: #ef9641;
	position: relative;
	font-size: 1.8rem;
	border-radius: 8px;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .comLinkBtn.comLinkBtnOrange a {
		font-size: 1.2rem;
		border-radius: 4px;
	}
}

#main .comLinkBtn.comLinkBtnOrange a:before {
	content: '';
	display:block;
	width: 7px;
	height: 7px;
	border:solid #FFF;
	border-width:2px 2px 0 0;
	position: absolute;
	left: calc(50% + 3em + 25px);
	top: 50%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -4px;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .comLinkBtn.comLinkBtnOrange a:before {
		width: 5px;
		height: 5px;
		border-width:1px 1px 0 0;
	}
}


#main .comLinkBtn.comLinkBtnOrange a:after {
	background: #f8ae58;
}

#main .comLinkBtn.comLinkBtnOrange.darkOrange a {
	background: #F07300;
	border:1px solid #F07300;
}

#main .comLinkBtn.comLinkBtnOrange.darkOrange a:hover {
	color: #F07300;
}

#main .comLinkBtn.comLinkBtnOrange.darkOrange a::after {
	background: #FFF;
}

#main .comLinkBtn.comLinkBtnOrange.darkOrange a:hover::before {
	border-color:#F07300;
}

#main .comLinkBtn.comLinkBtnOrange.darkBorder a {
	background: #FFF;
	border:1px solid #F07300;
	color: #F07300;
}

#main .comLinkBtn.comLinkBtnOrange.darkBorder a:not(:hover)::before {
	border-color:#F07300;
}

#main .comLinkBtn.comLinkBtnOrange.darkBorder a:hover {
	color: #FFFFFF;
}

#main .comLinkBtn.comLinkBtnOrange.darkBorder a::after {
	background: #F07300;
}

#main .comLinkBtn a:hover {
	text-decoration: none;
}

#main .comLink {
	margin-bottom: 0 !important;
	position: relative;
}

#main .comLink a {
	padding-right: 16px;
	display: inline-block;
	/* color: #0070cd; */
	font-size: 1.6rem;
	background: url(https://sendgrid.kke.co.jp/images/common/icon02.png) no-repeat right 6px;
}

#main .comLink a:hover {
	background-image: url(https://sendgrid.kke.co.jp/images/common/icon02_over.png);
}

#main .comLinkBtnDisabled a {
	padding: 9px 0 10px;
	display: block;
	color: #424752;
	font-size: 1.4rem;
	text-align: center;
	border-radius: 2px;
	box-shadow: 0 0 20px #DDD;
	background-color: #BEBFBF;
	position: relative;
	cursor: default;
}

#main .comLinkBtnClicked a {
	padding: 9px 0 10px;
	display: block;
	color: #FFF;
	font-size: 1.4rem;
	text-align: center;
	border-radius: 2px;
	box-shadow: 0 0 20px #DDD;
	background-color: #009ed9;
	position: relative;
	cursor: default;
	opacity: 0.3;
}


/*------------------------------------------------------------
	faqLink
------------------------------------------------------------*/
#main .faqLink {
	margin-bottom: 0 !important;
	position: relative;
}

#main .faqLink a {
	padding-right: 16px;
	display: inline-block;
	font-size: 1.6rem;
}

/*------------------------------------------------------------
	comLinkSec
------------------------------------------------------------*/
#main .comLinkSec {
	padding-top: 70px;
	padding-bottom: 50px;
	background-color: #8CC0F0;
	color: #fff;
}

#main .comLinkSec h2 {
	font-size: 24px;
}

#main .comLinkSec p {
	font-size: 16px;
	text-align: center!important;
	margin-bottom: 40px;
}

#main .comLinkSec ul {
	margin: 0 auto;
}

#main .comLinkSec ul .comLinkBtn {
	width: 240px;
}

#main .comLinkSec ul .comLinkBtn.comLinkBtnOrange {
	width: 250px;
}

#main .comLinkSec ul .comLinkBtn a {
	padding: 20px 0;
	box-shadow: 0 0 15px #87B8E5;
}

#main .comLinkSec ul .comLinkBtn.comLinkBtnOrange a {
	padding: 9px 10px 10px 0;
}

#main .comLinkSec ul .comLinkBtn a:after {
	background-color: #38ace2;
}

#main .comLinkSec ul .comLinkBtn.comLinkBtnOrange a:after {
	background:#f8ae58;
}

#main .comLinkSec ul .comLinkBtn.comLinkBtnOrange a:before {
	right: 16px;
	left:auto;
}

#main .comLinkSec ul .link02 {
	margin-top: 45px;
	text-align: center;
}

#main .comLinkSec ul .link02 a {
	padding: 0 20px 0 0;
	display: inline-block;
	font-size: 1.6rem;
	box-shadow: none;
	text-align: center;
	color: #FFF;
	background: url(https://sendgrid.kke.co.jp/images/common/icon04.png) no-repeat right 4px;
}

#main .comLinkSec ul .link02 a:hover {
	opacity: .6;
}


/* 背景色濃いver */
#main .comLinkSec.comLinkSecDeepcolor {
	background: #1A82E2;
}
#main .comLinkSec.comLinkSecDeepcolor .newLinkBtn:not(:hover) {
	border-color:#FFF;
}


/*------------------------------------------------------------
	sns
------------------------------------------------------------*/
#main .sns {
	margin-bottom: 50px;
}

#main .sns li {
	margin-right: 15px;
	float: left;
}

/*------------------------------------------------------------
	mailForm
------------------------------------------------------------*/
#main .mailForm {
	padding: 45px 33px;
	background-color: #FBFBFD;
	box-shadow: 0 0 4px #CCC;
	border: 1px solid #009ed9;
	border-top: 4px solid #009ed9;
	border-radius: 0 0 4px 4px;
	position: relative;
	behavior: url(/js/pie.htc);
}

#main .mailForm dl {
	padding-bottom: 5px;
}

#main .mailForm dt {
	margin-bottom: 15px;
	padding-bottom: 18px;
	font-size: 1.6rem;
	background: url(https://sendgrid.kke.co.jp/images/common/icon13.gif) no-repeat left bottom;
}

#main .mailForm dt .required {
	margin-left: 20px;
	padding: 1px 15px 2px;
	color: #FFF;
	font-size: 1.1rem;
	vertical-align: middle;
	border-radius: 2px;
	background-color: #009ed9;
	position: relative;
	behavior: url(/js/pie.htc);
}

#main .mailForm dt .required02 {
	color: #424752;
	background-color: #BEBFBF;
}

#main .mailForm hr {
	margin-bottom: 40px;
}

#main .mailForm dd {
	margin-bottom: 40px;
	font-size: 1.6rem;
}

#main .mailForm dd li {
	margin-top: 10px;
	margin-bottom: 10px;
}

#main .mailForm dd span {
	margin-top: 10px;
	display: block;
	font-size: 1.2rem !important;
	color: #c74c4d;
}

#main .mailForm dd .txt02 {
	font-size: 1.4rem;
	line-height: 1.7;
}

#main .mailForm dd .txt03 {
	font-size: 1.2rem;
	padding-left: 1rem;
	text-indent: -1rem;
	line-height: 1.7;
}

#main .mailForm .ddStyle01 {
	margin-bottom: 30px;
}

#main .mailForm .last {
	font-size: 1.4rem;
	line-height: 1.7;
}

#main .mailForm dd input[type="text"],
#main .mailForm dd input[type="password"] {
	padding: 10px;
	width: 560px;
	height: 20px;
	font-size: 1.4rem;
	background-color: #FDFDFF;
	border: 1px solid #DCDDDD;
}

#main .mailForm dd input[type="text"]:disabled,
#main .mailForm dd textarea:disabled {
	background-color: #f2f2f2;
}

#main .mailForm dd input[type="text"].wid01,
#main .mailForm dd input[type="password"].wid01 {
	width: 155px;
}

#main .mailForm dd input[type="text"].wid02,
#main .mailForm dd input[type="password"].wid02 {
	width: 380px;
}

#main .mailForm dd input[type="text"].wid03,
#main .mailForm dd input[type="password"].wid03 {
	width: 80px;
}

#main .mailForm dd input[type="text"].email,
#main .mailForm dd input[type="password"].email {
	font-size: 1.6rem;
}

#main .mailForm dd select {
	padding-left: 10px;
	width: 180px;
	height: 40px;
	border: 1px solid #DCDDDD;
}

#main .mailForm dd select.wid04 {
	width: 583px;
}

#main .mailForm dd select.wid03 {
	margin-right: 10px;
	width: 80px;
}

#main .mailForm dd select.year {
	margin-left: 10px;
}

#main .mailForm dd textarea {
	padding: 10px;
	width: 560px;
	height: 104px;
	font-size: 1.4rem;
	background-color: #FDFDFF;
	border: 1px solid #DCDDDD;
}

#main .mailForm .free {
	margin-bottom: 43px;
}

#main .mailForm .free span {
	margin-top: 5px;
	padding: 0 0 4px 30px;
	display: inline-block;
	font-size: 1.2rem;
	background: url(https://sendgrid.kke.co.jp/images/common/icon06.png) no-repeat left top;
	background-size: contain;
}

#main .mailForm .comment {
	font-size: 1.6rem;
	text-align: left;
}

#main .mailForm .agree {
	margin-bottom: 50px;
	text-align: left;
}

#main .mailForm .agree input {
	margin-right: 10px;
}

#main .mailForm .submit {
	margin: 0 auto;
	width: 210px;
}

#main .mailForm .submit input,
#main .mailForm .submit button {
	padding: 12px 0;
	width: 100%;
	display: block;
	text-align: center;
	color: #FFF;
	font-size: 1.4rem;
	border-radius: 4px;
	border: none;
	box-shadow: 0 0 10px #DDD;
	background: -moz-linear-gradient(top,
			#009ed9 0%,
			#009ed9 25%,
			#009ed9);
	background: -webkit-gradient(linear, left top, left bottom,
			from(#009ed9),
			color-stop(0.25, #009ed9),
			to(#009ed9));
	position: relative;
	behavior: url(/js/pie.htc);
	cursor: pointer;
}

#main .mailForm .submit button:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}

#main .mailForm .submit button:disabled {
	color: #424752;
	background: #BEBFBF;
	cursor: default;
}

#main .mailForm .submit button:disabled:after {
	transform: none;
	background: none;
}

#main .mailForm .submit button.clicked {
	opacity: 0.3;
	cursor: default;
}

#main .mailForm .submit button.clicked:after {
	transform: none;
	background: none;
}

#main .mailForm ul.submit {
	width: 278px;
}

#main .mailForm ul.submit .linkBtn,
#main .mailForm ul.submit .comLink {
	margin-top: 25px;
	text-align: center;
}

#main .mailForm ul.submit .faqLink {
	margin-top: 25px;
	text-align: center;
}

#main .mailForm ul.submit .linkBtn a {
	padding: 11px 0;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 1.4rem;
	border-radius: 4px;
	box-shadow: 0 0 10px #DDD;
	color: #424752;
	background: -moz-linear-gradient(top,
			#BEBFBF 0%,
			#BEBFBF 25%,
			#BEBFBF);
	background: -webkit-gradient(linear, left top, left bottom,
			from(#BEBFBF),
			color-stop(0.25, #BEBFBF),
			to(#BEBFBF));
}

#main .mailForm ul.submit .linkBtn a:hover {
	text-decoration: none;
}

#main .mailForm dd input[type="text"].error,
#main .mailForm dd input[type="password"].error,
#main .mailForm dd select.error,
#main .mailForm dd textarea.error {
	border: 1px solid #F07300;
	background-color: #fff2e2;
}

#main .mailForm dd p.error {
	color: #c74c4d;
	font-size: 1.4rem;
	text-align: left;
	font-family: "AxisStd-Regular";
	margin-top: 15px;
}

#main .mainBox .error {
	color: #c74c4d;
	font-size: 1.4rem;
	font-family: "AxisStd-Regular";
	margin-top: 15px;
}

/*------------------------------------------------------------
	comListUl
------------------------------------------------------------*/
#main .mainBox .comListUl {
	width: 990px;
}

#main .mainBox .comListUl li {
	margin-left: 11px;
	padding: 25px 0 35px;
	float: left;
	width: 181px;
	border: 4px solid #CECDD0;
	background-color: #FFF;
}

#main .mainBox .comListUl li:first-child {
	margin-left: 0;
}

#main .mainBox .comListUl li:last-child {
	/*margin-left: 11px;*/
}

#main .mainBox .comListUl li .ttl {
	margin-bottom: 20px;
	font-size: 2.4rem;
	font-family: "AxisStd-Regular";
}

#main .mainBox .comListUl li .ttl img {
	margin: 0 auto 7px;
	display: block;
}

#main .mainBox .comListUl li .txt {
	margin: 0 -4px;
	padding: 10px 0 14px;
	color: #FFF;
	font-size: 1.4rem;
	background-color: #009ed9;
}

#main .mainBox .comListUl li .bg02 {
	background-color: #DCA876;
}

#main .mainBox .comListUl li .bg03 {
	background-color: #A8A8A8;
}

#main .mainBox .comListUl li .bg04 {
	background-color: #DFB355;
}

#main .mainBox .comListUl li .bg05 {
	background-color: #545555;
}

#main .mainBox .comListUl li .txt .price {
	margin-bottom: 3px;
	padding: 0 25px 10px;
	display: inline-block;
	border-bottom: 4px solid #FFF;
}

#main .mainBox .comListUl li .txt .num {
	font-size: 2.4rem;
	font-family: 'Open Sans', sans-serif;
}

#main .mainBox .comListUl li .txt .free {
	font-size: 2.4rem;
}

/*------------------------------------------------------------
	qaSec
------------------------------------------------------------*/
#main .qaSec {
	overflow: hidden;
}

#main .qaSec h2 {
	font-size: 3rem;
}

#main .qaList {
	margin-right: -35px;
}

#main .qaList li {
	margin: 0 30px 30px 0;
	float: left;
	width: 310px;
}

#main .qaList li a {
	padding: 15px 15px 32px;
	display: block;
	/* color: #0070cd; */
	font-size: 1.6rem;
	background-color: #FFF;
	box-shadow: 0 0 4px #CCC;
	border: 4px solid #BEBFBF;
}

#main .qaList li .ttl {
	margin: 0 auto 38px;
	padding-bottom: 10px;
	width: 40px;
	display: block;
	background: url(https://sendgrid.kke.co.jp/images/about/ttl_bg.gif) no-repeat center bottom;
}

#main .qaList li .ttl span {
	display: block;
	padding: 8px 0;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #546B81;
	border-radius: 50%;
	position: relative;
	behavior: url(/js/pie.htc);
}

#main .qaList li a:hover {
	text-decoration: none;
}


/*------------------------------------------------------------
	comPup
------------------------------------------------------------*/
#main .mainBox .tip {
	display: inline-block;
}

#main .mainBox .tip.on img,
#main .mainBox .tip:hover img {
	visibility: hidden;
}

#main .mainBox .tip {
	width: 19px;
	height: 19px;
}

#main .mainBox .tip img {
	width: 100%;
}

#main .mainBox .tip:hover {
	background: url(/images/common/icon06_over.png) no-repeat left top;
	background-size: cover;
}

.comPup {
	position: absolute;
	z-index: 100;
	transform: translate3d(0, 0, 1px);
	opacity: 0;
}

.comPup.show {
	transition: opacity 0.1s;
	opacity: 1;
}

.comPup .pupBox {
	padding: 20px 35px;
	margin: 0 auto;
	width: 242px;
	background-color: #FBFBFC;
	border: 1px solid #009ed9;
	border-top: 4px solid #009ed9;
}

.comPup .pupBox p {
	margin-bottom: 0;
	font-size: 1.2rem;
	line-height: 1.7;
	text-align: left;
}

.comPup .pupBox .ttl {
	margin-bottom: 12px;
	font-size: 1.4rem;
	text-align: center;
}

.comPup .pupBox .ttl img {
	display: block;
	margin: 0 auto 12px;
}

.comPup2 {
	position: absolute;
	z-index: 100;
	transform: translate3d(0, 0, 1px);
	opacity: 0;
}

.comPup2.show {
	transition: opacity 0.1s;
	opacity: 1;
}

.comPup2 .pupBox {
	padding: 50px 55px;
	margin: 0 auto;
	width: 460px;
	background-color: #FBFBFC;
	border: 1px solid #EAEAEA;
	border-radius:8px;
	box-sizing:border-box;
	font-weight: normal;
}

.comPup2 .pupBox p {
	margin-bottom: 0;
	font-size: 1.4rem;
	line-height: 1.75;
	text-align: left;
}

.comPup2 .pupBox p small {
	display: inline-block;
}

.comPup2 .pupBox .ttl {
	margin-bottom: 12px;
	font-size: 1.7rem;
	text-align: center;
}

.comPup2 .pupBox .ttl img {
	display: inline-block;
	width: 20px;
	margin-right: 10px;
	position: relative;
	top: 6px;
}

.pop {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 999;
	background-color: rgba(121, 125, 133, 0.8);
}

.pop .cover {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 200%;
	background-color: rgba(121, 125, 133, 0.8);
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#797D85, endcolorstr=#797D85);
}

.pop .popBox {
	margin: 30px auto;
	padding: 47px 80px;
	width: 600px;
	position: relative;
	background-color: #FBFBFC;
	border: 1px solid #009ed9;
	border-top: 4px solid #009ed9;
	box-shadow: 0 0 6px #666;
	behavior: url(/js/pie.htc);
}

.pop.card .popBox {
	padding: 80px;
	width: 340px;
}

.pop .popBox .ttl {
	margin-bottom: 28px;
	font-size: 1.6rem;
	text-align: center;
}

.pop .popBox .txtBox {
	font-size: 1.4rem;
	padding: 30px 30px 27px;
	background-color: #FFF;
	box-shadow: 0 0 6px #DDD;
	position: relative;
	behavior: url(/js/pie.htc);
}

.pop .popBox .txtBox h3 {
	margin-bottom: 1em;
}

.pop .popBox .txtBox h4 {
	margin-top: 1em;
}

.pop .popBox .txtBox p {}

.pop .popBox .txtBox ul {
	list-style: disc;
	padding-left: 1em;
}

.pop .popBox .txtBox .detail {
	margin-top: 1em;
}

.pop .popBox .txtBox .txt {
	margin-bottom: 25px;
	padding: 4px 0 3px 12px;
	line-height: 1.6;
	border-left: 2px solid #64c3e7;
}

.pop .popBox .agree {
	text-align: center;
	font-size: 1.6rem;
	margin-top: 30px;
}

.pop .popBox .btnList {
	margin: 0 auto;
	width: 304px;
	margin-top: 30px;
}

.pop.alert .popBox .btnList {
	text-align: center;
}

.pop .popBox .btnList li {
	float: right;
	width: 136px;
}

.pop.alert .popBox .btnList {
	float: none;
}

.pop .popBox .btnList li:first-child {
	float: left;
}

.pop.alert .popBox .btnList li:first-child {
	float: none;
	margin: 0 auto;
}

.pop .popBox .btnList li a {
	padding: 9px 0 10px;
	display: block;
	color: #FFF;
	font-size: 1.4rem;
	text-align: center;
	border-radius: 2px;
	background-color: #009ed9;
	position: relative;
	behavior: url(/js/pie.htc);
}

.pop .popBox .btnList li a.disabled {
	opacity: 0.3;
}

.pop .popBox .btnList li a.grey {
	color: #424752;
	background-color: #BEBFBF;
}


/**
 * 通知エリア
 */
#topTxt {
	margin-top: -7px;
	padding: 10px 0;
	color: #FFF;
	font-size: 1.4rem;
	text-align: center;
	background-color: #e39b00;
}

#topTxt span {
	display: block;
	margin: 0 auto;
	width: 960px;
}


/**
 * Error
 */
#main.error {
	padding: 150px 0;
}

#main.error p {
	text-align: center;
}

#main.error .logo {
	margin-bottom: 30px;
}

#main.error .ttl {
	font-size: 5.2rem;
	font-family: 'Open Sans';
	font-weight: 300;
	margin-bottom: 7px;
}

#main.error .description {
	margin-bottom: 44px;
}

#main.error .logo img {
	width: 154px;
	margin-left: -20px;
}

#main.error404 {
	background: url('https://sendgrid.kke.co.jp/images/common/bg_404.jpg') no-repeat center top #8bc0f0;
	height: 1000px;
	width: 100%;
	padding: 0;
	position: relative;
}

#main.error404 p {
	min-width: 990px;
}

#main.error404 p.en {
	position: absolute;
	top: 513px;
	font-size: 2.4rem !important;
	width: 100%;
	font-family: 'Open Sans';
	font-weight: 300;
}

#main.error404 p.jp {
	position: absolute;
	top: 557px;
	width: 100%;
	font-size: 1.4rem !important;
}

#main.error404 p.home {
	position: absolute;
	top: 604px;
	width: 100%;
	font-size: 1.4rem;
}

#main.error p.home .btn {
	width: 208px;
	padding: 10px 0;
	background: #bebfbf;
	border-radius: 2px;
	display: inline-block;
}

#main.error p.home .btn.grey {
	color: #424752;
}


@media all and (min-width: 0px) and (max-width: 736px) {

	a,
	a:link {
		text-decoration: none;
	}

	#main {
		margin: 0 auto;
		width: auto;
	}

	body {
		min-width: inherit;
	}

	/*------------------------------------------------------------
		ヘッダー
	------------------------------------------------------------*/
	#gHeader {
		margin-bottom: 0;
		padding-bottom: 0;
		position: relative;
		margin-top: -52px;
	}

	#gHeader .hInner {
		background: none;
	}

	#gHeader .hInner p {
		line-height: 1.5;
	}

	#gHeader .hInner p a {
		margin-left: auto;
	}

	#gHeader .hInner .innerBox {
		background: #FBFBFD;
	}

	#gHeader .hBox {
		padding: 17px 20px;
		width: auto;
		box-shadow: 0 0 3px #DDD;
		z-index: 99;
		height: auto;
	}

	#gHeader .hBox .logo {
		position: relative;
		top: auto;
		left: auto;
		float: left;
	}

	#gHeader .hBox .logo img {
		width: 92px;
	}

	#gHeader .topMenu .sp {
		display: none !important;
	}

	#gHeader .topMenu p .on:before,
	#gHeader .topMenu p a.on:hover:before {
		background-image: url(https://sendgrid.kke.co.jp/images/common/icon09.png);
	}

	#gHeader .hInner .menu {
		margin-top: 2px;
		float: right;
		display: block;
	}

	#gHeader .hInner .menuBox {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	#gHeader .hInner .menuBox .subMenuBox {
		position: relative;
		width: 100%;
		float: right;
		padding-bottom: 40px;
		background: #434752;
	}

	#gHeader .hInner .menuBox .overlay {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #434752;
		opacity: 0.8;
	}

	#gHeader .hInner .menuBox .close {
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 10;
	}

	#gHeader .hInner .menuBox .close a {
		display: block;
		padding: 10px;
	}

	#gHeader .hInner .menuBox .logo {
		padding: 17px 0 16px;
		float: none;
		text-align: center;
		background-color: #FBFBFC;
		width: auto;
	}

	#gHeader .hInner .menuBox .navi {
		margin: 27px 25px 35px;
	}

	#gHeader .hInner .menuBox .navi li a {
		display: block;
		color: #fbfbfc;
		font-size: 1.2rem;
		padding: 10px 0;
		text-align: center;
		border-bottom: 1px solid #FBFBFC;
	}

	#gHeader .hInner .menuBox .linkBox {
		margin: 0 20px;
		padding-top: 20px;
		background-color: #FBFBFC;
	}

	#gHeader .hInner .menuBox .linkBox .hLink {
		margin: 0 auto 20px;
		float: none;
		width: 86px;
	}

	#gHeader .hInner .menuBox .linkBox .hLink li {
		margin: 0 0 12px;
		display: inherit;
		font-size: 1.1rem;
		line-height: 1.5;
	}

	#gHeader .hInner .menuBox .linkBox .hLink li a {
		padding-left: 14px;
		background: url(https://sendgrid.kke.co.jp/images/common/icon01.gif) no-repeat left 3px;
		background-size: 6px auto;
	}

	#gHeader .hInner .menuBox .linkBox .hLink li a:hover {
		background: url(https://sendgrid.kke.co.jp/images/common/icon01_over.png) no-repeat left 3px;
		background-size: 6px auto;
	}

	#gHeader .hInner .menuBox .linkBox p {
		padding: 22px 14% 13px 20%;
		float: none;
		width: auto;
		font-size: 1.1rem;
		background: url(https://sendgrid.kke.co.jp/images/common/header_bg.gif) repeat-x left top;
		background-size: 2px auto;
		line-height: 1.5;
	}

	#gHeader .hInner .menuBox .linkBox p .btn {
		font-size: 1.1rem;
		box-shadow: 0 0 4px #F0F0F2;
		margin-top: -3px;
	}

	#gHeader .hInner .rBox {
		display: none;
	}

	/*------------------------------------------------------------
		Mypage
	------------------------------------------------------------*/
	#gHeader .hInner .menuBox .linkBox p.default {
		/*display: none;*/
	}

	#gHeader .hInner .menuBox .linkBox p.login {
		padding: 0;
		line-height: 1.5;
	}

	#gHeader .hInner .menuBox .linkBox p.login a {
		display: block;
		text-align: center;
		padding: 22px 0 13px;
	}

	#gHeader .hInner .menuBox .linkBox p.login a:before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url(https://sendgrid.kke.co.jp/images/common/icon16.gif) no-repeat left center;
		background-size: contain;
		vertical-align: middle;
		margin-right: 10px;
	}

	/*------------------------------------------------------------
		gNavi
	------------------------------------------------------------*/
	#gNavi {
		display: none;
	}

	/*------------------------------------------------------------
		pagePath
	------------------------------------------------------------*/
	#pagePath {
		display: none;
	}

	/*------------------------------------------------------------
		フッター
	------------------------------------------------------------*/
	#gFooter {
		padding: 24px 0;
		position: relative;
		overflow: inherit;
	}

	#gFooter .fInner {
		margin: 0 20px;
		width: auto;
	}

	#gFooter .fInner .lBox {
		margin-top: 25px;
		float: none;
		width: auto;
	}

	#gFooter .fInner .lBox .logoBox {
		margin-bottom: 8px;
	}

	#gFooter .fInner .lBox .logoBox .fLogo {
		margin-right: 17px;
	}

	#gFooter .fInner .lBox .logoBox .fLogo img {
		width: 109px;
	}

	#gFooter .fInner .lBox .logoBox .logo02 img {
		width: 115px;
	}

	#gFooter .fInner .lBox p {
		margin-bottom: 15px;
		font-size: 0.9rem;
	}

	#gFooter .fInner .fBox {
		float: none;
		width: auto;
	}

	#gFooter .fInner .fNavi {
		width: 194px;
	}

	#gFooter .fInner .fNavi li {
		padding-top: 10px;
	}

	#gFooter .fInner .fNavi li a {
		padding-left: 15px;
		font-size: 1.1rem;
		background: url(https://sendgrid.kke.co.jp/images/common/icon03.png) no-repeat left 3px;
		background-size: 6px auto;
	}

	#gFooter .fInner .linkInner {
		margin-top: 2px;
		float: right;
		width: 84px;
	}

	#gFooter .fInner .linkInner .btnList {
		margin-top: 0;
	}

	#gFooter .fInner .linkInner .btnList li {
		margin: 0 3px 0 20px;
	}

	#gFooter .fInner .linkInner .btnList li img {
		width: 19px;
	}

	#gFooter .fInner .linkInner .pageTop {
		float: none;
		position: absolute;
		top: -24px;
		left: 50%;
		margin-left: -24px;
	}

	#gFooter .fInner .linkInner .pageTop a {
		display: block;
	}

	#gFooter .fInner .linkInner .pageTop a figure {
		width: 48px;
		height: 48px;
		background: #424752;
		border: 0px;
	}

	#gFooter .fInner .linkInner .pageTop a figure img {
		position: absolute;
		top: 6.5px;
		left: 10px;
	}

	#gFooter .fInner .linkInner .pageTop a span {
		display: block;
		text-align: center;
		margin-top: -7px;
		font-size: 0.9rem;
		transform: translate3d(0, 0, 1px);
	}

	#gFooter .fInner .linkInner .pageTop a:hover figure {
		background: #424752;
	}

	#gFooter .fInner .linkInner .pageTop a:hover figure img {
		animation: none;
	}

	#gFooter .fInner .linkInner .pageTop a:hover span {
		color: #FFF;
	}

	/*------------------------------------------------------------
		common
	------------------------------------------------------------*/
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}

	#main h1 {
		margin-bottom: 15px;
		font-size: 2.4rem;
	}

	#main h2 {
		margin-bottom: 12px;
		font-size: 2.1rem;
	}

	#main .comLinkSec h2 {
		font-size: 18px;
	}

	#main .comLinkSec p {
		font-size: 12px;
		text-align: justify;
	}

	#main h3 {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}

	.reading h2,
	#main h2 .line {
		padding-left: 10px;
		border-left: 4px solid #64c3e7;
	}

	.reading h3,
	#main h3 .line {
		padding-left: 10px;
		border-left: 2px solid #64c3e7;
	}

	#main h4 {
		margin-bottom: 12px;
		font-size: 1.3rem;
	}

	#main h5 {
		margin-bottom: 12px;
		font-size: 1.2rem;
	}

	#main h6 {
		margin-bottom: 12px;
		font-size: 1.2rem;
	}

	#main .mainBox {
		padding: 30px 20px;
		width: auto !important;
	}

	#main .mainBox p,
	#main .mainBox ul,
	#main .mainBox ol,
	#main .mainBox li {
		font-size: 1.2rem;
	}

	#main .mainBox p {
		text-align: left;
	}

	#main .sns {
		margin-bottom: 25px;
	}

	/*------------------------------------------------------------
		comTxtList
	------------------------------------------------------------*/
	#main .comTxtList {
		margin: 0 3px 20px;
	}

	#main .comTxtList li {
		font-size: 1.2rem;
		line-height: 2;
	}

	/*------------------------------------------------------------
		comTable
	------------------------------------------------------------*/
	#main .tabBox {
		margin: 0 -20px 30px 0;
		padding-bottom: 20px;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#main .comTable {
		margin-bottom: 0;
		width: 450px;
	}

	#main .comTable th,
	#main .comTable td {
		padding: 16px 5px 16px 13px;
		font-size: 1.2rem;
	}

	#main .comTableA td {
		padding: 15px 0;
	}

	#main .comTableA th {
		padding: 5px 10px;
		text-align: left;
	}

	#main .comTableA .trStyle th {
		font-size: 1.2rem;
	}

	#main .comTableA td img {
		margin: 0;
		width: 15px;
	}

	#main .comTableA th .tip {
		margin: 0 -6px 0 6px;
		vertical-align: 1px;
	}

	#main .comTableA th .tip img {
		width: 13px;
	}

	#main .comTableA th .tip:hover {
		background-size: 13px auto;
	}

	/*------------------------------------------------------------
		comLinkBtn
	------------------------------------------------------------*/
	#main .comLinkBtn {
		width: 65%;
	}

	#main .comLinkBtn a {
		padding: 10px 0 12px;
		font-size: 1.2rem;
		box-shadow: none;
	}

	#main .comLink {
		margin-bottom: 0 !important;
		text-align: center !important;
	}

	#main .comLink a {
		padding-right: 16px;
		font-size: 1.2rem;
		background: url(https://sendgrid.kke.co.jp/images/common/icon02.png) no-repeat right 4px;
		background-size: 6px auto;
	}

	/*------------------------------------------------------------
		faqLink
	------------------------------------------------------------*/
	#main .faqLink {
		margin-bottom: 0 !important;
		text-align: center !important;
	}

	#main .faqLink a {
		padding-right: 16px;
		font-size: 1.2rem;
		background-size: 6px auto;
	}

	/*------------------------------------------------------------
		comLinkSec
	------------------------------------------------------------*/
	#main .comLinkSec {
		padding: 35px 20px 50px;
	}

	#main .comLinkSec ul {
		width: 65%;
	}

	#main .comLinkSec ul.width_auto {
		width: 100%;
	}

	#main .comLinkSec ul .comLinkBtn {
		width: auto;
	}

	#main .comLinkSec ul .comLinkBtn a {
		padding: 12px 0;
		box-shadow: none;
	}

	#main .comLinkSec ul .comLinkBtn.comLinkBtnOrange a {
		padding: 10px 0 11px;
	}

	#main .comLinkSec ul .link02 {
		margin-top: 25px;
	}

	#main .comLinkSec ul .link02 a {
		font-size: 1.2rem;
		background: url(https://sendgrid.kke.co.jp/images/common/icon04.png) no-repeat right 4px;
		background-size: 7px auto;
	}

	/*------------------------------------------------------------
		mailForm
	------------------------------------------------------------*/
	#main .mailForm {
		padding: 25px 20px;
		box-shadow: 0 0 4px #CCC;
		border-top: 2px solid #009ed9;
		border-radius: 0 0 2px 2px;
	}

	#main .mailForm dl {
		padding-bottom: 7px;
	}

	#main .mailForm dt {
		margin-bottom: 7px;
		padding-bottom: 8px;
		font-size: 1.2rem;
		background: url(https://sendgrid.kke.co.jp/images/common/icon13.gif) no-repeat left bottom;
		background-size: 10px auto;
	}

	#main .mailForm dt .required {
		margin-left: 10px;
		padding: 1px 10px;
		font-size: 0.9rem;
	}

	#main .mailForm dd {
		margin-bottom: 22px;
		font-size: 1.2rem;
	}

	#main .mailForm .ddStyle01 {
		margin-bottom: 23px;
	}

	#main .mailForm dd span {
		margin-top: 7px;
		font-size: 0.9rem;
	}

	#main .mailForm dd .txt02 {
		font-size: 0.9rem;
		line-height: 1.6;
	}

	#main .mailForm .last {
		font-size: 1.2rem;
		line-height: 1.6;
	}

	#main .mailForm .free {
		margin-bottom: 22px;
	}

	#main .mailForm .free span {
		padding: 0 0 0 20px;
		font-size: 0.9rem;
		background: url(https://sendgrid.kke.co.jp/images/common/icon06.png) no-repeat left top;
		background-size: 14px auto;
	}

	#main .mailForm dd input[type="text"],
	#main .mailForm dd input[type="password"] {
		padding: 5px 2%;
		width: 96%;
		height: 18px;
		font-size: 0.9rem;
		-webkit-appearance: none;
	}

	#main .mailForm dd input[type="text"].wid01,
	#main .mailForm dd input[type="password"].wid01 {
		width: 96%;
	}

	#main .mailForm dd input[type="text"].wid02,
	#main .mailForm dd input[type="password"].wid02 {
		width: 96%;
	}

	#main .mailForm dd input[type="text"].wid03,
	#main .mailForm dd input[type="password"].wid03 {
		width: 20%;
	}

	#main .mailForm dd input[type="text"].email {
		font-size: 1.2rem;
	}

	#main .mailForm dd select {
		padding-left: 2%;
		width: 55%;
		height: 30px;
		font-size: 0.9rem;
	}

	#main .mailForm dd select.wid04 {
		width: 55%;
	}

	#main .mailForm dd select.wid03 {
		width: 20%;
	}

	#main .mailForm dd textarea {
		padding: 5px 2%;
		width: 96%;
		height: 86px;
		font-size: 0.9rem;
		-webkit-appearance: none;
	}

	#main .mailForm dd .note {
		line-height: 1.7;
	}

	#main .mailForm hr {
		margin-bottom: 22px;
	}

	#main .mailForm .agree {
		margin-bottom: 20px;
		padding-left: 2.5em;
		display: none;
		text-indent: -2.5em;
	}

	#main .mailForm .submit {
		width: 82%;
	}

	#main .mailForm ul.submit {
		width: 82%;
	}

	#main .mailForm ul.submit .linkBtn {
		margin-top: 15px;
	}

	#main .mailForm ul.submit li input,
	#main .mailForm ul.submit .linkBtn a {
		font-size: 1rem;
	}

	#main .mailForm dd p.error {
		font-size: 1.2rem;
		margin-top: 10px;
	}

	/*------------------------------------------------------------
		comListUl
	------------------------------------------------------------*/
	#main .mainBox .slide {
		padding: 0;
		position: relative;
	}

	#main .mainBox .slide .slideBox {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#main .mainBox .slide .next,
	#main .mainBox .slide .prev {
		position: absolute;
		top: 0;
		width: 20px;
		height: 100%;
		background: rgba(66, 71, 82, 0.2);
	}

	#main .mainBox .slide .next {
		right: 0;
	}

	#main .mainBox .slide .prev {
		left: 0;
	}

	#main .mainBox .slide .next img,
	#main .mainBox .slide .prev img {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -5.5px;
	}

	#main .mainBox .slide .next img {
		margin-left: -2px;
	}

	#main .mainBox .slide .prev img {
		margin-left: -4px;
	}

	#main .mainBox .comListUl {
		overflow: hidden;
		width: auto;
	}

	#main .mainBox .comListUl li {
		margin: 0 0 0 6px;
		padding: 10px 0 13px;
		width: 72px;
		border: 2px solid #CECDD0;
	}

	#main .mainBox .comListUl li:fitst-child {
		margin-left: 0;
	}

	#main .mainBox .comListUl li .ttl {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 8px;
		font-size: 0.9rem;
		text-align: center;
	}

	#main .mainBox .comListUl li .ttl img {
		margin-bottom: 3px;
		width: 10px;
	}

	#main .mainBox .comListUl li .txt {
		margin: 0 -2px;
		padding: 4px 0 6px;
		font-size: 0.6rem;
		text-align: center;
	}

	#main .mainBox .comListUl li .txt .price {
		padding: 0 10px 3px;
		border-bottom: 1px solid #FFF;
	}

	#main .mainBox .comListUl li .txt .num {
		font-size: 0.9rem;
	}

	#main .mainBox .comListUl li .txt .free {
		font-size: 1.2rem;
	}

	/*------------------------------------------------------------
		qaSec
	------------------------------------------------------------*/
	#main .qaSec h2 {
		margin-bottom: 18px;
		font-size: 1.5rem;
	}

	#main .qaList {
		margin-right: 0;
	}

	#main .qaList li {
		margin: 0 0 25px;
		float: none;
		width: auto;
	}

	#main .qaList li a {
		padding: 0;
		display: table;
		font-size: 1.2rem;
		background: none;
		box-shadow: none;
		border: none;
	}

	#main .qaList li .ttl {
		padding: 0 10px 0 0;
		padding-bottom: 0;
		width: 36px;
		display: table-cell;
		font-size: 1.4rem;
		background: none;
	}

	#main .qaList li .ttl span {
		padding: 8px 0;
	}

	#main .qaList li .txt {
		display: table-cell;
		vertical-align: middle;
	}

	/*------------------------------------------------------------
		qaSec
	------------------------------------------------------------*/
	#main .mainBox .tip {
		width: 14px;
		height: 14px;
	}

	#main .mainBox .tip:hover {
		background: url(https://sendgrid.kke.co.jp/images/common/icon06_over.png) no-repeat left top;
		background-size: 16px auto;
	}

	.cover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 120%;
		z-index: 200;
		background: #000;
		opacity: 0.8;
		overflow: hidden;
	}

	.comPup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 300;
		overflow: hidden;
	}

	.comPup .pupBox {
		padding: 15px 30px;
		width: 280px;
		height: auto;
		max-height: 90%;
		overflow: auto;
		border-top: 3px solid #009ed9;
		position: relative;
		z-index: 220;
		box-sizing: border-box;
	}

	.comPup .pupBox .close {
		position: absolute;
		right: 13px;
		top: 19px;
	}

	.comPup .pupBox .close a {
		margin: 0;
	}

	.comPup .pupBox .ttl {
		font-size: 1.2rem;
	}

	.comPup .pupBox .ttl img {
		width: 18px;
	}

	.comPup2 {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 300;
		overflow: hidden;
	}
	
	.comPup2 .pupBox {
		padding: 55px 23px;
		max-width: 350px;
		width: calc(100% - 22px);
		height: auto;
		max-height: 90%;
		overflow: auto;
		position: relative;
		z-index: 220;
		box-sizing: border-box;
		border:none;
	}
	
	.comPup2 .pupBox .close {
		position: absolute;
		right: 16px;
		top: 16px;
		width: 24px;
	}
	
	.comPup2 .pupBox .close a {
		margin: 0;
	}
	
	.comPup2 .pupBox .close img {
		width: 100%;
	}
	
	.comPup2 .pupBox .ttl {
		font-size: 1.6rem;
	}
	
	.comPup2 .pupBox .ttl img {
		top: 4px;
	}

	.pop .popBox {
		padding: 25px 6% !important;
		width: 80% !important;
		border-top: 2px solid #009ed9;
		z-index: 210;
	}

	.pop .popBox .ttl {
		margin-bottom: 20px;
		font-size: 1.2rem;
	}

	.pop .popBox .txtBox {
		font-size: 1.2rem;
		padding: 25px 30px 23px;
	}

	.pop .popBox .txtBox h3 {
		margin-bottom: 1em;
	}

	.pop .popBox .txtBox ul {
		list-style: disc;
		padding-left: 1em;
	}

	.pop .popBox .agree {
		font-size: 1.2rem;
		margin-top: 20px;
	}

	.pop .popBox .txtBox p {
		font-size: 1.2rem;
	}

	.pop .popBox .txtBox .txt {
		margin: 0 5px 15px;
		padding: 0 0 2px 12px;
	}

	.pop .popBox .btnList {
		margin-top: 20px;
		width: 209px;
	}

	.pop .popBox .btnList li {
		margin-top: 15px;
		float: none !important;
		width: auto;
	}


	/**
	 * 通知エリア
	 */
	#topTxt {
		margin-top: 0;
		padding: 13px 0;
		font-size: 0.9rem;
	}

	#topTxt span {
		width: auto;
	}


	/**
	 * Error
	 */
	#main.error {
		padding: 92px 0;
	}

	#main.error p {
		text-align: left;
	}

	#main.error .logo {
		margin-bottom: -2px;
	}

	#main.error .ttl {
		font-size: 2.6rem;
		font-family: 'Open Sans';
		font-weight: 300;
		margin-bottom: 7px;
	}

	#main.error .description {
		margin-bottom: 27px;
	}

	#main.error .logo img {
		width: 70px;
		margin-left: 0;
	}

	#main.error p.home .btn {
		width: 208px;
		padding: 10px 0;
		background: #bebfbf;
		border-radius: 2px;
		display: inline-block;
	}




	#main.error404 {
		background: url('https://sendgrid.kke.co.jp/images/common/sp_bg_404.jpg') no-repeat center top #8cc0f0;
		height: 360px;
		background-size: cover;
		padding: 0;
	}

	#main.error404 p {
		margin: 0;
		min-width: auto;
	}

	#main.error404 p.en {
		top: 185px;
		/*238px;*/
		font-size: 1.8rem !important;
		text-align: center;
	}

	#main.error404 p.jp {
		top: 215px;
		/*268px;*/
		font-size: 1.0rem !important;
		text-align: center;
	}

	#main.error p.home {
		text-align: center;
	}

	#main.error404 p.home {
		top: 244px;
		/* 297px; */
		width: 100%;
	}

	#main.error p.home .btn {
		width: 208px;
		padding: 10px 0;
		background: #bebfbf;
		border-radius: 2px;
		display: inline-block;
		text-align: center;
	}

	#main.error404 p {
		text-align: center;
	}
}





/*------------------------------------------------------------
	プラン表（2017年11月更新）
------------------------------------------------------------*/
#main .plan2 {
	font-family: 'Open Sans', "AxisStd-Light", sans-serif;
}

#main .plan2 * {
	box-sizing: border-box;
}

#main .plan2 .planList {
	border-bottom: #dadada 1px solid;
	margin-bottom: 30px;
	display: flex;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList {
		display: block;
		border: 0;
		margin-bottom: 30px;
	}
}

#main .plan2 .planList .group {
	/* float: left; */
	border-left: #dadada 1px solid;
}

#main .plan2 .planList .group:last-child {
	border-right: #dadada 1px solid;
}

#main .plan2 .planList .group.free {
	/* width: 124px; */
	flex-grow: 1;
}

#main .plan2 .planList .group.essentials {
	/* width: 246px; */
	flex-grow: 2;
}

#main .plan2 .planList .group.pro {
	/* width: 620px; */
	flex-grow: 5;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group {
		margin-bottom: 8px;
	}

	#main .plan2 .planList .group.free,
	#main .plan2 .planList .group.essentials,
	#main .plan2 .planList .group.pro {
		width: 100%;
	}

	#main .plan2 .planList .group:last-child {
		border-right: 0;
	}
}

#main .free-bg {
	background-color: #009ed9;
	color: #FFF;
}

#main .essentials-bg {
	background-color: #646872;
	color: #FFF;
}

#main .pro-bg {
	background-color: #1a82e2;
	color: #FFF;
}

#main .plan2 .planList .group h2 {
	font-size: 1.8rem;
	margin-bottom: 0;
	/* padding: 8px 0; */
	height: 37px;
	line-height: 37px;
}

#main .plan2 .planList .group.free h2 {
	height: 70px;
	line-height: 70px;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group h2 {
		height: auto !important;
		line-height: 1 !important;
		padding: 10px 0;
	}

	#main .plan2 .planList .group .groupHeader {
		position: relative;
	}

	#main .plan2 .planList .group .groupHeader a {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20px;
	}

	#main .plan2 .planList .group .groupHeader a img {
		width: 13px;
	}
}

#main .plan2 .planList .group .subGroup {
	display: flex;
}

#main .plan2 .planList .group.free .subGroup {
	background-color: #e7f4f9;
}

#main .plan2 .planList .group.essentials .subGroup {
	background-color: #ebebec;
}

#main .plan2 .planList .group.pro .subGroup {
	background-color: #e7ecf2;
}





@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group .subGroup {
		display: block;
		border-right: 1px solid #dadada;
		position: relative;
		overflow: hidden;
	}
}

#main .plan2 .planList .group .subGroup .planItem {
	border-left: #dadada 1px solid;
	flex-grow: 1;
	padding: 0 0 17px;
	width: 123px;
}

#main .plan2 .planList .group .subGroup .planItem:first-child {
	border-left: 0;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group .subGroup .planItem {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		border: 0;
		border-bottom: 1px solid #dbdbdb;
		padding: 0;
		position: relative;
	}

	#main .plan2 .planList .group.free .subGroup,
	#main .plan2 .planList .group.free .subGroup .planItem {
		position: static;
	}
}

#main .plan2 .planList .group .subGroup .planItem .subPlanName {
	font-size: 1.2rem;
	height: 33px;
	line-height: 33px;
	color: #FFF;
	margin: 0;
	padding: 0;
	text-align: center;
}

#main .plan2 .planList .group.essentials .subGroup .planItem .subPlanName {
	background: #a7a9af;
}

#main .plan2 .planList .group.pro .subGroup .planItem .subPlanName {
	background: #80b7ea;
}

#main .plan2 .planList .group .subGroup .planItem .subPlanName .num {
	font-size: 1.6rem;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group .subGroup .planItem .subPlanName {
		width: 100%;
	}
}

#main .plan2 .planList .group .subGroup .planItem .price {
	margin-top: 20px;
	font-size: 1.4rem;
}

#main .plan2 .planList .group .subGroup .planItem .price:after {
	content: '';
	display: block;
	width: 16px;
	height: 1px;
	background: #dadada;
	margin: 14px auto;
}

#main .plan2 .planList .group .subGroup .planItem .price strong {
	display: block;
	font-size: 2.8rem;
	letter-spacing: -0.03em;
}

#main .plan2 .planList .group.free .subGroup .planItem .price strong {
	color: #009ed9;
}

#main .plan2 .planList .group .subGroup .planItem .feature {
	font-size: 1.4rem;
	margin: 15px 0 0;
}

#main .plan2 .planList .group .subGroup .planItem .feature .ttl {
	display: block;
	font-size: 1.2rem;
	color: #7d7d7d;
}

#main .plan2 .planList .group .subGroup .planItem .feature .num {
	display: block;
	font-size: 2.0rem;
	letter-spacing: -0.03em;
	font-weight: lighter;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group .subGroup .planItem .price {
		width: 27%;
		border-right: 1px solid #dbdbdb;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin: 0;
		padding: 20px 0;
		font-size: 1.1rem;
	}

	#main .plan2 .planList .group .subGroup .planItem .price:after {
		display: none;
	}

	#main .plan2 .planList .group .subGroup .planItem .price strong {
		display: inline-block;
		font-size: 1.6rem;
	}

	#main .plan2 .planList .group .subGroup .planItem .features {
		width: 73%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20px 6.25vw;
	}

	#main .plan2.changePlan .planList .group .subGroup .planItem .features {
		position: relative;
	}

	#main .plan2 .planList .group .subGroup .planItem .feature {
		font-size: 1.1rem;
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		align-items: center;
		margin: 0;
	}

	#main .plan2.changePlan .planList .group .subGroup .planItem .feature {
		display: block;
		margin-top: 20px;
	}

	#main .plan2.changePlan .planList .group .subGroup .planItem .feature:first-child {
		margin-top: 0;
	}

	#main .plan2 .planList .group .subGroup .planItem .feature span {
		display: block;
		white-space: nowrap;
	}

	#main .plan2.changePlan .planList .group .subGroup .planItem .feature span {
		display: inline;
	}

	#main .plan2 .planList .group .subGroup .planItem .feature .ttl {
		font-size: 1.1rem;
		color: #7d7d7d;
		width: 100%;
	}

	#main .plan2.changePlan .planList .group .subGroup .planItem .feature .ttl {
		display: block;
		width: auto;
	}

	#main .plan2 .planList .group .subGroup .planItem .feature .num {
		display: inline-block;
		font-size: 1.4rem;
		padding: 0 .2em;
	}

	#main .plan2.changePlan .planList .group .subGroup .planItem .feature .num {
		padding: 0;
	}
}

#main .plan2 .planList .group .subGroup .planItem .change {
	font-size: 1.2rem;
	margin-top: 3.0rem;
	padding: 0 .8rem;

	display: flex;
	-webkit-align-items: center;
	/* 縦方向中央揃え（Safari用） */
	align-items: center;
	/* 縦方向中央揃え */
	-webkit-justify-content: center;
	/* 横方向中央揃え（Safari用） */
	justify-content: center;
}

#main .plan2 .planList .group .subGroup .planItem .change .btn {
	display: block;
	padding: 7px 0;
	width: 100%;
	color: #FFF;
	text-align: center;
	border-radius: 2px;
	box-shadow: 0 0 10px #DDD;
	background-color: #009ed9;
	position: relative;
	behavior: url(/js/pie.htc);
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group .subGroup .planItem .change {
		font-size: 1.1rem;
		display: block;
		margin: 0;
		padding: 0;
		height: auto !important;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 6.25vw;
		width: 24vw;
		text-align: center;
	}

	#main .plan2 .planList .group .subGroup .planItem .change a {
		font-size: 1.0rem;
		letter-spacing: -.05em;
	}
}


#main .plan2 .planList .group .more {
	display: none;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .planList .group .more {
		display: block;
		overflow: hidden;
		border: 1px solid #dadada;
		border-top: 0;
		border-left: 0;
	}

	#main .plan2 .planList .group .more.open {
		/* display: none; */
	}

	#main .plan2 .planList .group .more .more-button {
		display: block;
		font-size: 1.2rem;
		text-align: center;
		cursor: pointer;
		padding: 1em 0;
		background: #e7ecf2;
		position: relative;
	}

	#main .plan2 .planList .group .more .more-button .icon {
		position: absolute;
		right: 20px;
		top: 50%;
		width: 16px;
		height: 9px;
		transform: translateY(-50%);
	}

	#main .plan2 .planList .group .more.open .more-button .icon {
		transform: translateY(-50%) rotate(180deg);
	}
}



#main .plan2 .comLinkBtn {
	margin-bottom: 50px;
}



#main .plan2 .featureList {
	margin-bottom: 45px;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan2 .featureList {
		margin-bottom: 30px;
	}
}

.fixheader {
	transition: .3s all;
}

@media (max-width: 736px) {
	.fixheader {
		top: 50px !important;
	}
}

#main .plan2 .featureList table,
.fixheader {
	width: 100%;
	border-collapse: collapse;
	position: relative;
}

@media all and (min-width: 0) and (max-width: 736px) {

	#main .plan2 .featureList .slideInner,
	.fixheader {
		padding: 0 20px;
		width: 100%;
		margin-bottom: 0;
	}

	#main .plan2 .featureList table,
	.fixheader {
		width: 100%;
	}
}

table.fixheader * {
	box-sizing: border-box;
}

#main .plan2 .featureList table th,
#main .plan2 .featureList table td,
.fixheader th,
.fixheader td {
	border: 1px solid #dadada;
	text-align: center;
	height: 50px;
	padding: 14px 20px;
	font-size: 1.4rem;
	line-height: 18px;
}

#main .plan2 .featureList table td:first-child {
	text-align: left;
}

#main .plan2 .featureList table td a {
	padding-right: 16px;
	display: inline;
	font-size: 1.4rem;
	background: url(https://sendgrid.kke.co.jp/images/common/icon02.png) no-repeat right 3px;
}

#main .plan2 .featureList table td a:hover {
	background-image: url(https://sendgrid.kke.co.jp/images/common/icon02_over.png);
}

#main .plan2 .featureList table th:first-child,
#main .plan2 .featureList table td:first-child .fixheader th:first-child,
.fixheader td:first-child {
	text-align: left;
	padding-right: 0;
}

#main .plan2 .featureList table td:nth-child(2),
.fixheader td:nth-child(2) {
	background-color: #e7f4f9;
}

#main .plan2 .featureList table td:nth-child(3),
.fixheader td:nth-child(3) {
	background-color: #ebebec;
}

#main .plan2 .featureList table td:nth-child(4),
.fixheader td:nth-child(4) {
	background-color: #e7ecf2;
}

#main .plan2 .featureList table td .none,
.fixheader td .none {
	display: inline-block;
	height: 1px;
	width: 15px;
	background-color: #000;
	text-indent: -9999px;
	line-height: 0;
}

#main .plan2 .featureList .tip {
	margin-left: 13px;
	vertical-align: 2px;
}

#main .plan2 .featureList table th,
.fixheader th {
	font-size: 1.8rem;
	font-family: "AxisStd-Medium";
	font-weight: normal;
}

#main .plan2 .featureList table thead {}

#main .plan2 .featureList table thead td,
.fixheader td {
	border: 0;
}

#main .plan2 .featureList table thead th,
.fixheader th {
	font-size: 1.8rem;
	text-align: center;
	border-right: 1px solid #dadada;
	border-top: 0;
	border-left: 0;
}

#main .plan2 .featureList table thead th:last-child,
.fixheader th:last-child {
	border: none;
}

@media all and (max-width: 375px) {
	.fixheader colgroup col:nth-child(1) {
		width: 34.9%;
	}

	.fixheader colgroup col:nth-child(2) {
		width: 21.3%;
	}

	.fixheader colgroup col:nth-child(3) {
		width: 22.2%;
	}
}

@media all and (max-width: 320px) {
	.fixheader colgroup col:nth-child(1) {
		width: 42.1%;
	}

	.fixheader colgroup col:nth-child(2) {
		width: 18.1%;
	}
}

@media all and (min-width: 0) and (max-width: 736px) {

	#main .plan2 .featureList table th,
	#main .plan2 .featureList table td,
	.fixheader th,
	.fixheader td {
		font-size: 1.1rem;
		line-height: 1.5;
		padding: 5px 10px;
	}

	#main .plan2 .featureList table td a {
		font-size: 1.2rem;
		background: url(https://sendgrid.kke.co.jp/images/common/icon02.png) no-repeat right 4px;
		background-size: 6px auto;
	}

	#main .plan2 .featureList table th:first-child,
	#main .plan2 .featureList table td:first-child,
	.fixheader th:first-child,
	.fixheader td:last-child {
		padding-right: 10px;
	}

	#main .plan2 .featureList table th.hasInfo,
	#main .plan2 .featureList table td.hasInfo,
	.fixheader th.hasInfo,
	.fixheader td.hasInfo {
		padding-right: 22px;
		position: relative;
	}

	#main .plan2 .featureList table td .tip {
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
	}

	#main .mainBox .tip:hover {
		background-size: 14px auto;
	}

	#main .plan2 .featureList table td img,
	.fixheader td img {
		width: 14px;
	}

	#main .plan2 .featureList table thead th,
	.fixheader th {
		font-size: 1.2rem;
	}

	#main .plan2 .featureList table thead th.essentials-bg,
	.fixheader th.essentials-bg {
		letter-spacing: -0.05em;
	}

	#main .plan2 .featureList table th {
		font-size: 1.3rem;
	}


}


/*------------------------------------------------------------
	プラン表（2023年9月更新）
------------------------------------------------------------*/

#main .plan3 .planListScrollWrap {
	position: relative;
}
#main .plan3 .scrollHint {
	display: none;
}
#main .plan3 .planList {
	display: flex;
}
#main .plan3 .planList .group.head {
	width: 97px;
	background: #FFF;
}
#main .plan3 .planList .group.free {
	width: 106px;
}
#main .plan3 .planList .group.essentials {
	width: 222px;
}
#main .plan3 .planList .group.pro {
	flex:1;	
}
#main .plan3 .planList .group.head .category {
	font-size: 1.2rem;
	display:flex;
	align-items: center;
	justify-content: center;
	border:  solid #EBECED;
	border-width:0 1px 1px 1px;
	font-family: "AxisStd-Medium";
	height: 81px;
	text-align: center;
}
#main .plan3 .planList .group.head .category:nth-child(1) {
	border-radius:8px 8px 0 0;
	border-top-width:1px;
	height: 104px;
}
#main .plan3 .planList .group.head .category:nth-child(2) {
	height: 79px;
}
#main .plan3 .planList .group.head .category:nth-child(3) {
	height: 65px;
}
#main .plan3 .planList .groupHeader {
	height: 72px;
	display:flex;
	align-items: center;
	justify-content: center;
	border-radius:8px 8px 0 0;
	color: #FFF;
	border-left:1px solid #FFF;
}
#main .plan3 .planList .group.free .groupHeader {
	background: #00ADE2;
}
#main .plan3 .planList .group.essentials .groupHeader {
	background: #1A82E2;
}
#main .plan3 .planList .group.pro .groupHeader {
	background: #294661;
}
#main .plan3 .planList .groupHeader h2 {
	font-size: 1rem;
	font-family: "AxisStd-Regular";
	margin:0;
}
#main .plan3 .planList .groupHeader h2 span {
	font-size: 2.4rem;
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
	line-height: 1;
	display: inline-block;
}
#main .plan3 .planList .subGroup {
	display: flex;
	margin-top: 1px;
}
#main .plan3 .planList .subPlanName {
	height: 33px;
	display:flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #FFF;
	border-left:1px solid #FFF;
}
#main .plan3 .planList .group.free .subPlanName {
	background: rgba(0, 173, 226, .8);
}
#main .plan3 .planList .group.essentials .subPlanName {
	background: rgba(26, 130, 226, .8);
}
#main .plan3 .planList .group.pro .subPlanName {
	background: rgba(41, 70, 97, .8);
}
#main .plan3 .planList .subPlanName h3 {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}
#main .plan3 .planList .subPlanName .num {
	font-size: 2rem;
	letter-spacing: 0;
	display: inline-block;
}
#main .plan3 .planList .planItem {
	background: #F8F8F8;
	width: 100%;
}
#main .plan3 .planList .planItem .cell {
	border:solid #EBECED;
	border-width:0 1px 1px 0;
	height: 79px;
	display:flex;
	justify-content: center;
	align-items: center;
}
#main .plan3 .planList .planItem .cell:nth-child(3){
	height: 65px;
}
#main .plan3 .planList .planItem .cell:nth-child(4){
	height: 81px;
}
#main .plan3 .planList .planItem .cell:nth-child(5){
	height: 81px;
}
#main .plan3 .planList .planItem .cell:nth-child(6){
	height: 81px;
}
#main .plan3 .planList .group:last-child .planItem:last-child .cell {
	border-right-width:1px;
}
#main .plan3 .planList .group .planItem .feature {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
	font-family: "AxisStd-Regular";
}
#main .plan3 .planList .group .planItem .feature.small {
	font-size: 1rem;
	line-height: 1.7;
}
#main .plan3 .planList .group .planItem .feature.blue {
	color: #1A82E2;
}
#main .plan3 .planList .group .planItem .feature .num {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 2.4rem;
	margin: 0 2px;
}
#main .plan3 .planList .group .planItem .feature .num.small {
	font-weight: 400;
	font-size: 2.0rem;
}
#main .plan3 .planList .group .planItem .feature .blank {
	display: inline-block;
	-webkit-transform: scaleX(1.8);
	-moz-transform: scaleX(1.8);
	-ms-transform: scaleX(1.8);
	-o-transform: scaleX(1.8);
	transform: scaleX(1.8);
}
#main .plan3 .planList .group .planItem .planBtn.comLinkBtn {
	width: 84px;
	height: 53px;
	z-index: 0;
}
#main .plan3 .planList .group .planItem .planBtn.comLinkBtn a {
	height: 100%;
	font-size: 1rem;
	line-height: 1.7;
	box-shadow:none;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content: center;
}
#main .plan3 .planList .group .planItem .planBtn.comLinkBtn a::before {
	content: none;
}
#main .plan3 .planList .tip {
	width: 13px;
	height: 13px;
	margin-left: 2px;
	position: relative;
	top: 2px;
}


/* ホバー非対応時のみスクロールヒント表示 */
@media (any-hover: none) {
	#main .plan3 .scrollHint{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		opacity: .5;
		display:flex;
		align-items: center;
		justify-content: center;
		box-sizing:border-box;
		-webkit-transition: opacity .3s;
		-moz-transition: opacity .3s;
		-ms-transition: opacity .3s;
		-o-transition: opacity .3s;
		transition: opacity .3s;
	}
	#main .plan3.is-drag .scrollHint{
		opacity: 0;
		pointer-events:none;
	}
	#main .plan3 .scrollHint img {
		width: 100px;
	}
}


@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan3 .planListScrollWrap {
		overflow: auto;
	}
	#main .plan3 .planListScrollWrap .simplebar-wrapper {
		padding-bottom: 12px;
	}
	#main .plan3 .planListScrollWrap .simplebar-track.simplebar-horizontal {
		height: 4px;
		background: #EAEAEA;
		border-radius:999px;
	}
	#main .plan3 .planListScrollWrap .simplebar-scrollbar.simplebar-visible:before {
		height: 100%;
		top: 0;
		bottom: auto;
		background: #B0B0B0;
		opacity: 1;
	}
	#main .plan3 .planList {
		white-space:nowrap;
		width: 990px;
	}
	#main .plan3 .planList .sp-fix-left {
		position: sticky;
		left: 0;
		z-index: 2;
	}
	#main .plan3 .planList .tip {
		width: 10px;
		height: 10px;
		top: 4px;
		background-size: cover;
	}
}



/*------------------------------------------------------------
	機能一覧（2023年9月更新）
------------------------------------------------------------*/

#main .plan3 .featureCategory {
	font-size: 1.4rem;
	font-weight: normal;
	font-family: "AxisStd-Regular";
	padding-left: 24px;
	box-sizing:border-box;
}
#main .plan3 .fixheader {
	border-collapse: collapse;
}
#main .plan3 .fixheader .featureHeader tr {
	display:flex;
}
#main .plan3 .featureHeader th ,
#main .plan3 .featureHeader td {
	box-sizing:border-box;
	height: 72px;
	padding: 0;
	background: #FFF;
}
#main .plan3 .featureHeader th {
	width: 192px;
	color: #FFF;
	border:solid #FFF;
	border-width:0 1px 0 0;
}
#main .plan3 .featureHeader.column2 th {
	width: 280px;
}
#main .plan3 .featureHeader .contentNone {
	background: none;
	border-bottom: 1px solid #EBECED;
}
#main .plan3 .fixheader .featureHeader .contentNone {
	border-bottom:none;
	flex:1;
}
#main .plan3 .featureHeader h2 {
	margin: 0;
	width: 100%;
	height: 100%;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	border-radius:8px 8px 0 0;
	line-height: 1;
}
#main .plan3 .featureHeader td h2 {
	border:1px solid #EBECED;
	background: #fbfbfc;
}
#main .plan3 .featureHeader th h2 small {
	font-size: 1rem;
	font-weight: normal;
	font-family: "AxisStd-Regular";
	display: inline-block;
}
#main .plan3 .featureHeader th h2 span {
	font-size: 2.4rem;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}
#main .plan3 .featureHeader .free h2 {
	background: #00ADE2;
}
#main .plan3 .featureHeader .essentials h2 {
	background: #1A82E2;
}
#main .plan3 .featureHeader .pro h2 {
	background: #294661;
}
#main .plan3 .featureHeader .featureCategory {
	width: 100%;
	height: 100%;
	align-items: flex-start;
}
#main .plan3 .com__table {
	border-collapse: collapse;
	width: 100%;
}
#main .plan3 .com__table .featureCategory {
	padding-left: 24px;
}
#main .plan3 .com__table tbody th ,
#main .plan3 .com__table tbody td {
	box-sizing:border-box;
	padding: 8px 32px;
	border:1px solid #EBECED;
}
#main .plan3 .com__table.type2  tbody th ,
#main .plan3 .com__table.type2  tbody td {
	padding-right: 20px;
	padding-left: 20px;
}
#main .plan3 .com__table tbody tr:first-child th {
	border-top-width:0;
}
#main .plan3 .com__table tbody th {
	font-size: 1.4rem;
	line-height: 1.9;
	font-weight: normal;
}
#main .plan3 .com__table tbody th a {
	color: #1A82E2;
}
#main .plan3 .com__table tbody th a:hover {
	opacity: 0.7;
}
#main .plan3 .com__table tbody th a::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border: solid #1A82E2;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	border-width:2px 2px 0 0;
	margin-left: 3px;
}
#main .plan3 .com__table tbody td {
	background: #F8F8F8;
	vertical-align: middle;
	text-align: center;
}
#main .plan3 .com__table .tip {
	width: 13px;
	height: 13px;
	margin-left: 10px;
	position: relative;
	top: 7px;
}
#main .plan3 .com__table .tip.styleNone {
	width:auto;
	height: auto;
	margin-left: 0;
	background: none;
}
#main .plan3 .com__table .tip.linkStyle {
	text-decoration: underline;
}
#main .plan3 .com__table .available {
	display: inline-block;
	width: 20px;
}
#main .plan3 .com__table .available img {
	width: 100%;
}
#main .plan3 .com__table .featureNum {
	font-size: 1.2rem;
	font-family: "AxisStd-Medium";
	display: inline-block;
}
#main .plan3 .com__table .featureNum em {
	font-style: normal;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 2rem;
	display: inline-block;
	position: relative;
	top: 1px;
	margin: 0 2px;
}
#main .plan3 .com__table .featureNum em.jp {
	font-family: "AxisStd-Medium";
	font-size: 1.6rem;
}
#main .plan3 .com__table .featureNotes {
	display: block;
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
	font-family: "AxisStd-Medium";
	text-align: left;
	margin-top: 5px;
	font-size: 1.2rem;
}
#main .plan3 .com__table .featureNotes:first-child {
	margin-top: 0;
}
#main .plan3 .com__table .featureNotes.featureNotesFirst {
	margin-bottom: 2px;
}
#main .plan3 .com__table .featureIndent {
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
}
#main .plan3 .com__table .featureLabel {
	display: block;
	width: fit-content;
	color: #DD252A;
	border:1px solid currentColor;
	font-size: 1.5rem;
	font-family: "AxisStd-Medium";
	line-height: 1.1;
	border-radius:2px;
	padding:2px 10px;
	margin:2px 0 0px;
}
#main .plan3 .featureList .com__table .none {
	display: inline-block;
    height: 2px;
    width: 16px;
    background-color: #424752;
    text-indent: -9999px;
    line-height: 0;
}
#main .plan3 .featureInnerTable {
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
}
#main .plan3 .featureInnerTable tbody th ,
#main .plan3 .featureInnerTable tbody td {
	border:none;
	padding: 0 !important;
	line-height: 1;
}
#main .plan3 .featureInnerTable tbody th {
	text-align:right;
}
#main .plan3 .featureInnerTable tbody td {
	text-align:left;
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .plan3 .featureList .slide {
		margin: 0;
	}
	#main .plan3 .featureCategory {
		font-size: 1.2rem;
		padding-left: 10px;
	}
	#main .plan3 .featureHeader th,
	#main .plan3 .featureHeader td {
		height: 64px;
	}
	#main .plan3 .featureHeader th {
		width: 73px;
		height: 64px;
	}
	#main .plan3 .featureHeader.column2 th {
		width: 110px;
	}
	#main .plan3 .featureHeader th h2 small {
		font-size: 1rem;
		-webkit-transform: scale(.8,.8);
		-moz-transform: scale(.8,.8);
		-ms-transform: scale(.8,.8);
		-o-transform: scale(.8,.8);
		transform: scale(.8,.8);
	}
	#main .plan3 .featureHeader th h2 span {
		font-size: 1.4rem;
		margin-top: 3px;
	}
	#main .plan3 .featureList .comListUl {
		width: 100%;
		padding: 0;
	}
	#main .plan3 .com__table tbody th {
		padding: 10px;	
		font-size: 1.2rem;
		line-height: 1.6;
	}
	#main .plan3 .com__table.type2 tbody th {
		padding: 10px;	
	}
	#main .plan3 .com__table tbody th a::after {
		width: 6px;
		height: 6px;
		border-width:1px 1px 0 0;
		position: relative;
		top: -1px;
	}
	#main .plan3 .com__table tbody td {
		padding:5px 0;	
	}
	#main .plan3 .com__table.type2 tbody td {
		padding:5px 0;	
	}
	#main .plan3 .com__table .featureCategory {
		padding-left: 10px;
	}
	#main .plan3 .com__table .tip {
		width: 10px;
		height: 10px;
		top: 5px;
		margin-left: 7px;
		background-size: cover;
	}
	#main .plan3 .com__table .featureNum {
		-webkit-transform: scale(.8);
		-moz-transform: scale(.8);
		-ms-transform: scale(.8);
		-o-transform: scale(.8);
		transform: scale(.8);
		font-size: 1rem;
		letter-spacing: -0.1em;
	}
	#main .plan3 .com__table .featureNum em {
		font-size: 1.9rem;
		margin-right: 1px;
		margin-left: 1px;
	}
	#main .plan3 .com__table .featureNum em.jp {
		font-size: 1.5rem;
	}
	#main .plan3 .com__table .featureNotes {
		font-size: 1rem;
		margin-top: 2px;
	}
	#main .plan3 .com__table .featureLabel {
		margin-bottom: 3px;
		padding: 2px 7px 1px 7px;
		font-size: 1.2rem;
	}
	#main .plan3 .com__table .available {
		width: 16px;
	}
	#main .plan3 .featureInnerTable ,
	#main .plan3 .featureInnerTable tr ,
	#main .plan3 .featureInnerTable td ,
	#main .plan3 .featureInnerTable th {
		display: block;
	}
	#main .plan3 .featureInnerTable tr:not(:last-child) {
		margin-bottom: 3px;
	}
	#main .plan3 .featureInnerTable tbody td ,
	#main .plan3 .featureInnerTable tbody th {
		text-align: center;
		line-height: 1;
	}
}


@media all and (min-width: 0) and (max-width: 374px) {
	#main .plan3 .featureHeader th {
		width: 52px;
	}
	#main .plan3 .featureHeader th h2 span {
		font-size: 1rem;
	}
	#main .plan3 .com__table .featureNum em {
		font-size: 1.5rem;
	}
}


/*------------------------------------------------------------
	フッター下の固定ボタン
------------------------------------------------------------*/

.foot-fix-bar {
	display:none;
}

@media all and (min-width: 0) and (max-width: 736px) {
	.foot-fix-bar {
		display:block;
		width: 100%;
		position:sticky;
		bottom:0;
		left:0;
		z-index: 10;
		padding:7px 34px;
		background:#FFF;
		box-sizing:border-box;
	}
	
	.foot-fix-button a {
		padding: 16px 0 17px;
		display: block;
		color: #FFF;
		font-size: 1.6rem;
		text-align: center;
		border-radius: 8px;
		letter-spacing:0.04em;
		background-color: #F07300;
		position: relative;
		border-radius: 8px;
		behavior: url(/js/pie.htc);
	}
	
	.foot-fix-button a:before {
		content: '';
		display:block;
		width: 6px;
		height: 6px;
		border:solid #FFF;
		border-width:2px 2px 0 0;
		position: absolute;
		left: calc(50% + 3em + 25px);
		top: 50%;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-top: -4px;
	}
}


/*------------------------------------------------------------
	新ボタン
------------------------------------------------------------*/

#main .newLinkBtn ,
.footCta .newLinkBtn {	
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.625;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 180px;
  min-height: 44px;
  border: 1px solid #1A82E2;
  color: #1A82E2;
  border-radius: 8px;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 12px;
  cursor: pointer;
}
#main .newLinkBtn:is(button:disabled) ,
.footCta .newLinkBtn:is(button:disabled) {
	pointer-events:none;
	color: #424752;
	background: #BEBFBF;
	border-color:#BEBFBF;
}
#main .newLinkBtn.widthFix ,
.footCta .newLinkBtn.widthFix {
	max-width: 342px;
}
#main .newLinkBtn.widthMedium ,
.footCta .newLinkBtn.widthMedium {
	min-width: 195px;
}
#main .newLinkBtn.rightPdFix ,
.footCta .newLinkBtn.rightPdFix {
	padding-right:28px;
}
#main .newLinkBtn::after ,
.footCta .newLinkBtn::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #1A82E2;
  position: absolute;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transition: transform 0.88s cubic-bezier(0, 1, 0, 1);
  transform-origin: center left;
  z-index: 0;
}
#main .newLinkBtn:hover ,
.footCta .newLinkBtn:hover {
  color: #fff;
}
#main .newLinkBtn:hover::after ,
.footCta .newLinkBtn:hover::after {
  transform: scaleX(1);
}
#main .newLinkBtn.orange ,
.footCta .newLinkBtn.orange {
  background: #F07300;
  border-color: #F07300;
  color: #fff;
}
#main .newLinkBtn.orange::after ,
.footCta .newLinkBtn.orange::after {
  background: #fff;
}
#main .newLinkBtn.orange:hover ,
.footCta .newLinkBtn.orange:hover {
  color: #F07300;
}
#main .newLinkBtn.orangeBorder ,
.footCta .newLinkBtn.orangeBorder {
  border-color: #F07300;
  color: #F07300;
}
#main .newLinkBtn.orangeBorder::after ,
.footCta .newLinkBtn.orangeBorder::after {
  background: #F07300;
}
#main .newLinkBtn.orangeBorder:hover ,
.footCta .newLinkBtn.orangeBorder:hover {
  color: #fff;
}
#main .newLinkBtn.blue ,
.footCta .newLinkBtn.blue {
  background: #1A82E2;
  border-color: #1A82E2;
  color: #fff;
}
#main .newLinkBtn.blue::after ,
.footCta .newLinkBtn.blue::after {
  background: #fff;
}
#main .newLinkBtn.blue:hover ,
.footCta .newLinkBtn.blue:hover {
  color: #1A82E2;
}

/* 矢印付きボタン */
#main .newLinkBtn.arrowNext::before ,
.footCta .newLinkBtn.arrowNext::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  position: absolute;
  right: 17px;
  top: 50%;
  transform: rotate(45deg);
  margin-top: -4px;	
  z-index: 2;
}
#main .newLinkBtn.arrowPrev::before,
.footCta .newLinkBtn.arrowPrev::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  position: absolute;
  left: 17px;
  top: 50%;
  transform: rotate(45deg);
  margin-top: -4px;
  z-index: 2;
}

/* 中央寄せ */
#main .newLinkBtn.alignCenter ,
.footCta .newLinkBtn.alignCenter {
	margin-inline:auto;
}

#main .newLinkBtnInner ,
.footCta .newLinkBtnInner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

@media all and (min-width: 0px) and (max-width: 736px) {
  #main .newLinkBtn ,
  .footCta .newLinkBtn {
    min-height: 56px;
    min-width: auto;
    width: 100%;
    max-width: 294px;
  }
  /* SPサイズ小 */
  #main .newLinkBtn.spSizeSmall ,
  .footCta .newLinkBtn.spSizeSmall {
  	min-height: 40px;
  	max-width: 230px;
  	min-width: auto;
  	width: 100%;
  }
}

/* 長いボタン */
@media all and (min-width: 737px) {
	#main .newLinkBtn.long ,
	.footCta .newLinkBtn.long {
		width: fit-content;
		padding-left:40px;
		padding-right:40px;
		
	}
}
@media all and (min-width: 0px) and (max-width: 736px) {
	#main .newLinkBtn.long ,
	.footCta .newLinkBtn.long {
  		min-height: 40px;
		max-width: 305px;
	}
}

/* リンクアイコン付き */
#main .newLinkBtn.externalLink {
	padding-left: 32px;
	padding-right: 60px;
}
#main .newLinkBtn.externalLink::before {
  content: '';
  display: block;
  width: 14px;
  aspect-ratio:1 / 1;
  background: url(https://sendgrid.kke.co.jp/images/common/icon_link.svg) no-repeat center center / contain;
  position: absolute;
  right: 32px;
  top: 50%;
  translate:0 -50%;
  z-index: 2;
}
#main .newLinkBtn.externalLink:hover::before {
  background-image: url(https://sendgrid.kke.co.jp/images/common/icon_link_blue.svg);
}
@media all and (min-width: 0px) and (max-width: 736px) {
	#main .newLinkBtn.externalLink {
		padding-left: 20px;
		padding-right: 45px;
	}
	#main .newLinkBtn.externalLink::before {
		right: 20px;
	}
}


/*------------------------------------------------------------
	見出し
------------------------------------------------------------*/

#main .featureHeading {
  text-align: center;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
#main .featureHeading.alignLeft {
	text-align: left;
}
#main .featureHeadingJp {
  font-size: 4.2rem;
  line-height: 1.45;
  font-family: "AxisStd-Medium";
}
#main .featureHeadingEn {
  display: inline-block;
  font-size: 1.2rem;
  font-family: "AxisStd-Regular";
  color: #1A82E2;
  margin-bottom: 5px;
}
@media all and (min-width: 0px) and (max-width: 736px) {
  #main .featureHeadingJp {
    font-size: 2.4rem;
  }
}
@media all and (min-width: 0px) and (max-width: 736px) {
  #main .featureHeadingEn {
    margin-bottom: 10px;
  }
}

#main .sectionHeading {
	font-size: 4.2rem;
	font-family: "AxisStd-Medium";
}

@media all and (min-width: 0) and (max-width: 736px) {
	#main .sectionHeading {
		font-size: 2.2rem;
	}
}

/*------------------------------------------------------------
	リード文
------------------------------------------------------------*/

#main p.featureLeadText,
#main .featureLeadText {
  text-align: center; 
  font-size: 1.8rem; 
  line-height: 1.66667; 
  margin-top: 16px;
}
#main .featureLeadTextLink {
	color:#1A82E2;
}
@media (min-width: 0) and (max-width: 736px) {
  #main p.featureLeadText,
  #main .featureLeadText {
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.71;
    margin-top: 28px;
  }
  #main .featureLeadText+p.featureLeadText,
  #main .featureLeadText+.featureLeadText {
  	margin-top: 12px;
  }
}

/*------------------------------------------------------------
	注意書き
------------------------------------------------------------*/
#main .mainBox .noteList {
	margin-top: 15px;
	margin-bottom: 40px;
}
#main .mainBox .noteList li {
	font-size: 1.2rem;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 2px;
}
#main .mainBox .noteList li strong {
	font-family: ;font-family: "AxisStd-Medium";
	font-weight: normal;
}

/*------------------------------------------------------------
	よくある質問 新デザイン
------------------------------------------------------------*/
#main .qaSec2 {
  background: #F8F8F8;
}
#main .qaSec2BgGray {
  background: #F0F2F4;
}
#main .qaSec2Inner {
  padding-top: 58px;
  padding-bottom: 132px;
  width: 990px;
  margin: 0 auto;
}
#main .qaSec2Heading {
  margin-bottom: 55px;
}
#main .qaSec2Title {
  text-align: left;
  font-family: "AxisStd-Medium";
  font-size: 2.2rem;
  margin: 52px 0 30px;
}
#main .qaSec2Title:first-of-type {
  margin-top: 0;
}
#main .qaAccordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#main .qaAccordionText {
  display: block;
  font-size: 1.8rem;
  line-height: 1.666;
}
#main .qaAccordionHead,
#main .qaAccordionBodyInner {
  position: relative;
  box-sizing: border-box;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#main .qaAccordionHead::before,
#main .qaAccordionBodyInner::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  aspect-ratio: 1/1;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: 1px;
  font-family: "AxisStd-Regular";
  border-radius: 8px;
  position: absolute;
  left: 24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#main .qaAccordionHead {
  background: #fff;
  border-radius: 8px;
  padding: 15px 60px 15px 88px;
  cursor: pointer;
}
#main .qaAccordionHead::before {
  content: "Q";
  background: #294661;
}
#main .qaAccordionHead .qaAccordionText {
  font-family: "AxisStd-Regular";
}
#main .qaAccordionBody {
  display: none;
}
#main .qaAccordionBodyInner {
  padding: 0 60px 0 88px;
  margin-top: 16px;
}
#main .qaAccordionBodyInner::before {
  content: "A";
  background: #1A82E2;
}
#main .qaAccordionIcon {
  width: 18px;
  aspect-ratio: 1/1;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.3s;
}
#main .qaAccordionIcon::before, 
#main .qaAccordionIcon::after {
  content: "";
  display: block;
  background: #424752;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 18px;
  height: 2px;
  transition: 0.3s;
}
#main .qaAccordionIcon::after {
  transform: rotate(90deg);
}
#main .qaAccordionBlock.is-active .qaAccordionIcon {
  transform: rotate(90deg);
}
#main .qaAccordionBlock.is-active .qaAccordionIcon::before {
  opacity: 0;
}

#main .qaSec2Version2 .qaSec2Inner {
  padding-block: 87px 120px;
}
#main .qaSec2Version2 .qaSec2Heading {
  margin-bottom: 40px;
}

@media all and (min-width: 0) and (max-width: 736px) {
  #main .qaSec2Inner {
    padding: 32px 0 80px;
    width: calc(100% - 40px);
  }
  #main .qaSec2Heading {
    margin-bottom: 32px;
  }
  #main .qaSec2Title {
    font-size: 1.8rem;
    margin: 40px 0 12px;
  }
  #main .qaAccordion {
    gap: 8px;
  }
  #main .qaAccordionText {
    font-size: 1.4rem;
    line-height: 1.428;
  }
  #main .qaAccordionHead::before,
  #main .qaAccordionBodyInner::before {
    width: 32px;
    border-radius: 4px;
    left: 15px;
  }
  #main .qaAccordionHead {
    border-radius: 4px;
    padding: 12px 50px 12px 57px;
    min-height: 82px;
  }
  #main .qaAccordionBodyInner {
    padding: 12px 16px 12px 57px;
    margin-top: 0;
    min-height: 95px;
  }
  #main .qaAccordionIcon {
    right: 13px;
  }
  #main .qaAccordionIcon::before, 
  #main .qaAccordionIcon::after {
    width: 14px;
  }
  #main .qaSec2Version2 .qaSec2Inner {
    padding-block: 64px;
  }  
}

/*------------------------------------------------------------
	New CTA
------------------------------------------------------------*/

.footCta * {
  box-sizing: border-box;
}
.footCtaIntro {
  background-color: #1A82E2;
  padding: 63px 0 33px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntro {
    padding: 65px 0 60px;
  }
}
.footCtaIntroMenu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
  max-width: 1113px;
  padding-inline: 35px;
  margin: 0 auto;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroMenu {
    padding-inline: 27px;
    display: block;
  }
}
.footCtaIntroBox {
  position: relative;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroBox {
    margin-bottom: 32px;
    padding-bottom: 26px;
  }
  .footCtaIntroBox:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
.footCtaIntroBox::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: -24px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroBox::after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
  }
}
.footCtaIntroBox:last-child::after {
  content: none;
}
.footCtaIntroHeading {
  text-align: center;
  font-size: 1.8rem;
  font-family: "AxisStd-Medium";
  line-height: 1.55;
  color: #fff;
  margin-top: -6px;
  margin-bottom: 16px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroHeading {
    font-size: 2.4rem;
    line-height: 1.16;
    margin-top: 0;
    margin-bottom: 26px;
  }
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroBox--download .footCtaIntroHeading {
    margin-bottom: 33px;
  }
}
.footCtaIntroText {
  font-size: 1.2rem;
  line-height: 2;
  color: #fff;
  max-width: 300px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroText {
    max-width: 100%;
    font-size: 1.6rem;
    line-height: 1.62;
  }
}
.footCtaIntroLinkpanel {
  margin-top: 22px;
  position: relative;
  color: inherit !important;
  display: block;
  transition:opacity .3s;
}
.footCtaIntroLinkpanel:hover {
  opacity: 0.8;
}
.footCtaIntroLinkpanelContent {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  padding: 8px 20px 8px min(74px,6.2vw);
  margin-left: 30px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroLinkpanelContent {
    border-radius: 8px;
    padding: 12px 0 12px 80px;
  }
}
.footCtaIntroLinkpanelContent::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 6px;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  rotate: 45deg;
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  transition: margin-right 0.3s;
}
.footCtaIntroLinkpanel:hover .footCtaIntroLinkpanelContent::after {
  margin-right: -3px;
}
.footCtaIntroLinkpanelImg {
  position: absolute;
  left: 6px;
  top: -3px;
  width: min(89px,25.718%);
  border: 2px solid #fff;
  rotate: -10deg;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroLinkpanelImg {
    top: -1px;
    width: 89px;
  }
}
.footCtaIntroLinkpanelImg img {
  width: 100%;
}
.footCtaIntroLinkpanelTitle {
  font-family: "AxisStd-Medium";
  font-size: 1.2rem;
}
.footCtaIntroLinkpanelText {
  font-size: 1rem;
  line-height: 1.6;
}
.footCtaIntroVideolink {
  display: block;
  aspect-ratio: 243/137;
  max-width: 243px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroVideolink {
    max-width: 100%;
  }
}
.footCtaIntroVideolink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.3s;
}
.footCtaIntroVideolink::before {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 53px;
  position: absolute;
  margin: auto;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 1;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroVideolink::before {
    width: 66px;
  }
}
.footCtaIntroVideolink::after {
  content: "";
  display: block;
  aspect-ratio: 0.85/1;
  width: 10px;
  background: #fff;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin-left: 1px;
  z-index: 2;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaIntroVideolink::after {
    width: 14px;
  }
}
.footCtaIntroVideolink:hover img {
  scale: 1.05;
}
.footCtaTry {
  background: linear-gradient(0deg, #294661 50%, #1A82E2 50%);
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTry {
    padding-inline: 22px;
  }
}
.footCtaTryInner {
  background-color: #FFF;
  border-radius: 8px;
  width: 100%;
  max-width: 1043px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 37px 74px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 40px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryInner {
    display: flex;
    flex-direction: column-reverse;
    padding: 34px 0 40px;
  }
}
.footCtaTryFeature {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryFeature {
    margin-top: 25px;
  }
}
.footCtaTryFeatureItem {
  width: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #1A82E2;
  gap: 8px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryFeatureItem {
    width: auto;
  }
}
.footCtaTryFeatureItem:first-child {
  border-left: 1px solid #1A82E2;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryFeatureItem:first-child {
    border-left: none;
  }
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryFeatureItem:last-child {
    border-right: none;
  }
}
.footCtaTryFeatureTitle {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.49;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryFeatureTitle {
    font-size: 1.2rem;
    line-height: 1.41;
  }
}
.footCtaTryFeatureTitle strong {
  font-weight: normal;
  font-family: "AxisStd-Medium";
}
.footCtaTryFeatureIcon img {
  width: auto;
  height: 55px;
}
.footCtaTryCta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryCta {
    gap: 16px 0;
  }
}
.footCtaTryCtaText {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.75;
}
@media all and (min-width: 0) and (max-width: 736px) {
  .footCtaTryCtaText {
    font-size: 1.6rem;
    line-height: 1.625;
  }
}

/*------------------------------------------------------------
	New Footer
------------------------------------------------------------*/

#gFooter.gFooterNew {
  position: relative;
  padding: 0;
  background-color:transparent;
}
#gFooter.gFooterNew * {
  box-sizing: border-box;
}
#gFooter.gFooterNew .footerMenu {
  background-color: #294661;
  grid-area: 3/1/span 2/span 1;
  padding: 53px 0 30px;
  color: #fff;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenu {
    padding: 45px 16px 0;
  }
}
#gFooter.gFooterNew .footerMenu a {
  color: inherit;
}
#gFooter.gFooterNew .footerMenuInner {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
#gFooter.gFooterNew .footerMenuMain {
  display: flex;
  justify-content: space-between;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMain {
    flex-direction: column;
  }
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNav {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}
#gFooter.gFooterNew .footerMenuMainNavTitle {
  font-size: 1.4rem;
  font-family: "AxisStd-Medium";
  margin-bottom: 13px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavTitle {
    display: block;
    padding-block: 17px;
    margin-bottom: 0;
    font-family: "AxisStd-Light";
  }
}
#gFooter.gFooterNew .footerMenuMainNavTitle {
  position: relative;
  margin-bottom: 8px;
  display: block;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavTitle {
    margin-bottom: 0;
  }
  #gFooter.gFooterNew .footerMenuMainNavTitle::before, #gFooter.gFooterNew .footerMenuMainNavTitle::after {
    content: "";
    display: block;
    width: 14px;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    right: 7px;
    top: 50%;
    transition: all 0.3s;
  }
  #gFooter.gFooterNew .footerMenuMainNavTitle::after {
    rotate: 90deg;
  }
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNav.is-open .footerMenuMainNavTitle::before {
    rotate: 90deg;
    opacity: 0;
  }
  #gFooter.gFooterNew .footerMenuMainNav.is-open .footerMenuMainNavTitle::after {
    rotate: 180deg;
  }
}
#gFooter.gFooterNew .footerMenuMainNavTitleInput {
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavItem {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  #gFooter.gFooterNew .footerMenuMainNavItem:first-child {
    border-top: none;
  }
}
#gFooter.gFooterNew .footerMenuMainNavItem a {
  font-size: 1.2rem;
  display: block;
  padding-block: 3px;
  transition: opacity 0.3s;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavItem a {
    font-size: 1.4rem;
    padding-block: 17px;
  }
}
#gFooter.gFooterNew .footerMenuMainNavItem a:hover {
  opacity: 0.65;
}
#gFooter.gFooterNew .footerMenuMainNavItem a::before {
  content: "- ";
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavList--child {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavList--child .footerMenuMainNavItem {
    margin-left: 23px;
  }
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuMainNavList--child .footerMenuMainNavItem a {
    font-size: 1.2rem;
    padding-block: 15px;
  }
}
#gFooter.gFooterNew .footerMenuBottom {
  border-top: 1px solid #fff;
  display: grid;
  gap: 23px 0;
  grid-template: "links sns" max-content "links copyright" max-content/1fr max-content;
  padding-top: 24px;
  margin-top: 40px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuBottom {
    display: block;
    margin-top: 0;
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}
#gFooter.gFooterNew .footerMenuSns {
  display: flex;
  align-items: center;
  gap: 0 16px;
  grid-area: sns;
  justify-self: end;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuSns {
    justify-self: center;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 24px;
    gap: 0 27px;
  }
}
#gFooter.gFooterNew .footerMenuSnsItem {
  width: 30px;
}
#gFooter.gFooterNew .footerMenuSnsItem a {
  transition: opacity 0.3s;
}
#gFooter.gFooterNew .footerMenuSnsItem a:hover {
  opacity: 0.65;
}
#gFooter.gFooterNew .footerMenuLinks {
  grid-area: links;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuLinks {
    width: fit-content;
    margin: 0 auto;
    padding-block: 20px;
    gap: 6px 0;
  }
}
#gFooter.gFooterNew .footerMenuLinksList {
  display: flex;
  align-items: center;
  gap: 0 33px;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuLinksList {
    justify-content: center;
    gap: 0 28px;
  }
}
#gFooter.gFooterNew .footerMenuLinksItem {
	width: 100%;
}
#gFooter.gFooterNew .footerMenuLinksItem a {
  transition: opacity 0.3s;
}
#gFooter.gFooterNew .footerMenuLinksItem a:hover {
  opacity: 0.65;
}
#gFooter.gFooterNew .footerMenuLinksItem img {
  width: 100%;
}
#gFooter.gFooterNew .footerMenuLinksItem--01 {
	max-width: 145px;
}
#gFooter.gFooterNew .footerMenuLinksItem--02 {
	max-width: 181px;
}
#gFooter.gFooterNew .footerMenuLinksCaption,
#gFooter.gFooterNew .footerMenuCopyright {
  font-size: 1rem;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuCopyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}
#gFooter.gFooterNew .footerMenuCopyrightText {
  grid-area: copyright;
}
@media all and (min-width: 0) and (max-width: 736px) {
  #gFooter.gFooterNew .footerMenuCopyrightText {
    scale: 0.8;
    width: 125%;
    text-align: center;
    margin-left: -12.5%;
    padding-block: 16px;
  }
}


/*------------------------------------------------------------
	見出し新デザイン
------------------------------------------------------------*/

#main .contentHeadBox {
  padding-top: 50px;
}
#main .contentHeading {
  text-align: center;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 19px;
}
#main .contentHeadingEn {
  display: block;
  color: #EDF6FE;
  font-family: "Roboto", sans-serif;
  font-size: 8rem;
  line-height: 1;
  font-weight: 500;
  position: relative;
  z-index: 0;
  grid-area: 1/1/2/1;
}
#main .contentHeading.enWhite .contentHeadingEn {
  color: #fff;
}
#main .contentHeadingJp {
  display: block;
  font-size: 4.2rem;
  font-family: "AxisStd-Medium";
  line-height: 1.6;
  position: relative;
  z-index: 1;
  grid-area: 1/1/3/1;
  align-self: end;
}
#main .contentHeading.jpBlue .contentHeadingJp {
  color: #0F6CC2;
}
#main .contentLeadText {
  text-align: center;
  margin: 18px 0 0;
  font-family: "AxisStd-Medium";
  font-size: 1.6rem;
  line-height: 1.6;
}

@media all and (min-width: 0) and (max-width: 736px){
  #main .contentHeadBox {
    padding-top: 37px;
  }
  #main .contentHeading {
    grid-template-rows: max-content 15px;
  }
  #main .contentHeadingEn {
    font-size: 4rem;
  }
  #main .contentHeadingJp {
    font-size: 2.4rem;
    line-height: 1.5;
  }
  #main .contentLeadText {
    text-align: left;
    margin: 22px auto 0;
    font-size: 1.4rem;
    line-height: 1.71;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 56px);
  }	
}


/*------------------------------------------------------------
	モーダル
------------------------------------------------------------*/
body.is-scroll-disable {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
  padding-right: calc(var(--scrollBarGutter) * 1px);
}
body.is-scroll-disable .header {
  width: calc(100% - var(--scrollBarGutter) * 1px);
}
#main .modal {
  border: none;
  margin: auto;
  padding: 0;
  display: grid;
  place-items: center;
  position: fixed;
  inset-inline: 0;
  inset-block: 0;
  z-index: 9999;
  width: 100vw;
  max-width: 100vw;
  background: none;
}
#main .modal[hidden] {
  display: none;
}
#main .modal::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s;
  opacity: 1;
}
#main .modal[hide]::before {
  opacity: 0;
}
#main .modalInner {
  background: #fff;
  width: 100%;
  margin: auto;
  position: relative;
  transition: opacity 0.3s;
  opacity: 1;
}
#main .modal[hide] .modalInner {
  opacity: 0;
}
#main .modalContent {
  width: 100%;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
#main .modalClose {
  width: 29px;
  background: none;
  position: absolute;
  top: -20px;
  right: 7px;
  translate: 0 -100%;
  aspect-ratio: 1/1;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#main .modalClose::before, #main .modalClose::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
#main .modalClose::before {
  rotate: 45deg;
}
#main .modalClose::after {
  rotate: -45deg;
}


/*------------------------------------------------------------
	記事レイアウト
------------------------------------------------------------*/

#main .articleArchive {
	margin-top: 75px;
}
#main .articlePanellist {
	display: grid;
	gap: 32px;
	width: min(1024px, 100%);
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, calc((100% - 64px) / 3));
}
#main .articlePanel {
	height: 100%;
}
#main .articlePanelLink {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	border-radius: 8px;
	overflow: hidden;
	color: inherit;
	transition: box-shadow 0.2s ease-in-out;
}
#main .articlePanelLink:hover {
	color: inherit;
	box-shadow: 6px 6px 15px 0 rgba(0, 0, 0, 0.25);
}
#main .articlePanelImage {
	aspect-ratio: 320/197;
	overflow: hidden;
}
#main .articlePanelImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.2s ease-in-out;
}
#main .articlePanelImage.articlePanelVideoimage {
	position: relative;
}
#main .articlePanelImage.articlePanelVideoimage::before, #main .articlePanelImage.articlePanelVideoimage::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}
#main .articlePanelImage.articlePanelVideoimage::before {
	aspect-ratio: 18.76/21.66;
	width: 19px;
	background: #EC4447;
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	z-index: 3;
	translate: -40% -50%;
}
#main .articlePanelImage.articlePanelVideoimage::after {
	aspect-ratio: 1/1;
	width: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 25.012px 0 rgba(0, 0, 0, 0.15);
	z-index: 2;
	translate: -50% -50%;
}
#main a:hover .articlePanelImage img {
	scale: 1.05;
}
#main .articlePanelContent {
	display: flex;
	flex-direction: column;
}
#main .articlePanelTitle {
	margin: calc((1em - 1lh) / 2) 0;
	font-size: 1.6rem;
	line-height: 1.5;
	font-family: "AxisStd-Medium";
}
#main .guidePanelDescription {
	font-size: 1.4rem;
	line-height: 1.5;
	margin-block: calc((1em - 1lh) / 2);
	flex: 1 1;
}
#main .articlePanelMore {
	font-size: 1.3rem;
	font-family: "AxisStd-Regular";
	align-items: center;
	position: relative;
	margin-top: auto;
}
#main .articlePanelMore::after {
	content: "";
	display: block;
	width: 6px;
	aspect-ratio: 1/1;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	rotate: 45deg;
	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	transition: translate 0.2s ease-in-out;
}
#main a:hover .articlePanelMore::after {
	translate: 3px -50%;
}
#main .articlePickup {
	background: url(https://sendgrid.kke.co.jp/img/common/pickup-bg.jpg) no-repeat center center/cover;
	padding-block: 60px 64px;
}
#main .articlePickupHeading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: #0F6CC2;
	text-align: center;
	font-family: "Roboto";
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1;
	margin: calc(1em - 1lh) 0 43px;
}
#main .articlePickupHeading::before, #main .articlePickupHeading::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: currentColor;
}
#main .articlePickupList {
	justify-content: center;
}
#main .articlePickupList .articlePanelContent {
	padding: 24px 24px 16px 24px;
	background: #1A82E2;
	gap: 14px;
}
#main .articlePickupList .articlePanelTitle {
	color: #fff;
}
#main .articlePickupList .articlePanelMore {
	background: #fff;
	border-radius: 8px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0972D4;
}
#main .articlePickupList .articlePanelMore::after {
	right: 16px;
}
#main .articleArchivelist {
	background: #EDF6FE;
	padding-block: 64px 80px;
}
#main .articleArchivelistList .articlePanelContent {
	background: #FFFFFF;
	padding: 22px 24px 24px 24px;
}
#main .articleArchivelistList .articlePanelTitle {
	color: #0F6CC2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 8px;
}
#main .articleArchivelistList .articlePanelMore {
	width: -moz-fit-content;
	width: fit-content;
	margin-left: auto;
	margin-top: 17px;
	margin-bottom: calc((1em - 1lh) / 2);
	padding-right: 14px;
	color: #1A82E2;
}
#main .articleListPagination {
	margin-top: 64px;
}
#main .articleListPaginationList {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 52px;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	margin-inline: auto;
}
#main .articleListPaginationList li {
	height: 32px;
}
#main .articleListPaginationBtn,
#main .articleListPaginationDots,
#main .articleListPaginationArrow {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
#main .articleListPaginationBtn {
	color: inherit;
	font-family: "Roboto";
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	padding-inline: 12px;
	transition: color 0.2s ease-in-out;
}
#main .articleListPaginationBtn:hover {
	color: #9BB2C7;
}
#main .articleListPaginationCurrent {
	color: #9BB2C7;
}
#main .articleListPaginationDots {
	font-size: 1.8rem;
	padding-inline: 13px;
}
#main .articleListPaginationArrow {
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 1px solid #919BA2;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top: 0;
	transition: background 0.2s ease-in-out;
	box-sizing: border-box;
}
#main .articleListPaginationArrow::after {
	content: "";
	display: block;
	aspect-ratio: 1/1;
	width: 6px;
	border: solid #424752;
	border-width: 0 0 2px 2px;
	rotate: 45deg;
	position: absolute;
	top: 50%;
	translate: -50% -50%;
	transition: border-color 0.2s ease-in-out;
}
#main .articleListPaginationArrow:hover {
	background: #919BA2;
}
#main .articleListPaginationArrow:hover::after {
	border-color: #fff;
}
#main .articleListPaginationPrev {
	left: 0;
}
#main .articleListPaginationPrev::after {
	left: calc(50% + 1px);
}
#main .articleListPaginationNext {
	right: 0;
}
#main .articleListPaginationNext::after {
	scale: -1 -1;
	left: calc(50% - 1px);
}
#main .articleLayout {
	width: min(1024px, 100%);
	margin-inline: auto;
	box-sizing: border-box;
}
#main .articleLayoutTitle {
	text-align: left;
	font-size: 3.8rem;
	font-family: "AxisStd-Medium";
	line-height: 1.4;
	position: relative;
	padding-left: 36px;
	margin-block: 80px 56px;
}
#main .articleLayoutTitle::before {
	content: "";
	display: block;
	width: 12px;
	height: 100%;
	background: #3791E5;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
#main .articleLayoutInner {
	position: relative;
	margin-bottom: 120px;
	box-sizing: border-box;
}
#main .articleLayout:not(.siebarNone) .articleLayoutInner:not(:has(.articleLayoutSidebar .articleIndexEmpty:only-child)) {
	padding-left: 264px;
}
#main .articleLayoutThumb {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: 48px;
}
#main .articleLayoutThumb img {
	width: 100%;
	height: auto;
}
#main .articleLayoutSidebar {
	position: absolute;
	left: 0;
	top: 0;
	width: 232px;
	height: 100%;
	box-sizing: border-box;
}
#main .articleLayoutSidebar:has(.articleIndexEmpty:only-child) {
	display: none;
}
#main .articleLayoutSidebarSticky {
	position: sticky;
	top: 100px;
}
#main .articleIndex {
	border-radius: 2px;
	background: #F0F2F4;
	padding: 24px;
}
#main .articleIndexTitle {
	font-size: 1.5rem;
	line-height: 1;
	font-family: "AxisStd-Medium";
	margin-block: 0 17px;
	color: #0F6CC2;
	display: flex;
	align-items: center;
	gap: 8px;
}
#main .articleIndexTitle::before {
	content: "";
	display: block;
	width: 17px;
	aspect-ratio: 15/12;
	-webkit-mask: url("https://sendgrid.kke.co.jp/img/common/icon_index.svg") no-repeat center center/contain;
					mask: url("https://sendgrid.kke.co.jp/img/common/icon_index.svg") no-repeat center center/contain;
	background: currentColor;
}
#main .articleIndexItem {
	font-size: 1.4rem;
	font-family: "AxisStd-Regular";
	line-height: 1.5;
	margin-block: calc((1em - 1lh) / 2 + 16px) calc((1em - 1lh) / 2);
	display: flex;
	gap: 8px;
}
#main .articleIndexItem::before {
	content: "";
	display: block;
	width: 10px;
	height: 2px;
	flex-shrink: 0;
	margin-top: 8px;
	background: #0972D4;
}
#main .articleIndexItem a {
	color: inherit;
	cursor: pointer;
}
#main .articleIndexItem a:hover {
	text-decoration: underline;
}
#main .articlePost {
	font-size: 1.5rem;
	line-height: 1.8;
}
#main .articlePost * {
	font-weight: normal;
	text-align: justify;
}
#main .articlePost *:first-child {
	margin-top: 0;
}
#main .articlePost *:last-child {
	margin-bottom: 0;
}
#main .articlePost p + p {
	margin-top: 16px;
}
#main .articlePost p small {
	font-size: 0.86666667em;
}
#main .articlePost :where(p, div):has(img) {
	margin-block: 48px;
}
#main .articlePost li > img,
#main .articlePost li :where(p, div):has(img) {
	margin-block: 5px 20px !important;
}
#main .articlePost a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
#main .articlePost blockquote {
	border-radius: 2px;
	background: #F0F2F4;
	box-shadow: 2px 2px 0 0 #3791E5;
	font-size: 1.4rem;
	padding: 16px 32px;
	margin-block: 48px;
	margin-left: 10px;
	position: relative;
}
#main .articlePost blockquote::before {
	content: "";
	display: block;
	width: 40px;
	aspect-ratio: 1/1;
	background: url("https://sendgrid.kke.co.jp/img/common/icon_quote.svg") no-repeat center center/contain;
	position: absolute;
	left: -10px;
	top: -16px;
}
#main .articlePost h2 {
	padding: 17px 24px;
	border-radius: 4px;
	background: #0972D4;
	color: #fff;
	text-align: left;
	font-size: 2.2rem;
	font-family: "AxisStd-Medium";
	line-height: 1.4;
	margin-block: 48px 16px;
}
#main .articlePost h3 {
	border-radius: 2px;
	border-left: 6px solid #3791E5;
	background: #EDF6FE;
	color: #424752;
	font-family: "AxisStd-Medium";
	font-size: 2rem;
	line-height: 1.5;
	text-align: left;
	padding: 13px 24px 13px 18px;
	margin-block: 44px 16px;
}
#main .articlePost h4 {
	font-family: "AxisStd-Medium";
	font-size: 1.8rem;
	line-height: 1.5;
	padding-left: 12px;
	position: relative;
	margin-block: 24px 6px;
}
#main .articlePost h4::before {
	content: "";
	display: block;
	height: calc(100% + (1em - 1lh) / 2 - 0.1em);
	width: 4px;
	background: #3791E5;
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	border-radius: 2px 0 0 2px;
}
#main .articlePost h5 {
	color: #0F6CC2;
	font-family: "AxisStd-Medium";
	font-size: 1.6rem;
	line-height: 1.5;
	margin-block: 14px 2px;
}
#main .articlePost ol, #main .articlePost dl, #main .articlePost ul {
	margin-left: 16px;
	margin-block: 6px;
}
#main .articlePost li {
	margin-top: 3px;
}
#main .articlePost ol {
	counter-reset: list;
}
#main .articlePost ol > li {
	position: relative;
	padding-left: 1.4em;
}
#main .articlePost ol > li::before {
	content: counter(list) ".";
	counter-increment: list;
	display: block;
	color: #0F6CC2;
	font-family: "AxisStd-Medium";
	position: absolute;
	top: 0;
	left: -0.5em;
	min-width: 1.5em;
	text-align: right;
}
#main .articlePost strong,
#main .articlePost dt {
	font-family: "AxisStd-Medium";
}
#main .articlePost dt, #main .articlePost dd, #main .articlePost ul > li {
	padding-left: 16px;
}
#main .articlePost dt, #main .articlePost ul > li {
	position: relative;
}
#main .articlePost dt::before, #main .articlePost ul > li::before {
	content: "";
	display: block;
	width: 10px;
	aspect-ratio: 1/1;
	border: 3px solid #9BB2C7;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 8px;
}
#main .articlePost section {
	border-radius: 8px;
	background: #F0F2F4;
	padding: 32px;
	margin: 24px auto;
}
#main .articlePost aside {
	border-radius: 2px;
	border: 1px solid #E17D7D;
	background: #FCF0F0;
	padding: 15px 24px;
	margin-block: 48px;
	border: 1px solid #6377D6;
	background: #EFF2FF;
}
#main .articlePost aside.warning {
	border: 1px solid #E17D7D;
	background: #FCF0F0;
}
#main .articlePost table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin-block: 46px;
}
#main .articlePost td, #main .articlePost th {
	border: 1px solid #9BB2C7;
	font-size: 1.4rem;
	line-height: 1.5;
	padding: 14px 24px;
	word-break: break-all;
}
#main .articlePost th {
	font-family: "AxisStd-Medium";
}
#main .articlePost thead th {
	text-align: center;
}
#main .articlePost thead th:not(:last-child) {
	border-right-color: #FFF;
}
#main .articlePost thead td, #main .articlePost thead th {
	background: #9BB2C7;
	color: #fff;
}
#main .articlePost tbody th {
	background: #EDF6FE;
}
#main .articlePost img {
	max-width: 100%;
	height: auto;
}
#main .articlePost iframe {
	max-width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16/9;
	margin: 46px auto;
}
#main .articlePost .aligncenter,
#main .articlePost .alignleft,
#main .articlePost .alignright,
#main .articlePost .alignnone {
	max-width: 100%;
}
#main .articlePost .aligncenter:is(img),
#main .articlePost .alignleft:is(img),
#main .articlePost .alignright:is(img),
#main .articlePost .alignnone:is(img) {
	display: block;
}
#main .articlePost .aligncenter {
	margin-inline: auto;
}
#main .articlePost .alignright {
	margin-right: 0;
	margin-left: auto;
}
#main .articlePost .wp-caption-text {
	font-size: 1.4rem;
	margin-top: 8px;
}
#main .articlePartsCta {
	border-radius: 8px;
	border: 1px solid #9BB2C7;
	margin: 48px auto;
	width: min(760px, 100%);
	position: relative;
	padding: 16px;
	box-sizing: border-box;
}
#main .articlePartsCtaLabel {
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 2;
	aspect-ratio: 1/1;
	width: 56px;
	border-radius: 50%;
	background: #F07300;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: -0.05em;
	gap: 3px;
}
#main .articlePartsCtaLabel::before {
	content: "";
	display: block;
	width: 16px;
	aspect-ratio: 16/11;
	-webkit-mask: url("https://sendgrid.kke.co.jp/img/common/icon_mail2.svg") no-repeat center center/contain;
					mask: url("https://sendgrid.kke.co.jp/img/common/icon_mail2.svg") no-repeat center center/contain;
	background: currentColor;
}
#main .articlePartsCtaInner {
	text-decoration: none;
	display: grid;
	grid-template-columns: 195px 1fr;
	grid-template-rows: max-content max-content 1fr;
	align-items: start;
	gap: 0 24px;
	text-decoration: none !important;
	color: inherit;
}
#main .articlePartsCtaInner:hover {
	opacity: 0.8;
}
#main .articlePartsCtaThumbnail {
	grid-area: 1/1/4/2;
	margin: 0;
}
#main .articlePartsCtaThumbnail img {
	margin: 0;
}
#main .articlePartsCtaTitle {
	grid-area: 1/2/2/3;
	font-size: 1.8rem;
	font-family: "AxisStd-Medium";
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: -0.2em;
	text-decoration-thickness: 10px;
	text-decoration-color: #FAF885;
	-webkit-text-decoration-skip-ink: none;
					text-decoration-skip-ink: none;
	margin-block: 0;
}
#main .articlePartsCtaText {
	grid-area: 2/2/3/3;
	font-size: 1.5rem;
	line-height: 1.5;
	margin-top: 4px !important;
}
#main .articlePartsCtaButton {
	grid-area: 3/2/4/3;
	width: 185px;
	height: 42px;
	border-radius: 6px;
	background: #F07300;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	font-size: 1.3rem;
	position: relative;
}
#main .articlePartsCtaButton::after {
	content: "";
	display: block;
	width: 6px;
	aspect-ratio: 1/1;
	border: solid currentColor;
	border-width: 1px 1px 0 0;
	rotate: 45deg;
	position: absolute;
	right: 16px;
	top: 50%;
	translate: 0 -50%;
}
#main .articlePartsCtaThumbnail {
	border-radius: 6px;
	overflow: hidden;
	margin: 0 !important;
}
#main .articlePartsCtaThumbnail img {
	width: 100%;
}
#main .articlepartsBorderImage {
	border: 1px solid #9BB2C7;
}
#main .articlepartsCaptionCenter .wp-caption-text {
	text-align: center;
}
#main .articlePartsCtaText {
	font-size: 1.4rem;
}
#main .articlePartsCtaButton {
	font-size: 1.4rem;
}
#main .articlePagination {
	background: #EDF6FE;
	padding-block: 64px;
}
#main .articlePaginationList {
	display: grid;
	grid-template-columns: repeat(2, 408px);
	justify-content: center;
	gap: 0 32px;
	margin-bottom: 32px;
}
#main .articlePaginationPanel a {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: box-shadow 0.2s ease-in-out;
	height: 100%;
}
#main .articlePaginationPanel a:hover {
	box-shadow: 6px 6px 15px 0 rgba(0, 0, 0, 0.25);
}
#main .articlePaginationPanelPrev {
	grid-column: 2/3;
}
#main .articlePaginationPanelNext {
	grid-column: 1/2;
}
#main .articlePaginationPanelContent {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 0 16px;
	padding: 12px;
	align-items: start;
}
#main .articlePaginationPanelThumb {
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 170/105;
	position: relative;
}
#main .articlePaginationPanelThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
	transition: scale 0.2s ease-in-out;
}
#main .articlePaginationPanelThumb.articlePaginationPanelVideoThumb {
	position: relative;
}
#main .articlePaginationPanelThumb.articlePaginationPanelVideoThumb::before,
#main .articlePaginationPanelThumb.articlePaginationPanelVideoThumb::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}
#main .articlePaginationPanelThumb.articlePaginationPanelVideoThumb::before {
	aspect-ratio: 18.76/21.66;
	width: 13px;
	background: #EC4447;
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	z-index: 3;
	translate: -40% -50%;
}
#main .articlePaginationPanelThumb.articlePaginationPanelVideoThumb::after {
	aspect-ratio: 1/1;
	width: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 25.012px 0 rgba(0, 0, 0, 0.15);
	z-index: 2;
	translate: -50% -50%;
}
#main a:hover .articlePaginationPanelThumb img {
	scale: 1.05;
}
#main .articlePaginationPanelTitle {
	font-size: 1.6rem;
	line-height: 1.5;
	margin-block: 0;
	font-family: "AxisStd-Medium";
	color: #0F6CC2;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#main .articlePaginationPanelLabel {
	background: #1A82E2;
	color: #fff;
	font-size: 1.5rem;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
#main .articlePaginationPanelLabel::before {
	content: "";
	display: block;
	width: 8px;
	aspect-ratio: 1/1;
	border: solid currentColor;
	border-width: 0 0 1px 1px;
	rotate: 45deg;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	transition: translate 0.2s ease-in-out;
}
#main .articlePaginationPanelNext .articlePaginationPanelLabel::before {
	left: 20px;
}
#main .articlePaginationPanelPrev .articlePaginationPanelLabel::before {
	scale: -1 -1;
	right: 20px;
}
#main .articlePaginationPanelNext:hover .articlePaginationPanelLabel::before {
	translate: -3px -50%;
}
#main .articlePaginationPanelPrev:hover .articlePaginationPanelLabel::before {
	translate: 3px -50%;
}
#main .articlePaginationBack .newLinkBtn {
	min-width: 320px;
	min-height: 68px;
}
#main .articlePaginationBack .newLinkBtn::before {
	left: 20px;
	width: 7px;
	height: 7px;
}
@media all and (min-width: 0) and (max-width: 736px){
	#main .articleArchive {
		margin-top: 41px;
	}
	#main .articlePanellist {
		grid-template-columns: calc(100% - 55px);
		gap: 24px;
		justify-content: center;
	}
	#main .articlePanelTitle {
		font-size: 1.4rem;
	}
	#main .guidePanelDescription {
		font-size: 1.3rem;
	}
	#main .articlePickup {
		padding-block: 45px 48px;
		background-image: url(https://sendgrid.kke.co.jp/img/common/pickup-bg_sp.jpg);
	}
	#main .articlePickupHeading {
		font-size: 2.4rem;
		margin-bottom: 27px;
		gap: 10px;
	}
	#main .articlePickupHeading::before, #main .articlePickupHeading::after {
		width: 35px;
		height: 2px;
	}
	#main .articlePickupList .articlePanelContent {
		padding: 21px 24px 16px 24px;
	}
	#main .articleArchivelist {
		padding-block: 48px;
	}
	#main .articleArchivelistList .articlePanelContent {
		padding: 18px 24px 18px 24px;
	}
	#main .articleArchivelistList .articlePanelMore {
		margin-top: 14px;
	}
	#main .articleListPagination {
		margin-top: 48px;
	}
	#main .articleListPaginationList {
		padding-inline: 62px;
	}
	#main .articleListPaginationList li {
		height: 48px;
	}
	#main .articleListPaginationBtn {
		padding-inline: 10px;
		font-size: 1.5rem;
	}
	#main .articleListPaginationDots {
		font-size: 1.5rem;
		padding-inline: 11px;
	}
	#main .articleListPaginationArrow::after {
		width: 8px;
	}
	#main .articleLayout {
		padding-inline: 20px;
	}
	#main .articleLayoutTitle {
		font-size: 2.4rem;
		margin-block: 40px 32px;
		padding-left: 18px;
	}
	#main .articleLayoutTitle::before {
		width: 6px;
	}
	#main .articleLayoutInner {
		padding-left: 0;
		width: 100%;
		margin-bottom: 64px;
	}
	#main .articleLayout:not(.siebarNone) .articleLayoutInner:not(:has(.articleLayoutSidebar .articleIndexEmpty:only-child)) {
		padding-left: 0;
	}
	#main .articleLayoutThumb {
		margin-bottom: 32px;
	}
	#main .articleLayoutSidebar {
		width: unset;
		position: relative;
		margin-bottom: 32px;
	}
	#main .articleLayoutSidebarSticky {
		position: static;
	}
	#main .articleIndex {
		padding: 20px;
	}
	#main .articleIndexTitle {
		font-size: 1.3rem;
		margin-bottom: 14px;
	}
	#main .articleIndexTitle::before {
		width: 13px;
	}
	#main .articleIndexItem {
		font-size: 1.3rem;
		gap: 6px;
		margin-block: calc((1em - 1lh) / 2 + 14px) calc((1em - 1lh) / 2);
	}
	#main .articleIndexItem::before {
		width: 8px;
	}
	#main .articlePost {
		font-size: 1.4rem;
	}
	#main .articlePost p small {
		font-size: 1.3rem;
	}
	#main .articlePost :where(p, div):has(img) {
		margin-block: 30px;
	}
	#main .articlePost li > img,
	#main .articlePost li :where(p, div):has(img) {
		margin-block: 5px 15px !important;
	}
	#main .articlePost blockquote {
		margin-block: 28px;
		margin-left: 8px;
		padding: 20px 24px;
		font-size: 1.3rem;
	}
	#main .articlePost blockquote::before {
		width: 36px;
		top: -12px;
		left: -8px;
	}
	#main .articlePost h2 {
		margin-block: 32px 14px;
		font-size: 2rem;
		padding: 10px 16px;
	}
	#main .articlePost h3 {
		font-size: 1.7rem;
		padding: 9px 24px 9px 20px;
		margin-block: 30px 14px;
		letter-spacing: -0.02em;
	}
	#main .articlePost h4 {
		font-size: 1.5rem;
	}
	#main .articlePost h5 {
		margin-block: 10px 2px;
		font-size: 1.4rem;
		line-height: 1.5;
	}
	#main .articlePost section {
		margin-block: 15px;
		padding: 24px;
	}
	#main .articlePost aside {
		margin-block: 32px;
		padding: 12px 20px;
		font-size: 1.3rem;
	}
	#main .articlePost table {
		margin-block: 28px;
	}
	#main .articlePost td, #main .articlePost th {
		padding: 6px 12px;
		font-size: 1.3rem;
	}
	#main .articlePost iframe {
		margin-block: 28px;
	}
	#main .articlePost .wp-caption-text {
		font-size: 1.2rem;
	}
	#main .articlePartsCta {
		margin: 28px auto;
		padding: 8px 10px;
	}
	#main .articlePartsCtaLabel {
		width: 46px;
		top: -11px;
		left: -11px;
		font-size: 1rem;
	}
	#main .articlePartsCtaLabel::before {
		width: 17px;
	}
	#main .articlePartsCtaInner {
		gap: 0 10px;
		grid-template-columns: min(100px, 31.95%) 1fr;
	}
	#main .articlePartsCtaThumbnail {
		grid-area: 1/1/2/2;
	}
	#main .articlePartsCtaTitle {
		font-size: 1.6rem;
		line-height: 1.5;
		text-decoration-thickness: 7px;
		align-self: center;
	}
	#main .articlePartsCtaText {
		grid-area: 2/1/3/3;
		font-size: 1.2rem;
		line-height: 1.4;
	}
	#main .articlePartsCtaButton {
		grid-area: 3/1/4/3;
		width: 138px;
		height: 25px;
		font-size: 1.1rem;
	}
	#main .articlePartsCtaButton::after {
		right: 8px;
	}
	#main .articlePagination {
		padding-inline: 15.5px;
	}
	#main .articlePaginationList {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 8px;
	}
	#main .articlePaginationPanelContent {
		grid-template-columns: 1fr;
		padding: 10px;
		gap: 9px;
	}
	#main .articlePaginationPanelTitle {
		font-size: 1.3rem;
	}
	#main .articlePaginationBack .newLinkBtn {
		min-width: unset;
		width: 100%;
		max-width: 320px;
	}
}


/*------------------------------------------------------------
	LEARN MORE セクション
------------------------------------------------------------*/

#main .learnSection {
	padding: 93px 30px 100px;
}
#main .learnSectionHeading .contentHeadingEn {
	font-size: 6.4rem;
}
#main .learnSectionHeading .contentHeadingJp {
	font-size: 3.2rem;
}
#main .learnSectionList {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 32px;
	max-width: 1024px;
	margin: 52px auto 0;
}
#main .learnSectionPanelHeading {
	border-radius: 8px 8px 0px 0px;
	background: #DBEEFF;
	color: #0F6CC2;
	font-size: 1.6rem;
	font-family: "AxisStd-Medium";
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
#main .learnSectionPanelBody {
	border-radius: 0px 0px 8px 8px;
	background: #EDF6FE;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
	padding: 16px 0 24px;
}
#main .learnSectionPanelText {
	font-size: 2rem;
	text-align: center;
	font-family: "AxisStd-Medium";
}
#main .learnSectionPanelBtn {
	min-width: 144px;
	font-size: 1.4rem;
	background: none;
	padding-right: 15px;
}
@media all and (min-width: 0) and (max-width: 736px){
	#main .learnSection {
		padding: 64px 20px;
	}
	#main .learnSectionHeading .contentHeadingEn {
		font-size: 3.2rem;
	}
	#main .learnSectionHeading .contentHeadingJp {
		font-size: 2rem;
	}
	#main .learnSectionList {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 32px;
	}
	#main .learnSectionPanelHeading {
		font-size: 1.5rem;
		height: auto;
		padding: 5px 0;
	}
	#main .learnSectionPanelBody {
		gap: 11px;
		padding: 10px 0 16px;
	}
	#main .learnSectionPanelText {
		font-size: 1.5rem;
	}
	#main .learnSectionPanelBtn {
		width: auto;
		min-height: 36px;
	}	
}

/* ===================================================================
 * motion.css 
 * =================================================================== */

/**
 * リンクボタン
 */
.comLinkBtn a, 
.btn, 
#main .mailForm .submit button {
	overflow: hidden;
	position: relative;
	z-index: 2;
	border-radius: 4px;
}

.comLinkBtn a.disabled, 
.btn.disabled, 
#main .mailForm .submit button.disabled {
	cursor: default;
	pointer-events: none;
}


.comLinkBtn a:after, 
.btn:after, 
#main .mailForm .submit button:after {
	content: "";
	display: block;
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #64c3e7;
	transition: transform 0.88s cubic-bezier(0, 1, 0, 1);
	
	transform-origin: 0 0 0;
	transform: scale3d(0, 1, 1);
	
	z-index: -1;
}

.btn.grey:after {
	background: #E0E1E1;
}

.comLinkBtn a:hover:after, 
.btn:hover:after, 
#main .mailForm .submit button:hover:after {
	transform: scale3d(1, 1, 1);
}

.comLinkBtn a.disabled:hover:after, 
.btn.disabled:hover:after, 
#main .mailForm .submit button.disabled:hover:after {
	transform: scale3d(0, 1, 1);
	cursor: default;
}


/**
 * グローバルナビ
 */
#gNavi ul li a {
	overflow: hidden;
	position: relative;
	z-index: 2;
	transition: color 0.88s cubic-bezier(0, 1, 0, 1);
}

#gNavi ul li a:hover {
	text-decoration: none;
	border-bottom: none;
}

#gNavi ul li a:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: #64c3e7;
	transition: transform 0.88s cubic-bezier(0, 1, 0, 1);
	
	transform-origin: 0 0 0;
	transform: scale3d(0, 1, 1);
	
	z-index: -1;
}

#gNavi ul li a:hover:after {
	transform: scale3d(1, 1, 1);
}


/**
 * 画像ズーム
 */
#main .bannerSec li a .img, 
#main .bgSec a .photo, 
#main .mainBox .listUl li a, 
#blog .blogList li .pho a {
	display: block;
	overflow: hidden;
}

#main .bannerSec li a .img img, 
#main .bgSec a .photo img, 
#main .mainBox .listUl li a img, 
#blog .blogList li .pho a img {
	transition: transform 0.4s;
}

#main .bannerSec li a:hover .img img, 
#main .bgSec a:hover .photo img, 
#main .mainBox .listUl li a:hover img, 
#blog .blogList li .pho a:hover img {
	transform: scale(1.1, 1.1);
}

/* ===================================================================
 * support.css 
 * =================================================================== */
#gHeader .hInner .hLink .link02 a {
	color: #64c3e7;
	text-decoration: none;
	background: url("https://sendgrid.kke.co.jp/images/common/icon01_over.png") no-repeat left center;
}

/**
 * main要素の再定義
 */
#main hr {
  margin: 0 0 60px 0;
}

#main h1 {
  /**text-align: left;**/
}

#main h2 {
  margin-top: 0;
  text-align: left;
  line-height: 50px;
}

#main h3 { 
  text-align: left;
}

#main .mainBox p {
  text-align: left;
}

#main .mainBox p.jump {
  font-size: 1.4rem;
  text-align: center;
}

#main .mainBox ul {
	margin-bottom: 10px;
} /*2021/11/08 add(Backlog6172)*/

#main strong {
  font-family: AxisStd-Regular;
}

#main .search form {
  margin: 20px 50px 60px 50px;
  font-size: 1.6rem;
}

#main .search input {
  padding: 16px;
  width: 100%;
}

#main .search input[type="submit"], .sub-nav .search input[type="submit"] {
  display: none;
}

/**
 * pagePath
 */
#pagePath {
	padding: 13px 0 21px;
	background: url("https://sendgrid.kke.co.jp/images/common/pagepath_bg.png") repeat-x left top;
}

#pagePath .breadcrumb-pane {
	width: 990px;
	margin: 0 auto;
}

#pagePath .homeLink {
	display: inline-block;
  font-size: 1.4rem;
}

#pagePath ol {
  display: inline-block;

}

#pagePath li {
	margin-right: 5px;
	display: inline;
	font-size: 1.4rem;
	font-family:"AxisStd-Regular";
}

#pagePath li a {
	margin-right: 8px;
}

#pagePath li:before {
  content: ">　";
}

/**
 * side
 */
#side {
	float: left;
  height: auto;
  font-size: 1.4rem;
  padding: 15px 15px;
  width: 240px;
  background-color: #546b81;
  color: #fbfbfc;
}

#side .search {
  margin: 0 0;
}

#side #query {
	box-sizing: border-box;
  padding: 10px;
  font-size: 1.4rem;
  background-color: #fdfdff;
  border: 1px solid #dcdddd;
  width: 100%;
  color: initial;
}

#side .search-box input[type="submit"], .sub-nav .search input[type="submit"] {
  display: none;
}

#side h3 {
  font-size: 2.0rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

#side li {
  padding: 10px 0;
}

#side li>a {
	color: #fbfbfc;
}

#side li>a:hover {
	text-decoration: underline;
}

/**
 * support_main
 */
#support_main {
	float: right;
  font-size: 1.6rem;
  line-height: 175%;
  padding: 0 30px;
  width: 660px;
  text-align: left;
}

#support {
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 175%;
  padding: 0 30px;
  max-width: 660px;
  width: 100%;
  text-align: left;
/*   box-sizing: border-box; */
}

/**
 * お問い合わせフォーム
 */
#main .requestForm {
	padding: 45px 33px;
	background-color: #FBFBFD;
	box-shadow: 0 0 4px #CCC;
	border: 1px solid #009ed9;
	border-top: 4px solid #009ed9;
	border-radius: 0 0 4px 4px;
	position: relative;
    behavior: url(https://sendgrid.kke.co.jp/js/pie.htc);
}

#main .requestForm form {
  margin-bottom: 40px;
}

#main .requestForm .form-field {
  margin-bottom: 40px;
	font-size: 1.6rem;
}

#main .requestForm .form-field label {
  display: block;
	margin-bottom: 15px;
	padding-bottom: 18px;
	font-size: 1.6rem;
	background: url(https://sendgrid.kke.co.jp/images/common/icon13.gif) no-repeat left bottom;
}

#main .requestForm p {
	font-size: 1.2rem;
}

#main .requestForm .form-field.required label:after {
  content: "必須";
  margin-left: 20px;
  padding: 1px 15px 2px;
  color: #FFF;
  font-size: 1.1rem;
  vertical-align: middle;
  border-radius: 2px;
  background-color: #009ed9;
  position: relative;
}

#main .requestForm .form-field.optional label:after {
  content: "任意";
  margin-left: 20px;
  padding: 1px 15px 2px;
  color: #424752;
  font-size: 1.1rem;
  vertical-align: middle;
  border-radius: 2px;
  background-color: #BEBFBF;
  position: relative;
}

#main .requestForm .form-field p {
	margin-top: 10px;
	display: block;
	font-size: 1.2rem;
}

#main .requestForm .form-field input[type="text"] {
	padding: 10px;
	width: 560px;
	height: 20px;
	font-size: 1.4rem;
	background-color: #FDFDFF;
	border: 1px solid #DCDDDD;
}

#main .requestForm .form-field a.nesty-input {
	padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
	width: 220px;
	height: 40px;
	border: 1px solid #DCDDDD;
}

#main .requestForm .form-field textarea {
	padding: 10px;
	width: 560px;
	height: 104px;
	font-size: 1.4rem;
	background-color: #FDFDFF;
	border: 1px solid #DCDDDD;
}

#main .requestForm .suggestion-list {
	margin-bottom: 40px;
}

#main .requestForm footer {
	margin: 0 auto;
	width: 210px;
}

#main .requestForm footer input {
	padding: 12px 0;
	width: 100%;
	display: block;
	text-align: center;
	color: #FFF;
	font-size: 1.4rem;
	border-radius: 4px;
	border: none;
	box-shadow: 0 0 10px #DDD;
	background: -moz-linear-gradient(  
                top,  
                #009ed9 0%,  
                #009ed9 25%,  
                #009ed9);  
  background: -webkit-gradient(  
                linear, left top, left bottom,   
                from(#009ed9),  
                color-stop(0.25, #009ed9),  
                to(#009ed9));
	position: relative;
  behavior: url(https://sendgrid.kke.co.jp/js/pie.htc);
	cursor: pointer;
}

#main .requestForm footer input:hover {
	background: #64c3e7;
}

#main .requestForm .upload-dropzone span {
  color: #424752;
}

/**
 * Table
 */
#support_main table {
	margin-bottom: 45px;
	width: 100%;
	border-collapse: collapse;
}

#support_main table th,
#support_main table td {
	padding: 23px 10px 23px 20px;
	font-size: 1.6rem;
	vertical-align: middle;
	border: 1px solid #BEBFBF;
  word-break: break-word;
}

#support_main table th {
	color: #FFF;
	font-size: 1.4rem;
	font-weight: normal;
	background-color: #A7B3BE;
}

/**
 * List
 */
#support_main ul {
	list-style-type: disc;
	margin: 10px 0px 10px 20px;
	padding: 10px 0px 10px 20px;
}

#support_main ul.share {
	margin: 10px 0 10px 0;
  padding: 0;
}

#support_main ul ul {
	list-style-type: circle;
}

#support_main ul ul ul {
	list-style-type: disc;
}

#main ul.article-list {
  list-style-type: disc;
  margin: 0 0 10px 30px;
}
#main ul.article-list li {
  margin: 4px 0 4px 0;
}
#main .article-list-container {
  margin-bottom: 60px;
}
#support_main ol {
	list-style-type: decimal;
	margin: 10px 0px 10px 20px;
	padding: 10px 0px 10px 20px;
}

#support_main img {
  display: block;
  height: auto;
  max-width: 100%;
	margin: 20px 0;
	border: 1px solid #bebfbf;
}

#support_main .search-results ul {
	list-style-type: none;
  margin: 0;
  padding: 0;
}

#support_main .search-results .search-result {
  font-size: 1.8rem;
  margin: 50px 0 8px 0;
}

#support_main .search-results .search-result .search-result-meta {
  font-size: 1.2rem;
}

#support_main .search-results .search-result .search-result-description {
  font-size: 1.4rem;
}

/**
 * 共通要素
 */
.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.category {
  display: flex;
  flex-wrap: wrap;
}

.category h2 {
  display: block;
}

.category-container {
  width: 100%;
}

.section-tree {
  display: flex;
  flex-wrap: wrap;
}

.section {
  margin-bottom: 60px;
  max-width: 450px;
  width: 100%;
  margin-right: 90px;
}

.section:nth-child(2n) {
  margin-right: 0;
}

.see-all-articles {
	font-size: 1.4rem; 
}

.visibility-internal-icon:before {
  content: "\1F512";
  display: inline-block;
  font-family: "entypo";
  text-align: center;
  width: 13px;
}

.article-promoted span, .visibility-internal {
  cursor: default;
  position: relative;
}
.article-promoted span:before, .article-promoted span:after, .visibility-internal:before, .visibility-internal:after {
  display: none;
  font-size: 13px;
  font-weight: normal;
  position: absolute;
}
.article-promoted span:before, .visibility-internal:before {
  background: #222;
  border-radius: 3px;
  color: #FFF;
  content: attr(data-title);
  font-family: sans-serif;
  left: -10px;
  margin-top: 5px;
  padding: 3px 10px;
  text-transform: none;
  top: 100%;
  white-space: nowrap;
  z-index: 1;
}
.article-promoted span:after, .visibility-internal:after {
  border-bottom: 5px solid #222;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  width: 0;
}
.article-promoted span:hover:before, .article-promoted span:hover:after, .visibility-internal:hover:before, .visibility-internal:hover:after {
  display: block;
}

/* Article */
.article-header {
  margin-bottom: 25px;
}
.article-header h1 {
  font-weight: bold;
  margin: 0 0 10px;
}

.article-info > * {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.2rem;
}

.article-avatar {
  min-width: 55px;
}
.article-avatar img {
  border-radius: 3px;
  max-height: 42px;
  max-width: 42px;
}

.article-updated {
  display: block;
}

.article-more-questions {
  margin: 15px 0 50px;
  font-size: 1.6rem;
}

.article-body {
  margin-bottom: 25px;
}

.article-body table {
  table-layout: fixed;
  margin: 10px 0;
}

.article-body p {
	margin: 10px 0;  
}

.article-footer {
  border-bottom: 1px solid #eeeeee;
  margin-top: 15px;
  padding: 20px 0;
}
.article-footer .article-vote, .article-footer .share {
  display: table-cell;
}

/* Social share links */
.share {
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share a {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  vertical-align: middle;
  width: 30px;
}

.share a:before {
  background: #CCC;
  border-radius: 50%;
  color: #FFF;
  display: inline-block;
  font-family: "entypo";
  text-align: center;
  width: 100%;
}

.share a:hover {
  text-decoration: none;
}

.share-twitter:before {
  content: "\F309";
}

.share-facebook:before {
  content: "\F30C";
}

.share-linkedin:before {
  content: "\F318";
}

.share-googleplus:before {
  content: "\F30F";
}

.wysiwyg-font-size-medium {
  font-size: 1.6rem;
}

.share {
  margin-top: 25px;
  margin-bottom: 25px;
}

/**
 * Pagination
 */
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination * {
  display: inline-block;
}

.pagination li {
  border: 1px solid #eeeeee;
  float: left;
  margin-left: -1px;
}
[dir="rtl"] .pagination li {
  float: right;
}

.pagination a, .pagination span {
  color: inherit;
  font-size: 12px;
  padding: 5px 12px;
}

.pagination-current {
  background-color: #f9f9f9;
  color: #bebebe;
}

.pagination-first {
  border-radius: 3px 0 0 3px;
}
[dir="rtl"] .pagination-first {
  border-radius: 0 3px 3px 0;
}

.pagination-last {
  border-radius: 0 3px 3px 0;
}
[dir="rtl"] .pagination-last {
  border-radius: 3px 0 0 3px;
}

/**
 	* アンカーリンクがヘッダに隠れてしまう問題への対応(SG_JP2-6647)
*/
html{
	scroll-padding-top: 100px;
}

#support_main .recent-articles {
  display: none;
}
#support_main .related-articles {
  display: none;
}

/*------------------------------------------------------------
For Smartphone
------------------------------------------------------------*/

@media all and (min-width: 0px) and (max-width: 736px) {
  #main h2 {
   	margin-top: 0;
  }
  
  #main h3 {
    display: inline-block;
    margin-top: 20px;
  }

  #main .search form {
  	margin: 20px 20px 30px 0;
  	font-size: 1.2rem;
	}

  #main .search input {
    padding: 16px;
    width: 100%;
  }

  #main .section {
    margin-bottom: 30px;
  }
  
  #main .section {
    margin-right: 0px;
  }
  
  #main .mainBox ul {
    margin-bottom 20px;
  }
  
  #main .requestForm .form-field input[type="text"] {
		width: 100%;
  }

  #main .requestForm .form-field a.nesty-input {
    width: 100%;
  }

  #main .requestForm .form-field textarea {
    width: 100%;
  }
  
  #side {
  	width: 100%;
    padding: 0;
    margin: 0 0 30px 0;
  }

  #side h3 {
	  font-size: 1.6rem;
  }
  #side #query {
    width: 100%;
	}
  
  #sidebar-header {
    margin: 0 18px;
  }
  #support_main {
    width: 100%;
    margin: 0 0 40px 0;
    padding: 0;
    float: none;
  }
  
  #support_main .padding {
    padding: 30px 20px;
  }

  #support_main table{
  	width: 100%;
  }
  #side .recent-articles {
    display: none;
  }
  #side .related-articles {
    display: none;
  }
  #support_main .recent-articles {
    display: block;
    padding: 10px;
    background-color: #546b81;
    color: #fbfbfc;
  }
  #support_main .recent-articles a {
    color: #fbfbfc;
  }
  #support_main .related-articles {
    display: block;
    padding: 10px;
    background-color: #546b81;
    color: #fbfbfc;
  }
  #support_main .related-articles a {
    color: #fbfbfc;
  }
  #side .search-box {
    padding: 10px;
  }
  
  #side li {
    padding: 2px 0;
  }
  
  .wysiwyg-font-size-medium {
  	font-size: 1.2rem;
	}
  
  .article-more-questions {
    /*margin: 15px 0 50px;*/
    font-size: 1.2rem;
  }
  
  .see-all-articles {
    font-size: 1.2rem;
  }
  
  #support {
  	padding: 0;
  }

  hr {
    margin: 0 0 30px 0;
  }
  
  /**
 	* アンカーリンクがヘッダに隠れてしまう問題への対応(SG_JP2-6647)
 	*/
  html{
		scroll-padding-top: 70px;
	}
}