@charset "utf-8";
/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.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; }
.pt0 { padding-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mb5 { margin-bottom: 5px !important; }
.mt10 { margin-top: 10px !important; }
.pt10 { padding-top: 10px !important; }
.mb10 { margin-bottom: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mb20 { margin-bottom: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.t_center{ text-align:center !important;}
/*------------------------------------------------------------
  幅調整 .w-
------------------------------------------------------------*/
.w-0 { width: 0 !important; }
.w-5 { width: 5% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-50 { width: 50% !important; }
.w-55 { width: 55% !important; }
.w-60 { width: 60% !important; }
.w-65 { width: 65% !important; }
.w-70 { width: 70% !important; }
.w-75 { width: 75% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }
.w-100 { width: 100% !important; }
.w-33 { width: 33.3333% !important; }
.w-44 { width: 44.4444% !important; }
.w-66 { width: 66.6666% !important; }
.w-77 { width: 77.7777% !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 {

}

/*------------------------------------------------------------
	common
------------------------------------------------------------*/
#main a[target="_blank"] .icn {
  width: auto;
  margin-right: 4px;
  vertical-align: middle;
}

.site-header-02> .inner {
    box-shadow: none;
}

.headLine {
	margin: 0 0 50px 0;
	text-align: center;
}

.headLine02 {
	margin-bottom: 23px;
	padding-bottom: 7px;
	font-size: 24px;
	border-bottom: 2px solid #052F5F;
}
.headLine02 span {
	padding: 4px 25px 2px;
	display: inline-block;
	color: #fff;
	text-align: center;
	font-size: 20px;
	margin-right: 10px;
	background-color: #052F5F;
	border-radius: 10px;
	vertical-align: 3px;
	box-sizing: border-box;
}
.headLine02 .textSpan {
	margin-left: 5px;
}

.headLine03 {
    margin-bottom: 23px;
    font-size: 20px;
}
.headLine03 span {
    padding: 6px 15px 4px;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 18px;
    margin-right: 15px;
    background-color: #052F5F;
    vertical-align: 3px;
    box-sizing: border-box;
}
.headLine03 small {
    font-weight: normal;
}

.h2-01 {
    text-align: center !important;
    font-size: 30px;
    line-height: 125%;
    margin: -20px auto 0;
    padding: 25px 0 0 0;
    color: #333;
    position: relative;
    display: inline-block;
}
.h2_icon01::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon01.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon02::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 54px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon02.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -55px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon03::after {
    position: absolute;
    content: "";
    width: 65px;
    height: 65px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon03.png) no-repeat;
    background-size: 100%;
    top: 15%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon04::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 70px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon04.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -55px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon05::after {
    position: absolute;
    content: "";
    width: 56px;
    height: 56px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon05.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -48px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon06::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 80px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon06.png) no-repeat;
    background-size: 100%;
    top: -5%;
    left: -40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon07::after {
    position: absolute;
    content: "";
    width: 65px;
    height: 80px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon07.png) no-repeat;
    background-size: 100%;
    top: 10%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon08::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 55px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon08.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon09::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 70px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon09.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon10::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 70px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon10.png) no-repeat;
    background-size: 100%;
    top: 20%;
    left: -40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon11::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 70px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon11.png) no-repeat;
    background-size: 100%;
    top: 15%;
    left: -55px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon12::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 80px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon12.png) no-repeat;
    background-size: 100%;
    top: 10%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon14::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 53px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon14.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon15::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 50px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon15.png) no-repeat;
    background-size: 100%;
    top: 30%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon16::after {
    position: absolute;
    content: "";
    width: 65px;
    height: 50px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon16.png) no-repeat;
    background-size: 100%;
    top: 30%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon17::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 67px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon17.png) no-repeat;
    background-size: 100%;
    top: 10%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon18::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 70px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon18.png) no-repeat;
    background-size: 100%;
    top: 10%;
    left: -60px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon19::after {
    position: absolute;
    content: "";
    width: 65px;
    height: 65px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon19.png) no-repeat;
    background-size: 100%;
    top: 20%;
    left: -55px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon20::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 46px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon20.png) no-repeat;
    background-size: 100%;
    top: 20%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon21::after {
    position: absolute;
    content: "";
    width: 38px;
    height: 55px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon21.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -38px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon22::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 45px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon22.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -45px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon23::after {
    position: absolute;
    content: "";
    width: 55px;
    height: 60px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon23.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon24::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 42px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon24.png) no-repeat;
    background-size: 100%;
    top: 35%;
    left: -50px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.h2_icon25::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 42px;
  background: url(/nsi/ss/kaoato/img/common/pict_icon25.png) no-repeat;
  background-size: 100%;
  top: 35%;
  left: -50px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.h2_icon27::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 55px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon27.png) no-repeat;
    background-size: 100%;
    top: 25%;
    left: -45px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }

.h2-02 {
    font-size: 30px;
    margin: 0 0 30px 0;
    color: #333;
    position: relative;
    display: inline-block;
}
.h2-02_icon01 {
    padding: 0 0 0 90px;
}
.h2-02_icon01::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 60px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon18.png) no-repeat;
    background-size: 100%;
    top: -10%;
    left: 0;
}

h3.left_line {
    border-left: 8px solid rgba(0,43,98,1);
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 22px;
}
h3.center {
    padding-top: 60px;
    margin-bottom: 30px;
    font-size: 27px;
    text-align: center;
}


