/*当院の特色=============== */
.bg-text {
    width: 100%;
    background: url("../imgs/feature/intro.jpg") no-repeat center right;
    height: 402px;
    background-size: cover;
    position: relative;
}



/*図*/
.ff-box {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 650px;
    margin: 50px auto 100px;
    border-radius: 100%;
    border: 2px dashed #ccc;
}

.ff-box-inner {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ff-box:before {
    content: "";
    position: absolute;
    width: 95%;
    height: 94%;
    border-radius: 100%;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background: #fffcf8;
}

ul.ff-list {
    width: 100%;
    height: 100%;
}

ul.ff-list li {
    width: 190px;
    height: 190px;
    border-radius: 100%;
    position: absolute;
}

ul.ff-list li a {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    color: #333;
    font-size: 20px;
    display: block;
    font-weight: 600;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 3px solid #f0ea9d;
    background: #fffef5;
}

ul.ff-list li:first-child {
    top: -80px;
    right: 0;
    left: 0;
    margin: auto;
}


ul.ff-list li:nth-child(2) {
    left: -3%;
    top: 20%;
    transform: translateY(-50%);
}


ul.ff-list li:nth-child(3) {
    top: 57%;
    left: -80px;
    transform: translateY(-50%);
}

ul.ff-list li:nth-child(3) a {
    border-color: #b6a4da;
    background: #fdfaff;
}

ul.ff-list li:nth-child(4) {
    left: 13%;
    bottom: -50px;
}

ul.ff-list li:nth-child(4) a,ul.ff-list li:nth-child(7) a{
    border-color: #97cfdc;
    background: #faffff;
}

ul.ff-list li:nth-child(6) {
    top: 57%;
    transform: translateY(-50%);
    right: -80px;
}

ul.ff-list li:nth-child(5) a,ul.ff-list li:nth-child(6) a{
    border-color: #c5e1aa;
    background: #fdfffa;
}


ul.ff-list li:nth-child(5) {
    right: -3%;
    top: 20%;
    transform: translateY(-50%);
}


ul.ff-list li:nth-child(7) {
    right: 13%;
    bottom: -50px;
}

.feature-fig {
    padding: 80px 0;
}

ul.ff-list li a:hover {
  border-color: #e2a6a6;
  background: #ffffff;
  color:#e2a6a6;
}



ul.ff-list li a .ff-inner-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
}

ul.ff-list li a .ff-inner-wrap span{
    display:block;
    margin:10px auto 0;
    /* background: #9e9e9e; */
    /* border: 1px solid #9e9e9e; */
}

/*取組*/
.d-box .grad {
    padding: 30px;
}

.fig-have figure img {
    width: 60%;
}

@media (max-width: 1920px) {



}


@media (max-width: 1699px) {


}

@media (max-width: 1449px) {



}
@media (max-width: 1399px) {

}

@media (max-width: 1200px) {


}
@media (max-width: 1023px) {


}



@media (max-width: 991px) {



}

@media (max-width: 767px) {

/*当院の特色============== */


.ff-box {
    width: 400px;
    height: 400px;
    /* max-width: 70%; */
}

ul.ff-list li {
    width: 140px;
    height: 140px;
}

.d-box ul.ff-list li a {
    font-size: 16px;
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 0;
    display: block;
    border: 2px solid #f0ea9d;
    float: none;
}

ul.ff-list li:nth-child(3) a {
    border-color: #b6a4da;
    background: #fdfaff;
}

ul.ff-list li:nth-child(4) a,ul.ff-list li:nth-child(7) a{
    border-color: #97cfdc;
    background: #faffff;
}

ul.ff-list li:nth-child(5) a,ul.ff-list li:nth-child(6) a{
    border-color: #c5e1aa;
    background: #fdfffa;
}

ul.ff-list li a:hover {
  border-color: #e2a6a6;
  background: #ffffff;
  color:#e2a6a6;
}

ul.ff-list li:nth-child(6) {
    right: -60px;
}

ul.ff-list li:nth-child(3) {
    left: -60px;
}

ul.ff-list li:nth-child(7) {
    right: 10%;
}

ul.ff-list li:nth-child(4) {
    left: 10%;
}

ul.ff-list li a .ff-inner-wrap span {
    width: 15px;
    height: 15px;
}


/**/
.d-box .grad{
    padding:20px;
}

.fig-have figure img {
    width: 100%;
}

.fig-have figcaption {
    text-align: left;
}

}

@media (max-width: 500px) {
  
/*当院の特色============== */
.ff-box {
    width: 78vw;
    height: 78vw;
    margin: 30px auto 60px;
    top: 30px;
}

.d-box ul.ff-list li a {
    font-size: 3.2vw;
}

ul.ff-list li {
    width: 24vw;
    height: 24vw;
}

ul.ff-list li:nth-child(6) {
    right: -36px;
}

ul.ff-list li:nth-child(3) {
    left: -36px;
}

.ff-box-inner h2 {
    font-size: 23px;
}

ul.ff-list li:first-child {
    top: -54px;
}

ul.ff-list li:nth-child(7),ul.ff-list li:nth-child(4) {
    bottom: -60px;
    right: 8%;
}

.feature-fig {
    padding: 0;
}

.ff-box-inner h2 {
    font-size: 17px;
}

ul.ff-list li {
    width: 29vw;
    height: 29vw;
}

.ff-box {
    width: 76vw;
    height: 76vw;
}

ul.ff-list li:nth-child(2) {
    left: -12%;
    top: 20%;
    transform: translateY(-50%);
}


ul.ff-list li:nth-child(4) {
    right: inherit;
    left: 8%;
}

ul.ff-list li:nth-child(5) {
    right: -12%;
    top: 20%;
    transform: translateY(-50%);
}


ul.ff-list li:nth-child(6) {
    right: -44px;
    top: 64%;
}

ul.ff-list li:nth-child(3) {
    left: -44px;
    top: 65%;
}

}


@media (max-width: 350px) {


}