@charset "UTF-8";
/* メインビジュアル */
#main #page_hed.hed_newfamilie {
    background: url(../img/newfamilie_mv_bg.jpg) no-repeat center center;
    background-size: cover;
}
#main #page_hed.hed_newfamilie .mv_box {
    position: relative;
    max-width: 1844px;
    margin: 0 auto;
    padding: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#main #page_hed.hed_newfamilie .mv_box .newfamilie_h_box,
#main #page_hed.hed_newfamilie .mv_box .newfamilie_img_box {
    width: 50%;
}
#main #page_hed.hed_newfamilie .mv_box h1 {
    padding: 0;
    color: #45382f;
}
#main #page_hed.hed_newfamilie .mv_box h1 span {
    margin-right: 20px;
    padding: 0 13px 3px 13px;
    color: #fff;
    border: 5px solid #fff;
    background-color: #5c9807;
}
#main #page_hed.hed_newfamilie .mv_box img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#main #page_hed.hed_newfamilie p {
    position: absolute;
    margin-bottom: 0;
    bottom: 30px;
    line-height: 1.0;
    font-size: 7em;
    opacity:0.2;
}
/* メインビジュアルここまで */

/* 追従バナー */
#newfamilie_followbanner a img {
    position: fixed;
    z-index: 99999;
    right: 0;
}
/* 追従バナーここまで */

/* コンセプト */
#newfamilie_concept #concept_box {
    position: relative;
}
#newfamilie_concept #concept_box .box {
    margin-bottom: 200px;
    padding: 0 4.5em 50px;
    border-radius: 20px;
}
#newfamilie_concept #concept_box .box h3 {
    position: relative;
    margin-bottom: 1.5em;
    padding: 50px 10px;
    min-width: 120px;
    max-width: 100%;
    margin-bottom: 50px;
    text-align: center;
    font-size: 171.428%;
    line-height: 2;
    background-color: #fff;
}
#newfamilie_concept #concept_box .box h3::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 25px solid transparent;
    border-top: 30px solid #fff;
}
#newfamilie_concept #concept_box .box h3 span.newfamilie_concept_emphasis {
    color: #a87b00;
}
#newfamilie_concept #concept_box .box h3 span.emphasis_dot {
    padding-top: 0.2em;
    color: #a87b00;
    background-position: top left 1px;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(0.14em 0.14em at center center,#a87b00,#a87b00 100%,transparent);
}

#newfamilie_concept #concept_box .box h3 span.newfamilie_concept_emphasis {
	background: linear-gradient(#e2ca02, #e2ca02) 0 100%/0 13px no-repeat;
	transition: background 3s;
	text-decoration: none;
}

#newfamilie_concept #concept_box .box h3 span.newfamilie_concept_emphasis-after {
	background-size: 100% 13px;
}

#newfamilie_concept #concept_box .box {
    margin-bottom: 0;
    padding-bottom: 0;
}
#newfamilie_concept #about_box {
    margin-top: -170px;
    padding: 200px 0;
    text-align: center;
    background-color: #81c027;
    background-image: url(../img/newfamilie_concept_bg.png);
    background-repeat:  no-repeat;
    background-position: bottom;
}
#newfamilie_concept #about_box h4 {
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 15px;
    font-size: 171.428%;
    color: #fff;
}
#newfamilie_concept #about_box h4::after {
    content: '';
	display: block;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: -10px;
	width: 5%;
	height: 5px;
	background-color: #fff;
}
#newfamilie_concept #about_box p {
    margin-bottom: 0;
    color: #fff;
    font-size: 140%;
}
#newfamilie_concept #concept_box p.newfamilie_dog_illust {
    position: absolute;
    z-index: 50;
    right: 0;
    top: 12em;
}
/* コンセプトここまで */

/* ギャラリー */
#newfamilie_gallery .gallery_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#newfamilie_gallery .gallery_box .left_box {
    width: 641px;
}
#newfamilie_gallery .gallery_box .left_box figure:first-child,
#newfamilie_gallery .gallery_box .right_box figure:first-child {
    margin-bottom: 20px;
}
#newfamilie_gallery .gallery_box .left_box img,
#newfamilie_gallery .gallery_box .right_box img {
    object-fit: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img {
    display: flex;
    width: 620px;
    justify-content: space-between;
}
#newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img .current img{
    border: 5px solid #7ebd25;
}
#newfamilie_gallery .gallery_box .right_box img:hover {
    cursor: pointer;
}
.sub-img li.current img {
    border: 3px solid #7ebd25;
    transition: border .5s;
}
#newfamilie_gallery .newfamilie_gallery_btn p.newfamilie_btn {
    margin-top: 80px;
}
#newfamilie_gallery .newfamilie_gallery_btn p.newfamilie_btn a::after {
    background: #45382f;
}
#newfamilie_gallery .newfamilie_gallery_btn p.newfamilie_btn a:before {
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}
#newfamilie_gallery .newfamilie_gallery_btn p.newfamilie_btn a:hover span {
    color: #fff;
}
/* ギャラリーここまで */