.bg_blue {
    background: #D3E6FE;
}
.bg_blue02 {
    background: #dbe8ef;
}
.bg_navy {
    background: #052F5F;
}
.bg_gray {
    background: #F2F2F2;
}
.bg_green {
    background: #e3f0ef;
}


#main .icon_ttl_wrap {
	width: 100%;
}
#main .icon_ttl_wrap .checked_icon {
	width: 35px;
	float: left;
    padding: 0 10px 0 0;
}
#main .icon_ttl_wrap .checked_icon img {
	width: 100%;
}
#main .icon_ttl_wrap .checed_ttl {
    font-size: 18px;
    margin: 0 0 10px 0;
}

#main .imageBox {
	width: 1200px;
	margin: 50px auto 0 auto;
}
#main .imageBox img {
	width: 100%;
}

.comLink {
	width: 200px;
}
.comLink.of-full {
  width: 100%;
}
.comLink a {
	padding: 15px 20px 12px;
	display: block;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	position: relative;
	text-decoration: none;
	background-color: #052F5F;
}
.comLink.purple a {
	background-color: #664d7b;
}
.comLink.center {
  margin-left: auto;
  margin-right: auto;
}
.comLink.kaoato,
.comLink.inquiry,
.comLink.download {
  min-width: 240px;
}
.comLink.kaoato a,
.comLink.inquiry a,
.comLink.download a {
  padding-left: 36px;
  text-align: center;
}
.comLink.kaoato a::before,
.comLink.inquiry a::before,
.comLink.download a::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.comLink.kaoato a::before {
  width: 32px;
  height: 30px;
  background-image: url(/nsi/ss/kaoato/img/common/pict_icon26_w.png);
}
.comLink.inquiry a {
  background: #eb6e00;
}
.comLink.inquiry a::before {
  width: 34px;
  height: 23px;
  background-image: url(/nsi/ss/kaoato/img/common/inquiry_icon.png);
}
.comLink.download a:before {
  width: 32px;
  height: 27px;
  background-image: url(/nsi/ss/kaoato/img/common/dl_icon_wh.png);
}

.comLink a:after {
	width: 10px;
	height: 16px;
	margin-top: -8px;
	background: url(/nsi/ss/kaoato/img/common/arrow01w.png) no-repeat right top;
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
}

.comLink a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

html[data-script-enabled="true"] .str-floatingMenu {
  margin: 0 0 -60px;
  padding: 0;
}
.site-footer .seg-primary .scroll-top {
    margin: 0;
}

.link-border:link {
  text-decoration: underline;
}
.link-border:hover {
  text-decoration: none;
}

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

#main .comImgBoxL .photoBox {
	float: left;
	width: 580px;
}
#main .comImgBoxL .photoBox img {
	width: 100%;
	height: auto;
}

#main .comImgBoxL .photoBox a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

#main .comImgBoxL .textBox {
    padding: 10px 0 0 0;
    float: right;
    width: 580px;
}

#main .comImgBoxL .textBoxL {
    padding: 10px 0 0 0;
    float: left;
    width: 580px;
}

#main .comImgBoxL .textBox .textImg {
	margin-bottom: 20px;
}

#main .textBox .label {
	margin: 0 !important;
	padding: 5px 10px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background: #002b62;
	display: inline-block;
}

#main .textBox .title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
}

#main .textBox .title a {
	display: inline-block;
	text-decoration: none;
	border-bottom: 2px solid #747474;
}

#main .textBox .title a:hover {
	padding-bottom: 2px;
	border-bottom: none;
}

#main .comImgBoxL .textBox p {
	margin-bottom: 32px;
	line-height: 1.75;
}

#main .comImgBoxL .textBox ul {
	margin-bottom: 32px;
	line-height: 1.75;
}

#main .comImgBoxL .textBox .text07 {
	letter-spacing: -0.2px;
}

#main .comImgBoxL .textBox p:last-child {
	margin-bottom: 0;
}

#main .comImgBoxL .textBox p .textSpan {
	font-weight: bold;
	display: block;
	font-size: 20px;
}

#main .comImgBoxL .textBox dl {
	width: 100%;
	display: table;
}

#main .comImgBoxL .textBox .dlStyle {
	margin-bottom: 10px;
}

#main .comImgBoxL .textBox dt {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	width: 84px;
}

#main .comImgBoxL .textBox .dlStyle dt img {
	margin-left: 8px;
	width: 60px;
}

#main .comImgBoxL .textBox dd {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	padding: 0 0 15px 15px;
}


#main .comImgBoxL02 .photoBox {
	width: 540px;
	text-align: center;
}

#main .comImgBoxL02 .photoBox .photoSpan {
	margin-bottom: 30px;
	display: block;
}

#main .comImgBoxR {
	margin-bottom: 33px;
}

#main .comImgBoxR .photoBox {
	float: right;
	width: 580px;
}
#main .comImgBoxR .photoBox img {
	width: 100%;
	height: auto;
}

#main .comImgBoxR .photoBox a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

#main .comImgBoxR .textBox {
	padding: 10px 0 0 0;
	float: left;
	width: 580px;
}

#main .comImgBoxR .textBox p {
	margin-bottom: 32px;
	line-height: 1.75;
}

#main .indent {
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
}

/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/

#main .mainImg {
	background-color: #052F5F;
}

#main .mainImg .photoBox {
	float: right;
	max-width: 600px;
	width: 50%;
}

#main .mainImg .photoBox img {
	width: 100%;
}

#main .mainImg .box {
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}

