/*
Author: Sofnet Solutions
*/

@font-face {
  font-display: swap;
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  src: url('../../common/fonts/zen-kaku-gothic-new-v18-japanese-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  src: url('../../common/fonts/zen-kaku-gothic-new-v18-japanese-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  src: url('../../common/fonts/zen-kaku-gothic-new-v18-japanese-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../../common/fonts/zen-maru-gothic-v19-japanese-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 500;
  src: url('../../common/fonts/zen-maru-gothic-v19-japanese-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('../../common/fonts/zen-maru-gothic-v19-japanese-700.woff2') format('woff2');
}


/* =============================================================
 common
============================================================= */
body{
    font-family: "Zen Kaku Gothic New", sans-serif;
    background: url("../images/petbuzzfesta/img_pattern_bg_petbuzzfesta.jpg") #fff7f7 repeat top center / 128px 127px;
    /*background: #fff7f7;*/
    font-weight: 500;
}

a{color:#f16c8a;}
a:hover{color:#ffe97d;}

.fCChange{color: #f16c8a;}

.cmnTtl_1{
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    color: #f16c8a;
}

.cmnTtl_2 {
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    border-bottom-color: #7397c7;
    color: #7397c7;
    text-align: left;
}

.ribbonTxtArea .ribbonTxt > span{
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.cmnBtn_1{background-color: #f16c8a;}

.cmnBtn_3/*オリジナルカレンダーボタン*/{
	border-color: #005239;
	color: #005239;
}

.cmnBtn_3.arrow::after{border-left-color: #005239;}

.cmnBtn_3:hover {
    border-color: #ffad51;
    color: #ffad51;
}

.cmnBtn_3.arrow:hover::after {border-left-color: #ffad51;}

.cmnTbl th {
    background: #7397c7;
}

.cmnTbl tr:first-child th {
    border-top-color: #7397c7;
}

.cmnTbl tr:last-child th {
    border-bottom-color: #7397c7;
}

.cmnTbl td{border-color: #77869b;}

.mvArea .topTxtArea .txtWrap{font-family: "Zen Kaku Gothic New", sans-serif;}

.benefitsBalloon{background-color: #f16c8a;}
.benefitsBalloon::after{border-top-color: #f16c8a;}
.limitedBenefitsTtl{font-family: "Zen Kaku Gothic New", sans-serif;}

.benefitsArea .ttl > span {font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;}

.balloonDoubleTtl > span{font-family: "Zen Kaku Gothic New", sans-serif;}

.circleTxt {background-color: #f58da5;}

.ribbonTxtArea .ribbonTxt {
    background-color: #7397c7;
}

.ribbonTxtArea .ribbonTxt::after{
    border-color: #7397c7;
    border-right-color: transparent;
}

/* =============================================================
 style
============================================================= */
.slick-slider{
    width: 360px;
    margin-left:-180px;
}

.slick-initialized .slick-slide{
    height: 540px;
}

.slick-arrow.slick-prev {
    left: -50px;
}

.slick-arrow.slick-next {
    right: -50px;
}

.dot-class {
    padding: 0;
}

.dot-class .slick-active button {
    background-color: #f58da5;
}

@media only screen and (max-width:640px){
    .slick-slider{
        width: 240px;
        margin-left:-120px;
    }

    .slick-initialized .slick-slide{
        height: 360px;
    }
}

.twoClm.spaceSmall{margin-top: -12px;}

.twoClm.spaceSmall .clm{
    width: 474px;
    margin-top: 12px;
}

@media only screen and (max-width: 640px) {
    .twoClm.spaceSmall{margin-top: -8px;}

    .twoClm.spaceSmall .clm{
        width: calc(50% - 4px);
        margin-top: 8px;
    }
}

.mainTtl{
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    margin-bottom: 30px;
    font-size: 60px;
    color: #f16c8a;
    transform: rotate(-3deg);
}

.addLineCnt{
    text-align: center;
}

.addLineCnt .addTxt{
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    padding: 0 25px;
}

.addLineCnt .addTxt::before,
.addLineCnt .addTxt::after{
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 18px;
    top: 9px;
    background-color: #333;
}

.addLineCnt .addTxt::before{
    left: 5px;
    transform: rotate(-30deg);
}

.addLineCnt .addTxt::after{
    right: 5px;
    transform: rotate(30deg);
}

.addLineCnt .addBtn{
    display: block;
    width: 139px;
    margin: 0 auto;
    transition: opacity .3s;
}

.addLineCnt .addBtn:hover{
    opacity: .8;
}

@media only screen and (max-width:640px){
    .mainTtl{
        margin-bottom: 20px;
        font-size: 32px;
    }

    .campaignInfoWrap{
        width: 100%;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    .campaignInfoWrap > .ttl{
        padding: 8px 0;
        font-size: 16px;
    }

    .campaignInfoWrap .txtArea{
        padding: 15px 20px 20px;
    }

    .campaignInfoWrap .txtArea .cnt{
        display: block;
    }

    .campaignInfoWrap .txtArea .cnt .campaignTxt{
        width: 100%;
    }

    .campaignInfoWrap .txtArea .cnt .campaignImg{
        width: 100%;
        max-width: 300px;
        margin: 15px auto 0;
    }

    .addLineCnt .addTxt{
        margin-bottom: 6px;
        padding: 0 20px;
    }

    .addLineCnt .addTxt::before,
    .addLineCnt .addTxt::after{
        width: 1px;
        height: 16px;
        top: 6px;
    }

    .addLineCnt .addBtn{
        width: 125px;
    }
}

/* anchorLinks
------------------------------------------------------- */
.bdrAnchorLinks{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -12px 0 40px;
    text-align: center;
}

.bdrAnchorLinks li{
    display: inline-block;
    margin: 14px 7px 0;
}

.bdrAnchorLinks li a{
    position: relative;
    display: block;
    padding: 8px 30px 8px 20px;
    min-width: 120px;
    box-sizing: border-box;
    border: 1px solid #7397c7;
    background-color: #fff;
    color: #333;
    transition: all ease-in-out .2s;
}

.bdrAnchorLinks li a:hover{
    color: #fff;
    background-color: #7397c7;
}

.bdrAnchorLinks li a::before{
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: 10px;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-top: 8px solid #7397c7;
    transition: border ease-in-out .2s
}

.bdrAnchorLinks li a:hover::before{
    border-top-color: #fff;
}

@media only screen and (max-width:640px){
    .bdrAnchorLinks{
        margin: -10px 0 20px;
    }

    .bdrAnchorLinks li{
        margin: 10px 0 0 10px;
        width: calc(50% - 5px);
        max-width: auto;
    }

    .bdrAnchorLinks li:nth-child(2n-1){margin-left: 0;}

    .bdrAnchorLinks li a{
        padding: 5px 20px 5px 10px;
    }

    .bdrAnchorLinks li a::before{
        top: calc(50% - 2px);
        right: 10px;
        border-width: 4px;
        border-top-width: 6px;
    }
}

/* =============================================================
 day-petphoto（申し込みフォーム）
============================================================= */
.petphoto.day-calendar .mtssb-timetable-date{
	background-color: #7397c7;
}

.petphoto.day-calendar .mtssb-timetable-link .day-left{
	background-color: #eff6ff;
}

/*最初のtr（「時間」「予約」の小見出し）は非表示済みのため、非表示指定は2行目から　※最後も＋1の数にする*/
#joinPart_1 .petphoto.day-calendar .mtssb-timetable-link tbody tr:nth-child(n+2):nth-child(-n+20),
#joinPart_2 .petphoto.day-calendar .mtssb-timetable-link tbody tr:nth-child(n+17):nth-child(-n+31),
#joinPart_3 .petphoto.day-calendar .mtssb-timetable-link tbody tr:nth-child(n+28):nth-child(-n+43){display: none;}