/* 資料請求 */
#newfamilie_documentrequest .documentrequest_box {
    position: relative;
    z-index: 10;
    padding: 100px 0;
    background-color: #fff;
    background-image: url(../img/newfamilie_documentrequest_bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
}
#newfamilie_documentrequest .documentrequest_box .txt_box {
    margin-bottom: 50px;
}
#newfamilie_documentrequest .documentrequest_box p {
    text-align: center;
}
#newfamilie_documentrequest .documentrequest_box p:last-child {
    margin-bottom: 0;
}
#newfamilie_documentrequest .documentrequest_box .btn_box {
    padding: 80px 0;
    border: 3px solid #7ebd25;
    background-color: rgba(255, 255, 255, 0.9);
}
#newfamilie_documentrequest .documentrequest_box .btn_box p.fukidasi {
    display: flex;
	justify-content: center;
	align-items: center;
    margin-bottom: 30px;
	font-size: 26px;
	text-align: center;
}
#newfamilie_documentrequest .documentrequest_box .btn_box p.fukidasi::before,
#newfamilie_documentrequest .documentrequest_box .btn_box p.fukidasi::after {
    content: '';
	width: 3px;
	height: 40px;
	background-color: #45382f;
}
#newfamilie_documentrequest .documentrequest_box .btn_box p.fukidasi::before {
    margin-right: 30px;
	transform: rotate(-35deg)
}
#newfamilie_documentrequest .documentrequest_box .btn_box p.fukidasi::after {
    margin-left: 30px;
	transform: rotate(35deg)
}
#newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_flex_box {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    min-width: 530px;
}
#newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_tel,
#newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_contact {
    width: 47%;
    padding: 20px 0;
    background-color: #7ebd25;
    color: #fff;
    font-size: 26px;
    min-width: 235px;
}
#newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_tel a,
p.newfamilie_btn a {
    text-decoration: none;
}
.newfamilie_tel p:first-child,
.newfamilie_contact p:first-child {
    margin-bottom: 15px;
}
/* 資料請求ここまで */

/* ボタン(共通) */
p.newfamilie_btn a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 225px;
    padding-right: 0 0 0 25px;
    transition: 0.3s ease-in-out;
}
p.newfamilie_btn a:before,
p.newfamilie_btn a::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
}
p.newfamilie_btn a:before {
    width: 0.5rem;
    height: 0.5rem;
    left: 1.1rem;
    border-top: solid 2px #7ebd25;
    border-right: solid 2px #7ebd25;
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
}
p.newfamilie_btn a::after {
    left: 0;
    background: #fff;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 4rem;
    transform: translateY(-50%);
    transition: all 0.5s;
}
p.newfamilie_btn a span {
    position: relative;
    transition: all 0.3s;
    z-index: 3;
}
p.newfamilie_btn a:hover span {
    color: #7ebd25;
}
p.newfamilie_btn a:hover::before {
    left: 2rem;
}
p.newfamilie_btn a:hover::after {
    right: 0;
    width: 100%;
}

/* レスポンシブ */
@media screen and (min-width: 451px) and (max-width: 560px) {
    .newfamilie_h_box .newfamilie_mv_h_br {
        display: none;
    }
}
@media screen and (max-width: 560px) {
    #newfamilie_followbanner a img {
        width: 15%;
    }
    .newfamilie_h_box {
        padding: 50px 0;
    }
    #main #page_hed.hed_newfamilie .mv_box h1 {
        font-size: 280%;
    }
    #main #page_hed.hed_newfamilie .mv_box h1 span {
        margin-right: 10px;
        padding: 0 5px 0 5px;
        border: 3px solid #fff;
    }
    #newfamilie_concept #concept_box .box h3 {
        font-size: 130%;
        padding: 30px 10px;
    }
    #newfamilie_concept #concept_box .box h3::before {
        top: 90%;
    }
    #newfamilie_concept #concept_box p.newfamilie_dog_illust {
        top: 9em;
        right: -30px;
    }
    #newfamilie_concept #concept_box p.newfamilie_dog_illust img {
        width: 80%;
    }
    #newfamilie_concept #concept_box .box h3 span.newfamilie_concept_emphasis {
        background: linear-gradient(#e2ca02, #e2ca02) 0 100%/0 10px no-repeat;
    }
    #newfamilie_concept #concept_box .box h3 span.newfamilie_concept_emphasis-after{
        background-size: 100% 10px;
    }
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.sp figure img {
        height: 70px;
    }
}
@media screen and (min-width: 561px) and (max-width: 1200px) {
    .newfamilie_h_box {
        padding: 100px 0;
    }
}
@media screen and (min-width:561px) and (max-width: 800px) {
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.sp figure img {
        height: 120px;
    }
}
@media screen and (min-width:801px) and (max-width: 1350px) {
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.sp figure img {
        height: 180px;
    }
}