#main .mainImg .textBox {
	padding: 20px 10px 20px 10px;
	float: left;
	max-width: 600px;
	width: 50%;
	box-sizing: border-box;
}

#main .mainImg .textBox p {
	font-size: 19px;
	color: #fff;
}

#main .mainImg .textBox .title {
	font-size: 18px;
	margin: 10px 0 20px 0;
	line-height: 2;
}
#main .mainImg .textBox .title span {
	display: block;
	font-weight: bold;
	font-size: 40px;
	line-height: 1.2;
}
#main .mainImg .textBox .title span small {
	font-size: 24px;
}
#main .mainImg .textBox .label {
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 0;
	background-color: #fff;
	color: #052F5F;
}
#main .mainImg .textBox .subtitle {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 0 10px;
}
#main .mainImg .textBox ul {
    margin: 20px 0 0 0;
    padding: 0;
    display: flex;
}
#main .mainImg .textBox ul li {
    margin: 0 20px 0 0 !important;
    padding: 0;
}
#main .mainImg .textBox ul li a {
    margin: 0;
    padding: 0;
    display: block;
    text-decoration: none;
}
#main .mainImg .textBox ul li a span {
    font-size: 14px;
}

#main .mainImg .textBox ul li a:hover {
    border-bottom: none;
}
#main .mainImg .textBox ul li.inquiry a span,
#main .mainImg .textBox ul li.download a span {
    width: 270px !important;
    display: block;
    position: relative;
    color: #fff;
    margin: 0 auto;
    padding: 10px 0 10px 15px;
    text-align: center;
    position: relative;
    text-decoration: none;
    font-size: 16px;
}
#main .mainImg .textBox ul li.inquiry a span {
    background: #eb6e00;
}
#main .mainImg .textBox ul li.download a span {
    background: #fff;
    color: #052F5F !important;
}
#main .mainImg .textBox ul li.inquiry a span::before {
    position: absolute;
    background: url(/nsi/ss/kaoato/img/common/inquiry_icon.png)no-repeat;
    width: 34px;
    height: 23px;
    background-size: 100%;
    top: 50%;
    left: 10%;
    content: "";
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
#main .mainImg .textBox ul li.download a span::before {
    position: absolute;
    background: url(/nsi/ss/kaoato/img/common/dl_icon.png)no-repeat;
    width: 32px;
    height: 27px;
    background-size: 100%;
    top: 50%;
    left: 10%;
    content: "";
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
#main .mainImg .textBox ul li.inquiry a span::after {
    position: absolute;
    top: 42%;
    right: 20px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#main .mainImg .textBox ul li.download a span::after {
    position: absolute;
    top: 42%;
    right: 20px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #052F5F;
    border-right: 1px solid #052F5F;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#main .mainImg .textBox ul li.inquiry a span:hover::after,
#main .mainImg .textBox ul li.download a span:hover::after {
    right: 25px;
}
#main .comList {
	margin: 20px 0;
}
#main .comList li {
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.7;
}
#main p.indent {
    text-indent: -1em;
    padding-left: 1em;
}


/*------------------------------------------------------------
    mainVisual
------------------------------------------------------------*/
.kv_wrap {
    width: 100%;
    padding: 0;
    margin: 0;
}

.top_box {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1200px;
    margin: 0 auto;
}

.kv_txtbox {
    display: inline-block;
    background: rgba(5,47,95,.7);
    padding: 20px 10px 20px 30px;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
}
.kv_txtbox .title {
    font-size: 40px;
    font-weight: bold;
    margin: 0;
    padding: 0 0 10px;
    line-height: 1.2;
    color: #fff;
}
.kv_txtbox .subtitle {
    font-size: 15px;
    font-weight: bold;
}
.kv_txtbox .subtitle .label {
    letter-spacing: 0;
    background-color: #fff;
    color: #052F5F;
    margin: 0 10px 0 0;
    padding: 5px 10px;
    display: inline-block;
}
.kv_icon {
    position: relative;
}
.kv_icon::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    background: url(/nsi/ss/kaoato/img/common/pict_icon11.png) no-repeat;
    background-size: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.kv_txtbox ul {
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
}
.kv_txtbox ul li {
    margin: 0 20px 0 0;
    padding: 0;
}
#main .mainImg .textBox ul li.download {
    margin: 0;
}
.kv_txtbox ul li a {
    margin: 0;
    padding: 0;
    display: block;
    text-decoration: none;
}
.kv_txtbox ul li a span {
    font-size: 14px;
}

.kv_txtbox ul li a:hover {
    border-bottom: none;
}
.kv_txtbox ul li.inquiry a span,
.kv_txtbox ul li.download a span {
    width: 280px;
    display: block;
    position: relative;
    color: #fff;
    margin: 0 auto;
    padding: 10px 0 10px 15px;
    text-align: center;
    position: relative;
    text-decoration: none;
    font-size: 16px;
}
.kv_txtbox ul li.inquiry a span {
    background: #eb6e00;
}
.kv_txtbox ul li.download a span {
    background: #fff;
    color: #052F5F;
}
.kv_txtbox ul li.inquiry a span::before {
    position: absolute;
    background: url(/nsi/ss/kaoato/img/common/inquiry_icon.png)no-repeat;
    width: 34px;
    height: 23px;
    background-size: 100%;
    top: 50%;
    left: 10%;
    content: "";
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.kv_txtbox ul li.download a span::before {
    position: absolute;
    background: url(/nsi/ss/kaoato/img/common/dl_icon.png)no-repeat;
    width: 32px;
    height: 27px;
    background-size: 100%;
    top: 50%;
    left: 10%;
    content: "";
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.kv_txtbox ul li.inquiry a span::after {
    position: absolute;
    top: 42%;
    right: 20px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.kv_txtbox ul li.download a span::after {
    position: absolute;
    top: 42%;
    right: 20px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #052F5F;
    border-right: 1px solid #052F5F;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.kv_txtbox ul li.inquiry a span:hover::after,
.kv_txtbox ul li.download a span:hover::after {
    right: 25px;
}



/*------------------------------------------------------------
	comTtl
------------------------------------------------------------*/
#main .greyBox .title.comTtl span {
    padding: 8px 3px 8px;
}

#main .greyBox .comTtl span:after {
	display: none;
}

#main .comInner .photoBox p {
	margin-top: 5px;
}


/*------------------------------------------------------------
	comBorImg
------------------------------------------------------------*/
#main .comBorImg {
	border: 1px solid #D8D8D8;
}


