@charset "shift_jis";

/* ���Z�b�gCSS
================================ */

#summerfes *,
#summerfes *::before,
#summerfes *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
#summerfes h1,
#summerfes h2,
#summerfes h3,
#summerfes h4,
#summerfes h5,
#summerfes h6,
#summerfes ul,
#summerfes ol,
#summerfes dl,
#summerfes li,
#summerfes dt,
#summerfes dd,
#summerfes p,
#summerfes div,
#summerfes span,
#summerfes img,
#summerfes a,
#summerfes table,
#summerfes tr,
#summerfes th,
#summerfes td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /* vertical-align: baseline; */
}

#summerfes header,
#summerfes footer,
#summerfes nav,
#summerfes section,
#summerfes article,
#summerfes main,
#summerfes aside,
#summerfes figure,
#summerfes figcaption {
    display: block;
}

#summerfes ol,
#summerfes ul,
#summerfes li {
    list-style: none;
    list-style-type: none;
}

#summerfes img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

#summerfes a {
    color: inherit;
    text-decoration: none;
    transition: 0.2s;
    position: relative;
}

#summerfes a:hover{
    opacity: 0.7;
}

/* ��������lj�
================================ */
body {
    background-color: #2fd0f3;
}

#summerfes {
    width: 1280px;
    margin: 0 auto;
    font-size: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: #222222;
    background-attachment: fixed;
    background-size: 100%;
    background-position: bottom;


}

#summerfes .pc_none {
    display: none;
}

#summerfes .inner {
    max-width: 900px;
    margin: 3% auto 0 auto;
    padding: 0% 6% 1% 6%;
    background: #ffffffe8;
    box-shadow: 0 0 10px #80bccc;
}


/* ���� ���o��
================================ */
#summerfes h2 {
    font-size: 40px;
    text-align: center;
    color: #2d2d2d;
    padding: 5% 0 3% 0;
}

#summerfes h3 {
    font-size: 40px;
    text-align: center;
    color: #2d2d2d;
    padding:2% 0;
}

#summerfes .h_img{/*���o���摜�̎�*/
    padding:0 0;
}

#summerfes p{
    color: #2d2d2d;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    padding:1% 0;
}

/* ���� �J����
================================ */
#summerfes ul[class^="col_"]{
    display: flex;
    flex-wrap: wrap;
    gap: 11px 3%;
}

#summerfes ul.col_1 > li{
    width:100%;
}

#summerfes ul.col_2 > li{
    width: calc(calc(100% - 3%) / 2);
}

#summerfes ul.col_3 > li{
    width: calc(calc(100% - 6%) / 3);
}

#summerfes ul.col_4 > li{
    width: calc(calc(100% - 3%) / 4);
}

#summerfes ul.col_5 > li{
    width: calc(calc(100% - 4%) / 5);
}
#summerfes ul.col_6 > li{
    width: calc(calc(100% - 20%) / 6);
    margin: 0 auto;
    margin-bottom: 5%;
}

#summerfes ul.col_6{
    width: 90%;
    margin: 0 auto;
}



/*section side_anchor �E�Œ�̃A���J�[
================================ */
#summerfes .side_anchor{
    position: fixed;
    top:10%;
    right: 0;
    max-width: 200px;
    width: 12vw;
    z-index: 99;
    opacity: 0;
    transition: 0.5s;
    border: solid 1px #fae17c;
}

#summerfes .side_anchor.on{
    opacity: 1;
}


#summerfes .side_anchor ul li{
    width: 100%;
    border-bottom: solid 2px #c5a634;

}

#summerfes .side_anchor ul li:last-child{
    border-bottom: 0;
}

#summerfes .side_anchor ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000;
    background-color: #fae17c;
    height: 70px;
    padding-right: 3%;
    font-size: min(1.2vw,18px);
    font-weight: 600;
    transition: 0.2s;
}

#summerfes .side_anchor ul li a:hover{
    color: #222;
    background-color: #fff;
    opacity: 1;
}

#summerfes .side_anchor ul li a::after{
    position: absolute;
    font-family: 'Material Icons';
    content: 'expand_more';
    transform: translate(50%,-50%);
    top:50%;
    right: 10%;
}

#summerfes .side_anchor ul li:last-child a::after{
    font-family: 'Material Icons';
    content: '';
}



/* --------------------------

    �Ŕ�

------------------------------*/
#summerfes .sozai-1{
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587804/image/summerfes/map_tent.png);
    background-repeat: repeat-x;
    background-size: 80% auto;
    padding: 4% 0;
    background-color:#f9fbdb;
    }


/* --------------------------

    �R���e���c

------------------------------*/
.content{
    width: 100%;
    background-color: #f9fbdb;
}

/*�}�b�v�b�A���J�[����
================== */
.anchor{
    margin-bottom: 5%;
}
#summerfes .map{
    width: 960px;
    margin: 0 auto !important;
}
#summerfes table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ���ւ��J�E���g�_�E��
======================= */
#summerfes .countdown{
    padding: 0 0;
    margin: 2% auto 1.5%;
    text-align: center;
    font-weight: 600;
    width: 100%;
    color: #e42157;
    flex-direction: column;
    align-items: center;
}
#summerfes .countdown p{
    font-size: 2.4vw;
    font-weight: 500;
    background: #e42157;
    width: 600px;
    margin: 0 auto -0.2%;
    color: #fff;
    border-radius: 50px;
}
#summerfes .countdown p.count_date{
    font-size:2vw;
    margin: 0 auto -0.2%;
    color: #e42157;
    background: none;
    width: 960px;
}
#summerfes .countdown span:nth-of-type(odd) {
    font-family: Century Gothic, sans-serif;
    font-size: 6.5vw;
}
#summerfes .countdown span:nth-of-type(even){
    font-size: 2.4vw;
    color: #0f0f0f;
    margin-left: 0.3%;
}

