@charset "UTF-8";



/*======================================================================================================================
========================================================================================================================

【default.css】

リセット項目・body初期設定・回り込み解除・リンク色用
ボックス／マージン／フロート等　各モジュール用

[01] リセット
[02] bodyデフォルト指定
[03] リンク色
[04] フォント指定
[05] Flexbox　汎用指定
[06] 左右フロート　汎用指定
[07] カラム　マージン汎用指定
[08] ボックス内　左右寄せ指定
[09] イメージ回り込み指定
[10] イメージ行揃え
[11] PC/スマホ 表示・非表示
[12] 追加コンテンツ

[ioniconsシート]
https://ionicons.com/v2/cheatsheet.html

========================================================================================================================
======================================================================================================================*/



/* [01] リセット
-------------------------------------------------------------------------------------------------------- */
html,body,div,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,address,
ul,ol,li,dl,dt,dd,
form,fieldset,input {
	margin:        0px;
	padding:       0px;
}
img {
	margin:        0px;
	padding:       0px;
	border:        0px;
	line-height:   0;
	vertical-align: bottom;
}
ul,ol {list-style-type: none;}

table {font-size:     100%;}





/* [02] bodyデフォルト指定
-------------------------------------------------------------------------------------------------------- */
body {
	color:        #333333;
	font:         14px "Noto Sans JP",sans-serif;
    font-weight:  400;
	line-height:  1.8;
}

* {
    box-sizing: border-box;
}

/*img {
    max-width: 100%;
    height: auto;
}*/





/* [03] リンク色
-------------------------------------------------------------------------------------------------------- */
a:link {
	color:            #333;
	text-decoration:  underline;
}

a:visited {
	color:            #333;
	text-decoration:  underline;
}

a:hover {
	color:            #333;
	text-decoration:  none;
}

a:active {
}





/* [04] フォント指定　（デフォルト14px）
-------------------------------------------------------------------------------------------------------- */

/* フォントサイズ */
.text10 {font-size:  10px;}
.text11 {font-size:  11px;}
.text12 {font-size:  12px;}
.text13 {font-size:  13px;}
.text14 {font-size:  14px;}
.text15 {font-size:  15px;}
.text16 {font-size:  16px;}
.text17 {font-size:  17px;}
.text18 {font-size:  18px;}
.text19 {font-size:  19px;}
.text20 {font-size:  20px;}
.text21 {font-size:  21px;}
.text22 {font-size:  22px;}
.text23 {font-size:  23px;}
.text24 {font-size:  24px;}
.text25 {font-size:  25px;}
.text26 {font-size:  26px;}
.text27 {font-size:  27px;}
.text28 {font-size:  28px;}
.text29 {font-size:  29px;}
.text30 {font-size:  30px;}

/* スマホ時のみ適用フォントサイズ */
@media screen and (max-width:768px) {
	.text10_sp {font-size:  10px;}
	.text11_sp {font-size:  11px;}
	.text12_sp {font-size:  12px;}
	.text13_sp {font-size:  13px;}
	.text14_sp {font-size:  14px;}
	.text15_sp {font-size:  15px;}
	.text16_sp {font-size:  16px;}
	.text17_sp {font-size:  17px;}
	.text18_sp {font-size:  18px;}
	.text19_sp {font-size:  19px;}
	.text20_sp {font-size:  20px;}
	.text21_sp {font-size:  21px;}
	.text22_sp {font-size:  22px;}
	.text23_sp {font-size:  23px;}
	.text24_sp {font-size:  24px;}
	.text25_sp {font-size:  25px;}
	.text26_sp {font-size:  26px;}
	.text27_sp {font-size:  27px;}
	.text28_sp {font-size:  28px;}
	.text29_sp {font-size:  29px;}
	.text30_sp {font-size:  30px;}
}

.text_smaller {font-size:  smaller;}
.text_xsmaller {font-size:x-small;}


/* フォントノーマル */
.normal {font-weight:	normal;}

/* フォントイタリック */
.italic {font-style:     italic;}

/* フォントボールド */
.bold {font-weight:    bold;}

/* 取消線 */
.strike {text-decoration: line-through;}