/*------------------------------------------------------------
	comNavi
------------------------------------------------------------*/
#main .comNavi {
	margin: 0 auto;
	width: 1200px;
}
#main .comNavi li {
	float: left;
	width: 33%;
	background: #fff;
}
#main .comNavi.listCol4 li {
	width: 25%;
}
#main .comNavi li a {
	display: table;
	position: relative;
	width: 100%;
	height: 60px;
	color: #664d7b;
	border-collapse: collapse;
}
#main .comNavi li a .txt {
	display: table-cell;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #664d7b;
}
#main .comNavi li a .txt .small {
	display: block;
	font-size: 12px;
}
#main .comNavi li:hover,
#main .comNavi .on {
	background-color: #664d7b;
}
#main .comNavi li a:hover,
#main .comNavi .on a {
	color: #fff;
	text-decoration: none;
}


/*------------------------------------------------------------
	column2Box
------------------------------------------------------------*/

#main .column2Box {

}
#main .column2Box .textBox {
	float: left;
	width: calc((100% - 50px) / 2);
	margin: 0 50px 30px 0;
}
#main .column2Box .textBox:nth-child(2n) {
	margin: 0 0 30px 0;
}


/*------------------------------------------------------------
	Page Navigation
------------------------------------------------------------*/

.pNav {
	background: #32393c;
}
.pNav .inner {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
}
.pNav .inner > div.col {
	text-align: center;
    float: left;
	margin: 0;
	padding: 10px 0;
	box-sizing: border-box;
}
.pNav.column-02 .inner > div.col {
	width: 50%;
}
.pNav.column-03 .inner > div.col {
	width: 33.33333%;
}
.pNav.column-04 .inner > div.col {
	width: 25%;
}
.pNav.column-05 .inner > div.col {
	width: 20%;
}
.pNav.column-06 .inner > div.col {
	width: 16.66666%;
}
.pNav.column-07 .inner > div.col {
	width: 14.28571%;
}

.pNav .inner > div.col > p {
	margin: 0 auto;
	text-align: center;
}
.pNav .inner > div.col a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	padding: 6px 30px;
	background: url(/nsi/ss/kaoato/img/common/arrow02w.png) no-repeat 0 5px;
	background-size: auto 18px;
	text-align: center;
}
.pNav .inner > div.col:hover a {
	background: url(/nsi/ss/kaoato/img/common/arrow02w.png) no-repeat 0 8px;
	background-size: auto 18px;
}
.pNav .inner > div.col:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.3);
}


/*------------------------------------------------------------
    productsBoxList
------------------------------------------------------------*/

#main .productsBoxList {
    margin: 0;
}
#main .productsBoxList li {
    margin: 0 48px 40px 0;
    float: left;
    width: 348px;
}
#main .productsBoxList li:nth-child(3n) {
    margin-right: 0;
}
#main .productsBoxList li a {
    display: block;
    text-decoration: none;
    background-color: #fff;
}
#main .productsBoxList li .whiteBox {
    padding: 25px 20px;
}
#main .productsBoxList li .whiteBox p {
    line-height: 1.55;
}
#main .productsBoxList li .whiteBox .title {
    margin-bottom: 20px;
    font-size: 18px;
    color: #052F5F;
    font-weight: bold;
    text-align: center;
}
#main .productsBoxList li .whiteBox .title span {
    font-size: 16px;
}
#main .productsBoxList li a:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}
#main .productsBoxList li img {
    width: 100%;
    height: auto;
}


/*------------------------------------------------------------
    introBox
------------------------------------------------------------*/
#main .introBox {
    padding: 30px 0;
    background: #052F5F;
}
#main .introBox .inner {
    width: 1140px;
    margin: 0 auto;
}
#main .introBox .inner p {
    float: left;
    width: 740px;
    color: #fff;
    font-size: 16px;
}
#main .introBox .inner p.photo {
    float: left;
    width: 120px;
    margin: 0 30px 0 0;
}
#main .introBox .inner p.photo img {
    width: 100%;
    height: auto;
}
#main .introBox .inner p.title {
    font-size: 23px;
    font-weight: bold;
    float: left;
    color: #fff;
    margin: 0 0 10px 0;
}
#main .introBox .inner p a {
    color: #fff;
}
#main .introBox .inner p:not([class]) a:link {
    text-decoration: underline;
}
#main .introBox .inner p:not([class]) a:hover {
    text-decoration: none;
}
#main .introBox .inner .btn {
    margin: 0;
    float: right;
    text-align: right;
    width: 200px;
}
#main .introBox .inner .btn a {
    padding: 12px 10px;
    display: inline-block;
    position: relative;
    color: #122e57;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    background-color: #FFF;
    min-width: 200px;
}
#main .introBox .inner .btn02 {
    margin-top: 20px;
}
#main .introBox .inner .btn a:hover {
    text-decoration: none;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