/*section item_box_nomal �ʏ�A�C�e��
================================ */
#summerfes .item_box_nomal{
    width: 960px;
    margin: 0 auto;
    margin-bottom: 7%;
}

#summerfes .item_box_nomal h3{
    padding-bottom: 0;
}

#summerfes .item_box_nomal ul{
    padding:2%;
    background-color: #fff;
}

#summerfes .medama_item{/*���ڋʃA�C�e��*/
    background-color: #f2bcbc;
}

#summerfes .osusume_item{/*�������߃A�C�e��*/
    background-color: #ececec;
}

#summerfes .another_item{/*���ڋʃA�C�e��*/
    background-color: #258c77;
}

/* �J�e�S���{�^��======= */
#summerfes .btn-black {
    display: flex;
    justify-content: center;
    gap: 1.4vw;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 1.5%;
}
#summerfes .btn-black a {
    color: #ffffff !important;
    position: relative;
    font-size: 23px;
    font-weight: 600;
    width: 80%;
    padding: .8em 0.2em .8em 0em;
    margin-bottom: 3%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2em;
    border-radius: 50px;
}
#summerfes .btn-black a::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 14px;
    height: 14px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    top: 40%;
    /* top: 34%; */
    right: 6%;
    margin: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s ease 0s;
}
#summerfes .btn-black a:hover {
    color: #fff !important;
}
#summerfes .btn-black a:hover::after {
    right: 4%;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

#rainysale .btn-black a {
    background-color: #935fb4;
}
#summersale .btn-black a {
    background-color: #33b2e7;
}
#kadensale .btn-black a {
    background-color: #2d3981;
}
#interiorsale .btn-black a {
    background-color: #ea601f;
}
#foodsale .btn-black a {
    background-color: #d72525;
}
#dailysale .btn-black a {
    background-color: #60a725;
}
#petsale .btn-black a {
    background-color: #f3ac0c;
}

/*section event �C�x���g
================================ */
#summerfes .event{
    width: 950px;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 2%;
}
#summerfes .event ul{
    padding:2%;
}


/* footer
================================ */
#summerfes .fotter {
    background: #212121;
    padding: 2% 0;
    text-align: center;
    color: #fff;
}

#summerfes .fotter a {
    color: #fff;
    font-size: 20px;
}
/* �T�C�h
================================ */
#summerfes .side_anchor_link {
    position: fixed;
    top: 10%;
    right: 0;
    opacity: 0;
    transition: 0.6s;
    z-index: 99;
}
#summerfes .side_anchor_link.on {
    opacity: 1;
}
#summerfes .side_anchor_link ul {
    background-color: #fff;
    border-radius: 10px;
    border-right: solid 35px #0288c8;
    width: 250px;
    padding: 10% 0 0 0;
}
#summerfes .side_anchor_link ul li:not(:last-child) {
    border-bottom: solid 1px #222;
    width: 90%;
    margin: 0 auto;
}
#summerfes .side_anchor_link ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 5%;
    font-size: 18px;
    transition: 0.2s;
}
#summerfes .side_anchor_link ul li a:hover {
    background-color: #0288c8;
    color: #fff;
}



/*=======================================
summerfes_coupon
=======================================*/

#summerfes_coupon {
    width: 1000px;
    margin: 0 auto;
    font-size: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.2;
    background-color: #ffffff;
    color: #222222;
}
#summerfes_coupon a:hover {
    opacity: 0.7;
}
#summerfes_coupon h3 {
    font-size: 28px;
    font-weight: bolder;
    text-align: center;
    padding: 31px 0 10px 0;
    color: #424242;
    margin-top: 3%;
    margin-bottom: -3%;
    position: relative;
    border-top: 1px dashed #0f74a1;
}
#summerfes_coupon h3 span {
    color: #df1016;
    font-weight: bolder;
    font-size: 35px;
}

#summerfes_coupon h3::before {
    content: attr(data-en);
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-family: math;
    font-weight: normal;
    background: #0f74a1;
    height: 21px;
    padding: 3px 15px 0 15px;
    border: 1px solid #0f74a1
}

#summerfes_coupon li {
    list-style: none;
    list-style-type: none;
    margin-left: -4%;
}
#summerfes_coupon ul.col_2 {
    display: flex;
    gap: 5%;
}
#summerfes_coupon img {
    width: 100%;
}

#summerfes_coupon .btn-black {
    display: flex;
    justify-content: center;
    gap: 1.4vw;
    width: 96%;
    margin: 0 auto;
}
#summerfes_coupon .btn-black a {
    color: #ffffff !important;
    position: relative;
    font-size: 23px;
    font-weight: 600;
    width: 80%;
    padding: .8em 0.2em .8em 0em;
    margin-bottom: 3%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2em;
    border-radius: 50px;
    text-decoration: none;
    background-color: #0f74a1;
}
#summerfes_coupon .btn-black a::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    top: 40%;
    /* top: 34%; */
    right: 6%;
    margin: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s ease 0s;
}
#summerfes_coupon h2 > img {
    width: 100%;
    margin-bottom: 4%;
    margin-top: 1%;
}