/* Common css*/
/* clearfix */
.clearfix:after {content: ""; display: block; clear: both;}
.clearfix:before {content: ""; display: block; clear: both;}
.clearfix {display: block;}

img {line-height: 0;}

body{background: #5f5f5f; color: #666; font-size: 0.9em; line-height: 1.6; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;}

div#mainBg{background: #fff; width: 900px; margin-left: 50px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 1);}
.mb1em{margin-bottom: 1em !important;}


header {margin: 0 1.44%;}
header h1{font-size: 0.8em; line-height: 300%; padding: 0 1em;}
main{ float: right; width: 76.66%; margin-right: 2.77%; }
div#sideColumn{width: 16.66%; float: left; margin-left: 1.44%;}
div#sideColumn p{margin-bottom: 1em;}
div#breadcrumb{margin: 0 1.44%; text-align: right; font-size: 0.8em; line-height: 1.3em; padding: 1em 0;}
div#breadcrumb h2{display: inline;}
p.formTel{text-align: center;}
p.formTel a {font-size: 2.5em; color: #3596e6 !important;}

strong.boldRed{color: #dd1821; font-weight: bold;}
strong.boldGreen{color: #038135; font-weight: bold;}
.smallTxt{font-size: 0.8em; font-weight: normal;}
.flLeft{float: left;}
.flRight{float: right;}
.flClear{clear: both;}
nav{height: 22px; background: url(../img/common/mainnav_bg.gif) top left repeat-x; margin: 0 1.44% 0;}
nav ul{float: right;}
nav ul li{float: left;}
nav ul li a{display: block; width: 144px; height: 22px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
nav ul li.navTop a{background: url(../img/common/nav/mainnav_home.png) top left no-repeat;}
nav ul li.navTop a:hover{background: url(../img/common/nav//mainnav_home_ov.png) top left no-repeat;}
nav ul li.navTopics a{background: url(../img/common/nav/mainnav_example.png) top left no-repeat;}
nav ul li.navTopics a:hover{background: url(../img/common/nav/mainnav_example_ov.png) top left no-repeat;}
nav ul li.navNew a{background: url(../img/common/nav/mainnav_faq.png) top left no-repeat;}
nav ul li.navNew a:hover{background: url(../img/common/nav/mainnav_faq_ov.png) top left no-repeat;}
nav ul li.navFaq a{background: url(../img/common/nav/mainnav_company.png) top left no-repeat;}
nav ul li.navFaq a:hover{background: url(../img/common/nav/mainnav_company_ov.png) top left no-repeat;}
nav ul li.navContact a{background: url(../img/common/nav/mainnav_inq.png) top left no-repeat;}
nav ul li.navContact a:hover{background: url(../img/common/nav/mainnav_inq_ov.png) top left no-repeat;}
nav ul li.navCompany a{background: url(../img/common/mainnav_company.png) top left no-repeat;}
nav ul li.navCompany a:hover{background: url(../img/common/mainnav_company_ov.png) top left no-repeat;}
footer{width: 96%; margin: 2em auto 1em;}
footer ul.firstNav,
footer ul.secondNav{text-align: center; display: block; padding: 1em 1em;}
footer ul.firstNav{}
footer ul.secondNav{border-top: 2px solid #999; border-bottom: 2px solid #999;}
footer ul.firstNav li,
footer ul.secondNav li{font-size: 0.85em; display: inline; border-left: 1px solid #666666; line-height: 180%;}
footer ul.firstNav li a,
footer ul.secondNav li a{margin: auto 0.6em; white-space: nowrap; color: #666;}
footer ul.firstNav li a:hover,
footer ul.secondNav li a:hover{color: #aaa;}
footer ul.firstNav li:last-child,
footer ul.secondNav li:last-child{ border-right: 1px solid #666666;}

footer p.officialBunner{text-align: right; margin: 0.5em auto;}
footer div#addressArea{text-align: right; font-size: 0.95em; margin: 2em auto 0; padding-bottom: 2em;}
footer div#addressArea p{}
footer div#addressArea p strong{color: #990033; font-weight: bold;}
footer div#addressArea address,
footer div#addressArea small{font-size: 0.9em;}

h3.arrowTt,
h4.arrowTt{background: url(../img/common/tt_arrow.gif)  0.9em center no-repeat #2f2f2f; margin-bottom: 1em; position: relative;}
h3.arrowTt span,
h4.arrowTt span{color: #fff; background: #5f5f5f; font-size: 1.2em; font-weight: bold; line-height: 2.5em; display: block; margin-left: 2.5em; padding-left: 0.5em;}
#exampleTt span.toggleBt{background: #2f2f2f; color: #fff; font-size: 0.9em; padding: 0 0.75em; display: inline-block; border-radius: 100px;  position: absolute; top: 50%; right: 1%; transform: translateY(-50%); -webkit- transform: translateY(-50%);}


ul#example{display: flex; flex-wrap: wrap; margin: 0 1em 3em; border-left: 1px solid #999; border-top: 1px solid #999; box-sizing: border-box;}
ul#example li{width: 25%; border-right: 1px solid #999; border-bottom: 1px solid #999; font-size: 0.85em; box-sizing: border-box;}
ul#example li span{display: block; margin: 0.5em;}
ul#example li span img{width: 100%; margin-bottom: 0.3em;}
ul#example li span a{position: relative; }
ul#example li span a i{color: #fff; background: rgba(0,0,0,0.7); position: absolute; bottom: 5px; right: 2px; font-size: 1.6em;}

section.mainSecArea{margin: 0 0 3em;}
section.mainSecArea h3.kvArea{margin: 0 0 1.5em;}
section.mainSecArea p{margin: 0 0 1.5em;}
section.mainSecArea div.column2Area,
section.mainSecArea div.column3Area{overflow: hidden;}
section.mainSecArea div.column2Area p{ width: 50%; float: left; text-align: left; font-size: 1em; font-weight: bold;}
section.mainSecArea div.column3Area p{ width: 33.33%; float: left; text-align: center; font-size: 1.1em; font-weight: bold;}
section.mainSecArea div.column2Area p span{margin: 1em; display: block;}
section.mainSecArea div.column3Area p span{margin: 1.5em; display: block;}
section.mainSecArea div.column2Area p span img, 
section.mainSecArea div.column3Area p span img{ width: 100%; border-radius: 50%; margin: 0 0 0.8em;}

img.noCircle{border-radius: 0% !important;}

section.choiceArea{ margin: 1em;}

section.choiceArea h4.stepTt{ border: 1px solid #08b3a9; color: #08b3a9; line-height: 2em; font-weight: bold; font-size: 1.2em; margin: 0 0 1em; position: relative;}
section.choiceArea h4.stepTt span{background: #08b3a9; padding: 0 0.8em; color: #fff; display: inline-block; line-height: 2em;}
section.choiceArea h4.stepTt span.toggleBt{background: #07a299; color: #fff; font-size: 0.75em; padding: 0 0.75em; display: inline-block; border-radius: 100px;  position: absolute; top: 50%; right: 1%; transform: translateY(-50%); -webkit- transform: translateY(-50%);}

section.choiceArea ol{display: flex; flex-wrap: wrap; margin: 0 1em 1em; border-left: 1px solid #999; border-top: 1px solid #999; box-sizing: border-box; counter-reset: list; }
section.choiceArea ol li{width: 25%; border-right: 1px solid #999; border-bottom: 1px solid #999; font-size: 0.85em; box-sizing: border-box; position: relative;}
section.choiceArea ol.column3 li{width: 33.33% !important;}
section.choiceArea ol li:before{counter-increment: list; content: counter(list); display: block; position: absolute; width: 26px; height: 26px; background: #08b3a9; line-height: 26px; text-align: center; color: #fff; top: 13px; left: 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold;}
section.choiceArea ol li span{display: block; margin: 0.5em; text-align: center; font-size: 1.1em; font-weight: bold;}
section.choiceArea ol li span img{width: 100%; margin-bottom: 0.3em;}
section.choiceArea ol.imgGray li span img{background: #ececec;}
section.choiceArea ol.boldTxt li span{}
section.choiceArea p{margin-bottom: 1.5em;}
section.choiceArea .smallTxt{margin: auto 1em 3em;}
.column2{float: left; width: 50%;}
.column2 img{width: 95%;}

form.entryForm{padding-top: 120px; margin-top: -120px;}
form.entryForm table{font-size: 0.9em; border: 1px solid #ccc; line-height: 2em; width: 100%;}
form.entryForm table tr{}
form.entryForm table tr th{width: 10em; font-weight: bold; padding: 0.5em 1em; vertical-align: middle !important;}
form.entryForm table tr td{padding: 0.5em 1em; font-size: 0.9em;}
form.entryForm table tr td label{margin-right: 1em;}
form.entryForm table tr:nth-child(odd){background-color: #eee;}
form.entryForm table .style25{color: #f0070c;}
form.entryForm table ul.column2,
form.entryForm table ul.column3,
form.entryForm table ul.column4,
form.entryForm table ul.column5{display: flex; flex-wrap: wrap; width: 100%;}
form.entryForm table ul.column2 li{width: 50%;}
form.entryForm table ul.column3 li{width: 33.33%;}
form.entryForm table ul.column4 li{width: 25%;}
form.entryForm table ul.column5 li{width: 20%;}

p.entryFormBtArea{position: relative; margin-bottom: 1px;}
a.entryFormBt{display: inline-block; position: relative; font-size: 1.3em; padding: 0 1em; line-height: 200%; color: #b4d3f2; border-bottom: 5px solid #2572bf; background: #4292e2; text-decoration: none;}
a.entryFormBt:hover{top: 3px;border-bottom: 2px solid #2572bf; color: #fff;}
a.entryFormBt{border-radius: 1vh;border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
a.entryFormBtNow{top: 3px;border-bottom: 2px solid #2572bf; color: yellow; font-weight: bold;}
.fa-position-right{position: absolute;top: calc(50% - .5em);right: 1rem;}

/* Eigyo */

section.eSecArea div.greenCircle{width: 35%; height: auto; text-align: center; border-radius: 50%; color: #fff; background: #009a47;}
section.eSecArea div.greenCircle p{padding: 1em 1em 2em;}
section.eSecArea div.greenCircle p strong{font-size: 3em;}

section#eigyou01{}
section#eigyou01 div.eTop{}
section#eigyou01 div.eTop h3 img{width: 100%;}
section#eigyou01 div.eLeft{width: 63%; float: left; font-size: 0.9em;}
section#eigyou01 div.eLeft p{margin-left: 0.8em; margin-bottom: 0.5em;}
section#eigyou01 div.eLeft p img{width: 100%;}
section#eigyou01 p.eRight{width: 34%; float: right;}
section#eigyou01 p.eRight img{width: 100%;}
section#eigyou01 div.eLeft2{width: 49%; float: left; font-size: 0.9em;}
section#eigyou01 div.eRight2{width: 49%; float: right;}
section#eigyou02 div.greenCircle{ position: relative; z-index: 2; margin-bottom: -13em;}
section#eigyou02 div.eLeft{width: 48.5%; float: left; font-size: 0.9em;}
section#eigyou02 div.eRight{width: 48.5%; float: right;}
section#eigyou02 div.eRight img{width: 100%;}
section#eigyou03 div.greenCircle,
section#eigyou04 div.greenCircle{float: left;}
section#eigyou03 div.eRight,
section#eigyou04 div.eRight{width: 60%; float: right;}
section#eigyou03 div.eLeft2,
section#eigyou04 div.eLeft2,
section#eigyou05 div.eLeft,
section#eigyou06 div.eLeft{width: 48.5%; float: left; font-size: 0.9em;}
section#eigyou03 div.eRight2,
section#eigyou04 div.eRight2,
section#eigyou05 div.eRight,
section#eigyou06 div.eRight{width: 48.5%; float: right;}
section#eigyou03 div.eRight2 img,
section#eigyou04 div.eRight2 img,
section#eigyou05 div.eRight2 img,
section#eigyou06 div.eRight2 img{width: 100%;}


section.eSecArea p.kvArea{position: relative; z-index: 1;}
section.eSecArea p.kvArea img{width: 100%;}

section.eSecArea div.priceArea{border: solid 3px #FF0000;}
section.eSecArea div.priceArea h5{background: #f00; color: #fff; font-size:  1.5em; line-height: 2em; font-weight: bold; text-align: center;}
section.eSecArea div.priceArea p{text-align: center; margin-bottom: 1em;}
section.eSecArea div.priceArea p strong{color: #f00; font-size:  1.5em; line-height: 2em; font-weight: bold;}
section.eSecArea div.priceArea p span{font-size:  0.85em;}
section.eSecArea table.specTable,
section#eigyou01 div.eRight2 table.specTable{margin-top: 0.2em; margin-bottom: 1em; width: 100%; border-collapse: collapse; border: solid 1px #999; font-size: 0.9em;}
section.eSecArea table.specTable th,
section#eigyou01 div.eRight2 table.specTable th{background: #E6E6E6; text-align: center; white-space: nowrap; color: #666; vertical-align: middle !important;}
section.eSecArea table.specTable th,
section.eSecArea table.specTable td,
section#eigyou01 div.eRight2 table.specTable th,
section#eigyou01 div.eRight2 table.specTable td{border: solid 1px #999; padding: 2px 4px;}

section#eigyou02 p.eBottomTxt{clear: both;}