/*------------------------------------------------------------
    linkBox
------------------------------------------------------------*/
#main .linkBox {
  background: #419b91;
}
#main .colBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
}
#main .linkBox .inner p {
  float: none;
  width: auto;
}
#main .linkBox .textBox {
  max-width: 75%;
}
#main .linkBox .inner .subTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
#main .linkBox .inner .subTitle a {
    text-decoration: underline;
}
#main .linkBox .inner .subTitle a:hover {
    text-decoration: none;
}
#main .linkBox .btnBox .btn {
  float: none;
  width: auto;
  min-width: 200px;
}
#main .linkBox .btnBox .btn:not(:last-child) {
  margin-bottom: 10px;
}
#main .linkBox .btnBox .btn a {
  padding: 10px 10px;
}
#main .btnBox.two-column {
    display: flex;
}
#main .btnBox.two-column .btn {
  margin-right: 30px;
}

/*------------------------------------------------------------
    usefulBox
------------------------------------------------------------*/
#main .usefulBox {
    padding: 50px 0 30px 0;
}
#main .usefulBox .inner {
    width: 1140px;
    margin: 0 auto;
}
#main .usefulBox .inner h2 a {
    text-decoration: underline;
}
#main .usefulBox .inner h2 a:hover {
    text-decoration: none;
}
#main .usefulBox .inner .textBox {
    margin: 0;
    padding: 0;
    width: 48%;
}
#main .usefulBox .inner .textBox .title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #052F5F;
    font-weight: bold;
}
#main .usefulBox#usefulBox01 .inner .textBox .title {
    font-size: 21px;
}
#main .usefulBox .inner .textBox .title a {
    color: #333;
    display: inline;
}
#main .usefulBox .inner .photoBox {
    width: 48%;
}
#main .usefulBox .inner .photoBox img {
    width: 100%;
    height: auto;
}


/*------------------------------------------------------------
    whitepaperBox
------------------------------------------------------------*/
#main .whitepaperBox {
    padding: 50px 0 30px 0;
}
#main .whitepaperBox .inner {
    width: 1140px;
    margin: 0 auto;
}
#main .whitepaperBox .inner h2 a {
    text-decoration: underline;
}
#main .whitepaperBox .inner h2 a:hover {
    text-decoration: none;
}
#main .whitepaperBox .inner .comImgBoxL {
    margin: 0 0 100px;
}
#main .whitepaperBox .inner .textBox {
    margin: 0;
    padding: 0;
    width: 48%;
}
#main .whitepaperBox .inner .textBox .title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #052F5F;
    font-weight: bold;
}
#main .whitepaperBox .inner .textBox .title a {
    color: #333;
    display: inline;
}
#main .whitepaperBox .inner .photoBox {
    width: 48%;
}
#main .whitepaperBox .inner .photoBox img {
    width: 100%;
    height: auto;
}
#main .whitepaperBox .inner .dlLink {
    max-width: 320px;
    width: 100%;
    margin: 25px 0 0;
}
#main .whitepaperBox .inner .dlLink a {
    font-size: 14px;
    font-weight: bold;
}
#main .whitepaperBox .inner .dlLink a {
    background: rgba(0,43,98,1);
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 15px 20px 12px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}
#main .whitepaperBox .inner .dlLink a::before {
    position: absolute;
    background: url(/nsi/ss/kaoato/img/common/dl_icon_wh.png)no-repeat;
    width: 32px;
    height: 24px;
    background-size: 100%;
    top: 50%;
    left: 8%;
    content: "";
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
#main .whitepaperBox .inner .dlLink a::after {
    position: absolute;
    top: 40%;
    right: 20px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#main .whitepaperBox .inner .dlLink a:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}
#main .whitepaperBox .inner .dlLink a:hover::after {
    right: 25px;
}


@media all and (max-width: 1260px)  {

}