/* フォントカラー */
.blue {color:       #02649c;}
.red {color:        #E60025;}
.white {color:      #FFFFFF;}
.gray {color:       #666666;}
.green {color:      #009999;}





/* [05] Flexbox　汎用指定
-------------------------------------------------------------------------------------------------------- */
/* 親要素Flexbox化 */
.flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.flex > * {
    width: calc((100% - 24px) / 2); /* Flexアイテムが2つの時 */
}
.flex.col3 > * {
    width: calc((100% - 48px) / 3); /* Flexアイテムが3つの時 */
}


/* Flex内そろえ位置 */
.jc_sb {justify-content: space-between;}
.jc_c {justify-content: center;}
.jc_fs {justify-content: flex-start;}
.align_ic {align-items: center;}



/* Flex内　改行 */
.flex_wrap {flex-wrap: wrap;}


/* スマホ時　Flex解除 */
@media screen and (max-width:768px) {
    .noflex_sp {
        display: block !important;
    }
    .noflex_sp > * {
        width: auto;
    }
}





/* [06] 左右フロート　汎用指定
-------------------------------------------------------------------------------------------------------- */
.floatL {float:    left;}
.floatR {float:   right;}

/* スマホ時　コンテンツ内フロート削除 */
@media screen and (max-width:768px) {
	#main .floatL,
	#main .floatR {
		float: none;
	}
}

/* 回り込み解除指定（overflow） */
.clearof {overflow: hidden;}

/* clearfix */
.clearfix::after {
    content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix {display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */





/* [07] カラム　マージン汎用指定
-------------------------------------------------------------------------------------------------------- */

/* 下マージン */
.b0  {margin:         0px;}
.b01 {margin-bottom:  1px;}
.b04 {margin-bottom:  4px;}
.b05 {margin-bottom:  5px;}
.b10 {margin-bottom:  10px;}
.b15 {margin-bottom:  15px;}
.b20 {margin-bottom:  20px;}
.b25 {margin-bottom:  25px;}
.b30 {margin-bottom:  30px;}
.b35 {margin-bottom:  35px;}
.b40 {margin-bottom:  40px;}
.b45 {margin-bottom:  45px;}
.b50 {margin-bottom:  50px;}
.b55 {margin-bottom:  55px;}
.b60 {margin-bottom:  60px;}
.b100 {margin-bottom:  100px;}
.b120 {margin-bottom:  120px;}

/* スマホ表示時のみ、下マージン追加 */
@media screen and (max-width:768px) {
	.b0_sp  {margin:         0px;}
	.b01_sp {margin-bottom:  1px;}
	.b04_sp {margin-bottom:  4px;}
	.b05_sp {margin-bottom:  5px;}
	.b10_sp {margin-bottom:  10px;}
	.b15_sp {margin-bottom:  15px;}
	.b20_sp {margin-bottom:  20px;}
	.b25_sp {margin-bottom:  25px;}
	.b30_sp {margin-bottom:  30px;}
	.b35_sp {margin-bottom:  35px;}
	.b40_sp {margin-bottom:  40px;}
	.b45_sp {margin-bottom:  45px;}
	.b50_sp {margin-bottom:  50px;}
	.b55_sp {margin-bottom:  55px;}
	.b60_sp {margin-bottom:  60px;}
}

/* 上マージン指定 */
.t02 {margin-top:     2px;}
.t05 {margin-top:     5px;}
.t10 {margin-top:     10px;}
.t15 {margin-top:     15px;}
.t20 {margin-top:     20px;}
.t30 {margin-top:     30px;}

/* スマホ表示時のみ、上マージン追加 */
@media screen and (max-width: 768px) {
	.t0_sp {margin-top:     0px;}
	.t05_sp {margin-top:     5px;}
	.t10_sp {margin-top:     10px;}
	.t15_sp {margin-top:     15px;}
	.t20_sp {margin-top:     20px;}
}

/* 左マージン */
.l02 {margin-left:  2px;}
.l05 {margin-left:  5px;}
.l10 {margin-left:  10px;}
.l15 {margin-left:  15px;}
.l20 {margin-left:  20px;}
.l25 {margin-left:  25px;}
.l30 {margin-left:  30px;}
.l35 {margin-left:  35px;}
.l40 {margin-left:  40px;}
.l45 {margin-left:  45px;}
.l50 {margin-left:  50px;}
.l55 {margin-left:  55px;}
.l60 {margin-left:  60px;}
.l65 {margin-left:  65px;}
.l70 {margin-left:  70px;}
.l75 {margin-left:  75px;}
.l80 {margin-left:  80px;}

/* スマホ表示時のみ、左マージン追加 */
@media screen and (max-width: 768px) {
	.l0_sp {margin-left:  0px;}
	.l05_sp {margin-left:  5px;}
	.l10_sp {margin-left:  10px;}
	.l20_sp {margin-left:  20px;}
	.l30_sp {margin-left:  30px;}
}

/* 右マージン */
.r05 {margin-right:  5px;}
.r10 {margin-right:  10px;}
.r15 {margin-right:  15px;}
.r20 {margin-right:  20px;}

/* スマホ表示時のみ、右マージン追加 */
@media screen and (max-width: 768px) {
	.r0_sp {margin-right:  0px;}
	.r05_sp {margin-right:  5px;}
	.r10_sp {margin-right:  10px;}
	.r20_sp {margin-right:  20px;}
	.r30_sp {margin-right:  30px;}
}


/* ボックス　幅指定 */
.w40 {width:       40px;}
.w45 {width:       45px;}
.w50 {width:       50px;}
.w55 {width:       55px;}
.w60 {width:       60px;}
.w65 {width:       65px;}
.w70 {width:       70px;}
.w75 {width:       75px;}
.w80 {width:       80px;}
.w85 {width:       85px;}
.w90 {width:       90px;}
.w95 {width:       95px;}
.w100 {width:      100px;}
.w105 {width:      105px;}
.w110 {width:      110px;}
.w115 {width:      115px;}
.w120 {width:      120px;}
.w125 {width:      125px;}
.w130 {width:      130px;}
.w135 {width:      135px;}
.w140 {width:      140px;}
.w145 {width:      145px;}
.w150 {width:      150px;}
.w155 {width:      155px;}
.w160 {width:      160px;}
.w165 {width:      165px;}
.w170 {width:      170px;}
.w174 {width:      174px;}
.w175 {width:      175px;}
.w180 {width:      180px;}
.w185 {width:      185px;}
.w190 {width:      190px;}
.w195 {width:      195px;}
.w200 {width:      200px;}
.w205 {width:      205px;}
.w209 {width:      209px;}
.w210 {width:      210px;}
.w215 {width:      215px;}
.w216 {width:      216px;}
.w221 {width:      221px;}
.w222 {width:      222px;}
.w220 {width:      220px;}
.w225 {width:      225px;}
.w227 {width:      227px;}
.w228 {width:      228px;}
.w230 {width:      230px;}
.w235 {width:      235px;}
.w240 {width:      240px;}
.w245 {width:      245px;}
.w250 {width:      250px;}
.w255 {width:      255px;}
.w260 {width:      260px;}
.w265 {width:      265px;}
.w270 {width:      270px;}
.w273 {width:      273px;}
.w274 {width:      274px;}
.w275 {width:      275px;}
.w280 {width:      280px;}
.w285 {width:      285px;}
.w290 {width:      290px;}
.w295 {width:      295px;}
.w300 {width:      300px;}
.w305 {width:      305px;}
.w310 {width:      310px;}
.w311 {width:      311px;}
.w315 {width:      315px;}
.w320 {width:      320px;}
.w323 {width:      323px;}
.w325 {width:      325px;}
.w330 {width:      330px;}
.w335 {width:      335px;}
.w338 {width:      338px;}
.w340 {width:      340px;}
.w345 {width:      345px;}
.w350 {width:      350px;}
.w355 {width:      355px;}
.w360 {width:      360px;}
.w365 {width:      365px;}
.w370 {width:      370px;}
.w375 {width:      375px;}
.w380 {width:      380px;}
.w385 {width:      385px;}
.w390 {width:      390px;}
.w395 {width:      395px;}
.w400 {width:      400px;}
.w405 {width:      405px;}
.w410 {width:      410px;}
.w415 {width:      415px;}
.w420 {width:      420px;}
.w425 {width:      425px;}
.w430 {width:      430px;}
.w435 {width:      435px;}
.w440 {width:      440px;}
.w445 {width:      445px;}
.w450 {width:      450px;}
.w455 {width:      455px;}
.w460 {width:      460px;}
.w465 {width:      465px;}
.w470 {width:      470px;}
.w475 {width:      475px;}
.w480 {width:      480px;}
.w485 {width:      485px;}
.w490 {width:      490px;}
.w495 {width:      495px;}
.w500 {width:      500px;}
.w510 {width:      510px;}
.w515 {width:      515px;}
.w520 {width:      520px;}
.w530 {width:      530px;}
.w540 {width:      540px;}
.w550 {width:      550px;}
.w560 {width:      560px;}
.w570 {width:      570px;}
.w580 {width:      580px;}
.w590 {width:      590px;}
.w600 {width:      600px;}
.w610 {width:      610px;}
.w620 {width:      620px;}
.w630 {width:      630px;}
.w640 {width:      640px;}
.w650 {width:      650px;}
.w660 {width:      660px;}
.w670 {width:      670px;}
.w680 {width:      680px;}
.w690 {width:      690px;}
.w700 {width:      700px;}
.w710 {width:      710px;}
.w720 {width:      720px;}
.w730 {width:      730px;}
.w740 {width:      740px;}
.w750 {width:      750px;}
.w760 {width:      760px;}
.w770 {width:      770px;}
.w780 {width:      780px;}
.w790 {width:      790px;}
.w800 {width:      800px;}
.w810 {width:      810px;}
.w820 {width:      820px;}
.w830 {width:      830px;}
.w840 {width:      840px;}
.w850 {width:      850px;}
.w860 {width:      860px;}
.w870 {width:      870px;}
.w880 {width:      880px;}
.w890 {width:      890px;}
.w900 {width:      900px;}

/* ボックス　幅%指定 */
.w02p {width:      2%;}
.w10p {width:      10%;}
.w13p {width:      13%;}
.w15p {width:      15%;}
.w20p {width:      20%;}
.w21p {width:      21%;}
.w22p {width:      22%;}
.w23p {width:      23%;}
.w24p {width:      24%;}
.w25p {width:      25%;}
.w28p {width:      28%;}
.w30p {width:      30%;}
.w32p {width:      32%;}
.w35p {width:      35%;}
.w38p {width:      38%;}
.w40p {width:      40%;}
.w42p {width:      42%;}
.w45p {width:      45%;}
.w46p {width:      46%;}
.w47p {width:      47%;}
.w48p {width:      48%;}
.w50p {width:      50%;}
.w55p {width:      55%;}
.w58p {width:      58%;}
.w60p {width:      60%;}
.w62p {width:      62%;}
.w65p {width:      65%;}
.w68p {width:      68%;}
.w70p {width:      70%;}
.w75p {width:      75%;}
.w78p {width:      78%;}
.w80p {width:      80%;}
.w85p {width:      85%;}
.w88p {width:      88%;}
.w90p {width:      90%;}
.w95p {width:      95%;}
.w100p {width:      100%;}

/* スマホ時のみ幅調整／上記w◯◯のあとに追加 */
@media screen and (max-width:768px) {
	.w10p_sp {width: 10%; height: auto;}
	.w15p_sp {width: 15%; height: auto;}
	.w20p_sp {width: 20%; height: auto;}
	.w25p_sp {width: 25%; height: auto;}
	.w30p_sp {width: 30%; height: auto;}
	.w32p_sp {width: 32%; height: auto;}
	.w35p_sp {width: 35%; height: auto;}
	.w40p_sp {width: 40%; height: auto;}
	.w48p_sp {width: 48%; height: auto;}
	.w50p_sp {width: 50%; height: auto;}
	.w60p_sp {width: 60%; height: auto;}
	.w70p_sp {width: 70%; height: auto;}
	.w75p_sp {width: 75%; height: auto;}
	.w80p_sp {width: 80%; height: auto;}
	.w90p_sp {width: 90%; height: auto;}
	.w100p_sp {width: 100%; height: auto;}
}





/* [08] ボックス内　左右寄せ指定
-------------------------------------------------------------------------------------------------------- */
.alignC {text-align:  center;}
.alignR {text-align:  right;}
.alignL {text-align:  left;}





/* [09] イメージ回り込み指定
-------------------------------------------------------------------------------------------------------- */

/* 右寄せ */
.imgR {
	margin:   0px 0px 20px 20px;
	float:    right;
}


/* 左寄せ */
.imgL {
	margin:   0px 20px 20px 0px;
	float:    left;
}





/* [10] イメージ行揃え
-------------------------------------------------------------------------------------------------------- */

/* 中央 */
.valignM {vertical-align:  middle;}


/* 下 */
.valignB {vertical-align:  bottom;}





/* [11] PC/スマホ 表示・非表示（要素の出し分け、改行の出し分けなど）
-------------------------------------------------------------------------------------------------------- */

/* PCでは表示して、スマホでは消す */
.pc {
	display: block;
}

/* PCでは消して、スマホでは表示 */
.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}





/* [12] フレーム全体
-------------------------------------------------------------------------------------------------------- */
body {
	margin:         0px 0px 0px 0px;
	padding:        0px 0px 0px 0px;
	/*text-align:     center;*/
}





/* ヘッダー
-------------------------------------- */
header {
    margin: 30px 0;
}
header .logo {
    margin: 0 auto;
    width: 945px;
    line-height: 1;
    font-size: 1px;
    text-align: left;
}
header h1 img {
}

@media screen and (max-width:768px) {
    header {
        margin: 20px 0;
        padding: 0 10px;
    }
    header .logo {
        width: 100%;
    }
}



/* フッター
-------------------------------------- */
footer {
    padding: 30px 0;
    background: #e5e5e5;
    font-size: 12px;
}
footer .inner {
    margin: 0 auto;
    width: 945px;
    display: flex;
    justify-content: space-between;
}
footer .inner a {
    text-decoration: none;
}
footer .inner a:hover {
    text-decoration: underline;
}
footer .link {
}
footer .copyright {
}

@media screen and (max-width:768px) {
    footer {
        padding: 20px 20px;
        font-size: 12px;
        text-align: center;
    }
    footer .inner {
        margin: 0 auto;
        width: 100%;
        display: block;
    }
    footer .link {
        margin-bottom: 10px;
    }
    footer .copyright {
    }
}



/* ページトップボタン
-------------------------------------- */
#pagetop {
	position: fixed;
	bottom: 50px;
	right: 20px;
    opacity: 0.8;
	z-index: 1;
}

.paperless #pagetop{
	bottom: 20px;
}

#pagetop a {
    display: block;
    width: 160px;
    background: #5d778e;
    border-radius: 30px;
    font-size: 13px;
    color: #FFF;
    line-height: 1.8;
    text-decoration: none;
    text-align: center;
}
#pagetop a::after {
    content: "\f3d8";
    font-family: "Ionicons";
    font-size: 20px;
    vertical-align: -2px;
    padding: 0px 0px 0px 5px;
}

@media screen and (max-width:768px) {
    #pagetop {
        bottom: 10px;
        right: 10px;
    }
    #pagetop a {
        width: 140px;
        font-size: 11px;
        color: #FFF;
        line-height: 1.4;
    }
}





