@charset "utf-8";
/* CSS Document */

#breadcrumbArea{height: 0;}
.contentsBox{padding: 40px 0px 40px;}
#dnaSec{}
h3.ttl-h3{border-left: 10px solid #e84709; background: #f1f1f1;color:#e84709;font-size: 24px;padding: 5px 0 5px 10px; }


/*main*/
#main{background:url("../images/jigyou/img_dna_main01.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;}
#main > .sectionInner{padding:32px 0 35px; }
#main .mainBox{}
#main .mainBox .org_txt{background:url("../images/jigyou/img_dna_mainTtl01.png");background-repeat: no-repeat;background-position: center;color: #e9470b;font-size: 25px;padding: 10px;font-weight: bold;}
#main .mainBox .ttl-h2{color: #fff;font-size: 45px;line-height: 1.2;padding: 0 0 0.5em;}
#main .mainBox .ttl-h2 span{font-size: 70%;display: block;}
#main .mainBox .mainimg{margin: auto;text-align: center;}


/*dnaSec*/
/*導入セクション*/
#dnaSec .SubmainBox .flexBox{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
#dnaSec .SubmainBox .flexBox .img{width: 29%;margin-right: 0.5em;box-shadow: 0px 0px 10px 1px rgba(29,53,34,0.8);}
#dnaSec .SubmainBox .flexBox .txtBox{width: 69%;}
#dnaSec .SubmainBox .flexBox .txtBox .Ttl{font-size: 40px;font-weight: bold;line-height: 1.2;}
#dnaSec .SubmainBox .flexBox .txtBox .Ttl span{font-size: 40%;display: block;}
#dnaSec .SubmainBox .flexBox .txtBox .moreLink a{color: #e84709;border: 2px solid #e84709;text-align:center;border-radius: 50vw;width: 350px;padding:2px 25px ;font-size: 90%;font-weight: 500;}
#dnaSec .SubmainBox .flexBox .txtBox .moreLink a:hover{background: #e84709;color: #fff;text-decoration: none;}

/*申込みボタン*/
.btnBox{margin: 3em 0;}
.btnBox .btnTxt{font-size: 20px;text-align: center;font-weight: bold;display: block;}
.btnBox .note{color: #DD470C; font-size: 17px;text-align: center;font-weight: bold;display: block; margin-bottom: 0.9em;}
#dnaSec .btn a{font-size: 22px;display: block;font-weight: bold;border-radius: 50vw;width: 300px;margin:0em auto 0em;padding: 0.5em 0 ;text-align:center;position: relative;cursor: default;}
#dnaSec .btn a:hover{opacity: 0.8;text-decoration: none;}
#dnaSec .btn.team a{color: #0071A9;background: #C5DCE8;border: 2px solid #0071A9;}
#dnaSec .btn.group a{color: #A60201;background: #E8C5C5;border: 2px solid #A60201;}
#dnaSec .counseling{display: block; color: #000;text-align: center;margin: 0 0.5em 1.3em;}
#dnaSec .counseling a{color: #4D4D4D;border-radius: 50vw;width: 300px;padding: 0.3em 1em ;border: 2px solid #4D4D4D;font-size:18px; cursor: default;}
#dnaSec .counseling a:hover{opacity: 0.8;text-decoration: none;}
.btnBox .purchaseBox .flexBox{display: flex; width: 100%; justify-content: center;}


/*内部リンク*/
#dnaSec .LinkBox{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;margin: 1em;}
#dnaSec .LinkBox a{border-right: 1px dashed #000;padding: 0 1em 1em;position: relative;font-size: 25px;color: #000;font-weight: bold;}
#dnaSec .LinkBox p:last-of-type a{border-right: none;}
#dnaSec .LinkBox a::before{ position: absolute;content: ''; width: 16px;height: 16px; bottom: 0;right: 0;left: 0;border-top: 3px solid #000;  border-right: 3px solid #000; transform: rotate(135deg);margin: auto;}
#dnaSec .LinkBox a:hover{color:#e84709;text-decoration: none;}
#dnaSec .LinkBox a:hover::before{border-top: 3px solid #e84709;  border-right: 3px solid #e84709;}


/*特徴*/
#features .flexBox{display: flex;flex-wrap: wrap;justify-content:space-around;align-items: stretch;}
#features .flexBox .feature{background: #F1DDD6;padding: 2.5em 1.5em 1em;position: relative;width: calc(98% / 2);margin: 3em 0 0;}
#features .flexBox .feature .number{position: absolute;top: -25px;left: 0;right: 0;text-align: center;margin: auto;}
#features .flexBox .feature h4{font-size: 20px;font-weight: bold;line-height: 1.2;margin-bottom: 15px;}

#features .partner{border: 6px solid #C5DCE8;padding: 1em 3em;margin-top: 3em;border-radius: 20px;}
#features .partner .Ttl{font-size: 22px;font-weight: bold;}
#features .partner .partner_detail{background: url("../images/jigyou/img_dna_content05.jpg")center right no-repeat;background-size: contain;}
#features .partner .partner_detail .flexBox{justify-content: flex-start;align-items: center;}
#features .partner .partner_detail .flexBox .detailTtl{background: #C5DCE8;width: 100px;height: 100px;border-radius: 20px;padding: 3% 5px;font-weight: bold;text-align: center;line-height: 1.3;margin-right: 1em;}

/*検査でわかる項目*/
#item .itemBox{margin-top: 2em;}
#item .itemBox .iconBox{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: stretch;margin-top: 1em;}
#item .itemBox .iconBox dl{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;width: calc(90% / 2);margin-right: 1em;}
#item .itemBox .iconBox dl dt{width: 20%;}
#item .itemBox .iconBox dl dd{width: 80%;line-height: 1.3;}
#item .itemBox .iconBox dl dd span{display: block;font-weight: bold;font-size: 20px;}

/*商品内容*/
#product .flexBox{display: flex;flex-wrap: wrap;justify-content:space-around;align-items: stretch;margin: 2em 0;}
#product .flexBox .product{border-right: 1px solid #000;padding: 5px 25px;width: calc(98% / 3);}
#product .flexBox .product:last-child{border-right: none}
#product .flexBox .product h4{font-size: 20px;font-weight: bold;margin-bottom: 10px;}
#product .flexBox .product .img img{box-shadow: 0px 0px 10px 1px rgba(29,53,34,0.8);}
#product .flexBox .product .txt{margin-top: 1em}

#product .optionBox h4{color: #DD470C;font-weight: bold;font-size: 24px;}
#product .optionBox .option h5{font-size: 20px;font-weight: bold;line-height: 1.4;border-bottom: 1px solid #000;padding-bottom:10px;margin-bottom: 10px;}
#product .optionBox .option h5 span{display: block;font-size: 80%;font-weight: 500;}
#product .optionBox .option{border: 6px solid #F1DDD6;padding: 1em;width: 550px;margin: auto;border-radius: 20px;margin-top: 0.5em;}
#product .optionBox .option p.txt span{font-size: 80%;display: block;}

/*検査の流れ*/
#flow .flowBox{margin-top: 2em;}
#flow .flowBox .flowInner{margin-right: 1em;}
#flow .flowBox .flowInner .img{margin-top: 0.5em;}

/*料金*/
#price .priceBox dl{display: flex;flex-wrap: nowrap;justify-content: flex-start;align-items: stretch;border: 1px solid #000;margin: 1em 0 0.5em;max-width: 700px;}
#price .priceBox dt{width:40%;border-right: 1px solid;font-weight: bold;font-size: 20px;text-align: center;padding: 0.5em;position: relative;}
#price .priceBox dt span.middle{vertical-align: middle; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;line-height: 1.4;}
#price .priceBox dt span.ssfont{display: block;font-size: 80%;font-weight: normal;}
#price .priceBox dd{padding: 0.5em;font-size: 20px;width: 60%;}
#price .priceBox dd p{line-height: 1.3;}
#price .priceBox dd .flexBox{display: flex;flex-wrap: nowrap;align-items: center;}
#price .priceBox dd .flexBox p span{font-size: 80%;}
#price .priceBox dd .flexBox .left{width: 170px;border-right: 1px solid #000;}
#price .priceBox dd .flexBox .right{padding-left: 10px;}
#price .priceBox .aten p{line-height: 1.2;}

/*選手に聞いてみました*/
#implement .movie{margin-bottom: 5em;}
#implement .movie h3{text-align: center;color: #A60201;font-size: 30px;}
#implement .movie .click{font-size: 150%; font-weight: bold; text-align: center; margin-top: 1em;}
#implement .movie .img{width: 25%; margin: 0 0.5em;}
#implement .movie .flex{justify-content: center; margin-top: 0.7em;}
#implement .movie .img img{width: 100%;}
/*選手も実施*/
#implement .implementBox{background: #fce9e2;padding: 2em;}
#implement .implementBox h3{text-align: center;color: #A60201;font-size: 30px;}
#implement .implementBox .playerBox{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;margin-top: 2em;}
#implement .implementBox .playerBox p.img{width: 300px;margin-right: 1em;}
#implement .implementBox .playerBox p.txt{width: 63%;}
#implement .implementBox .playerBox p span{font-size: 20px;font-weight: bold;display: block;border-bottom: 1px solid #000;padding-bottom: 0.3em;margin-bottom: 0.3em;}

/*よくあるご質問*/
#faq .faqBox h3{text-align: center;color: #A60201;font-size: 30px;}
#faq .faqBox .faq{margin-bottom: 2em;}
#faq .faqBox .faq .question{color: #DD470C;font-size: 20px;position: relative;padding:0 1em 5px 2.5em;border-bottom: 1px solid #000;font-weight: bold;margin-bottom: 10px;}
#faq .faqBox .faq .question::before{content: "Q.";display: block;position: absolute;left: 1em;}
#faq .faqBox .faq .answer{font-size: 20px;position: relative;padding:0 1em 0px 2.5em;line-height: 1.5;}
#faq .faqBox .faq .answer::before{content: "A.";display: block;position: absolute;left: 1em;font-weight: bold;}