@media all and (min-width: 0px) and (max-width: 767px) {
	.headLine {
		margin-bottom: 20px;
	}
	.headLine01 {
		margin-bottom: 20px !important;
		font-size: 20px;
	}

	.headLine01 img {
		vertical-align: top !important;
		margin: 0 auto 15px;
		width: 60px;
		display: block;
	}

	.headLine02 {
		font-size: 15px;
		letter-spacing: -0.5px;
	}

	.headLine02 span {
		padding: 5px 25px;
		font-size: 13px;
		text-align: left;
	}

    .headLine03 {
        margin-bottom: 20px;
        font-size: 14px !important;
    }
    .headLine03 span {
        padding: 4px 12px 2px;
        font-size: 14px;
        margin-right: 10px;
    }

	.headLine05 {
		width: auto;
		margin: 0 15px 30px;
		font-size: 20px;
	}

	.headLine06 {
		font-size: 18px;
	}

	.headLine08 span {
		margin-bottom: 5px;
		padding: 4px 15px 2px;
		font-size: 14px;
	}

    #main .comImgBoxL,
    #main .comImgBoxR {
		margin-bottom: 10px;
	}

	#main .comImgBoxL .photoBox {
		width: auto;
		float: none;
	}

	#main .comImgBoxL .textBox {
		padding: 20px 0 0 !important;
		float: none;
		width: auto !important;
	}

	#main .comImgBoxL .textBox .title {
		margin-bottom: 15px;
		font-size: 16px;
		line-height: 1.3;
	}

	#main .comImgBoxL .textBox .title a:hover {
		padding-bottom: 0;
		border-bottom: 2px solid #747474;
	}

	#main .comImgBoxL .textBox .textImg img {
		width: auto !important;
	}

	#main .comImgBoxL .textBox p {
		margin-bottom: 20px;
		line-height: 1.6;
	}

	#main .comImgBoxL .textBox p .textSpan {
		font-size: 16px;
	}

	.comLink {
		margin: 0 auto !important;
        width: 90%;
	}

	.comLink a {
		padding-top: 12px;
		text-align: center;
	}

	#main .comImgBoxR .photoBox {
        width: auto;
        float: none;
	}

	#main .comImgBoxR .textBox {
        padding: 20px 0 0 !important;
        float: none;
        width: auto !important;
	}

	#main .comImgBoxR .textBox .title {
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 1.3;
	}

	#main .comImgBoxR .textBox .title a:hover {
        padding-bottom: 0;
        border-bottom: 2px solid #747474;
	}


	/*------------------------------------------------------------
		mainVisual
	------------------------------------------------------------*/

	#main .mainImg .photoBox {
		float: none;
		width: auto;
		max-width: inherit;
	}

	#main .mainImg .box {
		max-width: inherit;
		width: auto;
	}

	#main .mainImg .textBox {
		max-width: inherit;
		width: auto;
		float: none;
		padding: 30px 15px !important;
	}

	#main .mainImg .textBox .title {
		margin-bottom: 10px;
		font-size: 16px;
		letter-spacing: 0;
		line-height: 1.4;
	}

	#main .mainImg .textBox .title span {
		margin: 0 !important;
		font-size: 26px;
		line-height: 1.3;
	}
    #main .mainImg .textBox .title span small {
        font-size: 18px;
    }

	#main .mainImg .textBox p {
		font-size: 12px;
		line-height: 1.75;
	}

	#main .mainImg .textBox .label {
		font-size: 12px;
		line-height: 1.4;
	}
    #main .mainImg .textBox .subtitle {
        margin: 10px 0 0 0;
        display: block;
    }

	#main .mainImg .textBox ul {
	    margin: 20px 0 0 0;
	    display: block;
	}
	#main .mainImg .textBox ul li {
	    margin: 0 0 10px 0 !important;
	}

	#main .mainImg .textBox ul li.inquiry a span,
	#main .mainImg .textBox ul li.download a span {
	    width: 90% !important;
	}

    .kv_wrap {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .top_box {
        max-width: 100%;
        margin: 15% 0 5% 0;
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        transform: translate(0,0);
    }


    .kv_txtbox {
        width: 90%;
        margin: 0 auto;
        padding: 0;
        background: none;
        color: #333;
        display: block;
    }
    .kv_txtbox .title {
        font-size: 26px;
        color: #333;
        padding: 10px 0 20px 0;
    }
    .kv_txtbox p {
        font-size: 15px;
    }
    .kv_txtbox .subtitle {
        font-size: 14px;
    }
    .kv_txtbox .subtitle .label {
        background-color: #052F5F;
        color: #fff;
        margin: 20px 0 5px 0;
    }
    .kv_icon::after {
        width: 45px;
        height: 45px;
        left: 10px;
    }

    .kv_txtbox ul {
        margin: 20px 0 0 0;
        display: block;
    }
    .kv_txtbox ul li {
        margin: 0 0 10px 0 !important;
    }
    .kv_txtbox ul li.inquiry a span,
    .kv_txtbox ul li.download a span {
        width: 90%;
    }
    .kv_txtbox ul li.download a span {
        border: solid 1px #052F5F;
    }


    .h2-01 {
        text-align: center;
        font-size: 20px;
        line-height: 125%;
        margin-bottom: 0;
        padding: 60px 0 0 0;
        line-height: 1.8;
        width: 90%;
    }

    .h2_icon01::after {
        top: 5%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon02::after {
        top: 5%;
        left: 50%;
        width: 60px;
        height: 55px;
    }
    .h2_icon03::after {
        top: 10%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon04::after {
        top: 10%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon05::after {
        top: 10%;
        left: 50%;
        width: 45px;
        height: 45px;
    }
    .h2_icon06::after {
        top: 0%;
        left: 50%;
        width: 30px;
        height: 65px;
    }
    .h2_icon07::after {
        top: 5%;
        left: 50%;
        width: 45px;
        height: 60px;
    }
    .h2_icon08::after {
        top: 15%;
        left: 50%;
        width: 40px;
        height: 60px;
    }
    .h2_icon09::after {
        top: 5%;
        left: 50%;
        width: 40px;
        height: 60px;
    }
    .h2_icon10::after {
        top: 5%;
        left: 50%;
        width: 30px;
        height: 55px;
    }
    .h2_icon11::after {
        top: 10%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon12::after {
        top: 10%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon14::after {
        top: 10%;
        left: 50%;
        width: 35px;
        height: 47px;
    }
    .h2_icon15::after {
        top: 15%;
        left: 50%;
        width: 60px;
        height: 45px;
    }
    .h2_icon16::after {
        top: 15%;
        left: 50%;
        width: 55px;
        height: 45px;
    }
    .h2_icon17::after {
        top: 5%;
        left: 50%;
        width: 45px;
        height: 55px;
    }
    .h2_icon18::after {
        top: 5%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon19::after {
        top: 5%;
        left: 50%;
        width: 55px;
        height: 55px;
    }
    .h2_icon20::after {
        top: 25%;
        left: 50%;
        width: 50px;
        height: 50px;
    }
    .h2_icon21::after {
        top: 20%;
        left: 50%;
        width: 30px;
        height: 45px;
    }
    .h2_icon22::after {
        top: 25%;
        left: 50%;
        width: 45px;
        height: 40px;
    }
    .h2_icon23::after {
        top: 10%;
        left: 50%;
        width: 40px;
        height: 45px;
    }
    .h2_icon24::after {
        top: 10%;
        left: 50%;
        width: 55px;
        height: 40px;
    }
    .h2_icon25::after {
      top: 10%;
      left: 50%;
      width: 55px;
      height: 40px;
    }
    .h2_icon27::after {
        top: 10%;
        left: 50%;
        width: 45px;
        height: 47px;
      }

    .h2-02 {
        text-align: center;
        font-size: 20px;
        line-height: 125%;
        margin-bottom: 0;
        padding: 50px 0 0 0 !important;
        line-height: 1.8;
        width: 100%;
    }
    .h2-02_icon01 {
        padding: 50px 0 20px 0 !important;
    }
    .h2-02_icon01::after {
        top: 0%;
        left: 42%;
        width: 55px;
        height: 45px;
    }

    h3.left_line {
        font-size: 18px;
    }
    h3.center {
        padding-top: 30px;
        margin-bottom: 20px;
        font-size: 18px;

    }

    /*------------------------------------------------------------
        comNavi
    ------------------------------------------------------------*/
    #main .comNavi {
        width: 90%;
    }
    #main .comNavi li,
    #main .comNavi.listCol4 li {
        float: none;
        width: 100%;
    }
    #main .comNavi li a {
        width: 100%;
        height: 60px;
    }
    #main .comNavi li a .txt {
        font-size: 18px;
        border: none;
        border-left: 1px solid #664d7b;
        border-right: 1px solid #664d7b;
        border-top: 1px solid #664d7b;
    }
    #main .comNavi li:last-child a .txt {
        border-bottom: 1px solid #664d7b;
    }
    #main .comNavi li a .txt .small {
        font-size: 12px;
    }


    /*------------------------------------------------------------
        column2Box
    ------------------------------------------------------------*/

    #main .column2Box {

    }
    #main .column2Box .textBox {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
    }
    #main .column2Box .textBox:nth-child(2n) {
        margin: 0 0 20px 0;
    }

	/*------------------------------------------------------------
		Page Navigation
	------------------------------------------------------------*/

	.pNav {
		display: none;
	}


    /*------------------------------------------------------------
        productsBoxList
    ------------------------------------------------------------*/

    #main .productsBoxList {
        margin: 0;
    }
    #main .productsBoxList li {
        margin: 0 0 20px 0;
        float: none;
        width: 100%;
    }
    #main .productsBoxList li:nth-child(3n) {
        margin-right: 0;
    }
    #main .productsBoxList li .whiteBox {
        padding: 20px;
    }
    #main .productsBoxList li .whiteBox .title {
        margin-bottom: 10px;
        font-size: 18px;
    }
    #main .productsBoxList li .whiteBox .title span {
        font-size: 14px;
    }

    /*------------------------------------------------------------
        introBox
    ------------------------------------------------------------*/
    #main .introBox {
        padding: 20px 0;
    }
    #main .introBox .inner {
        width: 90%;
        margin: 0 auto;
        display: block;
        align-items: center;
    }
    #main .introBox .inner p {
        font-size: 14px;
        float: none;
        width: 100%;
    }
    #main .introBox .inner p.title {
        font-size: 18px;
        float: none;
        text-align: center;
    }
    #main .introBox .inner p.photo {
        float: none;
        width: 120px;
        margin: 10px auto 20px auto;
    }
    #main .introBox .inner .btn {
        margin: 20px auto 0 auto;
        display: block;
        float: none;
        width: 100%;
        text-align: center;
    }
    #main .introBox .inner .btn a {
        min-width: 90%;
    }

    /*------------------------------------------------------------
        linkBox
    ------------------------------------------------------------*/
    #main .linkBox .textBox {
      max-width: none;
    }
    #main .linkBox .inner .subTitle {
        font-size: 16px;
    }
    #main .linkBox .btnBox .btn:not(:last-child) {
      margin-bottom: 0;
    }
    #main .btnBox.two-column {
        display: block;
    }
    #main .btnBox.two-column .btn {
      margin-right: 0;
      margin-bottom: 20px !important;
    }
    #main .btnBox.two-column .btn:last-child {
      margin-bottom: 0 !important;
    }

    /*------------------------------------------------------------
        usefulBox
    ------------------------------------------------------------*/
    #main .usefulBox {
        padding: 30px 0;
    }
    #main .usefulBox .inner {
        width: 90%;
    }
    #main .usefulBox .inner .textBox {
        width: 100%;
    }
    #main .usefulBox .inner .textBox .title {
        font-size: 18px;
    }
    #main .usefulBox .inner .photoBox {
        width: 100%;
        margin: 10px 0;
    }



}


