@charset "utf-8";

form{ width: 100%; display: block;}
#toole-wrap{ padding: 80px 0;}
#toole-wrap > .inner1100{ display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
/*=======================================
ttl
=========================================*/
#toole-wrap #ttl{ flex-direction: column; padding: 30px 1%;}
#toole-wrap #ttl h1{ width: 100%; display: flex; flex-direction: column; font-weight: 300; font-size: 34px;}
#toole-wrap #ttl h1 span{ display: block; font-weight: 200; font-size: 1px;}
#toole-wrap #ttl p{ max-width: 600px; display: block; margin:50px 0;}


/*=======================================
contents
=========================================*/
#main-left{ width: calc(98% - 250px); display: flex; flex-direction: column; flex: 1; margin-right: 2%;}
#main-left .ttl{ }

/*=======================================
#main-contents >> bodrder-wrap
枠ありのデザイン
=========================================*/
#main-contents .bodrder-wrap{ width: 100%; display: flex; flex-direction: column; padding: 20px 40px; border: solid 1px #777; border-radius: 20px;}
#main-contents .bodrder-wrap .bodrder-wrap-ttl{ display: flex; flex-direction: column; margin-bottom: 20px;}
#main-contents .bodrder-wrap .bodrder-wrap-ttl span{ font-size: 20px; font-weight: 400; padding: 15px 0; border-bottom: solid 1px #999;}

@media screen and (max-width: 940px) {
#main-contents .bodrder-wrap{ padding: 10px; border-radius: 14px;}
}

