@charset "UTF-8"; @font-face {
    font-family: 'DIN Alternate Bold';
    src: url('../font/DIN Alternate Bold.ttf') format('truetype');
}

@media only screen and (min-width: 769px) {
    .slide_in_image {
        width: 100%;
        height: 100%;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        overflow: hidden;
        opacity: 0;
    }

    .isPlay {
        animation-name: play;
        animation-duration: 0.55s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.8, 0, .5, 1);
        position: relative;
        opacity: 1 !important;
        animation-timing-function: ease;
    }

    /*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
    .isPlay:before {
        animation-name: maskOut;
        animation-duration: 0.55s;
        animation-delay: 0.55s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.8, 0, .5, 1);
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #f7d6d5, #f0d0ce);
    }

    /*//「slide_in_image」をスライドインする*/
    @keyframes play {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /*//マスク要素をスライドアウトする*/
    @keyframes maskOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(100%);
        }
    }

    .title_conts {
        background: url(../images/doctorblog/bg_dr_ttl.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 30vw;
        position: relative;
    }

    .title_conts::before {
        content:"";
        background: url(../images/common/img_dr_all.png);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 70vw;
        height: 30vw;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index:1;
    }
   .title_conts::after{
       content:"0";
       width:100vw;
       height: 30vw;
       background: rgba(0,0,0,0.6);
       display: block;
       top:0;
       left:0;
       position: absolute;
       :#fff;
       z-index:1;
    }
    .page_ttl{
        position:absolute;
        top:50%;
        left:50%;
        display:block;
        transform: translateY(-50%) translateX(-50%);
        font-size:2.6vw;
        font-weight:bold;
        color:#fff;
        z-index:2;
        font-family:serif;
        letter-spacing:0.25rem;
        text-shadow: 0 0 10px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.2),0 0 20px rgba(0,0,0,0.2);
    }
    .doctorblog-top .blogtop-title {
        margin-bottom: 1em;
        font-size: 34px;
        color: #50b1bf;
        font-style: italic;
        text-align: center;
    }

    .doctorblog-top .blogtop-txt {
        font-size: 26px;
        text-align: center;
    }

    .doctorblog-top {
        padding: 70px 0;
    }

    .doctorblog-banner {
        position: relative;
    }

    .doctorblog-banner img {
        width: 100%;
    }

    .doctorblog-banner-txt {
        position: absolute;
        top: 52%;
        left: 50%;
        font-size: 38px;
        font-weight: bold;
        color: #fff;
        transform: translate(-50%, -50%);
    }

    .dr_list {
        margin: 0 0 70px;
    }

    .dr_prof {
        background: #eeeeee;
        width: 100%;
        height: 300px;
    }

    .dr_prof_inner {
        width: 1000px;
        margin: auto;
        position: relative;
    }

    .dr_prof_inner .dr_name_list {
        width: 340px;
        position: absolute;
        left: 50%;
        top: 80px;
        text-align: center;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    }

    .dr_prof_inner .dr_name_list .title {
        letter-spacing: 0.3rem;
        font-size: 26px;
    }

    .dr_prof_inner .dr_name_list .dr_name {
        letter-spacing: 0.6rem;
        font-size: 40px;
        margin: 10px 0 12px;
    }

    .dr_prof_inner .dr_name_list .alfa {
        font-family: 'DIN Alternate Bold';
        font-size: 20px;
        letter-spacing: 0.01em;
        color: #666;
    }

    .dr_prof_inner .doctor-img {
        width: 348px;
        position: absolute;
        left: 26%;
    }

    .sns_list {
        display: flex;
        justify-content: center;
        margin: 30px auto;
        width: 1040px;
    }

    .sns_list li {
        width: 248px;
        margin-right: 16px;
        font-size: 12px;
        text-align: center;
    }

    .sns_list.l2 {
        width: 540px;
    }

    .sns_list.l2 li {
        width: 48%;
        margin-right: 4%;
    }

    .sns_list.l3 {
        width: 250px;
    }

    .sns_list.l3 li {
        width: 100%;
        margin-right: 0%;
    }

    .sns_list li:last-child {
        margin-right: 0;
    }

    .dr_img {
        display: flex;
        width: 800px;
        margin: 30px auto;
    }

    .dr_img li {
        width: 50%;
    }

    .history_area {
        width: 800px;
        display: flex;
        margin: 20px auto;
        flex-flow: wrap;
        /* justify-content: center; */
    }

    .history_area .history {
        width: 50%;
        font-size: 14px;
    }

    .history_area .history p {
        float: left;
        width: 20%;
        text-align: center;
    }

    .history_area .history dl {
        float: left;
        width: 75%;
        padding-left: 5%;
        border-left: 1px solid #ccc;
        margin-bottom: 2em;
    }

    .history_area .history dl dt {
        float: left;
        width: 20%;
        margin-bottom: 10px;
    }

    .history_area .history dl dd {
        float: left;
        width: 80%;
        margin-bottom: 10px;
    }

    .history_area .history ul {
        float: left;
        width: 75%;
        padding-left: 5%;
        border-left: 1px solid #ccc;
    }

    .history_area .history ul li {
        margin-bottom: 10px;
    }

    .notes {
        text-align: center;
        margin: 1em 0;
    }

    .shorei_list {
        width: 800px;
        margin: 20px auto;
    }

    .ttl_shorei {
        font-size: 20px;
        padding: 10px 0;
        margin-bottom: 10px;
        position: relative;
        font-weight: 600;
    }

    .ttl_shorei span {
        background: #000;
        padding: 0.25em 0.5em;
        display: inline-block;
        color: #fff;
    }

    .ttl_shorei::after {
        content: " ";
        width: 100%;
        display: block;
        border-bottom: 3px #000 solid;
        position: absolute;
        bottom: 50%;
        z-index: -99;
    }

    .shorei_list ul {
        display: table;
        width: 100%;
    }

    .shorei_list ul li {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 20px;
        float: left;
    }

    .shorei_list ul li:nth-child(even) {
        margin-right: 0;
    }

    .shorei_link {
        padding: 20px 0;
        border: 3px solid #000;
        font-weight: bold;
        display: block;
        position: relative;
        text-align: center;
        padding-right: 10px;
        margin: 40px auto;
        width: 300px;
        font-size: 14px;
        color: #000;
        transition : all 0.5s ease 0s;
    }

    .shorei_link:hover {
        color: #fff;
        background: #000;
        transition : all 0.5s ease 0s;
    }

    .shorei_link:after {
        content: '\f138';
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        font-weight: 900;
        font-size: 20px;
        right: 10px;
        top: 50%;
        margin-top: -16px;
        width: 30px;
        height: 30px;
        background-size: 100%;
        color: #000;
        transition : all 0.5s ease 0s;
    }

    .shorei_link:hover:after {
        content: '\f138';
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        font-weight: 900;
        font-size: 20px;
        right: 10px;
        top: 50%;
        margin-top: -16px;
        width: 30px;
        height: 30px;
        background-size: 100%;
        color: #fff;
        transition : all 0.5s ease 0s;
    }

    .lisk_page {
        font-size: 15px;
        text-align: center;
        padding: 10px;
        border: 2px solid #333;
    }

    .shorei_lisk {
        padding: 20px 30px;
        background: #f9f9f9;
        width: 100%;
        font-size: 12px;
    }

    .shorei_lisk h3 {
        font-weight: bold;
        margin-top: 8px;
    }

    .shorei_lisk .grad-item p {
        font-size: 12px !important;
    }

    .shorei_lisk .grad-item {
        height: 80px;
        padding: 10px 0 30px;
    }
}