/* [●●] トップページ
-------------------------------------------------------------------------------------------------------- */

/* インデックスメインイメージ
-------------------------------------- */
#index_img_main {
    width: 100%;
    height: 690px;
    background: url("/katsubun/asset/images/lp/paperless/img_index_main.png") top center no-repeat #5d778e;
}
#index_img_main .inner {
    margin: 0 auto;
    /*width: 945px;*/
    width: 1000px;
}
#index_img_main h1 {
    text-indent: -9999px;
}
#index_img_main .inner p {
    margin: 360px 0 0 0;
    font-size: 23px;
    font-weight: bold;
    /*letter-spacing: -0.08em;*/
    color: #FFF;
    text-align: center;
}

@media screen and (max-width:768px) {
    #index_img_main {
        width: 100%;
        height: 65vw;
        background: url("/katsubun/asset/images/lp/paperless/img_index_main_sp.png") top center no-repeat #5d778e;
        background-size: 100%;
    }
    #index_img_main .inner {
        width: 100%;
    }
    #index_img_main .inner p {
        margin: 28.5vw 0 0 0;
        font-size: 2.5vw;
    }
}
@media screen and (max-width:376px) {
    #index_img_main .inner p {
        margin: 24.5vw 0 0 0;
        font-size: 2.5vw;
    }
}

/* インデックス教科書
-------------------------------------- */
#index_textbook {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background-color: #F0F5F5;
    padding: 215px 0 100px;
}
#index_textbook .contact_link {
    position: absolute;
    top: -112px;
    right: -100%;
    left: -100%;
    width: 945px;
    height: auto;
    background-color: #FFF462;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: auto;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
    padding: 30px 20px 40px;
    text-decoration: none;
}
#index_textbook .contact_link .txt {
    line-height: 1.333;
    color: #5D778E;
    font-size: 30px;
    font-weight: bold;
}
#index_textbook .contact_link .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 585px;
    height: 85px;
    border-radius: 9px;
    background: linear-gradient(#ea5532 0%, #e60012 100%);
    text-align: center;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    color: #FFFFFF;
}
#index_textbook .contact_link:hover  .btn {
    background: #EA5532;
}
#index_textbook .contact_link .btn_txt {
    line-height: 35px;
    background: url(/katsubun/asset/images/lp/paperless/icon_index_textbook.png) no-repeat center left/contain;
    padding-left: 50px;
    font-size: 26px;
    font-weight: bold;
}
#index_textbook .index_textbook_site .catch {
    background: url(/katsubun/asset/images/lp/paperless/bg_index_textbook_site_catch.png) no-repeat center/contain;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.833;
    font-size: 18px;
    letter-spacing: 0.06em;
    color: #323232;
}
#index_textbook .index_textbook_site .ttl {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -13px;
}
#index_textbook .index_textbook_site .ttl_txt {
    font-size: 30px;
    font-weight: bold;
    color: #5D778E;
    line-height: 1.0;
}
#index_textbook .index_textbook_site .ttl_img_01 {
    width: 133px;
    margin-right: 9px;
}
#index_textbook .index_textbook_site .ttl_img_02 {
    width: 112px;
    margin-left: 17px;
}
#index_textbook .index_textbook_site .list {
    margin: 50px auto 0;
    width: 630px;
    display: flex;
    align-items: flex-start;
}
#index_textbook .index_textbook_site .item {
    width: 50%;
    text-align: center;
}
#index_textbook .index_textbook_site .item .item_img {
    width: 100%;
}
#index_textbook .index_textbook_site .item .item_num {
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.349;
    display: inline-block;
}
#index_textbook .index_textbook_site .item .item_num.item_num_01 {
    color: #0099D9;
}
#index_textbook .index_textbook_site .item .item_num.item_num_02 {
    color: #E9546B;
}
#index_textbook .index_textbook_site .item .item_txt {
    color: #5D778E;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    margin-top: 5px;
}
#index_textbook .index_textbook_site .link {
    position: relative;
    margin-top: 65px;
    width: 585px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    border-radius: 9px;
    background-color: #fff462;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    padding-left: 30px;
}
#index_textbook .index_textbook_site .link:hover {
    opacity: 0.7;
}
#index_textbook .index_textbook_site .link .txt {
    color: #5D778E;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    background: url(/katsubun/asset/images/lp/paperless/icon_index_textbook_site.png) no-repeat center left/35px;
    padding-left: 53px;
}
#index_textbook .index_textbook_site .btn_img {
    position: absolute;
    top: -29px;
    right: -38px;
    width: 283px;
}
#index_textbook .index_textbook_site #index_paperless.useful {
    margin-top: 101px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    width: 945px;
    padding: 50px 20px 20px;
}
#index_paperless .catch_arrow,
#index_useful .catch_arrow {
    text-align: center;
}
#index_paperless .catch_arrow .txt,
#index_useful .catch_arrow .txt {
    position: relative;
    display: inline-block;
    border-top: 1px solid #5D778E;
    border-bottom: 1px solid #5D778E;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1.681;
    text-align: center;
    color: #5d778e;
    padding-top: 10px;
    padding-bottom: 12px;
}
#index_useful .catch_arrow .txt {
    width: 270px;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
