/* ----------------------------
記事一覧・記事詳細の基本的枠組スタイル
---------------------------- */
.voice {
    overflow: hidden;
}

.f_header .f_inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.f_main {
    padding-left: 20px;
    padding-right: 20px;
}

    .f_main .f_inner {
        display: block;
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
    }

.f_col2Inner {
    display: block;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding-top: 50px;
}

    .f_col2Inner::after {
        content: "";
        display: block;
        clear: both;
    }

.f_contents {
    display: block;
    width: 100%;
    float: left;
}
/*.f_side {
	display: block;
	width: 235px;
	float: right;
}
.f_side h2 { text-align: center; }*/
.f_footer {
    background-color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    padding: 50px 0 0;
}

    .f_footer::before {
        content: "";
        width: 100%;
        height: 100%;
        background-size: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }

    .f_footer::after {
        content: "";
        width: 54px;
        height: 67px;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 150px;
    }

.f_copyright {
    background-color: #000000;
    font-size: 1.6rem;
    text-align: center;
    color: #ffffff;
    padding: 35px 0;
}

@media screen and (max-width: 960px) {
    .f_contents {
        width: 100%;
        float: none;
        padding-right: 0;
        margin-right: 0;
    }
    /*.f_side {
		width: 100%;
		float: none;
	}*/
}

@media screen and (max-width: 768px) {
    .f_main {
        padding-left: 15px;
        padding-right: 15px;
    }

    .f_copyright {
        font-size: 1.2rem;
        color: #444;
        padding: 23px 55px;
    }

    .f_topBtn {
        width: 42px;
        height: 42px;
        right: 15px;
        position: fixed;
        z-index: 50;
    }

    .f_col2Inner {
        margin-bottom: 72px;
    }
    /*.f_side h2 img { width: 100%; }*/
}

.m_logo {
    width: 182px;
    line-height: 1;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .m_logo {
        width: 150px;
    }
}

.m_mainTitle {
    text-align: center;
    margin-top: 30px;
}
    /*.m_mainTitle img { max-width: 148px; }*/
    .m_mainTitle .p_titleText {
        margin-top: 15px;
        font-size: 4rem;
        font-weight: bold;
        color: #666;
        line-height: 1.2;
        border-bottom: solid 3px #ffc778;
        position: relative;
    }

        .m_mainTitle .p_titleText:after {
            position: absolute;
            content: " ";
            display: block;
            border-bottom: solid 3px #424242;
            bottom: -3px;
            width: 50%;
        }

    .m_mainTitle .p_subtitleText {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 2rem;
        font-weight: bold;
        color: #666;
        line-height: 1.2;
    }

    .m_mainTitle .p_descriptionText {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 2rem;
        color: #666;
        line-height: 1.2;
    }

@media screen and (max-width: 768px) {
    /*.m_mainTitle img { max-width: 96px; }*/
    .m_mainTitle .p_titleText {
        font-size: 2.7rem;
    }
}

.consultation_section {
    position: relative;
}

    .consultation_section img {
        width: 100%;
    }

    .consultation_section .close_button {
        width: auto;
        padding: 0;
        margin: 0;
        background: none;
        border: 0;
        font-size: 0;
        line-height: 0;
        overflow: visible;
        cursor: pointer;
        outline: none;
    }

    .consultation_section .case_button {
        width: auto;
        padding: 0;
        margin: 0;
        background: none;
        border: 0;
        font-size: 0;
        line-height: 0;
        overflow: visible;
        cursor: pointer;
        outline: none;
    }

    .consultation_section .button_pos1 {
        position: absolute;
        top: 2%;
        left: 48%;
    }

    .consultation_section .button_pos2 {
        position: absolute;
        top: 40%;
        left: 22%;
    }

    .consultation_section .button_pos3 {
        position: absolute;
        top: 40%;
        left: 60%;
    }

@media screen and (max-width: 768px) {
    .consultation_section .case_button {
        width: 25%;
    }

    .consultation_section .close_button {
        width: 5%;
    }
}

.btn-sticky {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c; /*左線*/
    color: #ff7c5c; /*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

    .btn-sticky:active {
        box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
        transform: translateY(2px);
    }

/* Card styles for rotation */
.rotate-container {
    position: relative;
}

    .rotate-container .card-front, .rotate-container .card-back {
        width: 100%;
        height: 100%;
        -webkit-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(0deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: all 0.5s linear 0s;
        border: 1px solid #aaa;
    }

    .rotate-container .card-back {
        -webkit-transform: perspective(1600px) rotateY(180deg);
        transform: perspective(1600px) rotateY(180deg);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .rotate-container .rotate-card-front {
        -webkit-transform: perspective(1600px) rotateY(-180deg);
        transform: perspective(1600px) rotateY(-180deg);
    }

    .rotate-container .rotate-card-back {
        -webkit-transform: perspective(1600px) rotateY(0deg);
        transform: perspective(1600px) rotateY(0deg);
    }

/* Modified card styles */
.card {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
}

    .card .card-header p {
        margin: 0;
    }

    .card .card-center {
        width: 100%;
        text-align: center;
        padding: 20px 40px;
    }

    .card .card-center-bottom {
        width: 100%;
        text-align: center;
        vertical-align: bottom: padding: 20px 40px;
    }

    .card .card-title {
        width: 100%;
        text-align: center;
        padding: 0px 0px;
        font-size: 3rem;
        font-weight: bold;
        color: #666;
        line-height: 1.2;
    }

    .card .card-text1 {
        width: 100%;
        text-align: center;
        padding: 0px 0px;
        font-size: 2rem;
        color: #666;
        line-height: 2;
    }

    .card .card-text2 {
        width: 100%;
        text-align: center;
        padding: 5px 5px;
        font-size: 1.5rem;
        color: #666;
        line-height: 1.2;
    }

    .card .card-text-detail {
        width: 100%;
        text-align: left;
        padding: 20px 20px;
        font-size: 1.5rem;
        color: #666;
        line-height: 1.2;
    }

    .card .btn-rotate {
        display: inline-block;
        padding: 0.5em 1em;
        text-decoration: none;
        background: #ffc778; /*ボタン色*/
        color: #000000;
        font-weight: bold;
        border-bottom: solid 4px #627295;
        border-radius: 3px;
    }

        .card .btn-rotate:active {
            /*ボタンを押したとき*/
            -webkit-transform: translateY(4px);
            transform: translateY(4px); /*下に動く*/
            box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
            border-bottom: none;
        }

    .card .btn {
        margin-bottom: 1em;
        cursor: pointer;
    }

    .card .social-links li {
        margin: 0.5em;
    }

    .card .social-links a {
        font-size: 1.5em;
    }

*, *:before, *:after {
    box-sizing: border-box;
}

.col_2 {
    width: 100%;
    display: flex;
    display: -ms-flexbox; /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap; /* IE10 */
}

    .col_2 > div {
        width: 50%;
        padding: 10px;
    }

.col_3 {
    width: 100%;
    display: flex;
    display: -ms-flexbox; /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap; /* IE10 */
}

    .col_3 > div {
        width: 33.33333%;
        padding: 10px;
    }

@media screen and (max-width: 960px) {
    .col_2 > div {
        width: 100%;
    }

    .col_3 > div {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .col_3 > div {
        width: 100%;
    }
}