@charset "UTF-8";
/*!
Theme Name: m-tech7
Description: DLMテック | 佐賀県神埼市にある歯科技工所DL Mテック。インプラント・オールセラミック製作お任せ下さい。
Theme URI: https://www.m-tech7.com
Version: 1.0
License: m-tech7
License URI: https://www.m-tech7.com
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:after,
blockquote:before {
    content: "";
    content: none;
}

q:after,
q:before {
    content: "";
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img,
iframe {
    vertical-align: top;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

body {
    color: #333333;
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#wrapper {
    width: 100%;
    min-width: 1020px;
    min-height: 100%;
    float: none;
    margin: 0 auto;
    overflow: hidden;
}

#page-wrapper {
    width: 100%;
    min-width: 1080px;
    min-height: 100%;
    float: none;
    margin: 0 auto;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    #wrapper {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        float: none;
        margin: 0 auto;
        overflow: hidden;
    }

    #page-wrapper {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        float: none;
        margin: 0 auto;
        overflow: hidden;
    }
}

dd,
dt,
li,
p,
tr,
tt {
    font-size: 1.6rem;
}

/****************************************

          フォント

*****************************************/
/****************************************

          メディアクエリ

*****************************************/
/****************************************

          フォントサイズ

*****************************************/
.vw {
    font-size: 16px;
    font-size: 4.2666666667vw;
}

/****************************************

          リンク指定

*****************************************/
a:link,
a:visited {
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    transition: 0.2s linear;
}

a:hover,
a:active {
    font-weight: normal;
    color: #091e8c;
    text-decoration: underline;
    transition: 0.2s linear;
}

/****************************************

         オンマウス時のアクション

*****************************************/
a:hover img.img_opacity {
    opacity: 0.75;
    filter: alpha(opacity=75);
    transition: 0.2s linear;
}

a img.img_opacity {
    transition: 0.2s linear;
}

/****************************************

        pc_header

*****************************************/
@media print,
screen and (min-width: 768px) {
    #sp_navi {
        display: none;
    }

    .header__logo {
        width: 273px;
    }

    .header__box__left {
        display: flex;
        -ms-align-items: center;
        align-items: center;
    }

    .qr-code {
        margin-left: 40px;
    }

    .header__box {
        display: flex;
        justify-content: space-between;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
        padding: 40px 0 30px;
    }

    .header__info__box {
        display: flex;
        align-items: center;
    }

    .header__info .address {
        color: #333;
        font-size: 1.3rem;
    }

    .header__info .tel {
        background: url(images/tel-icon.png) no-repeat 0 center;
        padding-left: 20px;
        line-height: 1;
        margin-top: 5px;
    }

    .header__info .tel p {
        color: #000;
        font-size: 3rem;
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        letter-spacing: 0.04em;
    }

    .header__info .mail {
        line-height: 1;
        margin-left: 12px;
    }
}