#index_paperless .catch_arrow .txt::before,
#index_paperless .catch_arrow .txt::after,
#index_useful .catch_arrow .txt::before,
#index_useful .catch_arrow .txt::after {
    position: absolute;
    left: calc(50% - (19px / 2));
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
}
#index_paperless .catch_arrow .txt::before {
    border-width: 11px 9.5px 0 9.5px;
    border-color: #5d778e transparent transparent transparent;
    bottom: -11px;
}
#index_paperless .catch_arrow .txt::after {
    border-width: 11px 9.5px 0 9.5px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -10px;
}
#index_useful .catch_arrow .txt::before {
    border-width: 11px 9.5px 0 9.5px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -11px;
}
#index_useful .catch_arrow .txt::after {
    border-width: 11px 9.5px 0 9.5px;
    border-color: #5d778e transparent transparent transparent;
    bottom: -10px;
}
#index_textbook #index_paperless .ttl,
#index_paperless .ttl,
#index_useful .ttl {
    display: block;
    text-align: center;
    margin-top: 23px;
    line-height: 1.333;
    font-size: 30px;
    font-weight: bold;
    color: #5d778e
}
#index_useful .ttl {
    color: #ffffff;
}
#index_textbook .index_textbook_site #index_paperless.useful .list {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
#index_paperless.useful .item {
    width: calc((100% - 41px) / 3);
}
#index_textbook .index_textbook_site #index_paperless.useful .link {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    padding-left: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}
#index_textbook .index_textbook_site #index_paperless.useful img {
    width: 100%;
}
#index_textbook .index_textbook_site #index_paperless.useful .link .txt {
    color: #323232;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.75;
    padding-left: 0;
    background: none;
    text-align: left;
    margin-top: 20px;
    letter-spacing: 0.06em;
}
@media screen and (max-width:768px) {
    #index_textbook {
        padding: 15px 0;
    }
    #index_textbook .contact_link {
        position: relative;
        top: initial;
        right: initial;
        left: initial;
        width: calc(100% - 30px);
        padding: 20px;
        margin-top: -35px;
        margin-left: auto;
        margin-right: auto;
    }
    #index_textbook .contact_link .txt {
        font-size: 3.5vw;
    }
    #index_textbook .contact_link .btn {
        width: 100%;
        height: 55px;
        margin-top: 15px;
    }
    #index_textbook .contact_link .btn_txt {
        line-height: 20px;
        padding-left: 30px;
        font-size: 3.5vw;
    }
    #index_textbook .index_textbook_site {
        margin-top: 30px;
    }
    #index_textbook .index_textbook_site .catch {
        font-size: 3vw;
    }
    #index_textbook .index_textbook_site .ttl {
        margin-top: 5px;
    }
    #index_textbook .index_textbook_site .ttl_txt {
        font-size: 3.5vw;
    }
    #index_textbook .index_textbook_site .ttl_img_01 {
        width: 83px;
        margin-right: 3px;
    }
    #index_textbook .index_textbook_site .ttl_img_02 {
        width: 62px;
        margin-left: 8px;
    }
    #index_textbook .index_textbook_site .list {
        margin: 30px auto 0;
        width: 100%;
        display: block;
    }
    #index_textbook .index_textbook_site .item {
        width: 100%;
    }
    #index_textbook .index_textbook_site .item + .item {
        margin-top: 30px;
    }
    #index_textbook .index_textbook_site .item .item_img {
        width: calc(100% - 30px);
    }
    #index_textbook .index_textbook_site .item .item_num {
        font-size: 4vw;
        display: block;
    }
    #index_textbook .index_textbook_site .item .item_txt {
        font-size: 3.5vw;
    }
    #index_textbook .index_textbook_site .link {
        margin-top: 35px;
        width: calc(100% - 30px);
        height: 100px;
        padding-left: 20px;
    }
    #index_textbook .index_textbook_site .link .txt {
        font-size: 4vw;
        background: url(/katsubun/asset/images/lp/paperless/icon_index_textbook_site.png) no-repeat center left/25px;
        padding-left: 35px;
    }
    #index_textbook .index_textbook_site .btn_img {
        position: absolute;
        top: auto;
        bottom: auto;
        right: 0;
        width: 46%;
    }
    #index_textbook .index_textbook_site #index_paperless.useful {
        margin-top: 50px;
        width: calc(100% - 30px);
        padding: 25px 15px 15px;
    }
    #index_paperless .catch_arrow .txt,
    #index_useful .catch_arrow .txt {
        font-size: 3.5vw;
        width: 80%;
    }
    #index_useful .catch_arrow .txt {
        width: 80%;
    }
    #index_textbook #index_paperless .ttl,
    #index_paperless .ttl,
    #index_useful .ttl {
        font-size: 4vw;
    }
    #index_textbook .index_textbook_site #index_paperless.useful .list {
        margin-top: 20px;
        display: block;
    }
    #index_textbook .index_textbook_site #index_paperless.useful .item {
        width: 100%;
    }
    #index_textbook .index_textbook_site #index_paperless.useful .item + .item {
        margin-top: 30px;
    }
    #index_textbook .index_textbook_site #index_paperless.useful .link .txt {
        font-size: 3vw;
        margin-top: 10px;
    }
}
@media screen and (max-width:376px) {}

/* インデックスお役立ち資料
-------------------------------------- */
#index_useful {
    background-color: #5D778E;
    padding-top: 50px;
    padding-bottom: 100px;
}
#index_useful .inner {
    width: 945px;
    margin-left: auto;
    margin-right: auto;
}
#index_useful .list {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
}
#index_useful .item {
    width: calc((100% - 70px) / 3);
    display: flex;
    flex-direction: column;
}
#index_useful .item_img {
    width: 100%;
}
#index_useful .item_txt {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.75;
    text-align: left;
    color: #fff;
    margin-top: 23px;
    display: flex;
    height: 100%;
}
#index_useful .link {
    margin-top: 35px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 45px;
    border-radius: 4.77px;
    background: linear-gradient(#fff462 0%, #d4ca00 100%);
}
#index_useful .link:hover {
    background: #FFF462;
}
#index_useful .link_txt {
    color: #5D778E;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    background: url(/katsubun/asset/images/lp/paperless/img_index_useful_arrow.png) no-repeat center right/contain;
    padding-right: 28px;
}
@media screen and (max-width:768px) {
    #index_useful {
        padding-top: 25px;
        padding-bottom: 15px;
    }
    #index_useful .inner {
        width: calc(100% - 30px);
    }
    #index_useful .list {
        display: block;
        margin-top: 20px;
    }
    #index_useful .item {
        width: 100%;
    }
    #index_useful .item + .item {
        margin-top: 30px;
    }
    #index_useful .item_txt {
        font-size: 3vw;
        margin-top: 10px;
        display: block;
    }
    #index_useful .link {
        margin-top: 20px;
        min-height: 40px;
    }
    #index_useful .link_txt {
        font-size: 3.5vw;
    }
}
@media screen and (max-width:376px) {}

/* インデックス最下部ボタン
-------------------------------------- */
#index_bottom {
    background-color: #FFF462;
    padding-top: 50px;
    padding-bottom: 50px;
}
#index_bottom .ttl {
    font-size: 30px;
    font-weight: bold;
    color: #E9546B;
    text-align: center;
}
#index_bottom .list {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
#index_bottom .item + .item {
    margin-left: 50px;
}
#index_bottom .item .link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 355px;
    height: 85px;
    border-radius: 9px;
    background: linear-gradient(#ea5532 0%, #e60012 100%);
    text-decoration: none;
}
#index_bottom .item .link:hover {
    background: #EA5532;
}
#index_bottom .item .link .txt {
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
}
#index_bottom .item .link .txt_01 {
    background: url(/katsubun/asset/images/lp/paperless/img_index_bottom_01.png) no-repeat center left/38px;
    padding-left: 60px;
}
#index_bottom .item .link .txt_02 {
    background: url(/katsubun/asset/images/lp/paperless/img_index_bottom_02.png) no-repeat center left/28px;
    padding-left: 50px;
}
@media screen and (max-width:768px) {
    #index_bottom {
        padding: 25px 15px;
    }
    #index_bottom .ttl {
        font-size: 4vw;
    }
    #index_bottom .list {
        display: block;
        margin-top: 20px;
    }
    #index_bottom .item + .item {
        margin-left: 0;
        margin-top: 20px;
    }
    #index_bottom .item .link {
        width: 100%;
        height: 65px;
    }
    #index_bottom .item .link .txt {
        font-size: 4vw;
        line-height: 27px;
    }
    #index_bottom .item .link .txt_01 {
        background: url(/katsubun/asset/images/lp/paperless/img_index_bottom_01.png) no-repeat center left/28px;
        padding-left: 40px;
    }
    #index_bottom .item .link .txt_02 {
        background: url(/katsubun/asset/images/lp/paperless/img_index_bottom_02.png) no-repeat center left/18px;
        padding-left: 30px;
    }
}



