@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Cormorant:ital,wght@0,300..700;1,300..700&family=Hina+Mincho&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

/*

    font-family: "Open Sans", sans-serif;

.noto-sans-jp-<uniquifier> {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.red-hat-display-<uniquifier> {
    font-family: "Red Hat Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.sawarabi-gothic-regular {
    font-family: "Sawarabi Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.zen-kaku-gothic-new-regular {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}

*/

html {
    font-size: 62.5%; /* sets the base font to 10px */
}

html, body {
    font-family: "Open Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    /*background-color: #d9d7d4;*/
    background-color: #e7e3df;
    color: #262626;
    width: 100%;
    height: 100%;
    font-size: 1.0rem;
    line-height: 1.45;
    text-align: justify;
}

@media screen and (min-width: 900px) {
    html, body {
        font-size: 1.6rem;
    }
}

img {
    max-width: 100%;
}

.sitemap a {
    text-decoration: none;
    color: #fff;
}

.sitemap a:visited {
    color: #fff;
}

.sitemap .list_subpages a {
    color: #ccc;
}

.sitemap .list_subpages a:visited {
    color: #ccc;
}

.sitemap .list_subpages a:hover {
    color: #fff;
}

/* ヘッダ & メニュー ---------------------------------------------------------- */

header {
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    /*height: 100px;*/
    height: 60pt;
    display: flex;
    align-items: start;
    justify-content: space-between;
    transition: all 0.5s;
    z-index: 10000;
}

header .logo-area {
    /*flex: 1;*/
    padding: 10pt;
    width: 300px;
    height: 100%;
    transition: all 0.5s;
    position: relative;
    top: 0;
}

.menu-btn-area {
    padding: 10pt;
}

header.scrolled {
    height: 60pt;
    /*padding: 0.5rem 0 0.5rem 0;*/
}

header.scrolled .logo-area {
    top: -100%;
}

header .logo {
    background: url("../images/header_logo.png") no-repeat;
    background-size: contain;
    content: "";
    font-size: 0;
    font-size: 0.1;
    height: 100%;
}

.page_sub header .logo {
    background-image: url('../images/pere_logo_for_dark.png');
}

.page_sub header.scrolled .logo {
    background-image: url('../images/header_logo.png');
}


header #menu_btn {
    display: block;
}

header .menu {
    visibility: hidden;
    display: block;
    position: fixed;
    top: 0;
    left: 0;

    background: #fbf6ef;
    width: 100%;
    height: 0;
    z-index: 65000;
    overflow: hidden;
    
    transition: all .5s;
}

#menu-toggle:checked ~ .menu {
    visibility: visible;
    height: 100%;
}

header .menu .left,
header .menu .right {
    height: 100vh;
    box-sizing: border-box;
}

header .menu .left {
    font-size: 0.9rem;
    font-weight: bold;
    padding: 1.5em;

    background: linear-gradient(0deg, rgba(33, 14, 4, 0.8), rgba(33, 14, 4, 0.8)), url('../images/menu_bg.jpg') no-repeat left center;
    color: #fff;
}

header .menu .right {
    background: linear-gradient(0deg, rgba(33, 14, 4, 0.8), rgba(33, 14, 4, 0.8)), url('../images/menu_bg.jpg') no-repeat left center;
    background-size: cover;
    color: #fff;
    flex: 1;
    padding: 1.6em;
    flex-direction: column;
    text-align: left;
    display: none;
}

header .menu .right .catch_copy {
    margin: 0 auto;
    width: 16em;
    font-family: "Hina Mincho", serif;
    font-size: 2.0rem;
    flex: 1;
    display: flex;
    text-align: left;
    align-items: center;
    line-height: 1.6;
}

header .menu .right .company {
    display: flex;
    align-items: end;
    line-height: 1.4;
    font-size: 0.9em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
}

header .menu .right .company .logo {
    flex: 1;
    background: url(../images/pere_logo_for_dark.png) no-repeat right bottom;
    height: 104px;
    background-size: contain;    
}

header .menu li {
    list-style: none;
}

header .menu li a {
    text-decoration: none;
}

header .menu .insides {
    border: 1px solid #8f8f8f;
    border-style: none none solid none;
}