/****************************************

        sp_header

*****************************************/
@media screen and (max-width: 767px) {

    .qr-code {
        display: none;
    }

    img {
        width: 100%;
        height: auto;
    }

    .header__info {
        display: none;
    }

    .header__logo {
        width: 180px;
    }

    .header__btn {
        display: none;
    }

    .header__box {
        padding: 15px 2%;
    }

    #toggle {
        position: absolute;
        /*bodyに対しての絶対位置指定です*/
        right: 15px;
        top: 25px;
        width: 30px;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
    }

    #toggle div {
        position: relative;
    }

    /*spanの絶対位置指定の親にします*/
    #toggle span {
        display: block;
        position: absolute;
        /*#navToggle div に対して*/
        width: 100%;
        height: 4px;
        background: #000833;
        border-radius: 4px;
        transition: 0.35s ease-in-out;
    }

    #toggle span:nth-child(1) {
        top: 0;
    }

    #toggle span:nth-child(2) {
        top: 11px;
    }

    #toggle span:nth-child(3) {
        top: 22px;
    }

    .open_navi #toggle {
        position: fixed;
    }

    .open_navi #toggle span {
        background: #fff;
    }

    .open_navi #toggle span:nth-of-type(1) {
        transform: translateY(11px) rotate(-315deg);
    }

    .open_navi #toggle span:nth-of-type(2) {
        opacity: 0;
    }

    .open_navi #toggle span:nth-of-type(3) {
        transform: translateY(-11px) rotate(315deg);
    }

    #sp_navi {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100vw;
        overflow-y: scroll;
        text-align: left;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 999;
        transform: translateY(-100%);
        transition: 0.7s ease-in-out;
    }

    .open_navi #sp_navi {
        transform: translateY(0);
        transition: 0.7s ease-in-out;
    }

    .open_navi #wrapper {
        transform-origin: left center;
        filter: blur(3px);
        transition: 0.7s ease-in-out;
    }

    #sp_navi .menu {
        padding-top: 80px;
        text-align: center;
    }

    #sp_navi .menu .menu-item {
        width: 100%;
        text-align: center;
        border-bottom: rgba(255, 255, 255, 0.8) 1px solid;
        cursor: pointer;
        color: #FFF;
        margin: 0 auto;
        font-size: 1.4rem;
        box-sizing: border-box;
    }

    #sp_navi .menu .menu-item-home {
        border-top: rgba(255, 255, 255, 0.8) 1px solid;
    }

    #sp_navi .menu-item a,
    #sp_navi .menu-item span {
        display: block;
        padding: 15px 0 14px;
    }

    #sp_navi .menu-item a:link,
    #sp_navi .menu-item a:visited,
    #sp_navi .menu-item a:hover,
    #sp_navi .menu-item a:active,
    #sp_navi .sub-menu li a:link,
    #sp_navi .sub-menu li a:visited,
    #sp_navi .sub-menu li a:hover,
    #sp_navi .sub-menu li a:active {
        color: #FFF;
        text-decoration: none;
    }

    #sp_navi .sub-menu {
        width: 100%;
        text-align: center;
        display: none;
    }

    #sp_navi .sub-menu li {
        width: 100%;
        text-align: center;
        border-top: 1px solid;
    }

    #sp_navi .sub-menu li a {
        display: block;
        padding: 11px 0 10px;
        color: #ccc;
        background-color: rgba(0, 8, 51, 0.8);
    }

    #sp_navi .sub-menu li a:hover {
        color: #ccc;
        background: none;
    }

    .menu-item-has-children {
        position: relative;
    }

    .menu-item-has-children::before {
        content: "";
        width: 14px;
        height: 14px;
        border: 0px;
        border-top: solid 3px #fff;
        border-right: solid 3px #fff;
        transform: rotate(135deg);
        transition: 0.2s ease-in-out;
        position: absolute;
        top: 14px;
        right: 20px;
    }

    .menu-item-has-children.menu_open::before {
        transform: rotate(-45deg);
        transition: 0.2s ease-in-out;
        top: 22px;
    }
}

/****************************************

          g_navi

*****************************************/
@media print,
screen and (min-width: 768px) {
    #g_navi-wrap {
        background: #000833;
    }

    #g_navi {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }

    #g_navi .menu {
        *zoom: 1;
        width: 100%;
        list-style-type: none;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    #g_navi .menu>li {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        text-align: center;
        color: #fff;
        height: 65px;
        line-height: 1.7;
        font-family: "Noto Sans JP", "メイリオ", Meiryo, "Noto Sans Japanese", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    #g_navi .menu li span {
        font-family: "Roboto", sans-serif;
    }

    #g_navi .menu li a {
        display: inline-block;
        margin: 0;
        color: #fff;
        text-align: center;
        text-decoration: none;
        padding-bottom: 0.2em;
        position: relative;
    }

    #g_navi .menu>li:last-child a {
        margin: 0;
    }

    #g_navi .menu>li>a:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    #g_navi .menu li ul {
        list-style: none;
        position: absolute;
        z-index: 9999;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transition: 0.3s;
    }

    #g_navi .menu li ul li {
        width: 100%;
    }

    #g_navi .menu li ul li a {
        width: 150px;
        padding: 13px 4px;
        border-top: 1px solid #fff;
        font-size: 1.3rem;
        background: #000833;
        text-align: center;
        opacity: 0.95;
        filter: alpha(opacity=95);
        color: #fff;
        font-weight: normal;
    }

    #g_navi .menu li ul li a:hover {
        background: #091e8c;
        color: #fff;
        transition: 0.2s linear;
    }

    #g_navi .menu li:hover ul {
        visibility: visible;
        opacity: 0.95;
    }

    #g_navi .menu li ul li a {
        visibility: hidden;
        opacity: 0;
        transition: 0.5s;
    }

    #g_navi .menu li:hover ul li a {
        visibility: visible;
        opacity: 1;
    }
}