/* 6つの課題
-------------------------------------- */
#index_problem {
    /* margin: -40px auto 15px auto; */
    margin: 0px auto 15px auto;
    width: 945px;
}
#index_problem .ttl {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    color: #5D778E;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.75;
}
#index_problem .inner {
    margin: 0 -18px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width:768px) {
    #index_problem {
        margin: 0 auto 15px auto;
        width: 100%;
    }
    #index_problem .ttl {
        font-size: 4vw;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    #index_problem .inner {
    margin: 0 0px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
}

#index_problem a {
    display: block;
    width: 291px;
    margin: 0 18px 74px 18px;
    background: #FFF;
    border-top: 15px solid;
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    position: relative;
}
/*#index_problem a::after {
    content: "";
    display: block;
    width: 331px;
    height: 401px;
    background: url("/katsubun/asset/images/lp/paperless/bg_index_probrem.png") no-repeat;
    position: absolute;
    top: -25px;
    left: -20px;
    z-index: -100;
}*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #index_problem a::after {
    content: "";
    display: block;
    width: 331px;
    height: 401px;
    background: url("/katsubun/asset/images/lp/paperless/bg_index_probrem.png") no-repeat;
    position: absolute;
    top: -25px;
    left: -20px;
    z-index: -100;
  } /* IE11の適用のドロップシャドウ */
}

#index_problem a.digitization { border-top-color: #0099d9; color: #0099d9;}
#index_problem a.digitization:hover { background: #0099d9;  border-top-color: #0099d9;}

#index_problem a.rm { border-top-color: #e9546b; color: #e9546b;}
#index_problem a.rm:hover { background: #e9546b; border-top-color: #e9546b;}

#index_problem a.dencyouhou { border-top-color: #59b75b; color: #59b75b;}
#index_problem a.dencyouhou:hover { background: #59b75b; border-top-color: #59b75b;}

#index_problem a.docusign { border-top-color: #ee7800; color: #ee7800;}
#index_problem a.docusign:hover { background: #ee7800; border-top-color: #ee7800;}

#index_problem a.clm_wk { border-top-color: #0057a8; color: #0057a8;}
#index_problem a.clm_wk:hover { background: #0057a8; border-top-color: #0057a8;}

#index_problem a.consulting { border-top-color: #a64a97; color: #a64a97;}
#index_problem a.consulting:hover { background: #a64a97; border-top-color: #a64a97;}

#index_problem a:hover {
    color: #FFF;
}

@media screen and (max-width:768px) {
    #index_problem a {
        display: block;
        width: calc(50% - 30px);
        margin: 0 15px 10.6666vw 15px;
        font-size: 3vw;
    }
}


#index_problem a .box {
    position: relative;
}
#index_problem a .box::after {
    content: '';
    display: block;
    height: 100px;
    width: 291px;
    position: absolute;
    bottom: -50px;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 49% 100%, 0 50%);
    background-color: #FFF;
    z-index: -1;
}
#index_problem a.digitization:hover .box::after { background-color: #0099d9; }
#index_problem a.rm:hover .box::after { background-color: #e9546b; }
#index_problem a.dencyouhou:hover .box::after { background-color: #59b75b; }
#index_problem a.docusign:hover .box::after { background-color: #ee7800; }
#index_problem a.clm_wk:hover .box::after { background-color: #0057a8; }
#index_problem a.consulting:hover .box::after { background-color: #a64a97; }

@media screen and (max-width:768px) {
    #index_problem a .box::after {
        height: 13.0208vw;
        width: 100%;
        bottom: -6.5104vw;
    }
}


#index_problem a .img {
    height: 220px;
    position: relative;
}
#index_problem a .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

@media screen and (max-width:768px) {
    #index_problem a .img {
        height: 50vw;
    }
    #index_problem a .img img {
        width: 90%;
        height: auto;
    }
}



/* あなたのペーパーレス化の課題は？
-------------------------------------- */

/* タイトル */
#ttl_index_solution {
    font-size: 31px;
    font-weight: bold;
    color: #FFF;
    background: #5d778e;
    line-height: 1.3;
    padding: 15px 0 18px 0;
    text-align: center;
    position: relative;
}
#ttl_index_solution::after {
    content: '';
    border-top: 30px solid #5d778e;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    bottom: -29px;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) translateX(-50%);
}

@media screen and (max-width:768px) {
    #ttl_index_solution {
        font-size: 4.5vw;
    }
}


/* 各ボックス */
#index_solution {
    padding: 60px 0 20px 0;
    background: #f1f5f6;
}
#index_solution .inner {
    margin: 0 auto;
    width: 945px;
}

@media screen and (max-width:768px) {
    #index_solution {
        padding: 40px 15px 20px 15px;
    }
    #index_solution .inner {
        margin: 0 auto;
        width: 100%;
    }
}

#index_solution .box {
    margin-bottom: 40px;
    background: #FFF;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);
}

@media screen and (max-width:768px) {
    #index_solution .box {
        margin-bottom: 30px;
        position: relative;
    }
}


/* 見出し背景 */
#index_solution .box .ttl_left,
#index_solution .box .ttl_right {
    padding: 30px 40px 30px 40px;
    background: #dff2fc;
}
#index_solution .box.consulting .ttl_right { background: #f3ebf4; }
#index_solution .box.digitization .ttl_left { background: #dff2fc; }
#index_solution .box.clm_wk .ttl_right { background: #eaeff9; padding: 25px 20px 25px 40px; }
#index_solution .box.dencyouhou .ttl_left { background: #ecf4e2; }
#index_solution .box.rm .ttl_right { background: #fce5e8; }
#index_solution .box.docusign .ttl_left { background: #fdeddb; }



@media screen and (max-width:768px) {
#index_solution .box .ttl_left,
#index_solution .box .ttl_right,
#index_solution .box.clm_wk .ttl_right {
    padding: 20px;
    background: #dff2fc;
}
}


/* 見出し */
#index_solution .box .ttl_left h3 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: #0099d9;
    border-left: 10px solid #0099d9;
    padding-left: 15px;
}
#index_solution .box .ttl_right h3 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #0099d9;
    border-left: 10px solid #0099d9;
    margin-left: 380px;
    padding-left: 15px;
}
#index_solution .box.consulting .ttl_right h3 { color: #a64a97; border-left-color: #a64a97; }
#index_solution .box.digitization .ttl_left h3 { color: #0099d9; border-left-color: #0099d9; }
#index_solution .box.clm_wk .ttl_right h3 { color: #0057a8; border-left-color: #0057a8; margin-left: 330px; line-height: 1.1;}
#index_solution .box.dencyouhou .ttl_left h3 { color: #59b75b; border-left-color: #59b75b; }
#index_solution .box.rm .ttl_right h3 { color: #e9546b; border-left-color: #e9546b; margin-left: 330px;}
#index_solution .box.docusign .ttl_left h3 { color: #ee7800; border-left-color: #ee7800; }

@media screen and (max-width:768px) {
    #index_solution .box .ttl_left h3 {
        font-size: 4.5vw;
    }
    #index_solution .box .ttl_right h3 {
        font-size: 4.5vw;
        margin-left: 0px;
    }
    #index_solution .box.clm_wk .ttl_right h3{
        margin-left: 0;
    }
    #index_solution .box.rm .ttl_right h3{
        margin-left: 0;
    }
}