/*---------------------
デザインパーツ
-----------------------*/
.gray{ padding: 20px; border-radius: 22px; background: #f0f0f0;}
.pc-flex-row, 
.flex-row{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start;}
.colimn3 .pc_w30p{ margin-right: 3%;}
.colimn3 .pc_w31p{ margin-right: 2%;}
.colimn3 .pc_w32p{ margin-right: 1%;}
.flex-center{ display: flex; align-items: center; justify-content: center;}
.mini{ display: block; line-height: 1.2em; font-size: 11px; letter-spacing: 0; padding-top: 4px; color: #666;}
.sticky{ width: 100%; position: sticky; left: 0; top: 40px; margin-bottom: 50px;}

@media screen and (max-width: 900px) {
.gray{ padding: 10px 8px; border-radius: 10px;}
}
@media screen and (max-width: 700px) {
.pc-flex-row{ flex-direction: column; align-items: flex-start;}
.colimn3 .pc_w30p, 
.colimn3 .pc_w31p, 
.colimn3 .pc_w32p{ margin: 3px 0;}
.spmb10{ margin-bottom: 10px;}
.spmb20{ margin-bottom: 20px;}
.spmb30{ margin-bottom: 30px;}
.spmb40{ margin-bottom: 40px;}

.spmt10{ margin-top: 10px;}
.spmt20{ margin-top: 20px;}
.spmt30{ margin-top: 30px;}
.spmt40{ margin-top: 40px;}

}
/*-----------------------
------------------------*/
table, 
table > *{ width: 100%; max-width: 100%; table-layout: fixed;}
.w30{ width: 30px;}
.w40{ width: 40px;}
.w50{ width: 50px;}
.w60{ width: 60px;}
.w70{ width: 70px;}
.w80{ width: 80px;}
.w90{ width: 90px;}
.w100{ width: 100px;}
.w110{ width: 110px;}
.w120{ width: 120px;}
.w130{ width: 130px;}
.w140{ width: 140px;}
.w150{ width: 150px;}
.w160{ width: 160px;}
.w170{ width: 170px;}
.w180{ width: 180px;}
.w190{ width: 190px;}
.w200{ width: 200px;}

.w30p{ width: 30%;}
.w31p{ width: 31%;}
.w32p{ width: 32%;}
.w33p{ width: 33%;}
.w34p{ width: 34%;}
.w35p{ width: 35%;}
.w36p{ width: 36%;}
.w37p{ width: 37%;}
.w38p{ width: 38%;}
.w39p{ width: 39%;}
.w40p{ width: 40%;}
.w41p{ width: 41%;}
.w42p{ width: 42%;}
.w43p{ width: 43%;}
.w44p{ width: 44%;}
.w45p{ width: 45%;}
.w46p{ width: 46%;}
.w47p{ width: 47%;}
.w48p{ width: 48%;}
.w49p{ width: 49%;}
.w50p{ width: 50%;}

.pc_w30p{ width: 30%;}
.pc_w31p{ width: 31%;}
.pc_w32p{ width: 32%;}
.pc_w33p{ width: 33%;}
.pc_w34p{ width: 34%;}
.pc_w35p{ width: 35%;}
.pc_w36p{ width: 36%;}
.pc_w37p{ width: 37%;}
.pc_w38p{ width: 38%;}
.pc_w39p{ width: 39%;}
.pc_w40p{ width: 40%;}
.pc_w41p{ width: 41%;}
.pc_w42p{ width: 42%;}
.pc_w43p{ width: 43%;}
.pc_w44p{ width: 44%;}
.pc_w45p{ width: 45%;}
.pc_w46p{ width: 46%;}
.pc_w47p{ width: 47%;}
.pc_w48p{ width: 48%;}
.pc_w49p{ width: 49%;}
.pc_w50p{ width: 50%;}

.font12 > *{ font-size: 12px !important;}
.font13 > *{ font-size: 13px !important;}
.font14 > *{ font-size: 14px !important;}
.font15 > *{ font-size: 15px !important;}
.font16 > *{ font-size: 16px !important;}
.font17 > *{ font-size: 17px !important;}
.font18 > *{ font-size: 18px !important;}
@media screen and (max-width: 700px) {
.pc_w30p, 
.pc_w31p, 
.pc_w32p, 
.pc_w33p, 
.pc_w34p, 
.pc_w35p, 
.pc_w36p, 
.pc_w37p, 
.pc_w38p, 
.pc_w39p, 
.pc_w40p, 
.pc_w41p, 
.pc_w42p, 
.pc_w43p, 
.pc_w44p, 
.pc_w45p, 
.pc_w46p, 
.pc_w47p, 
.pc_w48p, 
.pc_w49p, 
.pc_w50p{ width: 100%;}
}

@media screen and (max-width: 700px) {
table.sp-table-block{ display: block;}
table.sp-table-block tr{ width: 100%; display:flex; flex-direction: column;}
table.sp-table-block tr th, 
table.sp-table-block tr td { width: 100%; display: block; padding: 2px 5px !important; margin: 0px !important;}
table.sp-table-block tr td:last-child{ border-bottom: solid 1ox red; margin-bottom: 20px !important;}
}


/*---------------------
デザインパーツ；テーブル
-----------------------*/
table.no-border{ border: none; outline: none;}
table.no-border tr.border-bottom{ border-bottom: solid 1px #aaa; }
table.no-border tr.border-bottom th, 
table.no-border tr.border-bottom td{ padding-bottom: 30px !important;}
table.no-border tr.border-bottom td .not_start{ display: none;}
table.no-border tr.border-bottom td .not_start.error{ display: block; padding: 4px 0 0 20px; font-size: 12px; color: #c93737;}
table.no-border tr.border-bottom + tr th, 
table.no-border tr.border-bottom + tr td{ padding-top: 25px !important;}
table.no-border tbody tr > *{ padding-top: 15px; padding-bottom: 15px;}
table.no-border tr th{ align-items: center; font-size: 14px; word-break: keep-all; text-align: left; font-weight: bold;}
table.no-border tr .nowrap{ white-space: nowrap;}
table.no-border tr th .ninni{ display: flex; margin-top: 3px; font-size: 10px; padding: 2px 4px; border-radius: 2px; background: #fff; margin: 0 0 0 3px;}
table.no-border tr td{ font-size: 14px; align-items: center; }
table.no-border tr td{}
@media screen and (max-width: 700px) {
table.sp-table-block, 
table.sp-table-block > *, 
table.sp-table-block > * tr { width: 100%; display: block;} 
table.sp-table-block tr.border-bottom th, 
table.sp-table-block tr.border-bottom td{ padding-bottom: 5px !important;}
table.sp-table-block tr.border-bottom + tr td{ padding-top: 0px !important;}
table.sp-table-block.no-border tr th:first-child > *, 
table.sp-table-block.no-border tr td:first-child > * span{ padding: 0 !important; margin: 0 !important;}
}
/*---------------------
.inputタグ
-----------------------*/
input[type="text"]{ max-width: 100%; padding: 10px; border: solid 1px #777; background: #fff;}
input[type="text"]:focus{ border: solid 1px #776fe7; outline: none; box-shadow: 0 0 0 2px #776fe7;}
input[type="text"]:not(:placeholder-shown) { background: #e8ebfe;}
/**/
input[type=radio], input[type=checkbox] { display: none;}
.checkBox + span{ font-weight: bold; padding-left: 25px; display: inline-block; position: relative; cursor: pointer; transition: 0.3s;}
.checkBox:hover + span{ color: #2b36d1;}
.checkBox + span:after{ content: ""; display: block; position: absolute; background-size: contain; top: 50%; margin-top: -10px; left: 0; width: 20px; height: 20px; border-radius: 2px; border: solid 1px #777; background: #fff;}
.checkBox:checked + span:after { background: url(../cb_on.gif) no-repeat center; background-size: 100%; border: solid 1px #2b36d1; }

/**/
.inputFull { width: 100%; vertical-align: middle; outline: none; -webkit-transition: all .3s; transition: all .3s; border-radius: 30px; padding: 10px 25px; font-size: 16px; color: #000;}
/**/
.submitBtn { width: 300px; height: 50px; display: flex; align-items: center; justify-content: center; background: #333; color: #fff; border-radius: 6px; border: none; transition: 0.3s; margin: 25px 0; cursor: pointer;}
.submitBtn:hover{ background: #2b36d1;}


/*===========================================
 word-analysis
===========================================*/
.culimn2-sec{ width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
/**/
.culimn2-sec .left .wrap{ justify-content: flex-start; align-items: flex-start;}
.culimn2-sec .left .wrap .t{ display: inline-block; flex-direction: row; vertical-align: baseline;}
.culimn2-sec .left .wrap .t > span{ line-height: 1em; display: inline; color: #000; white-space: nowrap; vertical-align: baseline; position: relative; margin: 0 2px;}
.culimn2-sec .left .wrap .t > span::after{ width: 100%; height: 2px; content: ""; position: absolute; left: 0; bottom: -1px; pointer-events: none; z-index: -1;}

.culimn2-sec .left .wrap .t > span.blue, 
#hTag-wrap table tr td .blue { color: #2d6ea3;}

.culimn2-sec .left .wrap .t > span.green, 
#hTag-wrap table tr td .green{ color: #2b9966;}

.culimn2-sec .left .wrap .t > span.red, 
#hTag-wrap table tr td .red { color: #c53939;}

.culimn2-sec .left .wrap .t > span.orange, 
#hTag-wrap table tr td .orange{ color: #cc9010;}

.bk-1{ background: #e06363;}
.bk-2{ background: #ecb130;}
.bk-3{ background: #69c59a;}
.bk-4{ background: #4f9bd8;}


.target-table tbody td.blue, 
.culimn2-sec .left .wrap .t > span.blue::after, 
#hTag-wrap table tr td .blue::after{ background: #9fc8e9;}

.target-table tbody td.green, 
.culimn2-sec .left .wrap .t > span.green::after, 
#hTag-wrap table tr td .green::after{ background: #75d4a8;}

.target-table tbody td.red, 
.culimn2-sec .left .wrap .t > span.red::after, 
#hTag-wrap table tr td .red::after{ background: #e7a2a2;}

.target-table tbody td.orange, 
.culimn2-sec .left .wrap .t > span.orange::after, 
#hTag-wrap table tr td .orange::after{ background: #ecc760;}



/**/
.culimn2-sec .left{ width: 50%;}
.culimn2-sec .left .wrap{ width: 100%;}
/**/
.culimn2-sec .left .wrap .word-ttl{ width: 100%; display: flex; flex-direction: column; padding:15px 10px; border-radius: 8px 8px 0 0; border: solid 1px #555; border-bottom: dashed 1px #555;}
.culimn2-sec .left .wrap .word-ttl h2{ display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; font-size: 14px; letter-spacing: 0;}
.culimn2-sec .left .wrap .word-ttl h2 b{ display: block; font-size: 12px; padding-right: 10px; letter-spacing: 0;}
.culimn2-sec .left .wrap .word-ttl h2 > span{ display: flex; flex-direction: column; padding-right: 10px;}
.culimn2-sec .left .wrap .word-ttl h2 > span a{ display: block; font-size: 15px; letter-spacing: -0.2px; line-height: 1.2em; font-weight: 500;}
.culimn2-sec .left .wrap .word-ttl h2 > span a:hover{ text-decoration: underline; color: #333;}
.culimn2-sec .left .wrap .word-ttl h2 > span .date { font-size: 11px; color: #555; letter-spacing: 0; padding-top: 5px;}
/**/
.culimn2-sec .left .wrap .word-table{ display: block; padding: 0 8px; border-radius: 0 0 8px 8px; border: solid 1px #555; border-top: none;}
.under-border *{ letter-spacing: 0;}
.under-border tr.ulb{ border-bottom: solid 1px #ddd;}
.under-border tr th{ padding:8px 4px; font-weight: bold;}
.under-border tr td{ padding:8px;}
/**/
.target-table{ width: 100%; table-layout: auto;}
.target-table thead{ background: #555;}
.target-table thead th{ color: #fff; font-size: 12px !important; text-align: center; padding: 2px 5px; border: solid 1px #999;}
.target-table thead .th-center th{ text-align: center;}
.target-table tbody{ background: #fff;}
.target-table tbody th{background: #e5e5e5; font-size: 12px !important; font-weight: bold;}
.target-table tbody th, 
.target-table tbody td{ padding: 3px 10px; border: solid 1px #ccc;}
.target-table tbody td{ text-align: center; letter-spacing: 0;}
.target-table tbody td.name, 
.target-table tbody td.word{ font-weight: 500; text-align: left;}
/**/
#hTag-wrap{ padding: 50px 0; margin: 50px 0; border-top: solid 1px #ccc; align-items: flex-start;}
#hTag-wrap .content-ttl{ font-weight: bold;}
#hTag-wrap table { border: solid 10px #ddd;}
#hTag-wrap table tr th{ color: #fff; border: none;}
#hTag-wrap table tr td{ text-align: left; position: relative; border-left: none; border-right: none;}
#hTag-wrap table tr.h1 th{ background: #111;}
#hTag-wrap table tr.h2 th{ background: #444;}
#hTag-wrap table tr.h3 th{ background: #777;}
#hTag-wrap table tr.h4 th{ background: #aaa;}

#hTag-wrap table tr.h1 td { padding-left: 10px; font-weight: bold;}
#hTag-wrap table tr.h2 td { padding-left: 50px;}
#hTag-wrap table tr.h3 td { padding-left: 90px;}
#hTag-wrap table tr.h4 td { padding-left: 130px;}

#hTag-wrap table tr td span.level{ height: 100%; display: block; z-index: 10; position: absolute; left: 0px; top: -0.5px; pointer-events: none;}
#hTag-wrap table tr.h1 td span.level{ display: none; background:#111; box-shadow: 0 1px 0 0 #111;}
#hTag-wrap table tr.h2 td span.level{ width: 40px; background:#444; box-shadow: 0 1px 0 0 #444;}
#hTag-wrap table tr.h3 td span.level{ width: 80px; background:#777; box-shadow: 0 1px 0 0 #777;}
#hTag-wrap table tr.h4 td span.level{ width: 120px; background:#aaa; box-shadow: 0 1px 0 0 #aaa;}

/**/
#hTag-wrap table tr td .red, 
#hTag-wrap table tr td .blue, 
#hTag-wrap table tr td .orange, 
#hTag-wrap table tr td .green{ display: inline; position: relative; vertical-align: baseline;}

#hTag-wrap table tr td .red::after, 
#hTag-wrap table tr td .blue::after, 
#hTag-wrap table tr td .orange::after, 
#hTag-wrap table tr td .green::after{ width: 100%; height: 2px; content: ""; position: absolute; left: 0; bottom: -1px; pointer-events: none; z-index: 0;}



/*--------------------
----------------------*/
.culimn2-sec .right{ width: 46%;}


@media screen and (max-width: 700px) {
.culimn2-sec{ flex-direction: column; justify-content: flex-start;}
.culimn2-sec .left, 
.culimn2-sec .right{ width: 100%;}
}



/*=======================================
aside
=========================================*/
#toole-wrap .inner1100 aside{ width: 250px; margin-bottom: 120px;}

@media screen and (max-width: 900px) {
#toole-wrap #main-contents.inner1100{ flex-direction: column;}
#main-left, 
#toole-wrap .inner1100 aside{ width:100%; margin: 0;}
}

#toole-wrap .inner1100 aside .contactBox{ padding: 10px; border-radius: 8px; border: solid 2px #ccc;}
#toole-wrap .inner1100 aside .contactBox p{ width: 100%; display: flex; flex-direction: column;}
#toole-wrap .inner1100 aside .contactBox p span{ display: block; text-align: center;}
#toole-wrap .inner1100 aside .contactBox p a { width: 100%; height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 4px; background:rgba(215,102,104,1); color: #fff; border-radius: 4px; margin-top: 5px;}
#toole-wrap .inner1100 aside .contactBox p a span{ font-size: 13px; color: #fff;}
#toole-wrap .inner1100 aside .contactBox p a b{ font-size: 15px; color: #fff;}
#toole-wrap .inner1100 aside .contactBox p a:hover{ background: #d0b581;}
#toole-wrap .inner1100 aside .contactBox p a:hover *{ color: #111;}
/**/
#toole-wrap .inner1100 aside .bnrBox{ margin: 15px 0;}
/**/
#toole-wrap .inner1100 aside nav.linklist{ display: block; box-sizing: border-box;}
#toole-wrap .inner1100 aside nav.linklist ul{ display: flex; flex-direction: column;}
#toole-wrap .inner1100 aside nav.linklist ul li{ width: 100%; display: block;}
#toole-wrap .inner1100 aside nav.linklist ul b{ font-size: 12px; display: block;}
#toole-wrap .inner1100 aside nav.linklist ul a { color: #555; letter-spacing: 0; font-size: 12px; font-weight: 500; list-style: 1.2em; padding:3px 3px 3px 6px; position: relative;}
#toole-wrap .inner1100 aside nav.linklist ul a::before{ content: "・"; position: absolute; left: -5px; top: 2px;}
#toole-wrap .inner1100 aside nav.linklist ul a:hover{ color: #2b36d1; }