/* ---------------------------------------------------------
  column-backnumber, case-backnumber
--------------------------------------------------------- */
#column-backnumber .slick-prev,
#column-backnumber .slick-next,
#case-backnumber .slick-prev,
#case-backnumber .slick-next {
    position: absolute;
    top: 0;
    display: block;
    width: 48px;
    height: calc(100% - 40px);
    padding: 0;
    background: #f2f2f2;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    z-index: 10;
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
#column-backnumber .slick-prev::before,
#column-backnumber .slick-next::before,
#case-backnumber .slick-prev::before,
#case-backnumber .slick-next::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 32px;
  margin-top: -18px;
  border-top: 2px solid;
  border-right: 2px solid;
  border-color: #878dab #878dab transparent transparent;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  line-height: 1;
}
#column-backnumber .slick-prev:hover::before,
#column-backnumber .slick-next:hover::before,
#case-backnumber .slick-prev:hover::before,
#case-backnumber .slick-next:hover::before {
  border-color: #002b62 #002b62 transparent transparent;
}
#column-backnumber .slick-prev,
#case-backnumber .slick-prev {
    left: 0
  }
#column-backnumber .slick-prev::before,
#case-backnumber .slick-prev::before {
  left: auto;
  right: 0;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
#column-backnumber.bg_blue02 .slick-prev,
#column-backnumber.bg_blue02 .slick-next,
#case-backnumber.bg_blue02 .slick-prev,
#case-backnumber.bg_blue02 .slick-next {
  background: #dbe8ef;
}
#column-backnumber .slick-next,
#case-backnumber .slick-next {
    right: 0;
  }