/* ボックス内左右振り分け */
#index_solution .box .inner_img_right,
#index_solution .box .inner_img_left {
    padding: 20px 40px 40px 40px;
    position: relative;
}
#index_solution .box.clm_wk .inner_img_left{
    padding-left: 0;
    padding-right: 0;
}
#index_solution .box.rm .inner_img_left{
    padding-left: 0;
    padding-right: 0;
}

@media screen and (max-width:768px) {
    #index_solution .box .inner_img_right,
    #index_solution .box .inner_img_left,
    #index_solution .box.clm_wk .inner_img_left,
    #index_solution .box.rm .inner_img_left {
        padding: 20px 20px 40px 20px;
    }
}


/* 画像位置 */
#index_solution .box .inner_img_right img {
    float: right;
}
#index_solution .box .inner_img_left img {
    float: left;
}
#index_solution .box.consulting .inner_img_left img { margin-top: -60px; }
#index_solution .box.digitization .inner_img_right img { margin-top: -90px; }
#index_solution .box.clm_wk .inner_img_left img {
    position: absolute;
    top: -80px;
    left: 24px;
}
#index_solution .box.dencyouhou .inner_img_right img {
    position: absolute;
    right: 70px;
    top: -60px;
}
#index_solution .box.rm .inner_img_left img { margin-top: -80px; margin-left: 35px;}
#index_solution .box.docusign .inner_img_right img { margin-top: -90px; margin-right: 50px;}

@media screen and (max-width:768px) {
    #index_solution .box .inner_img_right img,
    #index_solution .box .inner_img_left img,
    #index_solution .box.rm .inner_img_left img{
        float: none;
        /*width: 90%;*/
        width: 60%;
        height: auto;
        /*margin: 0 20px 20px 20px;*/
        margin: 0 0px 20px calc(100% - 80%);

    }
    #index_solution .box.digitization .inner_img_right img,
    #index_solution .box.rm .inner_img_left img,
    #index_solution .box.dencyouhou .inner_img_right img,
    #index_solution .box.docusign .inner_img_right img,
    #index_solution .box.clm_wk .inner_img_left img,
    #index_solution .box.consulting .inner_img_left img{
        margin-top: 0;
        margin-right: 0;
        position: static;
    }
}
@media screen and (max-width:376px) {
    #index_solution .box .inner_img_right img,
    #index_solution .box .inner_img_left img{
        width: 90%;
        margin: 0 20px 20px 20px;
    }
}


/* テキスト */
#index_solution .box .inner_img_right .txt {
    float: left;
    width: 485px;
}
#index_solution .box.digitization .inner_img_right .txt {width: 550px;}
#index_solution .box.dencyouhou .inner_img_right .txt {width: 100%;}

#index_solution .box .inner_img_left .txt {
    float: right;
    width: 485px;
}
#index_solution .box.clm_wk .inner_img_left .txt {
    width: 575px;
}
#index_solution .box.rm .inner_img_left .txt {
    width: 575px;
}

@media screen and (max-width:768px) {
    #index_solution .box .inner_img_right .txt {
        float: none;
        width: 100% !important;
    }
    #index_solution .box .inner_img_left .txt,
    #index_solution .box.clm_wk .inner_img_left .txt,
    #index_solution .box.rm .inner_img_left .txt {
        float: none;
        width: 100%;
    }
}


/* ex. */
#index_solution .box .txt h4 {
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #0099d9;
    margin-bottom: 10px;
}
#index_solution .box.digitization .txt h4 { color: #0099d9; }
#index_solution .box.rm .txt h4 { color: #e9546b; }
#index_solution .box.dencyouhou .txt h4 { color: #59b75b; }
#index_solution .box.docusign .txt h4 { color: #ee7800; }
#index_solution .box.clm_wk .txt h4 { color: #0057a8; }
#index_solution .box.consulting .txt h4 { color: #a64a97; }

/* リスト */
#index_solution .box .txt ul {
    margin-bottom: 30px;
}
#index_solution .box .txt ul li {
    list-style: none;
    font-size: 18px;
}
#index_solution .box .txt ul li::before {
    content: "\f363";
    font-family: "Ionicons";
    font-size: 24px;
    vertical-align: -2px;
    line-height: 1.3;
    padding: 0px 5px 0px 0px;
    position: relative;
    color: #0099d9;
}
#index_solution .box.digitization .txt ul li::before { color: #0099d9; }
#index_solution .box.rm .txt ul li::before { color: #e9546b; }
#index_solution .box.dencyouhou .txt ul li::before { color: #59b75b; }
#index_solution .box.docusign .txt ul li::before { color: #ee7800; }
#index_solution .box.clm_wk .txt ul li::before { color: #0057a8; }
#index_solution .box.consulting .txt ul li::before { color: #a64a97; }


/* そんなあたなにおすすめタイトル */
#index_solution .box .recommend {
    clear: both;
    width: 100%;
}
#index_solution .box .recommend .ttl {
    font-size: 20px;
    font-weight: bold;
    background: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_01.png") center center no-repeat;
    text-align:  center;
    margin-bottom: 10px;
}
#index_solution .box.digitization .recommend .ttl { color: #0099d9; background-image: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_01.png"); }
#index_solution .box.rm .recommend .ttl { color: #e9546b; background-image: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_02.png"); }
#index_solution .box.dencyouhou .recommend .ttl { color: #59b75b; background-image: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_03.png"); }
#index_solution .box.docusign .recommend .ttl { color: #ee7800; background-image: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_04.png"); }
#index_solution .box.clm_wk .recommend .ttl { color: #0057a8; background-image: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_05.png"); }
#index_solution .box.consulting .recommend .ttl { color: #a64a97; background-image: url("/katsubun/asset/images/lp/paperless/img_index_solution_accent_06.png"); }

/* おすすめソリューションボタン */
#index_solution .box .recommend a {
    display: block;
    font-size: 26px;
    font-weight: bold;
    color: #FFF;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    width: 585px;
    height: 85px;
    margin: 0 auto;
    line-height: 3.2;
    position: relative;
}

#index_solution .box.digitization .recommend a {
    background: rgb(0,153,217);
    background: -moz-linear-gradient(top,  rgba(0,153,217,1) 0%, rgba(0,151,217,1) 50%, rgba(0,113,207,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,153,217,1) 0%,rgba(0,151,217,1) 50%,rgba(0,113,207,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,153,217,1) 0%,rgba(0,151,217,1) 50%,rgba(0,113,207,1) 100%);
}
#index_solution .box.digitization .recommend a:hover {
    background: rgb(0,153,217);
}
#index_solution .box.rm .recommend a {
    background: rgb(233,84,107);
    background: -moz-linear-gradient(top,  rgba(233,84,107,1) 0%, rgba(232,83,106,1) 48%, rgba(204,55,78,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(233,84,107,1) 0%,rgba(232,83,106,1) 48%,rgba(204,55,78,1) 100%);
    background: linear-gradient(to bottom,  rgba(233,84,107,1) 0%,rgba(232,83,106,1) 48%,rgba(204,55,78,1) 100%);
}
#index_solution .box.rm .recommend a:hover {
    background: rgb(233,84,107);
}
#index_solution .box.dencyouhou .recommend a {
    background: rgb(89,183,91);
    background: -moz-linear-gradient(top,  rgba(89,183,91,1) 0%, rgba(88,182,90,1) 46%, rgba(60,153,62,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(89,183,91,1) 0%,rgba(88,182,90,1) 46%,rgba(60,153,62,1) 100%);
    background: linear-gradient(to bottom,  rgba(89,183,91,1) 0%,rgba(88,182,90,1) 46%,rgba(60,153,62,1) 100%);
}
#index_solution .box.dencyouhou .recommend a:hover {
    background: rgb(89,183,91);
}
#index_solution .box.docusign .recommend a {
    background: rgb(238,120,0);
    background: -moz-linear-gradient(top,  rgba(238,120,0,1) 0%, rgba(235,118,0,1) 46%, rgba(208,90,0,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(238,120,0,1) 0%,rgba(235,118,0,1) 46%,rgba(208,90,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(238,120,0,1) 0%,rgba(235,118,0,1) 46%,rgba(208,90,0,1) 100%);
}
#index_solution .box.docusign .recommend a:hover {
    background: rgb(238,120,0);
}
#index_solution .box.clm_wk .recommend a {
    background: rgb(0,87,168);
    background: -moz-linear-gradient(top,  rgba(0,87,168,1) 0%, rgba(0,84,165,1) 46%, rgba(0,57,138,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,87,168,1) 0%,rgba(0,84,165,1) 46%,rgba(0,57,138,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,87,168,1) 0%,rgba(0,84,165,1) 46%,rgba(0,57,138,1) 100%);
}
#index_solution .box.clm_wk .recommend a:hover {
    background: rgb(0,87,168);
}
#index_solution .box.consulting .recommend a {
    background: rgb(166,74,151);
    background: -moz-linear-gradient(top,  rgba(166,74,151,1) 0%, rgba(165,73,152,1) 46%, rgba(126,34,111,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(166,74,151,1) 0%,rgba(165,73,152,1) 46%,rgba(126,34,111,1) 100%);
    background: linear-gradient(to bottom,  rgba(166,74,151,1) 0%,rgba(165,73,152,1) 46%,rgba(126,34,111,1) 100%);
}
#index_solution .box.consulting .recommend a:hover {
    background: rgb(166,74,151);
}

