@charset "UTF-8";
/* CSS Document */

/* ===============================
	main
 =============================== */
body{
     background: #F7F7F8;
}
header{
    background: rgba(0, 104, 167, 1);
}
h3.style001{
    width:720px;
    font-size:32px;
    color:#0068A4;
    border-bottom: 1px solid #0068A4;
    margin: 0 auto 40px auto;
    text-align: center;
    font-weight: bold;
    padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
    h3.style001{
        width:100%;
        font-size:20px;
        margin: 0 auto 30px auto;
        padding-bottom: 5px;
    }
}

/* ===============================
	.visual
 =============================== */

 .petTop .main-visual{
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .petTop .main-visual .bgImage{
     height:100%;
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     z-index: 0;
 }
 .petTop .main-visual .popupImage{
     position: relative;
     z-index: 100;
 }
@media screen and (max-width: 768px) {
    .petTop .main-visual{
        height: auto;
        padding-top: 124.8%;
    }
    .petTop .main-visual .popupImage{
        width:55%;
        position: absolute;
        top:20px;
        left:20px;
    }
    .main-visual > .bgImage img {
        min-width: auto;
    }
}

/* ===============================
	.introArea
 =============================== */

 .petTop .introArea{
     background: #F7F7F8;
     position: relative;
 }
 .petTop .introArea::before{
     content: "";
     width:1080px;
     display: block;
     background: #FFFFFF;
     position: absolute;
     top:-65px;
     left:0;
     right:0;
     bottom:0;
     margin: auto;
     z-index: 40;
    box-shadow: 0 0 10px #CCCCCC;
 }
 .petTop .introArea .innerArea{
     margin-top: -16px;
     position: relative;
     z-index: 60;
     overflow: hidden;
 }
 .petTop .introArea h2{
     width:600px;
     height:32px;
     background: linear-gradient(to right,rgba(0,104,167,0) 0,rgba(0,104,167,1) 30%,rgba(0,104,167,1) 70%,rgba(0,104,167,0) 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     color:#FFFFFF;
     font-size:21px;
     margin: 0 auto 60px auto;
}
.petTop .introArea .innerArea .detailArea{
    width:920px;
    margin: 0 auto 85px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.petTop .introArea .innerArea .detailArea .catchArea{
    width:320px;
    box-sizing: border-box;
    padding-right: 20px;
    text-align: center;
}
.petTop .introArea .innerArea .detailArea .textArea{
    width:600px;
    box-sizing: border-box;
    padding: 15px 30px;
    border-left:1px solid #000000;
}
.petTop .introArea .innerArea .detailArea .textArea .text{
    margin-bottom: 15px;
}
.petTop .introArea .innerArea .detailArea .textArea .comment{
    font-size:12px;
    text-align: right;
}
@media screen and (max-width: 768px) {
 .petTop .introArea{
     padding-bottom: 50px;
 }
 .petTop .introArea::before{
     width:90%;
     top:-30px;
 }
 .petTop .introArea .innerArea{
     margin-top: -30px;
 }
 .petTop .introArea h2{
     width:80%;
     height:auto;
     font-size:16px;
     margin: 0 auto 30px auto;
     text-align: center;
}
.petTop .introArea .innerArea .detailArea{
    width:90%;
    margin: 0 auto 40px auto;
    flex-direction: column;
}
.petTop .introArea .innerArea .detailArea .catchArea{
    width:100%;
    padding-right: 0;
    padding-bottom: 20px;
}
.petTop .introArea .innerArea .detailArea .textArea{
    width:92%;
    border-top:1px solid #000000;
    border-left:0;
    padding: 15px 10px;
}
.petTop .introArea .innerArea .detailArea .textArea .text{
    font-size:14px;
}
}

/* ===============================
	.petTop .eventArea
 =============================== */

.petTop .eventArea{
    background: linear-gradient(to left,#004AA7 0%,#0068D1 100%);
    position: relative;
}
.petTop .eventArea::before{
    content: "";
    width:1080px;
    display: block;
    background: #FFFFFF;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:-50px;
    margin: auto;
    z-index: 40;
    box-shadow: 0 5px 5px #CCCCCC;
 }
.petTop .eventArea .innerArea{
    width:876px;
    margin: 0 auto;
    position: relative;
    z-index: 60;
    padding: 40px 0;
    box-sizing: border-box;
}
.petTop .eventArea .innerArea h2{
    font-size:23px;
    text-align: center;
    margin-bottom: 30px;
}
.petTop .eventArea .innerArea article{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:50px;
    margin-bottom: 20px;
}
.petTop .eventArea .innerArea article a{
    display: block;
    color:#000000;
}
.petTop .eventArea .innerArea article .thumbArea{
    display: block;
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}
.petTop .eventArea .innerArea article .thumbArea img{
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    top:0;
    left:0;
    object-position: 50% 50%;
}
.petTop .eventArea .innerArea article .textArea{
    margin-top: 15px;
}
.petTop .eventArea .innerArea article .textArea h3{
    font-size:14px;
    font-weight: bold;
    margin-bottom: 15px;
}
.petTop .eventArea .innerArea article .textArea ul li{
    font-size:14px;
    font-weight: bold;
    color:#666666;
}
.petTop .eventArea .innerArea .linkBtn{
    width:300px;
    height:30px;
    margin: 30px 0 0 auto;
}
.petTop .eventArea .innerArea .linkBtn a{
    display: flex;
    align-items: center;
    width:100%;
    height:100%;
    position: relative;
    color:#000000;
}
.petTop .eventArea .innerArea .linkBtn a::before{
    content: "";
    background: #666666;
    width:100%;
    height:1px;
    position: absolute;
    bottom:0;
    left:0;
}
.petTop .eventArea .innerArea .linkBtn a::after{
    content: "";
    background: #666666;
    width:20px;
    height:1px;
    position: absolute;
    bottom:5px;
    right:-2px;
    transform: rotate(30deg);
}
@media screen and (max-width: 768px) {
    .petTop .eventArea::before{
        width:90%;
    }
    .petTop .eventArea .innerArea{
        width:256px;
    }
    .petTop .eventArea .innerArea{
        padding-bottom: 40px;
    }
    .petTop .eventArea .innerArea article{
        grid-template-columns: 1fr;
    }
    .petTop .eventArea .innerArea article a:not(:first-child){
        display: none;
    }
    .petTop .eventArea .innerArea .linkBtn{
        width:60px;
        height:20px;
        margin: 20px 0 0 auto;
    }
    .petTop .eventArea .innerArea .linkBtn a {
        font-size: 10px;
    }
    .petTop .eventArea .innerArea .linkBtn a::after{
        content: "";
        width:10px;
        bottom:3px;
        right:-1px;
    }
}

/* ===============================
	.petTop .troubleArea
 =============================== */

 .petTop .troubleArea{
     background: #F7F7F8;
     position: relative;
 }
 .petTop .troubleArea::before{
    content: "";
    width:1080px;
    display: block;
    background: #FFFFFF;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:-50px;
    margin: auto;
    z-index: 40;
    box-shadow: 0 5px 5px #CCCCCC;
 }
.petTop .troubleArea .innerArea{
    width:876px;
    margin: 0 auto;
    position: relative;
    z-index: 60;
    padding: 90px 0;
    box-sizing: border-box;
}
.petTop .troubleArea h2{
     width:100%;
     font-size:42px;
     display: flex;
     justify-content: center;
     align-items: center;
     line-height: 80px;
     color:#0068A7;
     border-top:1px solid #0068A7;
     border-bottom:1px solid #0068A7;
     margin:0 auto 60px auto;
     font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 }
.petTop .troubleArea .contentArea{
    display: grid;
    gap:24px;
}
.petTop .troubleArea .contentArea .contentBox{
    display: flex;
    gap:40px;
}
.petTop .troubleArea .contentArea .contentBox .thumbArea{
    width:400px;
    height:auto;
    position: relative;
}
.petTop .troubleArea .contentArea .contentBox .thumbArea::before{
    content: "";
    display: inline-block;
    padding-top: 56.25%;
}
.petTop .troubleArea .contentArea .contentBox:nth-child(1) .thumbArea::before{
    padding-top: 100%;
}
.petTop .troubleArea .contentArea .contentBox .thumbArea img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: 50%;
    position: absolute;
    top:0;
    left:0;
}
.petTop .troubleArea .contentArea .contentBox .textArea{
    width:calc(100% - 40px - 400px);
    height:auto;
    position: relative;
}
.petTop .troubleArea .contentArea .contentBox .textArea h3{
    font-size:24px;
    color:#0068a7;
    margin-bottom: 35px;
}
.petTop .troubleArea .contentArea .contentBox .textArea .text{
    margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
    .petTop .troubleArea::before{
        width:90%;
    }
    .petTop .troubleArea .innerArea{
        width:80%;
        padding: 40px 0;
    }
    .petTop .troubleArea h2{
        font-size:18px;
        line-height: 40px;
        margin:0 auto 40px auto;
    }
    .petTop .troubleArea .contentArea{
        gap:50px;
    }
    .petTop .troubleArea .contentArea .contentBox{
        display: grid;
        gap:20px;
    }
    .petTop .troubleArea .contentArea .contentBox .thumbArea{
        width:100%;
    }
    .petTop .troubleArea .contentArea .contentBox .thumbArea::before{
        padding-top: 40.540540%;
    }
    .petTop .troubleArea .contentArea .contentBox:nth-child(1) .thumbArea::before{
        padding-top: 40.540540%;
    }
    .petTop .troubleArea .contentArea .contentBox .textArea{
        width:100%;
    }
    .petTop .troubleArea .contentArea .contentBox .textArea h3{
        font-size:18px;
        margin-bottom: 15px;
    }
    .petTop .troubleArea .contentArea .contentBox .textArea .text{
        margin-bottom: 0px;
    }
}

/* ===============================
	.petTop .pointArea
 =============================== */

 .petTop .pointArea{
     background: #F7F7F8;
     position: relative;
 }
 .petTop .pointArea::before{
    content: "";
    width:1080px;
    display: block;
    background: #FFFFFF;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:-50px;
    margin: auto;
    z-index: 40;
    box-shadow: 0 5px 5px #CCCCCC;
 }
.petTop .pointArea .innerArea{
    width:876px;
    margin: 0 auto;
    position: relative;
    z-index: 60;
    padding: 90px 0;
    box-sizing: border-box;
}
.petTop .pointArea .innerArea h2{
    margin: 0 auto 20px auto;
    text-align: center;
}
.petTop .pointArea .innerArea ul{
    display: flex;
    justify-content: center;
    gap:40px;
}
.petTop .pointArea .innerArea ul li{
    width:190px;
    text-align: center;
}
.petTop .pointArea .innerArea ul li h3{
    font-size:22px;
    line-height: 1.25;
    margin-top: 25px;
}
.petTop .pointArea .innerArea h4{
    font-size:36px;
    font-weight: bold;
    font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color:#0068a7;
    margin-bottom: 50px;
    text-align: center;
}
.petTop .pointArea .innerArea .picArea{
    width:872px;
    margin: 0 auto;
    position: relative;
}
.petTop .pointArea .innerArea .picArea .img001{
    position: absolute;
    top:-50px;
    left:-50px;
}
.petTop .pointArea .innerArea .picArea .img002{
    position: absolute;
    top:-50px;
    right:-50px;
}
.petTop .pointArea .innerArea .linkBtn{
    width:178px;
    height:178px;
    display: block;
    margin: 70px auto 0 auto;
}
@media screen and (max-width: 768px) {
    .petTop .pointArea::before{
        width:90%;
    }
    .petTop .pointArea .innerArea{
        width:80%;
        padding: 40px 0;
    }
    .petTop .pointArea .innerArea ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:20px;
    }
    .petTop .pointArea .innerArea ul li{
        width:calc(100% - 10px);
    }
    .petTop .pointArea .innerArea ul li h3{
        font-size:12px;
        margin-top: 15px;
    }
    .petTop .pointArea .innerArea h4{
        font-size:18px;
        margin-bottom: 40px;
    }
    .petTop .pointArea .innerArea .picArea{
        width:100%;
    }
    .petTop .pointArea .innerArea .picArea .img001{
        width:30%;
        top:-20px;
        left:-20px;
    }
    .petTop .pointArea .innerArea .picArea .img002{
        width:30%;
        top:-20px;
        right:-20px;
    }
    .petTop .pointArea .innerArea .linkBtn{
        margin: 50px auto 0 auto;
    }
}

/* ===============================
	.petTop .caseArea
 =============================== */

.petTop .caseArea{
    position: relative;
    padding: 40px 0 50px 0;
}
.petTop .caseArea::before{
    content: "";
    width:100%;
    display: block;
    background: linear-gradient(to left,#004AA7 0%,#0068D1 100%);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0px;
    margin: auto;
    z-index: 40;
}
.petTop .caseArea .innerArea{
    width:100%;
    margin: 0 auto;
    position: relative;
    display: grid;
    gap:75px;
    z-index: 60;
}
.petTop .caseArea .innerArea .contentBox{
    width: 100%;
    position: relative;
}
.petTop .caseArea .innerArea .thumbArea{
    width:52%;
    height:540px;
    margin: 0 auto 0 0;
}
.petTop .caseArea .innerArea .contentBox:nth-child(even) .thumbArea{
    margin: 0 0 0 auto;
}
.petTop .caseArea .innerArea .thumbArea img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.petTop .caseArea .innerArea .textArea{
    width:440px;
    height:400px;
    position: absolute;
    left:50%;
    bottom:40px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 30px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.petTop .caseArea .innerArea .contentBox:nth-child(even) .textArea{
    left:auto;
    right:50%;
}
.petTop .caseArea .innerArea .textArea h2{
    font-size:28px;
    line-height: 1.3;
    margin-bottom: 20px;
}
.petTop .caseArea .innerArea .textArea h2 span{
    font-size:18px;
    display: block;
    margin-bottom: 20px;
}
.petTop .caseArea .innerArea .textArea .text{
    margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
.petTop .caseArea{
    padding: 20px 0 30px 0;
}
.petTop .caseArea .innerArea{
    gap:30px;
}
.petTop .caseArea .innerArea .thumbArea{
    width:100%;
    height:auto;
    padding-top: 66.6666%;
    position: relative;
    margin: 0 auto;
}
.petTop .caseArea .innerArea .thumbArea img{
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    top:0;
    left:0;
}
.petTop .caseArea .innerArea .contentBox:nth-child(even) .thumbArea{
    margin: 0 auto;
}
.petTop .caseArea .innerArea .textArea{
    width:100%;
    height:auto;
    position: static;
}
.petTop .caseArea .innerArea .textArea h2{
    font-size:20px;
}
.petTop .caseArea .innerArea .textArea h2 span{
    font-size:12px;
    margin-bottom: 15px;
}
    .petTop .caseArea .innerArea .slick-dots{
        display: flex;
        justify-content: center;
        gap:12px;
    }
    .petTop .caseArea .innerArea .slick-dots button{
        width:12px;
        height:12px;
        border-radius: 50%;
        text-indent: -9999px;
        overflow: hidden;
        border:none;
        box-shadow: none;
        background: #808080;
    }
    .petTop .caseArea .innerArea .slick-dots .slick-active button{
        background: #FFFFFF;
    }
}

/* ===============================
	.petTop .pawsArea
 =============================== */

 .petTop .pawsArea{
     background: #F7F7F8;
     position: relative;
 }
 .petTop .pawsArea::before{
    content: "";
    width:1080px;
    display: block;
    background: #FFFFFF;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    z-index: 40;
    box-shadow: 0 5px 5px #CCCCCC;
 }
.petTop .pawsArea .innerArea{
    width:960px;
    margin: 0 auto;
    position: relative;
    z-index: 60;
    padding: 90px 0;
    box-sizing: border-box;
}
.petTop .pawsArea .innerArea h2{
    font-size:36px;
    font-weight: bold;
    font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color:#0068a7;
    margin-bottom: 50px;
    text-align: center;
}
.petTop .pawsArea .innerArea .picArea{
    width:960px;
    margin: 0 auto;
    position: relative;
}
.petTop .pawsArea .innerArea .pawsBtn{
    width:400px;
    height:72px;
    margin: 60px auto 0 auto;
}
.petTop .pawsArea .innerArea .pawsBtn a{
    font-size:18px;
    color:#FFFFFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    gap:10px;
    border-radius: 16px;
    background: linear-gradient(to left,#ff6800 0%,#ff4a00 100%);
}
.petTop .pawsArea .innerArea .pawsBtn a .line{
    width:304px;
    height:1px;
    background: #FFFFFF;
    position: relative;
}
.petTop .pawsArea .innerArea .pawsBtn a .line::after{
    content: "";
    background: #FFFFFF;
    position: absolute;
    top: -6px;
    right: -2px;
    width:24px;
    height:1px;
    transform: rotate(30deg);
}
@media screen and (max-width: 768px) {
 .petTop .pawsArea::before{
    width:90%;
 }
.petTop .pawsArea .innerArea{
    width:80%;
    padding: 40px 0;
}
.petTop .pawsArea .innerArea h2{
    font-size:20px;
    margin-bottom: 30px;
}
.petTop .pawsArea .innerArea .picArea{
    width:100%;
}
.petTop .pawsArea .innerArea .pawsBtn{
    width:240px;
    height:60px;
    margin: 40px auto 0 auto;
}
.petTop .pawsArea .innerArea .pawsBtn a{
    font-size:14px;
}
.petTop .pawsArea .innerArea .pawsBtn a .line{
    width:200px;
}
.petTop .pawsArea .innerArea .pawsBtn a .line::after{
    top: -3px;
    right: -1px;
    width:12px;
}
}

/* ===============================
	.petTop .buttonArea
 =============================== */

 .petTop .buttonArea{
     width:180px;
     text-align: center;
     margin: 70px auto 90px auto;
 }
@media screen and (max-width: 768px) {
 .petTop .buttonArea{
     margin: 40px auto 40px auto;
 }
}

/* ===============================
	floatBnr
 =============================== */
.floatBnr {
    width:210px;
    height:210px;
    position: fixed;
    right:20px;
    bottom:20px;
    z-index: 9999;
}
.floatBnr .close{
    width:40px;
    height:40px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    position: absolute;
    top:0;
    left:0;
    transform: translate(-50%,-50%);
    cursor: pointer;
    z-index: 9999;
}
.floatBnr .close span:nth-child(1){
    width:20px;
    height:2px;
    background: #000000;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    transform: rotate(45deg);
}
.floatBnr .close span:nth-child(2){
    width:20px;
    height:2px;
    background: #000000;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    transform: rotate(-45deg);
}
@media screen and (max-width: 640px) {
    .floatBnr {
        width:140px;
        height:140px;
        bottom: 70px;
    }
}