@media only screen and (max-width: 768px) {
    .slide_in_image {
        width: 100%;
        height: 100%;
        display: flex;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        overflow: hidden;
        opacity: 0;
    }

    .isPlay {
        animation-name: play;
        animation-duration: .5s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.8, 0, .5, 1);
        position: relative;
        opacity: 1 !important;
    }

    /*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
    .isPlay:before {
        animation-name: maskOut;
        animation-duration: .5s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.8, 0, .5, 1);
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #f3f6f7, #edf4f7);
    }

    /*//「slide_in_image」をスライドインする*/
    @keyframes play {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /*//マスク要素をスライドアウトする*/
    @keyframes maskOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(100%);
        }
    }

    .title_conts {
        background: url(../images/doctorblog/bg_dr_ttl.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 50vw;
        width: 100%;
        position: relative;
    }

    .title_conts::before {
        content:"";
        background: url(../images/common/img_dr_all.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        width: 100vw;
        height: 100%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index:1;
    }
   .title_conts::after{
       content:"";
       width:100vw;
       height: 50vw;
       background: rgba(0,0,0,0.6);
       display: block;
       top:0;
       left:0;
       position: absolute;
       :#fff;
       z-index:1;
    }
    .page_ttl{
        position:absolute;
        top:50%;
        left:50%;
        display:block;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
        font-size: 5.6vw;
        font-weight:bold;
        color:#fff;
        z-index:2;
        font-family:serif;
        letter-spacing:0.25rem;
        text-shadow: 0 0 10px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.2),0 0 20px rgba(0,0,0,0.2);
    }

    .doctorblog-top .container {
        padding: 5vw 0;
    }

    .doctorblog-banner {
        position: relative;
    }

    .doctorblog-banner-txt {
        position: absolute;
        top: 52%;
        left: 50%;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        transform: translate(-50%, -50%);
    }

    .doctorblog-top .blogtop-title {
        margin-bottom: .5em;
        font-size: 24px;
        color: #50b1bf;
        font-style: italic;
        text-align: center;
    }

    .doctorblog-top .blogtop-txt {
        font-size: 18px;
        text-align: center;
    }

    .dr_prof {
        background: #eeeeee;
        width: 100%;
        height: 40vw;
    }

    .dr_prof_inner {
        width: 100%;
        margin: auto;
        position: relative;
    }

    .dr_prof_inner .dr_name_list {
        width: 50%;
        position: absolute;
        left: 45%;
        top: 10vw;
        text-align: center;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    }

    .dr_prof_inner .dr_name_list .title {
        letter-spacing: 0.4rem;
        font-size: 4vw;
    }

    .dr_prof_inner .dr_name_list .dr_name {
        letter-spacing: 0.4rem;
        font-size: 7vw;
        margin: 1vw 0;
    }

    .dr_prof_inner .dr_name_list .alfa {
        font-family: 'DIN Alternate Bold';
        font-size: 3vw;
        letter-spacing: 0.01em;
        color: #666;
    }

    .dr_prof_inner .doctor-img {
        width: 46.3vw;
        position: absolute;
        left: 5%;
    }

    .sns_list {
        display: flex;
        flex-wrap: wrap;
        margin: 3vw auto;
        width: 90%;
    }

    .sns_list li {
        width: 31%;
        margin-right: 3.5%;
        font-size: 2.7vw;
        text-align: center;
        margin-bottom: 3vw;
    }

    .sns_list.l2 {
        width: 60%;
    }

    .sns_list.l2 li {
        width: 48%;
        margin-right: 4%;
    }

    .sns_list.l3 {
        width: 28%;
    }

    .sns_list.l3 li {
        width: 100%;
        margin-right: 0%;
    }

    .sns_list li:nth-of-type(3n) {
        margin-right: 0;
    }

    .dr_img {
        /* display: flex; */
        width: 100%;
        margin: 3vw auto;
    }

    .dr_img li {
        /* width: 50%; */
        display: flex;
    }

    .history_area {
        width: 100%;
        display: table;
        margin: 2vw auto;
    }

    .history_area .history {
        width: 100%;
        font-size: 3.6vw;
        margin-bottom: 4vw;
        display: table;
    }

    .history_area .history p {
        float: left;
        width: 20%;
        text-align: center;
    }

    .history_area .history dl {
        float: left;
        width: 75%;
        padding-left: 5%;
        border-left: 1px solid #ccc;
        margin-bottom: 4vw;
    }

    .history_area .history dl dt {
        float: left;
        width: 20%;
        margin-bottom: 2vw;
    }

    .history_area .history dl dd {
        float: left;
        width: 80%;
        margin-bottom: 2vw;
    }

    .history_area .history ul {
        float: left;
        width: 77%;
        padding-left: 3%;
        border-left: 1px solid #ccc;
    }

    .history_area .history ul li {
        margin-bottom: 2vw;
    }

    .notes {
        width: 90%;
        margin: 18px auto;
    }

    .shorei_list {
        width: 90%;
        margin: 2vw auto;
    }

    .ttl_shorei {
        /* text-align:center; */
        /* font-weight:bold; */
        font-size: 16px;
        /* font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; */
        /* background: #818181; */
        /* color: #fff; */
        padding: 10px 0;
        margin-bottom: 10px;
        position: relative;
        text-align: center;
        font-weight: 600;
    }

    .ttl_shorei span {
        background: #000;
        padding: 0.25em 0.5em;
        display: inline-block;
        color: #fff;
    }

    .ttl_shorei::after {
        content: " ";
        width: 100%;
        display: block;
        border-bottom: 3px #000 solid;
        position: absolute;
        bottom: 50%;
        z-index: -99;
    }

    .shorei_list ul {
        display: table;
        width: 100%;
    }

    .shorei_list ul li {
        width: 100%;
        margin-bottom: 2vw;
    }

    .shorei_list ul li:nth-child(even) {
        margin-right: 0;
    }

    .shorei_link {
        padding: 20px 0;
        border: 3px solid #000;
        font-weight: bold;
        display: block;
        position: relative;
        text-align: center;
        padding-right: 10px;
        margin: 40px auto;
        width: 90%;
        font-size: 14px;
        color: #000;
        transition : all 0.5s ease 0s;
    }

    .shorei_link:hover {
        color: #fff;
        background: #000;
        transition : all 0.5s ease 0s;
    }

    .shorei_link:after {
        content: '\f138';
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        font-weight: 900;
        font-size: 20px;
        right: 10px;
        top: 50%;
        margin-top: -16px;
        width: 30px;
        height: 30px;
        background-size: 100%;
        color: #000;
        transition : all 0.5s ease 0s;
    }

    .shorei_link:hover:after {
        content: '\f138';
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        font-weight: 900;
        font-size: 20px;
        right: 10px;
        top: 50%;
        margin-top: -16px;
        width: 30px;
        height: 30px;
        background-size: 100%;
        color: #fff;
        transition : all 0.5s ease 0s;
    }

    .lisk_page {
        font-size: 4vw;
        text-align: center;
        padding: 10px;
    }

    .shorei_lisk {
        padding: 4vw;
        background: #f9f9f9;
        width: 100%;
        font-size: 2.6vw;
    }

    .shorei_lisk h3 {
        font-weight: bold;
        margin-top: 8px;
    }

    .shorei_lisk .grad-item p {
        font-size: 12px !important;
    }

    .shorei_lisk .grad-item {
        height: 80px;
        padding: 3vw 0 9vw;
    }
}