#index_solution .box .recommend a::before {
    content: " ";
    background: url("/katsubun/asset/images/lp/paperless/img_index_solution_arrow.png") no-repeat;
    display:inline-block;
	width: 35px;
	height: 35px;
    margin-right: 15px;
    top: 50px;
    vertical-align: -0.25em;
}

@media screen and (max-width:768px) {
    #index_solution .box .recommend a {
        display: block;
        font-size: 4vw;
        font-weight: bold;
        color: #FFF;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        width: 95%;
        height: auto;
        margin: 0 auto;
        line-height: 1.3;
        position: relative;

        padding: 15px 0px;

    }
    #index_solution .box .recommend a::before {
        display: none;
    /*    content: " ";
        background: url("/katsubun/asset/images/lp/paperless/img_index_solution_arrow.png") no-repeat;
        background-size: 4vw;
        display:inline-block;
        width: 4vw;
        height: 4vw;
        margin-right: 15px;
        top: 50px;
        vertical-align: -0.35em;*/
    }
}





/* [●●] 詳細ページ
-------------------------------------------------------------------------------------------------------- */

/* メインイメージ
-------------------------------------- */
#img_main {
    height: 300px;
    background: url("/katsubun/asset/images/lp/paperless/bg_digitization_img_main.png") center center no-repeat;
    box-shadow: 0px 11px 10px 1px rgba(0,0,0,0.2);
}
body#digitization #img_main { background-image: url("/katsubun/asset/images/lp/paperless/bg_digitization_img_main.png"); }
body#rm #img_main { background-image: url("/katsubun/asset/images/lp/paperless/bg_rm_img_main.png"); }
body#dencyouhou #img_main { background-image: url("/katsubun/asset/images/lp/paperless/bg_dencyouhou_img_main.png"); }
body#docusign #img_main { background-image: url("/katsubun/asset/images/lp/paperless/bg_docusign_img_main.png"); }
body#clm_wk #img_main { background-image: url("/katsubun/asset/images/lp/paperless/bg_clm_wk_img_main.png"); }
body#consulting #img_main { background-image: url("/katsubun/asset/images/lp/paperless/bg_consulting_img_main.png"); }

#img_main .inner {
    width: 945px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#img_main .inner h1 {
    width: 580px;
    font-size: 52px;
    font-weight: bold;
    color: #FFF;
    line-height: 1.3;
}
#img_main .inner .img {
    width: 350px;
    height: 300px;
    text-align: right;
    position: relative;
}
#img_main .inner .img img {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%,-50%);
}
body#rm #img_main .inner .img img { right: -10%; }
body#dencyouhou #img_main .inner .img img { right: 10%; }
body#clm_wk #img_main .inner .img img { right: -10%; }

@media screen and (max-width:768px) {
    #img_main {
        height: 200px;
    }
    #img_main .inner {
        width: 100%;
    }
    #img_main .inner h1 {
        width: 75%;
        font-size: 28px;
        padding: 10px;
    }
    #img_main .inner .img {
        width: 25%;
        height: 200px;
        background: #dff2fc;
    }
    body#digitization #img_main .inner .img {background: #dff2fc; }
    body#rm #img_main .inner .img {background: #fbe6e9; }
    body#dencyouhou #img_main .inner .img {background: #ecf4e2; }
    body#docusign #img_main .inner .img {background: #fdeddb; }
    body#clm_wk #img_main .inner .img {background: #eaeff9; }
    body#consulting #img_main .inner .img {background: #f3ebf4; }

    #img_main .inner .img img {
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translate(0%,-50%);
      width: 90%;
      height: auto;
    }
    body#rm #img_main .inner .img img { right: 5%; }
    body#dencyouhou #img_main .inner .img img { right: 5%; }
    body#clm_wk #img_main .inner .img img { right: 5%; }
}


/* 説明エリア
-------------------------------------- */

/* エリア */
#outline {
    width: 945px;
    margin: 0 auto 40px auto;
    padding: 50px 0 0 0;
}

@media screen and (max-width:768px) {
    #outline {
        width: 100%;
        margin: 0 auto 20px auto;
        padding: 30px 10px 0 10px;
    }
}


/* タイトル */
#outline h2 {
    font-size: 26px;
    font-weight: bold;
    color: #0099d9;
    line-height: 1.5;
    margin-bottom: 40px;
}
body#digitization #outline h2 { color: #0099d9; }
body#rm #outline h2 { color: #e9546b; }
body#dencyouhou #outline h2 { color: #59b75b; }
body#docusign #outline h2 { color: #ee7800; }
body#clm_wk #outline h2 { color: #0057a8; }
body#consulting #outline h2 { color: #a64a97; }

@media screen and (max-width:768px) {
    #outline h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }
}


/* テキスト */
#outline p.first {
    font-size: 18px;
    border-bottom: 1px solid #0099d9;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
body#digitization #outline p.first { border-bottom-color: #0099d9; }
body#rm #outline p.first { border-bottom-color: #e9546b; }
body#dencyouhou #outline p.first { border-bottom-color: #59b75b; }
body#docusign #outline p.first { border-bottom-color: #ee7800; }
body#clm_wk #outline p.first { border-bottom-color: #0057a8; }
body#consulting #outline p.first { border-bottom-color: #a64a97; }

#outline p.second {
    font-size: 18px;
}
#outline p .emphasis {
    font-weight: bold;
}
body#digitization #outline p .emphasis { color: #0099d9; }
body#rm #outline p .emphasis { color: #e9546b; }
body#dencyouhou #outline p .emphasis { color: #59b75b; }
body#docusign #outline p .emphasis { color: #ee7800; }
body#clm_wk #outline p .emphasis { color: #0057a8; }
body#consulting #outline p .emphasis { color: #a64a97; }

#outline p a:link,
#outline p a:visited {
    color: #e80028;
    text-decoration: underline;
}
#outline p a:hover {
    text-decoration: none;
}

@media screen and (max-width:768px) {
    #outline p.first {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    #outline p.second {
        font-size: 16px;
    }
}


/* イメージエリア
-------------------------------------- */

/* 全体枠 */
#solution_detail {
    padding: 60px 0;
    background: #dff2fc;
    position: relative;
}
body#digitization #solution_detail {background: #dff2fc; }
body#rm #solution_detail {background: #fbe6e9; }
body#dencyouhou #solution_detail {background: #ecf4e2; }
body#docusign #solution_detail {background: #fdeddb; }
body#clm_wk #solution_detail {background: #eaeff9; }
body#consulting #solution_detail {background: #f3ebf4; }

#solution_detail::before {
    content: '';
    border-top: 30px solid #FFF;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) translateX(-50%);
}

#solution_detail .inner {
    margin: 0 auto;
    width: 945px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

@media screen and (max-width:768px) {
    #solution_detail {
        padding: 40px 0 20px 0;
    }
    #solution_detail .inner {
        width: 100%;
        justify-content:space-around;
        flex-wrap: wrap;
        padding: 0 10px;
    }
}