@media screen and (max-width: 767px) {
    #g_navi {
        display: none;
    }
}

/****************************************

          main-visual/slider

*****************************************/
@media print,
screen and (min-width: 768px) {
    .slider__box {
        position: relative;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }

    .catch-copy {
        position: absolute;
        right: 51px;
        bottom: 46px;
    }

    .slider__img {
        width: 100%;
        margin: 0 auto;
    }

    #metaslider img {
        position: relative;
        width: 1920px;
        left: calc(50% - 960px);
    }

    .mv {
        position: relative;
        background: url(images/mv-bg.jpg) no-repeat center top;
        background-size: cover;
        width: 100%;
        margin: 0 auto;
        height: 180px;
    }

    .mv__title {
        position: absolute;
        width: 400px;
        margin: 0 auto;
        padding: 23px 0;
        background: rgba(0, 0, 0, 0.9);
        font-size: 2rem;
        letter-spacing: 0.04em;
        line-height: 1.2;
        color: #fff;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }
}

@media screen and (max-width: 767px) {
    .slider__box {
        position: relative;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }

    .catch-copy {
        position: absolute;
        right: 5%;
        bottom: 30px;
        width: 250px;
    }

    .slider__img {
        width: 100%;
        margin: 0 auto;
    }

    .slider__img {
        width: 100%;
        margin: 0 auto;
    }

    #metaslider_55 img {
        position: relative;
        width: 150% !important;
        left: -25%;
    }

    .mv {
        position: relative;
        background: url(images/mv-bg.jpg) no-repeat center top;
        background-size: cover;
        width: 100%;
        margin: 0 auto;
        height: 0;
        padding: 100px 0;
    }

    .mv__title {
        position: absolute;
        width: 80%;
        margin: 0 auto;
        padding: 20px 0;
        background: rgba(0, 0, 0, 0.9);
        font-size: 1.8rem;
        letter-spacing: 0.04em;
        line-height: 1.2;
        color: #fff;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }
}

/****************************************

          content 共通設定

*****************************************/
.breadcrumb_area {
    width: 100%;
    height: auto;
    padding: 10px 0 30px;
}

.breadcrumb {
    width: 100%;
}

.breadcrumb p {
    font-size: 1.5rem;
    color: #2B2B2B;
    line-height: 1.2;
}

.breadcrumb a {
    display: inline-block;
    padding-bottom: 2px;
    position: relative;
    color: #2B2B2B;
    text-decoration: none;
}

.breadcrumb a::after {
    background-color: #091e8c;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: 0.5s all;
    width: 0;
}

.breadcrumb a:hover::after {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .breadcrumb_area {
        width: auto;
        height: auto;
        padding: 7px 0 25px;
    }

    .breadcrumb {
        width: 100%;
        margin: 0 auto;
    }

    .breadcrumb p {
        font-size: 1.3rem;
        color: #2B2B2B;
        line-height: 1.2;
    }
}

@media print,
screen and (min-width: 768px) {
    .pcnone {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .spnone {
        display: none;
    }
}

@media print,
screen and (min-width: 768px) {
    #top_main {
        width: 100%;
        margin: 0 auto;
    }

    #page_main {
        width: 100%;
        margin: 0 auto;
        padding-bottom: 115px;
        background: url(images/page-bg.jpg) no-repeat center top;
    }

    .base-width {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px) {
    #top_main {
        width: 100%;
        margin: 0 auto;
    }

    #page_main {
        width: 100%;
        max-width: 1000px;
    }

    .base-width {
        padding: 0 10px;
        margin: 0 auto 90px;
    }
}

a.btn {
    width: 100%;
    display: block;
    text-decoration: none;
    text-align: center;
}

a.btn01 {
    background: #000;
    font-size: 2rem;
    letter-spacing: 0.12em;
    padding: 11px 0 10px;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #fff;
}

a.btn01::after {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    width: 210px;
    height: 57px;
    right: 0;
    bottom: 0;
    z-index: -1;
}

a.btn01:hover {
    background: #313131;
}

a.btn01 span {
    position: relative;
    padding: 0 0 0 28px;
}