@media screen and (max-width: 570px) {
    #newfamilie_concept #about_box {
        margin-top: -110px;
        padding: 150px 0;
    }
    #newfamilie_gallery .newfamilie_gallery_btn p.newfamilie_btn {
        margin-top: 2rem;
    }
    #newfamilie_documentrequest .documentrequest_box .btn_box p.fukidasi {
        font-size: 24px;
    }
    #newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_flex_box {
        width: 40%;
        min-width: 290px;
    }
    #newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_tel,
    #newfamilie_documentrequest .documentrequest_box .btn_box .newfamilie_contact {
        width: 20%;
        min-width: 140px;
    }
    #newfamilie_documentrequest .newfamilie_flex_box p:last-child {
        font-size: 18px;
    }
    .newfamilie_contact p.newfamilie_btn a:before {
        left: 0.85rem;
        top: 0.9rem;
        width: 0.4rem;
        height: 0.4rem;
    }
    .newfamilie_contact p.newfamilie_btn a::after {
        left: 0.5rem;
        top: 0.9rem;
        width: 1.4rem;
        height: 1.4rem;;
    }
    .newfamilie_contact p.newfamilie_btn a:hover::before {
        left: 1.5rem;
    }
    .newfamilie_contact p.newfamilie_btn a:hover::after {
        width: 90%;
    }
}
@media screen and (max-width: 980px) {
    #main #page_hed.hed_newfamilie p.pc {
        display: none;
    }
    #newfamilie_concept #concept_box .box {
        padding: 0;
    }
    #newfamilie_followbanner a img {
        bottom: 30px;
    }
}
@media screen and (min-width: 981px) {
    #main #page_hed.hed_newfamilie p.sp {
        display: none;
    }
    #newfamilie_followbanner a img {
        top: 420px;
        width: 70px;
    }
}
@media screen and (max-width:1200px) {
    #main #page_hed.hed_newfamilie {
        background: none;
    }
    #main #page_hed.hed_newfamilie .mv_box {
        display: block;
    }
    #main #page_hed.hed_newfamilie .mv_box .newfamilie_h_box,
    #main #page_hed.hed_newfamilie .mv_box .newfamilie_img_box {
        width: 100%;
    }
    .newfamilie_h_box {
        position: relative;
        background-color: #81c027;
    }
    #main #page_hed.hed_newfamilie p {
        width: 100%;
        bottom: 10px;
        line-height: 1;
        font-size: 5em;
        text-align: center;
    }
    #main #page_hed.hed_newfamilie p .newfamilie_mv_p_br {
        display: none;
    }
    #main #page_hed.hed_newfamilie .mv_box .newfamilie_img_box {
        padding: 30px 0;
        text-align: center;
        background-color: #fff;
    }
    #main #page_hed.hed_newfamilie .mv_box {
        padding: 0;
    }
    #main #page_hed.hed_newfamilie .mv_box img {
        width: 90%;
    }
}
@media screen and (min-width:1201px) and (max-width:1920px) {
    #main #page_hed.hed_newfamilie p {
        line-height: 1;
        font-size: 5em;
    }
}
@media screen and (max-width: 1350px) {
    #newfamilie_gallery .gallery_box {
        display: block;
    }
    #newfamilie_gallery .gallery_box .left_box,
    #newfamilie_gallery .gallery_box .right_box {
        width: 100%;
    }
    #newfamilie_gallery .gallery_box .left_box img {
        width: 100%;
        height: 100vw;
    }
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img {
        width: 100%;
    }
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.sp figure {
        width: 24%;
    }
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.sp figure img {
        width: 100%;
    }
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.pc {
        display: none;
    }
}
@media screen and (min-width: 1351px) {
    #newfamilie_gallery .gallery_box .right_box .sub-img.js-sub-img.sp {
        display: none;
    }
}
@media screen and (min-width:1921px) {
    #main #page_hed.hed_newfamilie .mv_box {
        padding: 250px 80px;
    }
    #main #page_hed.hed_newfamilie .mv_box .newfamilie_h_box {
        width: 46%;
    }
    #main #page_hed.hed_newfamilie .mv_box .newfamilie_img_box {
        width: 54%;
    }
    #main #page_hed.hed_newfamilie .mv_box .newfamilie_img_box {
        position: absolute;
        right: 0;
    }
    .newfamilie_h_box .newfamilie_mv_h_br {
        display: none;
    }
}
/* Safariのみ */
::-webkit-full-page-media, :future, :root #newfamilie_concept #concept_box .box h3 span.emphasis_dot{
    display: none;
}