header .menu .insides > li {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

header .menu .insides li {
    margin-top: 0.4em;
}

header .menu .insides .sublayer {
    padding: 0.5em 0.3em;
}

header .menu .insides .sublayer li {
    font-size: 1.0rem;
    font-weight: normal;
}

header .menu .insides .sublayer a::before {
    content: "－ ";
}

header .menu .externals {
    margin-top: 0.6em;
}

.exlink {
    position: relative;
}

.exlink::after {
    position: absolute;
    background: url('../images/icon_exlink.svg') no-repeat right center;
    right: 0;
    width: 20px;
    height: 100%;
    content: "";
}

header .menu .externals a {
    width: 100%;
    height: 100%;
    display: block;
    content: "";
}

header .menu .externals .note {
    font-size: 0.01;
    font-size: 0;
    height: 40px;
    background: url('../images/exlogo_note.svg') no-repeat left center;
    background-size: contain;
    filter: invert(1);
}

header .menu li a {
    display: block;
}

header .menu li a:visited {color: #fff;}
header .menu li a:link {color: #fff;}

@media screen and (min-width: 900px) {
    header .menu {
        display: flex;
    }

    header .menu .left {
        font-size: 1rem;
        padding: 2em;
        background: transparent;
    }

    header .menu .left .insides {
        /*font-size: 1rem;*/
    }

    header .menu .left .externals {
        margin-top: 30px;
    }

    header .menu li {
        color: #1a1a1a;
    }

    header .menu .insides li {
        margin-top: 0.8em;
    }

    header .menu .insides > li {
        margin-bottom: 1.2em;
    }

    header .menu .right {
        display: flex;
    }

    header .menu .externals .note {
        filter: none;
    }

    .btn-trigger {
        margin-right: 30px;
    }

    header .menu li a:visited {color: #1a1a1a;}
    header .menu li a:link {color: #1a1a1a;}
    header .menu li a:hover {color: #c10b0b;}
}

/*=============================
.btn-trigger
=============================*/
.btn-trigger {
    display: block;
    position: relative;
    width: 40px;
    height: 38px;
    cursor: pointer;
    z-index: 65536;
    background: rgba(255, 255, 255, 0.80);
    border-radius: 20%;

    /*
    margin-top: 10px;
    margin-right: 12px;
    */
}

.btn-trigger span {
    position: absolute;
    left: 0;
    width: 65%;
    height: 4px;
    background-color: #545454;
    border-radius: 4px;
}

.btn-trigger, .btn-trigger span {
    /*display: inline-block;*/
    transition: all .5s;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: auto;
}

.btn-trigger span:nth-of-type(1) {
    top: 22%;
}

.btn-trigger span:nth-of-type(2) {
    top: 0;
    bottom: 0;
}

.btn-trigger span:nth-of-type(3) {
    bottom: 22%;
}

/* ハンバーガーがXに変形 */
/*
#menu-toggle:checked + .btn-trigger span {
    background-color: #fff;
}
    */

#menu-toggle:checked + .btn-trigger span:nth-child(1) {
  transform: translateY(220%) rotate(45deg);
}
#menu-toggle:checked + .btn-trigger span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .btn-trigger span:nth-child(3) {
  transform: translateY(-220%) rotate(-45deg);
}

@media screen and (min-width: 900px) {
    /*
    header .logo {
        width: 289px;
    }
        */

    header {
        height: 100px;
    }

    header.scrolled {
        height: 60px;
        background-color: rgba(231, 227, 223, 0.925);
    }

    header.scrolled .logo-area {
        padding: 6pt;
        top: 0;
    }
}

.page_home img {
    display: block;
    margin: 0 auto;
}

/* ホーム - トップビジュアル ---------------------------------------------------------- */
.page_home .top_visual {
    text-align: left;
    background: #e1dede url("../images/home_visual.jpg") no-repeat center center;
    background-size: cover;
    height: 70vh;
    display: flex;
    align-items: center;

}

.page_home .top_visual h2 {
    /*font-size: 1.75rem;*/
    font-size: 5.5vw;
    font-family: "Hina Mincho", serif;
    font-weight: normal;
    line-height: 1.8;
    display: inline;
    color: #1a1a1a;
    background-color: rgba(255, 255, 255, 0.9);
}

.page_home h2 {
    font-size: 2.4rem;
    width: 100%;
    line-height: 1;
    font-size: 2rem;
    padding-bottom: 0.05em;
}

.page_home h2 .text {
    padding: 0 0.25em 0 0.25em;
}

.page_home .header_typo, 
.page_webdesign .header_typo small {
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    font-size: 1.2rem;
    line-height: 1.1;
}

.page_home .header_typo > * {
    vertical-align: bottom;
}


.page_home .header_typo small,
.page_webdesign .header_typo small {
    color: #d977a8;
    font-size: 3.5rem;
    display: block;
}

.page_home .header_text {
    flex: 1;
}

@media screen and (min-width: 900px) {
    .page_home .top_visual {
        background-size: cover;
        background-position: center center;
    }

    .page_home .header_typo,
    .page_webdesign .header_typo {
        font-size: 1em;
        display: flex;
        flex-flow: row no-wrap; /*flex-direction + flex-wrapの記述が可能*/
        vertical-align: bottom;
        align-items: center;
    }

    .page_home .header_typo > * {
        vertical-align: bottom;
    }

    .page_home .header_typo small,
    .contact .header_typo small
    {
        font-size: 4rem;
        margin-right: 0.25em;
        display: inline-block;
        vertical-align: middle;
    }

    .page_home .top_visual h2 {
        font-size: 2.0rem;
        line-height: 2.1;
    }
}

/* ホーム - 更新履歴 ---------------------------------------------------------- */

.update_log {
    font-size: 0.8rem;
    padding: 2em 0em;
}

.update_log a {
    display: inline-block;
    width: 100%;
}

.update_log a:link {
    text-decoration: none;
    color: #1a1a1a;
}

.update_log a:visited {
    color: #1a1a1a;
}

.update_log a:hover {
    color: #c10b0b;
}

.update_log h2 {
    font-size: 0.9rem;
}

.update_log .log {
    display: flex;
    flex-wrap: wrap;
}

.update_log .log div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: 1.9;
}

.update_log .log dt,
.update_log .log dd {
    display: flex;
    border: 2px none #675751;
    border-bottom-style: dotted;
    padding: 0.25em 0;
    align-items: center;
    height: 100%;
}

.update_log .log dt:hover,
.update_log .log dd:hover {
    background-color: hsl(15, 10%, 85%);
}

.page_update .update_log .log dt,
.page_update .update_log .log dd {
    font-size: 0.9rem;
    /*flex-wrap: wrap;*/
    align-content: center;
    font-weight: normal;
}

.update_log .log dt {
    margin-right: 2px;
    width: 5.75em;
    padding-left: 0.25em;
}

.update_log .log dd {
    flex: 1;
    padding-right: 0.25em;
    line-height: 1.25;
}

.update_log .log dd::before {
    border-radius: 4em;
    background-color: #3b312d;
    font-size: 80%;
    min-width: 4em;
    color: #fff;
    padding: 0.1em 0.5em;
    box-sizing: content-box;
    margin-right: 0.7em;
    text-align: center;
    line-height: 1.75;
}

.update_log .log .logtype.info::before {
    content: "お知らせ";
}

.update_log .log .logtype.note::before {
    content: "note";
}

.update_log .log .logtype.seminar::before {
    content: "セミナー";
}

.update_log .toupdate {
    border: 1px solid #675751;
    padding: 0.5em 1em;
    display: block;
    width: 7em;
    text-align: center;
    margin: 0.8rem 0 0 auto;
}

.update_log .toupdate:hover {
    border-color: #7a2000;
    background-color: #ddd7d5;
}


.page_update .log div {
    height: 3.5em;
}

@media screen and (min-width: 900px) {
    .update_log {
        padding: 2em 2.5em;
    }
}

.page_update .top_visual {
    background-image: url("../images/update_visual.jpg");
}


/* ホーム - About ---------------------------------------------------------- */

.page_home .about {
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    background: #fff url("../images/home_about_image.jpg") right 50% top -100px no-repeat;
    padding: 2em 0;
}

.page_home .about .header_typo {
    /*text-align: right;*/
}

.page_home .about h3 {
    margin-top: 20rem;
    margin-bottom: 0.7em;
    font-size: 1.3rem;
    line-height: 1.3;
}

.page_home .about .copy_writing {
    color: #0e9c5e;
    padding: 0.5em 0 0.5em 0;
    font-size: 5.3vw;
    background: rgb(100% 100% 100% / 70%);
    text-align: center;
}

.page_home .about .text {
    margin-top: 2rem;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1em 1em 0.25em 1em;
}

.page_home .about p {
    padding: 0 0 0.75em 0;
}

.page_home .about .signature {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 1em;
    font-size: 1.8rem;
    line-height: 1;
    display: block;
    margin-right: 0;
    text-align: center;
    color: #1a1a1a;
    font-weight: bold;
}

.page_home .about .signature small {
    font-size: 60%;
    display: inline;
    color: #1a1a1a;
    margin-right: 0.5em;
}

@media screen and (min-width: 900px) {
    .page_home .about {
        background-position: right 0 top 0;
        padding: 5em 0;
    }

    .page_home .about .copy_writing {
        font-size: 1.75rem;
        background: transparent;
        text-align: left;
        font-size: 1.6rem;
        margin-top: 1em;
    }

    .page_home .about .text {
        background-color: rgba(255, 255, 255, 0.3);
        width: 34em;
    }

    .page_home .about .text p {
        margin-top: 0;
        padding: 0 0 0.75em 0;
    }

    .page_home .about .signature {
        padding: 0.5em 0 0.3em 0;
        font-size: 2rem;
        line-height: 1;
        display: block;
        margin-right: 0;
        text-align: center;
        width: 10em;
        margin-left: auto;
    }

    .page_home .about .signature small {
    }
}

/* 役員紹介 ---------------------------------------------------------- */
.page_home .officer {
    background-color: #fff;
    padding: 0 0 5em 0;
}

/* OurService ------------------------------------------------------------------ */
.page_home .service {
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    background-color: #404040;
    padding: 2rem 0 4em 0;
    text-align: center;
}

.page_home .service a {
    text-decoration: none;
}

.page_home .service .visual {
    width: 100%;
    height: 200px;
    position: relative;
}

.page_home .service .visual > * {
    position: absolute;
}

.page_home .service .visual > img {
    width: 50%;
}

.page_home .service .visual .bubble {
    transition: 0.5s;
    opacity: 0;
    transform: scale(0.5);
}

.page_home .service .visual .bubble.enter {
    opacity: 1;
    transform: scale(1);
}

.page_home .service .visual > :nth-child(1) {
    left: -2px;
}

.page_home .service .visual > :nth-child(2) {
    top: 10px;
    right: -6px;
}

.page_home .service .visual > :nth-child(3) {
    top: 120px;
    left: -10px;
}

.page_home .service .visual > :nth-child(4) {
    top: 66px;
    right: 100px;
}

.page_home .service .visual > :nth-child(5) {
    top: 140px;
    right: -6px;
}


@media screen and (min-width: 900px) {
    .page_home .service .visual {
        height: 360px;
    }

    .page_home .service .visual > img {
        width: auto
    }
    .page_home .service .visual > :nth-child(1) {
        left: 160px;
    }

    .page_home .service .visual > :nth-child(2) {
        top: 50px;
        right: 100px;
    }

    .page_home .service .visual > :nth-child(3) {
        top: 250px;
        left: 000px;
    }

    .page_home .service .visual > :nth-child(4) {
        top: 150px;
        right: 420px;
    }

    .page_home .service .visual > :nth-child(5) {
        top: 280px;
        right: 170px;
    }

}

.page_home .service h2 {
    color: #fffc00;
    font-family: "Hina Mincho", serif;
    font-weight: normal;
    font-size: 2.0rem;
    text-align: center;
    margin: 0.5em -0.75rem 0.5em auto;
}

.page_home .service h2 .small {
    font-size: 75%;
    padding-right: 0.1em;
}

.page_home .service h3 {
    font-family: "Century Gothic", sans-serif;
    font-size: 0.8rem;
    font-weight: normal;
    color: #fff;
    border: 1.5px solid #fff;
    border-radius: 2em;
    line-height: 1.6;
    width: 9.5em;
    margin: 0 auto;
}

.page_home .service .service_list a {
    color: #262626;
}

.page_home .service .service_list li {
    display: block;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    flex-direction: column;
}

@media screen and (min-width: 900px) {
    .page_home .service h2 {
        font-size: 4.8rem;
        margin: 1em auto 0.5em auto;
    }

    .page_home .service h3 {
        font-size: 1.2rem;
    }

    .page_home .service .service_list li {
        display: inline-block;
        width: 25em;
        margin-right: 1rem;
        height: 16em;
    }

}

.page_home .service .service_list li a {
    flex-direction: column;
    display: flex;
}

.page_home .service .service_list li h4 {
    color: #fff;
    font-size: 2.0rem;
    line-height: 1.25;
    padding: 1em 0.5em;
    font-weight: normal;
    background-size: 100%;
    background-color: #4d4843;
    background-position: center center;
    transition: 0.5s;
    display: flex;
    justify-content: center;
    height: 4em;
    align-items: center;
}

.page_home .service .service_list li a:hover h4 {
    background-size: 120%;
}

.page_home .service .service_list .etc h4 {
    font-size: 1.4rem;
}

.page_home .service .service_list li p {
    line-height: 1.4;
    padding: 1em 1em;
    text-align: justify;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    /*min-height: 8em;*/
}

.service_list > :nth-child(1) h4 {
    background-image: url("../images/home_service_01.jpg");
}

.service_list > :nth-child(2) h4 {
    background-image: url("../images/home_service_02.jpg");
}

.service_list > :nth-child(3) h4 {
    background-image: url("../images/home_service_03.jpg");
}

.service_list > :nth-child(4) h4 {
    background-image: url("../images/home_service_04.jpg");
}

.service_list > :nth-child(5) h4 {
    background-image: url("../images/home_service_05.jpg");
}

.service_list > :nth-child(6) h4 {
    background-image: url("../images/home_service_06.jpg");
}

.service_list > :nth-child(7) h4 {
    background-image: url("../images/home_service_07.jpg");
}

.service_list > :nth-child(8) h4 {
    background-image: url("../images/home_service_08.jpg");
}

.service_list > .web h4 {
    background-image: url("../images/home_service_visual_web.jpg");
}

.service_list > .price h4 {
    background-image: url("../images/home_service_visual_price.jpg");
}

/* 提携専門家のご紹介 */

.staff {
    background-color: rgba(255, 255, 255, 0.8);
}

.staff h2 {
    font-family: "Hina Mincho", serif;
    margin: auto;
    text-align: center;
}

.member_list {
    margin: 0 auto;
}

.page_sub .member_list dt,
.member_list dt {
    color: #0e9c5e;
    font-size: 2.4rem;
    font-family: "Hina Mincho", serif;
    font-weight: normal;
    line-height: 1.3;
    padding-top: 3rem;
    margin-bottom: 0.5rem;
    clear: both;
}

.member_list img {
    /*float: left;*/
}

.member_list dt img {
    /*width: 200px;*/
    /*max-height: 200px;*/
    max-width: 100%;
}

.member_list .another_name {
    color: #262626;
    display: block;
    font-size: 1.05rem;
}

.member_list dd {
    font-size: 1.05rem;
    line-height: 1.4;
}

.member_list dd::after {
    clear: both;
}

@media screen and (min-width: 900px) {
    .staff {
        padding: 6.5em 0;
    }

    .staff h2 {
        text-align: left;
    }

    .member_list {
        margin: 0 auto;
    }

    .member_list dt {
        font-size: 2.4rem;
        line-height: 1.3;
        padding-top: 3rem;
        margin-bottom: 0.5rem;
        clear: both;
    }

    .member_list img {
        float: left;
    }

    .member_list dt img {
        height: 200px;
        margin-right: 1.5rem;
    }

    .member_list .another_name {
        color: #262626;
        display: block;
        font-size: 1.05rem;
    }

    .member_list dd {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .member_list dd::after {
        clear: both;
    }

}

/* サイトマップ */

.sitemap {
    background: #404040;
    color: #fff;
    margin: 0 auto 0 auto;
    padding: 60px 0 70px 0;
    line-height: 1.3;
}

.sitemap .logo {
    margin-bottom: 10px;
    margin-left: -3px;
    background: url("../images/sitemap_logo.png") no-repeat;
    width: 210px;
    height: 55px;
    content: "";
    font-size: 0;
    font-size: 0.1;
}

.sitemap .main_width {
    color: #fff;
}


.sitemap ul {
    margin: 0;
}

.sitemap li {
    margin: 0 0 1em 0;
    list-style-type: none;
}


.sitemap .block_left {
    margin-right: 0;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #777;
}

.sitemap .block_left p {
    min-width: fit-content;
    margin-top: 1.25em;
    line-height: 1.5;
    font-size: 1rem;
}


.sitemap .block_right {
    flex-grow: 1;
}

.sitemap .block_right > * {
}

.sitemap .list_category {
    margin-bottom: 3rem;
}

.sitemap .list_category h4,
.sitemap .list_category2 li
{
    font-weight: normal;
    font-size: 1.2rem;
    margin-bottom: 1em;
}

.sitemap .list_category2 {
}

.sitemap .list_category li {
    font-size: 0.9rem;
    margin-left: 0.5em;
}

.sitemap .list_category2 li {
    height: 3em;
}

.sitemap .list_category .has_sublist {
}

.sitemap .list_subpages a::before {
    content: "－";
    margin-right: 0.75em;
}

@media screen and (min-width: 900px) {

    .sitemap .main_width {
        display: flex;
    }

    .sitemap .block_left,
    .sitemap .block_right {
        margin: 0 auto 1em auto;
        border: 0 none;
    }

    .sitemap .block_left {
        margin-right: 3em;
        /*font-size: 1rem;*/
    }

    .sitemap .block_right {
        display: flex;
    }

    .sitemap .block_right > * {
        flex-grow: 1;
        width: 10em;
    }

}


/* *********************************************************************************************** */
/*  000. 下層 - 汎用 */
/* *********************************************************************************************** */
.page_sub {
    
}

.page_sub dl {
    margin: auto;
    margin-top: 1em;
}

.page_sub dt {
    font-weight: bold;
    font-size: 1.2rem;
}

.page_sub dd {
    margin-bottom: 1.5em;
}

.page_sub .top_visual {
    text-align: center;
    background-color: #606163;
    background-size: cover;
    background-position: center center;
    padding: 10em 0.7em 10.5em 0.7em;
}

.page_sub .top_visual h2 {
    font-family: "Hina Mincho", serif;
    letter-spacing: 0.1em;
    margin: 0 auto 0.1em auto;
    font-size: 2.2rem;
    font-weight: normal;
    line-height: 1.3;
    color: #ffff33;
}

.page_sub .top_visual h3 {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    display: inline-block;
    background-color: rgba(13, 13, 13, 0.8);
    color: #fff;
    padding: 0 0.5em;
    font-size: 1.0rem;
}

@media screen and (min-width: 900px) {
    .page_sub .top_visual h2 {
        font-size: 6rem;
    }

    .page_sub.page_talent_development .top_visual h2 {
        font-size: 4rem;
    }

    .page_sub.page_funding .top_visual h2 {
        font-size: 4.5rem;
    }
}

section {
    padding: 4em 0 4.25em 0;
}

@media screen and (min-width: 900px) {
    .page_sub .top_visual {
        padding: 7em 0 7em 0;
    }

    section {
        padding: 3.5em 0 4.5em 0;
    }
}

.section_title {
    display: block;
    margin: 0 auto 2em auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
}

.section_title h4 {
    font-family: "Noto Sans JP", sans-serif;
    /*font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;*/
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: #333333;
}

.section_title small {
    font-family: "Century Gothic", sans-serif;
    font-weight: bold;
    display: inline-block;
    background-color: rgba(255, 255, 0, 0.5);
    padding: 0 0.5em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    font-size: 1.0rem;
}

@media screen and (min-width: 900px) {
    .section_title h4 {
        font-size: 2.2rem;
    }
}

.section_faq {
    background-color: #fff;
}

.faq_list {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 80%;
    margin: auto;
}

.faq_list li {
    list-style: none;
    text-align: center;
}

.faq_list li h4 {
    font-size: 1.4rem;
}

.faq_list dl {
    width: 95%;
    margin-top: 2rem;
}

@media screen and (min-width: 900px) {
    .faq_list dl {
        width: 70%;
    }

    .faq_list li h4 {
       font-size: 2.0rem;
    }

}

.faq_list dt, .faq_list dd {
    font-size: 1.1rem;
    background-color: #fff;
    background-size: 26pt;
    background-repeat: no-repeat;
    border-radius: 0.75rem;
    position: relative;
    padding: 5em 1em 1.1em 1em;
    text-align: justify;
}

.faq_list dt {
    background-position: left 5.5rem top 2rem;
}

.faq_list dt::after, .faq_list dd::after {
    position: absolute;
    content: "";

    display: block;
    width: 4rem;
    height: 4rem;
    background-color: #fff;
    background-position: center;
    background-size: 95%;
    background-repeat: no-repeat;

    border-radius: 100%;
    border-width: 3px;
    border-style: solid;
}

.faq_list dt {
    background-image: url("../images/faq_bg_q.svg");
    margin: 3rem 0 1rem -2.25rem;
    background-color: #ebebeb;
}

.faq_list dt::after {
    background-image: url("../images/faq_icon_q.svg");
    border-color: #7db8ea;
    left: 1rem;
    top: 1rem;
}

.faq_list dd {
    background-image: url("../images/faq_bg_a.svg");
    margin: 0 -2.25rem 1rem 0;
    background-color: #ffe0e0;
    background-position: right 5.5rem top 2rem;
    margin-bottom: 1em;
}

.faq_list dd::after {
    background-image: url("../images/faq_icon_a.svg");
    border-color: #f29191;
    right: 1rem;
    top: 1rem;
}

@media screen and (min-width: 900px) {
    .faq_list dt, .faq_list dd {
        font-size: 1.1rem;
        background-position: 1.2em 18px;
        background-size: 26pt;
        padding: 1em 1em 1.1em 3.6em;
    }

    .faq_list dt::after, .faq_list dd::after {
        width: 4rem;
        height: 4rem;
        background-color: #fff;
        background-position: center;
        background-size: 95%;
        background-repeat: no-repeat;

        border-radius: 100%;
        border-width: 3px;
        border-style: solid;
    }

    .faq_list dt {
        margin: 0 0 1rem -50px;
    }

    .faq_list dt::after {
        border-color: #7db8ea;
        left: -2rem;
        right: auto;
        top: auto;
        bottom: -2rem;
    }

    .faq_list dd {
        margin: 0 -50px 3.0rem 0;
    }

    .faq_list dd::after {
        left: auto;
        right: -2rem;
        top: auto;
        bottom: -2rem;
    }
}

/* お問い合わせフォームへ */
.inquiry_btn {
    border: 2px solid #cfcfcf;
    display: block;
    padding: 1em 8em 1em 1em;
    background: url("../images/inquiry_line.svg") right 0.8rem center no-repeat;
    background-size: 30%;
    font-size: 1.0rem;
    text-decoration: none;
    width: 11em;
    box-sizing: content-box;
    margin: 3em auto auto auto;
}

.inquiry_btn:link {
    color: #262626;
}

.inquiry_btn:visited {
    color: #262626;
}

.inquiry_btn.dark {
    border-color: #aaaaaa;
}

.inquiry_btn.white {
    background-color: transparent;
    color: #fff;
}

@media screen and (min-width: 900px) {
    .inquiry_btn {
        width: 11em;
        margin-left: 0;
        margin-right: 0;
    }
}

/* コンタクト */
.page_home .contact {

}

.page_home .contact h2 {
    margin-bottom: 2rem;
}

@media screen and (min-width: 900px) {
}


/* *********************************************************************************************** */
/*  100. 下層 - 士業おまとめサービス */
/* *********************************************************************************************** */
.page_lawyer_unify .top_visual {
    background-image: url("../images/lawyer_unify_visual.jpg");
}

.page_lawyer_unify .top_visual h2 {
    letter-spacing: 0.5;
}

.page_lawyer_unify .overview_section .main_width {
    padding: 0 3em 0 3em;
}

.page_lawyer_unify .overview_section p {
    font-weight: 500;
    margin-bottom: 1em;
}

.page_lawyer_unify .faq_list h4 {
    margin-bottom: 0.8rem;
    color: #c47226;
    line-height: 1.3;
}

.page_lawyer_unify .faq_list h4 small {
    font-size: 70%;
    margin-top: 5rem;
    margin-bottom: 0.25em;
}

.page_lawyer_unify .faq_list h4 small::before {
    content: "- ";
}

.page_lawyer_unify .faq_list h4 small::after {
    content: " -";
}

.page_lawyer_unify .faq_list dt::after {
    /*
    background-image: url("../images/member_nakamura.jpg");
    background-size: 100%;
    */
}

.page_lawyer_unify .faq_list dd::after {
    background-image: url("../images/member_nakamura.jpg");
    background-size: 100%;
}

@media screen and (min-width: 900px) {
    .page_lawyer_unify .faq_list h4 small {
        font-size: 50%;
    }

    .page_lawyer_unify .top_visual h2 {
       font-size: 4.5rem;
    }

    .page_lawyer_unify .overview_section {
        font-size: 1.25rem;
    }
}

/* *********************************************************************************************** */
/*  200. 事業承継・M&A */
/* *********************************************************************************************** */
.page_succession {

}

.page_succession .top_visual {
    background-image: url("../images/succession_visual.jpg");
}

.page_succession .overview_section {
    background-color: #fff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 1.75rem;
}

.page_succession .overview_section .main_width {
    vertical-align: middle;
    display: flex;
}

.page_succession .overview_section .main_width > * {
    flex-grow: 1;
}


.page_succession .overview_section .text .catch_copy {
    font-family: "Open Sans", "Zen Kaku Gothic New", sans-serif;
    /*font-family: "Noto Sans JP", sans-serif;*/
    font-weight: bold;
    font-size: 100%;
    text-align: center;
    color: #2a325a;
    line-height: 1.25;
    margin-bottom: 0.5em;
}

.page_succession .overview_section .text p {
    font-size: 1.0rem;
    font-weight: bold;
}

.page_succession .overview_section img {
    display: block;
}

.page_succession .reman_section .text {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    background-color: #fff;
    text-align: left;
    margin: auto;
    font-size: 1.2rem;
    max-width: 40em;
    padding: 2rem;
}

.page_succession .reman_section img {
    margin: 5rem auto 3rem auto;
}

.page_succession .reman_section .inquiry_btn {
    margin: 3rem auto 0 auto;
}

.page_succession .section_guideline {
    padding: 5rem;
    text-align: center;
    font-weight: bold;
}

.page_succession .section_guideline .link_btn {
    border: 2px solid #aaaaaa;
    padding: 1rem 2rem 1rem 2rem;
    font-size: 1.0rem;
    text-decoration: none;

    display: inline-block;
    margin: auto;
    color: #0e689c;
}

.page_succession .section_guideline .link_btn:hover {
    color: #1695df;
}

.page_succession .section_guideline .link_btn:visited {
    text-decoration: none;
    color: #0e689c;
}

@media screen and (min-width: 900px) {
    .page_succession .overview_section .text p {
        font-size: 40%;
    }

    .page_succession .overview_section {
        font-size: 2.75rem;
    }

    .page_succession .overview_section .text p {
        margin: 2.5em 8em 2.75em 0;
        font-size: 40%;
    }

    .page_succession .overview_section .text .catch_copy {
        text-align: left;
        margin-bottom: 0;
    }

    .page_succession .section_guideline .link_btn {
        font-size: 1.4rem;
    }

}


/* 事業承継・M&Aの流れ */
.page_home .flow_section {
    background: #d9d7d4 url("../images/succession_flow_bg.jpg") left top no-repeat;
    background-size: contain;
}

.page_home .flow_section .flow_list {
    font-family: "Noto Sans JP", sans-serif;
}

.page_home .flow_list dt {
    background: #711717;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-weight: normal;
}

.page_home .flow_list dt::before {
    font-size: 1rem;
    content: "Step";
}

.page_home .flow_list dd {
    background-color: #fff;
}

.page_home .flow_list dd h5 {
    font-size: 1.5rem;
}

@media screen and (min-width: 900px) {

    .page_home .flow_section .flow_list {
        display: flex;
        flex-wrap: wrap;
        width: 800px;
        margin: 0 auto;
    }

    .page_home .flow_section .flow_list dt {
        width: 100px;
        margin-bottom: 1rem;
        font-size: 3rem;
    }

    .page_home .flow_section .flow_list dt::before {
        display: block;
        margin-top: 0.9rem;
        margin-bottom: -0.5rem;
        font-size: 1rem;
        font-weight: normal;
    }   

    .page_home .flow_section .flow_list dd {
        width: 700px;
        padding: 0.75em;
        margin-bottom: 1rem;
    }

}


/* マッチング */
.matching_section {
    background: #343d45 url("../images/succession_matching_bg.jpg") no-repeat;
    background-size: cover;
}

.matching_section h4 {
    font-size: 1.5rem;
    color: #fff;
}

.matching_section .image {
    text-align: center;
}

.matching_section .image img {
    max-width: 100%;
}

.small_75 {
    padding-left: 0.06em;
    font-size: 75%;
}

.marker {
    padding-left: 0.1em;
    padding-right: 0.1em;
    transition: background-size 1.0s cubic-bezier(0.85, 0, 0.15, 1);
}

.marker.orange {
    background:linear-gradient(transparent 65%, rgba(255, 187, 0, 0.5) 65%) no-repeat;
    /* マーカーの横方向を0にして縮める */
    background-size: 0 100%;
}

.marker.enter {
    background-size: 100% 100%;
}

/* *********************************************************************************************** */
/*  000. 下層 - 人材開発 */
/* *********************************************************************************************** */
.page_talent_development .top_visual {
    background-image: url("../images/talent_development_visual.jpg");
}

/* 概要説明 */
.page_talent_development .overview_section {
    background-color: #fff;
}

/* プログラムの特徴 */
.page_talent_development .section_features {

}

/* プログラムの効果 */
.page_talent_development .section_efficacy {
    background-color: #fff;
}

/* おわりに */
.end_section {
    background-color: #fff;
    padding-top: 2em;
    padding-bottom: 3em;
}

.end_section p {
    background-color: #fff;
    margin: auto;
    max-width: 40em;
}

/* *********************************************************************************************** */
/*  000. 下層 - 人材マネジメント */
/* *********************************************************************************************** */
.page_talent_management .top_visual {
    background-image: url("../images/talent_management_visual.jpg");
}

.page_talent_management .importance_section h4 {
    font-size: 1.3rem;
}

.page_talent_management .approach_section,
.page_talent_management .effective_section
{
    background: #fff;
}

/* PC用スタイル */
@media screen and (min-width: 900px) {
    .page_talent_management .importance_section h4 {
        font-size: 1.8rem;
    }
}

/* *********************************************************************************************** */
/*  100. 下層 - 開業支援 */
/* *********************************************************************************************** */
.page_startup .top_visual {
    background-image: url("../images/startup_visual.jpg");
}

.page_startup .overview_section {
    background: #fff;
    font-size: 1.25rem;
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
}

.page_startup .overview_section p {
    margin: auto;
    max-width: 40em;
}

.page_startup .flow_section {
    text-align: center;
}

/* PC用スタイル */
@media screen and (min-width: 900px) {
    .page_startup .overview_section {
     font-size: 1.4rem;
    }
}

/* *********************************************************************************************** */
/*  100. 下層 - 経営健診 */
/* *********************************************************************************************** */
.page_examination .top_visual {
    background-image: url("../images/examination_visual.jpg");
}

.page_examination .support_section {
    background-color: #fff;
}

/* PC用スタイル */
@media screen and (min-width: 900px) {
}

/* *********************************************************************************************** */
/*  100. 下層 - 融資・補助金申請支援 */
/* *********************************************************************************************** */
.page_funding .top_visual {
    background-image: url("../images/funding_visual.jpg");
}

.page_funding .overview_section {
    background-color: #fff;
}

.page_funding .merit_section {
    background-color: #fff;
}


/* PC用スタイル */
@media screen and (min-width: 900px) {
}

/* *********************************************************************************************** */
/*  100. 下層 - 求人代行・求人コンサルティングサービス */
/* *********************************************************************************************** */

.page_recruit_consulting .top_visual {
    background-image: url("../images/recruit_consulting_visual.jpg");
}

.page_recruit_consulting .overview_section {
    background-color: #fff;
}

/* 1. サービス概要 */
.page_recruit_consulting p {
    margin-top: 0.8em;
}

.page_recruit_consulting .service_section .problem_block {
    background-color: #fff;
    margin: 3em auto auto auto;
    width: 80%;
    max-width: 30em;
    padding: 1.5em 1.6em;
    font-family: "Kiwi Maru", serif;
    box-sizing: content-box;
}

.page_recruit_consulting .service_section .problem_block h5 {
    display: block;
    text-align: center;
    font-size: 1.6rem;
    margin: 0 auto 1em auto;
    color: #3090cd;
}

.page_recruit_consulting .service_section .problem_block ul {
    font-size: 1.2rem;
    width: 20em;
    margin: auto auto auto auto;
}

.check_list li {
    list-style: none;
    background: url(../images/icon_
    .svg) left 0px top no-repeat;
    background-size: 1.2rem;
    padding-left: 1.6rem;
    line-height: 1.4;
}

.page_recruit_consulting .service_section .problem_block ul li em {
    color: #F00;
    font-style: normal;
}

.page_recruit_consulting .service_section .problem_block p {
    color: #f00;
    margin-top: 1.6em;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 600;
}

.page_recruit_consulting .service_section .problem_block img {
    display: block;
    margin: 10px auto -56px auto;
}

/* 2. 動物病院業界の採用課題 */
.page_recruit_consulting .issue_section {
    background-color: #fff;
}

/* 3. サービスの特徴・強み */
.page_recruit_consulting h5 {
    font-size: 1.5rem;
}

.page_recruit_consulting .futures_section li {
    list-style: none;
}

.page_recruit_consulting .vertical_list {
    margin: 0 auto 0 auto;
    display: table;
    border-collapse: separate;
}

.page_recruit_consulting .vertical_list li h5 {
    font-size: 1.3rem;
    text-align: center;
}

.page_recruit_consulting .vertical_list li {
    background: #fff;
    margin: 0.5em;
    padding: 2em;
    border: 10px solid #d9d7d4;
    list-style: none;
}

.page_recruit_consulting .price {
    text-align: center;
}

@media screen and (min-width: 900px) {
    .page_recruit_consulting .vertical_list li {
        width: 30%;
        display: table-cell;
    }
}

.page_recruit_consulting .vertical_list li img {
    display: block;
    margin: 1em auto;
}

.page_recruit_consulting .appeal_list {
    margin: 1em auto 0 auto;
    text-align: center;
}

.page_recruit_consulting .appeal_list li {
    border: 6px solid #ffff00;
    background-color: #fffff2;
    display: inline-block;
    margin: 1%;
    width: 40%;
    max-width: 12em;
    font-size: 1.6rem;
    padding: 1em 0 1em 0;
    font-weight: bold;
}

.page_recruit_consulting .appeal_list li h5 {
    font-family: "Open Sans";
    font-size: 3.5rem;
    line-height: 1;
    color: #f50;
    margin: 0;
}

.page_recruit_consulting .appeal_list li h5 small {
    display: inline;
    font-size: 70%;
}

.page_recruit_consulting .appeal_list li p {
    margin: 0;
}

/* 4. 具体的なサポート内容 */
.page_recruit_consulting .support_section {
    background-color: #fff;
}

/* 5. 成功事例・実績 */
.page_recruit_consulting .exsample_section {
    background: #898f98 url("../images/recruit_consulting_exsamle.jpg") no-repeat;
}

.page_recruit_consulting .exsample_section h4 {
    color: #fff;
}

.page_recruit_consulting .exsample_section ul li h5 small {
    display: inline-block;
    margin-right: 0.5em;
    font-size: 1rem;
    line-height: 1;
    padding: 0.4em;
    background: #28518e;
    color: #fff;
}

.page_recruit_consulting .exsample_section li {
    margin-bottom: 2em;
    list-style: none;
    background: #fff;
    padding: 1.8em;
}

/* 6. 料金体系・導入メリット */
.page_recruit_consulting .merit_section {
    background-color: #fff;
}

.page_recruit_consulting .merit_section .price p {
    font-size: 1.1rem;
    font-weight: 600;
}

.page_recruit_consulting .merit_section .price .value {
    font-family: "Open Sans";
    font-weight: 600;
    color:#1695df;
    font-size: 2.1rem;
}

.page_recruit_consulting .merit_section .price, .page_recruit_consulting .merit_section .merit {
    margin: 0 auto 1em auto;
    border: 3px solid #ccc;
    padding: 1em 0;
    max-width: 90%;
    background-color: #fff;
}

.page_recruit_consulting .merit_section .merit .check_list {
    padding: 0 1.5em;
}

.page_recruit_consulting .merit_section .merit p {
    border: 2px solid #ddd;
    margin: 1.0em 1em 0 1em;
    border-style: solid none none none;
    padding: 1em 1.0em 0 1.0em;
}

.page_recruit_consulting .merit_section .price h5,
.page_recruit_consulting .merit_section .merit h5 {
    color: #000;
    text-align: center;
}

/* 7. お問い合わせ・サービス開始まで */
.page_recruit_consulting .contact_section {
    background: url("../images/bg_contact.jpg") center center no-repeat;
    color: #fff;
}

.page_recruit_consulting .contact_section h4 {
    color: #fff;
}

.page_recruit_consulting .contact_section .end_text {
    margin: 2em 2em 0em 2em;
    background: rgb(10% 10% 10% / 70%);
    padding: 1.5em;
}

.page_recruit_consulting .contact_section .inquiry_btn {
    color: #fff;
    background-color: rgba(13, 13, 13, 0.5);
    background-image: url("../images/inquiry_line_white.svg");
}

.page_recruit_consulting .contact_section .contact{
    padding: 0;
}

.page_recruit_consulting .end_section {
    background-color: #fff;
}

/* PC用スタイル */
@media screen and (min-width: 900px) {
    .page_recruit_consulting .top_visual h2 {
        font-size: 2.5rem;
    }

    .page_recruit_consulting .service_section .problem_block h5 {
        font-size: 2.0rem;
    }

    .page_recruit_consulting .contact_section .end_text {
        margin: 4em 4em 0em 4em;
    }
}

/* *********************************************************************************************** */
/*  100. 下層 - 費用一覧 */
/* *********************************************************************************************** */

.page_price .top_visual {
    background-image: url("../images/price_visual.jpg");
}

.page_price .top_visual h2 {
    font-size: 3.25em;
}

.page_price .inquiry_btn {
    max-width: 50%;
    margin-top: 1.5em;
    margin-left: auto;
    margin-right: auto;
}

.page_price .price_list > li {
    list-style: none;
    clear: both;
    background-color: #fff;
    max-width: 38rem;
    padding: 1.5em;
    margin: 4em auto 0 auto;
}

.page_price .price_list > li h4 {
    font-size: 1.5rem;
    margin: 0 auto 1.0em auto;
    line-height: 1.2;
    text-align: center;
}

.page_price .price_sublist {
    margin: 0 auto;
    width: 21em;
}


.page_price .price_sublist .price {
    display: inline;
}

.page_price .price {
    display: block;
    text-align: center;
    font-family: "Open Sans";
    font-weight: 600;
    color:#1695df;
    font-size: 2.3rem;
}

.page_price .legend {
    margin-top: 1.5em;
}

.page_price .price small {
    padding-left: 0.2em;
    font-size: 60%;
    display: inline;
}

/* PC用スタイル */
@media screen and (min-width: 900px) {
    .page_price .inquiry_btn {
        width: 16em;
        max-width: auto;
    }

    .page_price .price {
        /*font-size: 1.6rem;*/
    }
}

/* *********************************************************************************************** */
/*  900. FAQ */
/* *********************************************************************************************** */
.page_faq .top_visual {
    background-image: url('../images/faq_visual.jpg');
}

/* PC用スタイル */
@media screen and (min-width: 900px) {
    .page_sub .top_visual h2 {
        font-size: 4rem;
    }
}


/* M&A ガイドライン */

.sitemap,
.page_guideline_ma {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.page_guideline_ma .text {
    background-color: #fff;
    padding: 6em 0 6em 0;
}

.introduction {
    margin: 0em auto 0 auto;
    padding: 0 0 4em 0;
    /*
    border: 1px solid #bbb;
    border-style: none none solid none;
    */
}

.introduction h1 {
    text-align: center;
    margin: 0 auto 1em auto;
}

.guideline {
    margin: 0 auto 0 auto;
    line-height: 1.4;
}

.guideline .text {
    background-color: #ecebea;
    padding: 5em 1.25em 6em 1.25em;
    /*margin: 100px auto 0 auto;*/
}

.page_guideline_ma h2 {
    text-align: center;
}

.page_guideline_ma h3 {
    margin: 2em 0 0.6em 0;
}

.page_guideline_ma li h4 {
    font-weight: bold;
    margin: 1.5em 0  0.5em 0;
}

ul, ol {
    margin: 0 0 0 0.1em;
    padding: 0;
}

li {
    margin: 0.8em 0 0em 0;
    padding: 0;
    list-style-position: inside;
}

ul > li {
    list-style-type: disc;
}

ol > li {
    list-style: decimal;
}

.marker_hidden > li {
    list-style: none;
}

.marker_hidden > li ol {
    list-style: decimal;
}

h1 {
    font-size: 1.6em;
}

h2 {
    margin: 0 0 0.5em 0;
    font-size: 1.6em;
}

h3 {
    margin: 1.5em 0 0.25em 0;
}

small {
    display: block;
    margin-top: 0.1em;
    margin-left: 0em;
    color: #666;
}

.center {
    text-align: center;
}

.main_width {
    padding-left: 5%;
    padding-right: 5%;
}

.right {
    text-align: right;
}


@media screen and (min-width: 900px) {
    html, body{
        font-size: 1.1rem;
        color: #333;
    }

    .main_width {
        width: 1100px;
        /*max-width: 1100px;*/
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.8rem;
    }
}

.indent {
    margin-left: 3em;
}

address {
    margin: 1em 0 0 0;
    font-style: normal;
}

footer {
    background: #1a1a1a;
    color: #bbbbbb;
    padding: 0 0 0.15em 0;
    line-height: 3.0;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
}

@media screen and (min-width: 900px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 900px) {
    .pc {
        display: none !important;
    }
}

.white {
    background-color: #fff;
}

.no_marker_list{
    list-style-type: none;
}



/* Web制作サービス */

.page_webdesign .top_visual {
    /*background: #e1dede url("../images/home_visual.jpg") no-repeat;*/
    background-image: url('../images/webdesign_visual.jpg');
}

.page_webdesign .top_visual h2 {
    font-size: 2.6rem;
}

.page_webdesign .overview_section {
    position: relative;
    color: #fff;
    padding: 19em 0 2em 0;
    background: #d87bab url(../images/webdesign_overview_bg.jpg) no-repeat center center ;
    background-size: cover;
    background-attachment: fixed;
}

.page_webdesign .overview_section .headline {
    position: absolute;
    left: 0;
    top: 40px; 
    background-color: rgba(0, 0, 0, 0.80);
    font-size: 0.8rem;
    padding: 2em 2em 2em 2.4em;
}

.page_webdesign .overview_section h4 {
    font-family: "Open Sans", "Zen Kaku Gothic New", sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 0.4em;
    font-weight: 500;
}

.page_webdesign .overview_section h4 strong {
    font-weight: 900;
}

.page_webdesign .overview_section strong,
.page_webdesign .overview_section em {
    font-style: normal;
    color: #fff01a;
    font-size: 150%;
}

.page_webdesign .overview_section p {
    color: #fff;
    max-width: 31.5em;
    text-align: justify;
}

.page_webdesign .overview_section .functions {
    padding: 0.5em;
}

.page_webdesign .overview_section .function_list {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.page_webdesign .overview_section .function_list > li {
    background-color: rgba(255, 255, 255, 0.8);
    color: hsl(0, 0%, 10%);
    display: inline-block;
    margin: 0 auto;
    padding: 1.5em 1.5em 1.4em 1.5em;
    flex: 1;
    font-size: 0.9rem;
    width: 100%;
    max-width: 26em;
}

.page_webdesign .overview_section .function_list h5 {
    margin-bottom: 0.8em;
    font-size: 0.9rem;
}

/*
.page_webdesign .overview_section .function_list > li {
    margin-left: 2%;
    margin-right: 2%;
}
*/

.page_webdesign .overview_section .function_list > li:nth-child(1) {
    margin-bottom: 0.5em;
}

.page_webdesign .overview_section .function_list > li li {
    margin: 0 0 0.7em 0;
    line-height: 1.2;
}

@media screen and (min-width: 900px) {
    .page_webdesign .overview_section .function_list {
        flex-direction: row;
    }

    .page_webdesign .overview_section .function_list > li:nth-child(1) {
        margin-left: 2%;
        margin-right: 2%;
    }

    .page_webdesign .overview_section .function_list > li:nth-child(2) {
        margin-left: 0;
        margin-right: 2%;
    }
    
    .page_webdesign .overview_section .headline {
        width: 45rem;
    }

    .page_webdesign .overview_section h4 {
        font-size: 1.8rem;
    }
}

/* こんなお悩みありませんか？ */

.page_webdesign .catch_section {
    background-color: #fff;
    padding: 4em 0 0 0;
}

.page_webdesign .catch_section h4 {
    text-align: center;
    color: #ff6b10;
    font-size: 2.2rem;
    margin: 0 0 1.2em 0;
    padding: 0 0.8em;
    font-family: "Open Sans", "Zen Kaku Gothic New", sans-serif;
    font-weight: 800;
}

.page_webdesign .catch_section .problem_list {
    width: 90%;
    max-width: 34em;
    margin: 0 auto 4em auto;
    font-size: 0.9rem;
}


.page_webdesign .catch_section .problem_list li {
    background-image: url('../images/icon_check.svg');
    background-size: 1.1em;
}

.page_webdesign .catch_section .problem_list em {
    font-style: normal;
    font-weight: bold;
}

.page_webdesign .catch_section .answer {
    background: #ff6b10 url('../images/webdesign_catch_bg.png') center top;
    background-attachment: fixed;
    text-align: center;
    color: #fff;
    padding: 2.75em 0.75em;
    font-family: "Open Sans", "Zen Kaku Gothic New", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.7;
    position: relative;
}


@media screen and (min-width: 900px) {
    .page_webdesign .catch_section h4 {
        font-size: 2.6rem;
    }
    
    .page_webdesign .catch_section .problem_list {
        font-size: 1.2rem;
    }
}

.page_webdesign .catch_section .answer::before {
    background: url('../images/triangle_down.svg') no-repeat center top;
    display: block;
    width: 70px;
    height: 70px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;    
}

@media screen and (min-width: 900px) {
    .page_webdesign .catch_section .answer {
      font-size: 1.5rem;
    }
}

/* マーケティング */

.page_webdesign .section_title p {
    width: 34em;
    max-width: 80%;
    line-height: 1.4;
    margin: 1em auto 4em auto;
    font-size: 1.0rem;
    text-align: justify;
}

.page_webdesign .marketing_section {
    padding-bottom: 0;
}

.marketing_section .marketing_list div {
    background-color: #fff;
    border: 6px solid #ff6f0d;
    border-style: solid none none none;
    padding: 1.25em;
    width: 80%;
    min-height: 12em;
    /*display: inline-block;*/
    margin: 0 0 1.75em 0;
}

@media screen and (min-width: 900px) {
    .marketing_section .marketing_list div {
        margin-right: 2.5em;
        width: 16em;
    }

    .marketing_section .marketing_list div:nth-child(3),
    .marketing_section .marketing_list div:nth-child(6) {
        margin-right: 0;
    }
}


.marketing_section .marketing_list dt {
    border: 1px solid #c5c5c5;
    border-style: none none solid none;
    text-align: center;
    padding: 100px 0 0.5em 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 80px 80px;
    line-height: 1.4;
}

.marketing_section .marketing_list div:nth-child(1) dt {
    background-image: url('../images/webdesign_marketing_icon_01.svg');
}

.marketing_section .marketing_list div:nth-child(2) dt {
    background-image: url('../images/webdesign_marketing_icon_02.svg');
    background-size: 76px 76px;
}

.marketing_section .marketing_list div:nth-child(3) dt {
    background-image: url('../images/webdesign_marketing_icon_03.svg');
    background-size: 94px 86px;
}

.marketing_section .marketing_list div:nth-child(4) dt {
    background-image: url('../images/webdesign_marketing_icon_04.svg');
}

.marketing_section .marketing_list div:nth-child(5) dt {
    background-image: url('../images/webdesign_marketing_icon_05.svg');
}

.marketing_section .marketing_list div:nth-child(6) dt {
    background-image: url('../images/webdesign_marketing_icon_06.svg');
    background-size: 100px 74px;
}

.marketing_section .marketing_list dd {
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 1em 0.3em 0 0.3em;
}

.page_webdesign dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* オンライン予約システム */

.reserve_section {

}

.reserve_section .function_list div {
    border: 1px solid #a09f9c;
    border-style: solid none solid none;
    padding: 2em;
    margin-right: 16px;
    /*width: calc(33.8% - 16px);*/
    min-height: 12em;
}

.reserve_section .function_list dt {
    text-align: center;
    margin-bottom: 0.5em;
    padding: 100px 0 0 0;
    line-height: 1.4;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 80px 80px;
}

.reserve_section .function_list div:nth-child(3) {
    margin-right: 0;
}

.reserve_section .function_list div:nth-child(1) dt  {
    background-image: url('../images/webdesign_functions_icon_01.svg');
}

.reserve_section .function_list div:nth-child(2) dt  {
    background-image: url('../images/webdesign_functions_icon_02.svg');
}

.reserve_section .function_list div:nth-child(3) dt  {
    background-image: url('../images/webdesign_functions_icon_03.svg');
}

.reserve_section .function_list div:nth-child(4) dt  {
    background-image: url('../images/webdesign_functions_icon_04.svg');
}

.reserve_section .function_list div:nth-child(5) dt  {
    background-image: url('../images/webdesign_functions_icon_05.svg');
}

.reserve_section .function_list dd {
    font-size: 0.9rem;
    margin-left: 0;
}

@media screen and (min-width: 900px) {
    .reserve_section .function_list {
        justify-content: start;
    }

    .reserve_section .function_list div {
        width: calc(33.8% - 16px);
    }
}

/* 飼い主との信頼関係 */

.confidence_section {
    background-color: #fff;
    position: relative;
}

.confidence_section .section_title {
    position: relative;
}

.confidence_section h4 .text {
    padding: 0 0.25em;
    background-color: #fff;
}

.confidence_section .text_area {
    background: rgba(255,255,255,0.85);
    position: relative;
    margin: 0 0 0 auto;
    padding: 1.75em 1.3em;
}

.confidence_section .main_width {
    padding-left : 0;
    padding-right: 0;
}

.confidence_section .text_area * {
    display: flex;
}

.confidence_section .text_area p {
    margin-right: 0;
    z-index: 1;
    font-size: 1.0rem;
}

.confidence_section .bg_image {
    background: url('../images/webdesign_confidence_bg.jpg') no-repeat center center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.confidence_section .bg_image .right {
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
}


@media screen and (min-width: 900px) {
    .confidence_section .text_area {
        padding: 0;
    }

    .confidence_section .bg_image {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1.0) 100%), url('../images/webdesign_confidence_bg.jpg') no-repeat right 45% center;
        width: 40%;
    }

    .confidence_section .text_area {
        background: transparent;
        width: 55%;
    }
}

/* 流れ */

.page_webdesign .flow_section .flow_list li {
    padding: 1em 0 2em 1.5%;
}

.page_webdesign .flow_section .flow_list dl {
    padding: 0 25% 0 0;
    margin-top: 0.5em;
}

.page_webdesign .flow_section .flow_list dl dt {
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 800;
    text-align: left;
}

.page_webdesign .flow_section .flow_list dl dd {
    font-size: 0.8rem;
    line-height: 1.5;
    width: 100%;
}

.page_webdesign .flow_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.page_webdesign .flow_list li {
    list-style: none;
    position: relative;
    background: url('../images/webdesign_flow_arrow_sp.svg') no-repeat right center;
    background-size: auto 80%;
    padding: 0;
    margin: 0 0.5em 0 0;
    width: calc(50% - 1em);
}

.page_webdesign .flow_list li::before {
    display: block;
    font-size: 3.8rem;
    content: "1";
    color: #46bbdd;
    line-height: 1;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 900;
}

.page_webdesign .flow_list li:nth-child(2)::before {content: "2";}
.page_webdesign .flow_list li:nth-child(3)::before {content: "3";}
.page_webdesign .flow_list li:nth-child(4)::before {content: "4";}
.page_webdesign .flow_list li:nth-child(5)::before {content: "5";}
.page_webdesign .flow_list li:nth-child(6)::before {content: "6";}
.page_webdesign .flow_list li:nth-child(7)::before {content: "7";}
.page_webdesign .flow_list li:nth-child(8)::before {content: "8";}
.page_webdesign .flow_list li:nth-child(9)::before {content: "9";}
.page_webdesign .flow_list li:nth-last-child(1) {
    background: none;
}

.page_webdesign .flow_section .flow_list dl {
    justify-content: left;
}

@media screen and (min-width: 900px) {
    .page_webdesign .flow_list li {
        margin-right: 1em;
        background-image: url('../images/webdesign_flow_arrow.svg');
        width: calc(33.3% - 2em);
        background-size: 42px 80%;
    }
}

/* 料金体系 */

.page_webdesign .price_section h4 {
    color: #fff;
}

.page_webdesign .price_section .section_title {
    background: #00a3ce url('../images/webdesign_price_bg.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 3.5em 0 8em 0;
    margin-bottom: -100px;
}

.page_webdesign .price_section .section_title h4 {
    letter-spacing: 0.5em;
}

.page_webdesign .page_webdesign .price_section .plan_list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.page_webdesign .price_section .plan_list div {
    background-color: #fff;
    padding: 2em 2.25em;
    font-size: 0.9rem;
}

.page_webdesign .price_section .plan_list div {
    margin: 0 1em 1em 1em;
}


@media screen and (min-width: 900px) {
    .page_webdesign .price_section .plan_list {
        flex-wrap: nowrap;
    }

    .page_webdesign .price_section .plan_list div {
        margin: 0;
    }

    .page_webdesign .price_section .plan_list div:first-of-type {
        margin-right: 30px;
    }
}

.price_section .plan_list dl {
    display: flex;
}

.price_section .plan_list dt {
    text-align: center;
    font-size: 1.5rem;
    font-family: "Zen Kaku Gothic New", sans-serif;
/*    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;*/
    font-weight: 900;
}

.price_section .production .plan_list dt h5 {
    font-size: 1.5rem;
}

.price_section .plan_list dt .plan_name {
    font-size: 125%;
}

.price_section .plan_list dt .plan_name.template {
    color: #26dcb8;
}

.price_section .plan_list dt .plan_name.original {
    color: #ff2a9d;
}

.price_section .plan_list dd {
    font-size: 0.9rem;
    line-height: 1.4;
}

.price_section .plan_list dd strong {
    display: block;
    text-align: center;
    color: #666666;
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    font-weight: 900;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.price_section .plan_list dd p {
    line-height: 1.55;
    margin-bottom: 2em;
}

.price_section .plan_list dd strong .num {
    color: #ff7800;
    font-size: 180%;
    font-family: "Red Hat Display", sans-serif;
    letter-spacing: 0.04em;
}

.price_section .production .plan_list dd strong {
    font-size: 2.0rem;
}

.price_section .plan_list dd ul {
    width: 17em;
    margin: 0.5em auto;
}

.price_section .plan_list dd li {
    line-height: 1.0;
}

.price_section .services {
    background-color: #fff;
    padding: 1.5em 1.80em;
}

.price_section .services ul {
    margin: 0.5em 0 0 0;
}

.price_section .services li {
    margin: 0;
}

.price_section .contents {
    margin: 0 auto;
    font-size: 0.9rem;
    max-width: 50em;
}

.price_section .contents .group {
    margin: 0 auto 2em auto;
}

.price_section .services .service_list li{
    margin-left: 0.2em;
    line-height: 1.3;
    margin-bottom: 0.75em;
}

.price_section .contents .maintenance {
    background-color: #fff;
    padding: 2em 2em;
}

.price_section .contents .maintenance h5 {
    font-size: 1.3rem;
}

.price_section .contents .maintenance .plan_list div {
    border: 1px solid #a4a4a4;
}

.price_section .contents .maintenance .plan_list dt {
    font-size: 0.8rem;
}

.price_section .contents .maintenance h5 {
    text-align: center;
}


/* 問い合わせ */

.page_webdesign .contact {
    background: #0e2758 url('../images/webdesign_contact_bg.jpg');
    color: #fff;
    background-attachment: fixed;
}

.list_checkmark li {
    background: url('../images/webdesign_icon_check.svg') no-repeat left top;
    background-size: 0.9em;
    line-height: 1.4;
    list-style: none;
    padding-left: 2em;
    margin: 0 auto 0.8em auto;
}

.page_webdesign h5 {
    font-size: 0.9rem;
    margin-bottom: 1.0em;
}

.small {
    font-size: 75%;
}

.page_webdesign .inquiry_btn {
    background-image: url('../images/inquiry_line_white.svg');
}