@charset "utf-8";

/*============================
conceptArea
============================*/

.conceptArea { width: 980px; margin: 0 auto; padding: 60px 0; }
.conceptArea .wrap { display: table; width: 100%; padding: 30px 60px; box-sizing: border-box; }
.conceptArea .wrap .img { display: table-cell; width: 20%; vertical-align: middle; text-align: center; }
.conceptArea .wrap .img img { height: 180px; border-radius: 3px; }
.conceptArea .wrap .text { display: table-cell; padding-left: 40px; margin-top: 20px; font-size: 15px; line-height: 2; vertical-align: middle; }

.conceptArea  .beginner { position: relative; width: 860px; margin: 10px auto 0; padding: 25px 40px; border: 3px solid #e3e0d3; border-radius: 5px; }
.conceptArea  .beginner .title { text-align: center; }
.conceptArea  .beginner .title span { display: inline-block; height: 35px; line-height: 36px; padding: 0 10px; background: #99d82b; border-radius: 35px; font-size: 16px; color: #fff; }
.conceptArea  .beginner .title span + span { margin-left: 3px; }
.conceptArea  .beginner .title span:nth-child(even) { background: #fd0; }
.conceptArea  .beginner .body { margin-top: 20px; font-size: 15px; }
.conceptArea  .beginner:before { position: absolute; content: ""; height: 120px; width: 100px; right: 15px; bottom: 0px; background: url(../../imgFile/illust_doctor.jpg) no-repeat center top; background-size: 180px; }

.conceptArea .link { margin-top: 50px; text-align: center; }
.conceptArea .link .md_btn { width: 224px; }
.conceptArea .link .md_btn + .md_btn { margin-left: 30px; }



/*============================
detailArea
============================*/

.detailArea { background: #FBF9F3; padding: 60px 0; }
.detailArea .wrap { width: 980px; margin: 0 auto; padding: 0 20px; }

.detailArea .wrap .detailList { display: table; width: 100%; padding-top: 40px; }
.detailArea .wrap .detailList .list { display: table-cell; text-align: center; }
.detailArea .wrap .detailList .list .icon { display: block; margin: 0 auto; width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_01.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .detailList .list .icon:hover { opacity: 0.7; }
.detailArea .wrap .detailList .list .label { margin-top: 15px; }

/*アイコンパターン*/
.detailArea .wrap .detailList .list .icon--02 { background: #fff url(../../imgFile/illust_tooth_02.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .detailList .list .icon--03 { background: #fff url(../../imgFile/illust_tooth_03.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .detailList .list .icon--04 { background: #fff url(../../imgFile/illust_tooth_04.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .detailList .list .icon--05 { background: #fff url(../../imgFile/illust_tooth_05.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .detailList .list .icon--06 { background: #fff url(../../imgFile/illust_tooth_06.png) no-repeat center center; background-size: 120px; }

.detailArea .wrap .komaList { margin-top: 100px;}
.detailArea .wrap .komaList .koma { display: table; width: 100%; }
.detailArea .wrap .komaList .koma + .koma { margin-top: 80px; }
.detailArea .wrap .komaList .koma .icon,
.detailArea .wrap .komaList .koma .text,
.detailArea .wrap .komaList .koma .img { display: table-cell; vertical-align: middle; }
.detailArea .wrap .komaList .koma .icon .komaIcon { width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_01.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .komaList .koma .text { padding: 0 30px; }
.detailArea .wrap .komaList .koma .text .label { font-size: 20px; color: #765; font-weight: bold; letter-spacing: 2px; }
.detailArea .wrap .komaList .koma .text .body { margin-top: 10px; font-size: 14px; }
.detailArea .wrap .komaList .koma .text .body .box { padding: 15px 20px 15px 30px; }
.detailArea .wrap .komaList .koma .text .body .box span { display: block; text-indent: -20px; }
.detailArea .wrap .komaList .koma .text .body .box span + span { margin-top: 5px; }
.detailArea .wrap .komaList .koma .text .body .box span:before { content: "●"; margin-right: 5px; font-size: 14px; color: #99d82b; }
.detailArea .wrap .komaList .koma .text .body .box em { display: block; padding-bottom: 8px; text-indent: -20px; }
.detailArea .wrap .komaList .koma .img { width: 260px; }
.detailArea .wrap .komaList .koma .img .sozai { width: 260px; height: 160px; background: url(../../imgFile/img_diagnodent.JPG) no-repeat center center; background-size: cover; border-radius: 3px; }

/*アイコンパターン*/
.detailArea .wrap .komaList .koma#koma--02 .icon .komaIcon { width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_02.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .komaList .koma#koma--03 .icon .komaIcon { width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_03.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .komaList .koma#koma--05 .icon .komaIcon { width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_04.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .komaList .koma#koma--06 .icon .komaIcon { width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_05.png) no-repeat center center; background-size: 100px; }
.detailArea .wrap .komaList .koma#koma--07 .icon .komaIcon { width: 120px; height: 120px; border-radius: 60px; background: #fff url(../../imgFile/illust_tooth_06.png) no-repeat center center; background-size: 120px; }

/*素材写真パターン*/
.detailArea .wrap .komaList .koma#koma--02 .img .sozai { background: url(../../imgFile/img_mokei.JPG) no-repeat center center; background-size: cover; }
.detailArea .wrap .komaList .koma#koma--03 .img .sozai { background: #eee url(../../imgFile/illust_dam.png) no-repeat center center; background-size: cover; }
.detailArea .wrap .komaList .koma#koma--04 .img .sozai { background: url(../../imgFile/dammy.JPG) no-repeat center center; background-size: cover; }
.detailArea .wrap .komaList .koma#koma--05 .img .sozai { width: 210px; height: 260px; margin: 0 auto; background: url(../../imgFile/img_ct.JPG) no-repeat center center; background-size: cover; }
.detailArea .wrap .komaList .koma#koma--06 .img .sozai { background: #fff url(../../imgFile/illust_tooth.jpg) no-repeat center center; background-size: contain; }
.detailArea .wrap .komaList .koma#koma--07 .img .sozai { background: #fff url(../../imgFile/illust_kyosei.jpg) no-repeat center top; background-size: 180px; }



/*============================
tryArea
============================*/

.tryArea { padding: 60px 0; }
.tryArea .wrap { width: 980px; margin: 40px auto 0; padding: 0 20px; }

.tryArea .wrap .koma {}
.tryArea .wrap .koma + .koma { margin-top: 50px; }
.tryArea .wrap .koma .title { display: inline-block; margin: 0 auto; padding: 0 20px;  height: 54px; line-height: 56px; background: #FBF9F3; border-radius: 5px; font-size: 20px; color: #765; text-align: center; font-weight: bold; }
.tryArea .wrap .koma .title .num { display: inline-block; width: 36px; height: 36px; margin-right: 10px; line-height: 36px; border-radius: 18px; text-align: center; background: #fa0; color: #fff; }
.tryArea .wrap .koma .try { margin-top: 30px; display: table; width: 100%; padding: 0 20px; }
.tryArea .wrap .koma .text { display: table-cell; padding-right: 40px; vertical-align: top; font-size: 14px; }
.tryArea .wrap .koma .img { display: table-cell; text-align: right; vertical-align: top; }
.tryArea .wrap .koma .img .sozai { width: 320px; height: 220px; border-radius: 3px; }

.tryArea .wrap .koma .text .box { margin-top: 20px; padding-left: 25px; }
.tryArea .wrap .koma .text .catch { padding-bottom: 5px; font-size: 18px; font-weight: bold; color: #99d82b; text-indent: -25px; }
.tryArea .wrap .koma .text .catch:before { content: "●"; margin-right: 3px; font-size: 22px; }

.tryArea .wrap .koma .text .box .table { display: table; margin-top: 5px; }
.tryArea .wrap .koma .text .box .table + .table { margin-top: 15px; }
.tryArea .wrap .koma .text .box .table .img { display: table-cell; }
.tryArea .wrap .koma .text .box .table .img img { border-radius: 3px; }
.tryArea .wrap .koma .text .box .table .body { display: table-cell; width: 450px; padding-left: 20px; }
.tryArea .wrap .koma .text .box .table .body em { display: block; margin-left: -8px; padding-bottom: 5px; }

/*素材写真パターン*/
.tryArea .wrap .koma.koma--01 .img .sozai { border: 1px solid #eee; background: url(../../imgFile/illust_check.jpg) no-repeat center top; background-size: 250px; }
.tryArea .wrap .koma.koma--02 .img .sozai { background: url(../../imgFile/img_kids.JPG) no-repeat center top; background-size: cover; }