/* ボックス */
#solution_detail .inner .box {
    background: #FFF;
    padding: 10px 10px 20px 10px;
    box-shadow: 0px 3px 7px 1px rgba(0,0,0,0.3);
    width: 177px;
}
#solution_detail .inner .box .txt {
    font-size: 15px;
    font-weight: bold;
    color: #0099d9;
    line-height: 1.5;
    text-align: center;
    margin-top: 20px;
}
body#digitization #solution_detail .inner .box .txt { color: #0099d9; }
body#rm #solution_detail .inner .box .txt { color: #e9546b; }
body#dencyouhou #solution_detail .inner .box .txt { color: #59b75b; }
body#docusign #solution_detail .inner .box .txt { color: #ee7800; }
body#clm_wk #solution_detail .inner .box .txt { color: #0057a8; }
body#consulting #solution_detail .inner .box .txt { color: #a64a97; }

@media screen and (max-width:768px) {
    #solution_detail .inner .box {
        padding: 10px 10px 20px 10px;
        width: calc(50% - 7px);
        margin-bottom: 15px;
    }
    #solution_detail .inner .box img {
        width: 100%;
        height: auto;
    }
    #solution_detail .inner .box .txt {
        font-size: 15px;
        font-weight: bold;
        color: #0099d9;
        line-height: 1.5;
        text-align: center;
        margin-top: 20px;
    }
}


/* 問い合わせエリア
-------------------------------------- */

/* 全体枠 */
#contact_area {
    width: 945px;
    margin: 0 auto;
    padding: 60px 0 30px;;
}

@media screen and (max-width:768px) {
    #contact_area {
        width: 100%;
        padding: 20px 10px 30px;;
    }
}


/* 連絡文 */
#contact_area .attention {
    font-size: 22px;
    text-align: center;
    margin-bottom: 30px;
}

@media screen and (max-width:768px) {
    #contact_area .attention {
        font-size: 18px;
    }
}


/* 帯タイトル */
#contact_area h3.ttl {
    color: #FFF;
    font-size: 22px;
    text-align: center;
    line-height: 1.3;
    padding: 10px;
    background: #0099d9;
    margin-bottom: 25px;
}
body#digitization #contact_area h3.ttl { background: #0099d9; }
body#rm #contact_area h3.ttl { background: #e9546b; }
body#dencyouhou #contact_area h3.ttl { background: #59b75b; }
body#docusign #contact_area h3.ttl { background: #ee7800; }
body#clm_wk #contact_area h3.ttl { background: #0057a8; }
body#consulting #contact_area h3.ttl { background: #a64a97; }

@media screen and (max-width:768px) {
    #contact_area h3.ttl {
        font-size: 18px;
        margin-bottom: 25px;
    }
}


/* 注意文 */
#contact_area .txt {
    margin-bottom: 25px;
}
#contact_area .txt a:link,
#contact_area .txt a:visited,
.box_policy a {
    color: #CC0000;
    text-decoration: underline;
}
#contact_area .txt a:hover,
.box_policy a:hover {
    text-decoration: none;
}


/* フォームテーブル */
.form_table {
    box-sizing: border-box;
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
}
.form_table th {
    border: 1px solid #c8c8c8;
    padding: 20px;
    font-weight: normal;
    text-align: left;
    background: #f2f2f2;
    width: 30%;

}
.form_table td {
    border: 1px solid #c8c8c8;
    padding: 20px;
    width: 70%;
}

@media screen and (max-width:768px) {
    .form_table th {
        display: block;
        width: 100%;
    }
    .form_table td {
        display: block;
        width: 100%;
    }
}


.form_table td.cel_required {
    background: #fbf4f4;
}


.list_horizontal li {
    display: inline-block;
    margin-right: 20px;
}

.form_table input[type=checkbox] {
    transform: scale(2.0);
    margin-right: 10px;
    vertical-align: 0.2em;
}
.form_table input[type=radio] {
    transform: scale(2.0);
    margin-right: 10px;
    vertical-align: 0.2em;
}

@media screen and (max-width:768px) {
    .form_table input[type=checkbox] {
        transform: scale(1.0);
    }
    .form_table input[type=radio] {
        transform: scale(1.0);
    }
}

.form_table textarea {
    width: 100%;
    border: 1px solid #CCC;
}
.form_table input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #CCC;
    font-size: 18px;
}
.form_table input[type="text"].txt_required {
    background: #fbf4f4;
}

.form_table .name_area {
    display: inline-block;
    width: 40%;
    margin-right: 10px;
}
.form_table input[type="text"].short {
    width: 40%;
}
@media screen and (max-width:768px) {
    .form_table input[type="text"].short {
        width: 100%;
    }
}
.form_table input[type="text"].zip1 {
    width: 10%;
}
.form_table input[type="text"].zip2 {
    width: 20%;
}
@media screen and (max-width:768px) {
.form_table input[type="text"].zip1 {
    width: 30%;
}
.form_table input[type="text"].zip2 {
    width: 40%;
}
}
.form_table input[type="text"]::placeholder {
    font-size: 18px;
}
.form_table select {
    line-height: 1.5;
    border: 1px solid #ccc;
    width: 50%;
    font-size: 18px;
    background: #fbf4f4;
}

/* 必須アイコン */
.required {
    display: inline-block;
    float: right;
    margin-left: 5px;
    padding: 0 4px;
    background: #e80028;
    color: #FFF;
    font-size: 83%;
}

/* ウェブサイト上の個人情報の取扱いについて */
.box_policy {
    border: 1px solid #CCC;
    padding: 25px;
    margin-bottom: 10px;
    font-weight: 100;
}
.box_policy .hs-privacynote {
    margin-bottom: 10px;
}
.box_policy h4,
.box_policy .hs-privacynote__ttl {
    color: #e80028;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 20px;
}
.box_policy .hs-privacynote__sign {
    text-align: right;
}

.box_agree {
    background: #f2f2f2;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 25px;
    text-align: center;
}
.box_agree input[type=checkbox] {
    transform: scale(2.0);
    margin-right: 10px;
    vertical-align: 0.1em;
}

@media screen and (max-width:768px) {
        .box_agree input[type=checkbox] {
        transform: scale(1.0);
    }
}

.back {
    text-align: right;
}
.back a {
    text-decoration: none;
    color: #C00;
    background: url("/katsubun/asset/images/lp/paperless/icon_circle.png") center right no-repeat;
    padding: 0 25px 0 0;
}
.back a:hover {
    text-decoration: underline;
}


/* 送信完了ボックス */
.box_complete {
    border: 1px solid #CCC;
    background: #EEE;
    position: relative;
    height: 200px;
    margin-bottom: 30px;
    font-size: 18px;
}
.box_complete .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

/* header_paperless */
body.paperless {
    font: initial;
}
.header_paperless {
    font: initial;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 78%;
    line-height: 1.4;
}
.header_paperless .etc_link img {
    vertical-align: top;
}
.header_paperless #mega1 .c2,
.header_paperless #mega1 .c3 {
    clear: both;
    overflow: hidden;
}
@media screen and (max-width:768px) {
    .header_paperless {
        font-size: 96%;
    }
    .header_paperless #gnavi li a {
        text-decoration: none;
    }
}

.hover_menu__item a{
	text-decoration: none;
}

/* レスポンシブ表示・非表示 */
.disp-sp{
    display: none;
}
@media screen and (max-width:768px) {
    .disp-sp{
        display: block;
    }
    .disp-pc{
        display: none;
    }
}

/* 画像横幅100%表示 */
.img_w100{
    width: 100%;
    height: auto;
}

/*グレー背景*/
.bg-list{
    background-color: #f5f5f5;
    padding: 30px;
}

/*リスト表示*/
.list-disc li{
    list-style: disc;
    margin-left: 20px;
    font-size: 18px;
}

/*改行対応（実現する商品）*/
.second.-long{
    position: relative;
    padding-left: 130px;
}

.second.-long .emphasis{
    position: absolute;
    left: 0;
    top: 0;
}
@media screen and (max-width:768px) {
    .second.-long{
        position: relative;
        padding: 0;
    }
    .second.-long .emphasis{
        position: static;
        display: block;
    }
}