#column-backnumber .slick-dots,
#case-backnumber .slick-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
#column-backnumber .slick-dots li,
#case-backnumber .slick-dots li {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 10px;
      padding: 0;
      background: #bfbfbf;
      border-radius: 50%;
      cursor: pointer;
      line-height: 1;
    }
#column-backnumber .slick-dots li button,
#case-backnumber .slick-dots li button {
        display: none;
      }
#column-backnumber .slick-dots li:hover,
#column-backnumber .slick-dots li.slick-active,
#case-backnumber .slick-dots li:hover,
#case-backnumber .slick-dots li.slick-active {
  background: #002b62;
}
#column-backnumber .headLine span:first-child {
      max-width: 48px;
    }
#column-backnumber .headLine .subTitle {
      max-width: inherit;
      margin-right: 0;
      font-size: 24px;
      vertical-align: text-bottom;
      color: #595959;
    }
#column-backnumber .slide-column,
#case-backnumber .slide-column {
    position: relative;
    padding: 0 48px 40px 42px;
  }
#column-backnumber .col {
    margin-left: 30px;
    border: 1px solid #bfbfbf;
}
#case-backnumber .col {
    margin-left: 30px;
    border: 1px solid #F2F2F2;
}
#column-backnumber .col a,
#case-backnumber .col a {
      display: block;
      height: 100%;
      background-color: #fff
    }
#column-backnumber .col a:hover,
#case-backnumber .col a:hover {
  text-decoration: none;
  opacity: .7;
  transition: .3s all;
}
#column-backnumber .col .text,
#case-backnumber .col .text {
    padding: 12px 12px 20px;
}

#column-backnumber .col .text p,
#case-backnumber .col .text p {
    margin-bottom: 0;
    font-size: 15px;
}
#main #column-backnumber .col .text p.title {
  font-size: 15px;
}
#main #case-backnumber .col .text p.title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#column-backnumber .col h4 {
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: normal;
      color: #595959;
    }
#column-backnumber .col h4 span {
        display: block;
        color: #222;
      }
#column-backnumber .col .small {
      font-size: 14px;
    }
@media (max-width: 767px) {
  #column-backnumber .slick-prev,
  #column-backnumber .slick-next,
  #case-backnumber .slick-prev,
  #case-backnumber .slick-next {
    width: 32px;
    height: 100%;
    padding: 0;
    background: transparent;
  }
  #column-backnumber .slick-prev::before,
  #column-backnumber .slick-next::before,
  #case-backnumber .slick-prev::before,
  #case-backnumber .slick-next::before {
    top: 43%;
    left: -4px;
    width: 24px;
    height: 24px;
    margin-top: 0;
  }
  #column-backnumber .slick-prev::before,
  #case-backnumber .slick-prev::before {
    left: auto;
    right: -4px;
  }
  #column-backnumber.bg_blue02 .slick-prev,
  #column-backnumber.bg_blue02 .slick-next,
  #case-backnumber.bg_blue02 .slick-prev,
  #case-backnumber.bg_blue02 .slick-next {
    background: transparent;
  }
    #column-backnumber .headLine .angle {
      display: block;
      margin: 0 auto;
    }
  #column-backnumber .slide-column,
  #case-backnumber .slide-column {
    padding: 0;
    width: 100%;
  }
    #column-backnumber .slick-dots li,
    #case-backnumber .slick-dots li {
      width: 8px;
      height: 8px;
    }
  #column-backnumber .col,
  #case-backnumber .col {
    width: 100%;
    margin-left: 2px;
  }
    #column-backnumber .col .text,
    #case-backnumber .col .text {
      padding: 10px 10px 16px;
    }
    #column-backnumber .col .text p,
    #case-backnumber .col .text p {
        margin-bottom: 0;
        font-size: 14px;
      }
    #main #column-backnumber .col .text p.title,
    #main #case-backnumber .col .text p.title {
      font-size: 14px;
    }
    #column-backnumber .col h4 {
      margin-bottom: 10px;
      font-size: 16px;
    }
    #column-backnumber .col .small {
      font-size: 12px;
    }
}