a.btn01 span::before {
    position: absolute;
    content: "";
    background: url(images/btn01-icon.png) no-repeat;
    width: 8px;
    height: 8px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

a.btn02 {
    background: #000;
    color: #fff;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 2rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    padding: 11px 0 10px;
}

a.btn02:hover {
    background: #313131;
}

a.btn03 {
    background: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    padding: 10px 0 9px;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #000833;
    font-weight: bold;
    border: 1px solid #fff;
}

a.btn03::after {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    width: 210px;
    height: 57px;
    right: 0;
    bottom: 0;
    z-index: -1;
}

a.btn03 span {
    position: relative;
    padding: 0 0 0 17px;
}

a.btn03 span::before {
    position: absolute;
    content: "";
    background: url(images/btn03-icon.png) no-repeat;
    width: 8px;
    height: 8px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

a.btn03:hover {
    background: rgba(255, 255, 255, 0);
    border: 1px solid #fff;
    color: #fff;
}

a.btn03:hover span::before {
    position: absolute;
    content: "";
    background: url(images/btn01-icon.png) no-repeat;
    width: 8px;
    height: 8px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

a.btn04 {
    background: #000;
    color: #fff;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    padding: 11px 0 10px;
}

a.btn04:hover {
    background: #313131;
}

.btn-width210 {
    width: 210px;
}

/****************************************

          contentトップ用

*****************************************/
@media print,
screen and (min-width: 768px) {
    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .flex_r {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
}

.top_main__box01 {
    position: relative;
    background: url(images/top-bg01.jpg) no-repeat center top;
}

.top_main__box01 .container01 {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 85px 0 0;
}

@media screen and (max-width: 767px) {
    .top_main__box01 .container01 {
        padding: 70px 10px;
    }
}

@media print,
screen and (min-width: 768px) {
    .top_main__box01__txt {
        text-align: center;
    }
}

.top_main__box01__title {
    text-align: center;
    font-size: 3rem;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    letter-spacing: 0.2em;
    line-height: 1.1;
    margin-bottom: 45px;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .top_main__box01__title {
        font-size: 26px;
        font-size: 6.9333333333vw;
    }
}

.top_main__box01__btn {
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

.top_main__box01__btn .left-btn {
    margin-right: 108px;
}

@media screen and (max-width: 767px) {
    .top_main__box01__btn {
        flex-direction: column;
    }

    .top_main__box01__btn .left-btn {
        margin: 0 auto 20px;
    }

    .top_main__box01__btn .right-btn {
        margin: 0 auto;
    }
}

.btn-width210 {
    position: relative;
    width: 210px;
    padding: 0 7px 7px 0;
    z-index: 2;
}

.btn-width210::after {
    position: absolute;
    content: "";
    background: rgba(255, 255, 255, 0.3);
    width: 210px;
    height: 57px;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.top_main__box02 {
    position: relative;
    padding: 170px 0 0;
}

.top_main__box02::after {
    position: absolute;
    content: "";
    background: url(images/top-bg03.png) no-repeat;
    width: 100%;
    height: 1655px;
    top: 580px;
    z-index: -1;
}

.top_main__box02__title {
    position: relative;
    color: #fff;
    font-size: 3rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    text-align: center;
    padding-bottom: 25px;
    margin-bottom: 45px;
    font-weight: bold;
}

.top_main__box02__title::after {
    position: absolute;
    content: "";
    background: url(images/en-title.png) no-repeat;
    z-index: -1;
    width: 359px;
    height: 14px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.top_main__box02::before {
    position: absolute;
    content: "";
    background: url(images/top-bg02.png) no-repeat;
    width: 100%;
    height: 795px;
    left: 0;
    top: 0;
    z-index: 2;
}

.top_main__box02 .container02 {
    position: relative;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    z-index: 3;
}

@media screen and (max-width: 767px) {
    .top_main__box02 {
        padding: 35px 10px 0;
    }

    .top_main__box02__title {
        font-size: 2rem;
    }

    .top_main__box02__title::after {
        width: 100%;
        background-size: contain;
    }

    .top_main__box02::before {
        top: -220px;
    }

    .top_main__box02::after {
        background-size: cover;
        top: 0;
    }
}

.top_main__box02__list {
    display: flex;
    justify-content: space-between;
}

.top_main__box02__list__title {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 25px;
}

.top_main__box02__list li {
    max-width: 315px;
    width: 100%;
    background: #000;
    padding: 30px 20px 21px;
}

.top_main__box02__list__txt {
    color: #fff;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media screen and (max-width: 767px) {
    .top_main__box02__list {
        flex-direction: column;
    }

    .top_main__box02__list li {
        margin: 0 auto 30px;
    }

    .top_main__box02__list li:last-child {
        margin: 0 auto;
    }
}

.ccd-title {
    background: url(images/ccd-title.png) no-repeat center top;
    height: 35px;
}

.dot-title {
    background: url(images/dot-title.png) no-repeat center top;
    height: 35px;
}

.sjcd-title {
    background: url(images/sjcd-title.png) no-repeat center top;
    height: 35px;
}

.top_main__box03 {
    padding: 130px 0 0;
}

.top_main__box03::after {
    position: absolute;
    content: "";
    background: url(images/top-bg04.png) no-repeat;
    width: 100%;
}

.top_main__box03 .container {
    position: relative;
}

.top_main__box03 .inner {
    max-width: 1000px;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.top_main__box03__title {
    position: relative;
    font-size: 3rem;
    letter-spacing: 0.18em;
    line-height: 1.6;
    color: #000;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: bold;
    text-align: center;
    margin-bottom: 45px;
    padding-bottom: 10px;
}

.top_main__box03__title::after {
    position: absolute;
    content: "";
    background: url(images/en-title02.png) no-repeat;
    width: 122px;
    height: 13px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.top_main__box03__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.top_main__box03__list li {
    width: 210px;
    margin-bottom: 30px;
}

.top_main__box03 .left-box {
    max-width: 450px;
    width: 100%;
}

@media print,
screen and (min-width: 768px) {
    .top_main__box03__img {
        position: absolute;
        background: url(images/top-img01.jpg) no-repeat;
        width: 47.39583%;
        height: 100%;
        right: 0;
        top: 0;
    }
}

@media screen and (max-width: 767px) {
    .top_main__box03 {
        padding: 70px 10px 0;
    }

    .top_main__box03__title {
        font-size: 2.6rem;
    }

    .top_main__box03 .inner {
        flex-direction: column;
        height: auto;
    }

    .top_main__box03__list li {
        width: 49%;
        margin-bottom: 20px;
    }

    .top_main__box03__img {
        position: relative;
        background: url(images/top-img01.jpg) no-repeat;
        width: 100%;
        height: 0;
        padding-top: 56.25%;
    }
}

.top_main__box04 {
    position: relative;
}

.top_main__box04::before {
    position: absolute;
    content: "";
    background: url(images/top-bg04.png) no-repeat;
    width: 100%;
    height: 794px;
    z-index: -1;
}

.top_main__box04 .container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 175px 0 145px;
}

.top_main__box04__title {
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 3rem;
    letter-spacing: 0.16em;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: bold;
    margin-bottom: 45px;
    padding-bottom: 18px;
}

.top_main__box04__title::before {
    position: absolute;
    content: "";
    background: url(images/en-title03.png) no-repeat;
    width: 88px;
    height: 12px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.top_main__box04__txt {
    color: #fff;
    text-align: center;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.top_main__box04__bnr {
    display: flex;
    justify-content: center;
    margin-top: 45px;
}

@media print,
screen and (min-width: 768px) {
    .top_main__box04__bnr .left-bnr {
        margin-right: 100px;
    }

}

@media screen and (max-width: 767px) {
    .top_main__box04 {
        padding: 70px 0 0;
    }

    .top_main__box04__txt {
        text-align: left;
    }

    .top_main__box04 .container {
        padding: 70px 10px;
    }

    .top_main__box04__title {
        font-size: 2.6rem;
    }

    .top_main__box04__bnr {
        flex-direction: column;
    }

    .top_main__box04__bnr .left-bnr {
        margin: 0 auto 30px;
        width: 100%;
        max-width: 250px;
    }

    .top_main__box04__bnr .right-bnr {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
}

/****************************************

          news_top

*****************************************/
.news {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 100px;
}

.news__post {
    border: 1px solid #e0e0e0;
    padding: 14px 0 30px 30px;
    height: 210px;
    overflow-y: scroll;
}

.news__list {
    background: url(images/news-list-icon.png) no-repeat 0 23px;
    display: flex;
    padding: 16px 0 16px 23px;
    border-bottom: 1px dotted #7f7f7f;
}

.news__list a:hover {
    color: #091e8c;
    text-decoration: underline;
}

@media print,
screen and (min-width: 768px) {
    .news__date {
        flex: 0 0 105px;
        max-width: 105px;
    }
}

.news__btn {
    width: 210px;
    margin: 20px 0 0 auto;
}

.news__title {
    position: relative;
    text-align: center;
    color: #000;
    font-size: 3rem;
    letter-spacing: 0.24em;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: bold;
    margin-bottom: 35px;
    padding-bottom: 15px;
}

.news__title::before {
    position: absolute;
    content: "";
    background: url(images/en-title04.png) no-repeat;
    width: 34px;
    height: 7px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
    .news {
        padding: 70px 10px;
        margin: 0 auto;
    }

    .news__post {
        padding: 20px;
    }

    .news__list {
        flex-direction: column;
    }

    .news__date {
        margin-bottom: 10px;
    }

    .news__title {
        font-size: 2.6rem;
    }

    .news__btn {
        margin: 20px auto 0;
    }
}

/****************************************

          content下層用

*****************************************/
.headline {
    text-align: center;
    line-height: 1.2;
    margin-bottom: 30px;
}

.headline span.jp {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 2.8rem;
    letter-spacing: 0.04em;
    font-weight: bold;
    color: #000;
}

.headline span.en {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    color: #010834;
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .headline span.jp {
        font-size: 24px;
        font-size: 6.4vw;
    }
}

.subhead {
    background: url(images/subhead-icon.png) no-repeat 0 8px;
    color: #000A34;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 2.4rem;
    font-weight: bold;
    border-bottom: solid 4px #CCCCCC;
    position: relative;
    margin-bottom: 26px;
}

.subhead::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #000000;
    bottom: -4px;
    width: 30%;
}

.subhead span {
    display: block;
    padding: 6px 0 10px 35px;
}

@media screen and (max-width: 767px) {
    .subhead {
        font-size: 20px;
        font-size: 5.3333333333vw;
    }
}

.sub-title {
    border-bottom: 2px solid #000;
    color: #000A33;
    font-size: 2rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 18px;
    padding-bottom: 10px;
}

@media print,
screen and (min-width: 768px) {
    .txt560 {
        width: 560px;
    }
}

.concept__txt {
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-top: 30px;
}

.concept__btn {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

@media screen and (max-width: 767px) {
    .concept__btn {
        flex-direction: column;
    }

    .concept__btn .btn-width320 {
        width: 100%;
    }

    .concept__btn .btn-width320:not(:last-of-type) {
        margin-bottom: 20px;
    }
}

.btn-width320 {
    width: 320px;
}

@media screen and (max-width: 767px) {
    .page_main__box .img400 {
        margin-top: 20px;
    }
}

.page_main__box02 {
    margin-top: 60px;
}

@media screen and (max-width: 767px) {
    .page_main__box02 .img400 {
        margin-top: 20px;
    }
}

.gallery__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery__list li {
    margin-bottom: 20px;
}

.gallery__list li:nth-child(4),
.gallery__list li:nth-child(5),
.gallery__list li:nth-child(6) {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .gallery__list li {
        width: 49%;
    }
}

.concept02__btn {
    width: 260px;
    margin: 20px 0 0 auto;
}

@media screen and (max-width: 767px) {
    .concept02__btn {
        margin: 20px auto 0;
    }
}

.profile {
    background: rgba(0, 0, 0, 0.84);
    padding: 30px;
    margin-top: 30px;
}

.profile span {
    font-size: 2rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #fff;
}

.profile ul li {
    color: #fff;
}

.staff02__box {
    margin-top: 60px;
}

.about__img {
    margin-top: 30px;
}

.about__box {
    margin-top: 40px;
}

.post__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.post__list::after {
    content: "";
    display: block;
    width: 320px;
}

.post__list__title {
    font-size: 1.8rem;
    color: #000A34;
    border-bottom: 1px dotted #ccc;
    display: block;
    text-align: center;
    margin-top: 10px;
}

@media print,
screen and (min-width: 768px) {

    .post__list__img {
        width: 320px;
        height: 240px;
    }

}

@media screen and (max-width: 767px) {
    .post__list {
        flex-direction: column;
    }

    .post__list li:not(:first-child) {
        margin-top: 30px;
    }
}

.ceramic02__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.ceramic02__list .item__title {
    text-align: left;
}

@media screen and (max-width: 767px) {
    .ceramic02__list {
        flex-direction: column;
    }
}

.item {
    background: #272727;
    width: 320px;
    padding: 40px 20px 17px;
}

.item__title {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.item__txt {
    font-size: 1.4rem;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .item {
        width: 100%;
        padding: 30px 20px 20px;
    }

    .item:not(:first-of-type) {
        margin-top: 30px;
    }
}

a.txt-link {
    color: #010834;
    font-weight: bold;
    text-decoration: underline;
}

a.txt-link:hover {
    color: #091e8c;
}

.mt20 {
    margin-top: 20px;
}

.item02 {
    width: 485px;
    background: #272727;
    padding: 40px 30px 26px;
    margin-bottom: 30px;
}

@media print,
screen and (min-width: 768px) {

    .item02:nth-child(3),
    .item02:nth-child(4) {
        margin-bottom: 0;
    }
}

.item02__title {
    text-align: center;
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.item02__txt {
    font-size: 1.4rem;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .item02 {
        width: 100%;
        padding: 30px 20px 20px;
    }
}

.zirconia02__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.before-after__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {

    .before-after__list {
        flex-direction: column;
    }

    .before-after__list li {
        max-width: 440px;
        width: 100%;
        margin: 0 auto;
    }

    .before-after__list li:first-child {
        margin-bottom: 80px;
    }

}

.before-after__list:not(:first-of-type) {
    margin-top: 60px;
}

@media print,
screen and (min-width: 768px) {

    .before-after__list {
        position: relative;
    }

}

@media screen and (max-width: 767px) {

    .before-after__list li:first-child {
        position: relative;
        margin-bottom: ;
    }
}

.table01 {
    width: 100%;
    margin-top: 30px;
}

.table01 th {
    width: 30%;
    background: #EEEEEE;
    border: 1px solid #ccc;
    text-align: left;
    font-weight: normal;
    padding: 11px 20px 10px;
}

.table01 td {
    width: 70%;
    border: 1px solid #ccc;
    padding: 11px 20px 10px;
}

.table01 td span {
    margin-right: 20px;
}

@media screen and (max-width: 767px) {
    .table01 td span {
        display: block;
        margin: 0;
    }
}

.blog__title {
    color: #000A34;
    font-size: 2rem;
    border-bottom: solid 4px #CCCCCC;
    position: relative;
    margin-bottom: 26px;
}

.blog__title::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #000000;
    bottom: -4px;
    width: 30%;
}

.blog__box {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.blog__btn {
    width: 240px;
    margin: 30px 0 0 auto;
}

.blog:not(:first-of-type) {
    margin-top: 30px;
}

@media print,
screen and (min-width: 768px) {

    .blog__box .img400 {
        width: 400px;
    }

    .blog__box .img400 img {
        width: 100%;
        height: auto;
    }

}

@media screen and (max-width: 767px) {
    .blog__box {
        flex-direction: column;
    }

    .blog__box .img400 {
        margin-bottom: 20px;
    }

    .blog__box .txt560 {
        order: 2;
    }

    .blog__btn {
        margin: 20px auto 0;
    }
}

@media print,
screen and (min-width: 768px) {
    .contact__txt {
        text-align: center;
        letter-spacing: 0.04em;
    }
}

.site-policy {
    background: rgba(0, 0, 0, 0.85);
    margin-top: 30px;
    padding: 34px 30px 30px;
}

.site-policy dt {
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.site-policy dd p {
    line-height: 2;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .site-policy {
        padding: 25px;
    }

    .site-policy dd p {
        text-align: left;
    }
}

/****************************************

         single.php

*****************************************/
.single_box {
    width: 1020px;
    margin: 0 auto;
}

.single_txt {
    width: 100%;
}

.single_txt img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

.pager {
    clear: both;
    text-align: center;
    padding: 30px 0;
}

a.page-numbers {
    background: rgba(0, 0, 0, 0.02);
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 5px 8px;
    margin: 0 2px;
    font-size: 1.4rem;
}

.pager .current {
    background: rgba(0, 0, 0, 0.02);
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 5px 8px;
    margin: 0 2px;
    font-size: 1.4rem;
    background: black;
    border: solid 1px black;
    color: white;
}

.nav-below {
    margin: 30px 0 130px;
    text-align: center;
}

.nav-below a {
    margin: 0 10px;
}

@media screen and (max-width: 767px) {
    .single_box {
        width: auto;
        padding: 0 10px;
    }
}

/****************************************

         pc_footer

*****************************************/
@media print,
screen and (min-width: 768px) {
    .sp_footer__btn {
        display: none;
    }

    .footer__logo {
        width: 273px;
    }

    .footer {
        position: relative;
        background: #000833;
        padding: 43px 0;
    }

    .footer .pagetop {
        position: absolute;
        right: 30px;
        bottom: 30px;
    }

    .footer__btn {
        display: flex;
        width: 340px;
        margin-left: auto;
    }

    .footer__btn .left-btn {
        margin-right: 10px;
    }

    .footer__btn .btn-width165 {
        width: 165px;
    }

    .footer__box {
        display: flex;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }

    .footer__info {
        margin-left: 20px;
    }

    .footer__info .address {
        color: rgba(255, 255, 255, 0.5);
        font-size: 1.4rem;
    }

    .footer__info .tel {
        background: url(images/tel-icon02.png) no-repeat 0 center;
        color: #fff;
        font-size: 3rem;
        font-weight: 500;
        font-family: "Roboto", sans-serif;
        line-height: 1;
        margin-top: 5px;
        padding-left: 20px;
    }

    .footer__info .time {
        color: rgba(255, 255, 255, 0.5);
        font-size: 1.4rem;
        margin-top: 5px;
    }

    .copyright {
        text-align: center;
        font-size: 1.4rem;
        color: #fff;
        margin-top: 65px;
    }
}

/****************************************

         sp_footer

*****************************************/
@media screen and (max-width: 767px) {
    .footer {
        padding-bottom: 70px;
    }

    .pagetop {
        display: none !important;
    }

    .footer__box {
        display: none;
    }

    .copyright {
        background: #010834;
        text-align: center;
        font-size: 1.3rem;
        color: #fff;
        padding: 12px 0;
    }
}

/****************************************

         P

*****************************************/
p.line_break {
    padding-top: 30px;
}

.line_break02 {
    padding-top: 20px;
}

/****************************************

         Contact Form7

*****************************************/
#contact-form {
    width: 100%;
    margin: 40px auto 90px;
}

.red {
    color: #FF0000;
}

.wpcf7 {
    width: 100%;
}

.wpcf7-form textarea {
    width: 650px;
    max-width: 100%;
}

.wpcf7-form .wpcf7-submit {
    width: 50px !important;
}

.wpcf7 p {
    line-height: 2;
    padding-top: 3px;
}

.wpcf7-form input {
    width: auto !important;
}

.contact_p_strong {
    border-top: 1px dotted #999;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px !important;
}

.normal {
    font-weight: normal;
}

.wpcf7-submit {
    margin-top: 10px;
}

.wpcf7-response-output {
    font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
    .wpcf7-form textarea {
        width: 100% !important;
    }
}

/****************************************

         追加

*****************************************/
@media (min-width: 768.02px) and (hover: hover) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/*object-fit IE対応*/
img.object-fit-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

.gmap {
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

@media screen and (max-width: 767px) {
    .gmap {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
    }

    .gmap iframe {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .gmap02 {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
    }

    .gmap02 iframe {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .sp_footer__btn {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 70px;
        z-index: 9999;
    }

    .sp_footer__btn ul {
        display: flex;
        height: 70px;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #3F3333;
    }

    .sp_footer__btn ul li {
        position: relative;
        width: calc(100% / 3);
        height: 100%;
        margin: 0;
        padding: 0;
        font-size: 1.1rem;
    }

    .sp_footer__btn ul li:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.8);
    }

    .sp_footer__btn ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0;
        background: #000;
        text-decoration: none;
        color: #fff;
    }

    .sp_footer__btn ul li a span {
        position: relative;
        display: block;
        height: auto;
        padding-top: 32px;
        line-height: 1.4;
        text-align: center;
    }

    .sp_footer__btn ul li a span::after {
        content: "";
        position: absolute;
        display: inline-block;
        left: calc(50% - 12px);
        top: 0;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .sp-tel::after {
        background-image: url(images/sp-tel.svg);
        background-size: 24px;
        background-repeat: no-repeat;
        opacity: 0.8;
    }

    .sp-mail::after {
        background-image: url(images/sp-mail.svg);
        background-size: 24px;
        background-repeat: no-repeat;
        opacity: 0.8;
    }

    .sp-pagetop::after {
        background-image: url(images/sp-pagetop.svg);
        background-size: 24px;
        background-repeat: no-repeat;
        opacity: 0.8;
    }
}

/****************************************

          clearfix

*****************************************/
.clearfix {
    display: inline-block;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}