@charset "shift-jis";
/* CSS Document */

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}



/*=======================================�����ʐݒ聥=======================================*/

*{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none;}
a img{ border:none;}
img {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border: 0;
    vertical-align: bottom;
}
a:hover img{ opacity:0.8;}


/*------------------------�\���ݒ�------------------------*/
/*�X�}�z�ł̂ݕ\��*/
@media (max-width: 749px){.smp{   }}
@media (min-width: 750px){.smp{ display: none !important;}}
/*PC�ł̂ݕ\��*/
@media (max-width: 749px){.PC{  display: none !important;  }}
@media (min-width: 750px){.PC{}}




/*=======================================���x�[�X��=======================================*/

#circle{
	max-width: 750px;
	margin:0 auto;
	width: auto;
	font-family:"Century Gothic",Noto Sans JP,sans-serif;
	color: black;
	font-size: 14px;
}
#circle p{text-align: center; padding: 1% 4%;    margin-bottom: 3%;}



/*------------------------�����N�Ɋւ��镔��------------------------*/

#circle section dl.item1,
#circle section dl.itemt dd.type ul li,
#circle section#page3 li
{position: relative;}

#circle section dl.item1 a,
#circle section.bs dt a,
#circle section.bs dd.sub a,
#circle section dl.itemt dd.type ul li a,
#circle section#page3 li a,
#circle #bana div a
{position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; white-space: nowrap;overflow: hidden;}
#circle section#page0 a.col_1:hover {opacity:0.4;background-color: #d8445e;}
#circle section#page1 a.col_1:hover {opacity:0.4;background-color: #c0c145;}
#circle section#page2 a.col_1:hover {opacity:0.4;background-color: #c19d45;}
#circle section#page3 a.col_1:hover {opacity:0.4;background-color: #bc59a1;}
#circle section#page4 a.col_1:hover {opacity:0.4;background-color: #498bad;}
#circle section#page5 a.col_1:hover {opacity:0.4;background-color: #47957d;}

#circle a{
    background-color: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}



/*=======================================���Ŕ�=======================================*/

#circle #kanban div{
	border-left : 1px black solid;
	border-right: 1px black solid;
	padding: 2% 6%;
	margin: 5% 5% 3%;
	text-align: center;
}

#circle .hosyou {
    width: 90%;
    margin: 35px auto 0;
}

/*=======================================��PC�p�i�r�Q�[�V������=======================================*/
#elevator {
    position: fixed;
    z-index: 1;
    bottom: 8%;
    height: 100vh;
    right: 1vw;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    text-align: center;
    transition-duration: .3s;
    width: 10%;
}

#elevator li {border-bottom: 1px dashed #3b3635;}

#elevator li a h4:after {display: none;}

#elevator li:first-child {border-bottom: none;}

#elevator ul {
    margin: 0 0;
    list-style: none;
    background: #ffffff38;
}
#elevator ul li a {
    display: block;
    text-decoration: none;
    color: #333;
    position: relative;
    padding: 1em 1em;
    font-size: 1.2em;
}
#elevator ul li a:hover {color: #dc4626 !important;}

.anchor01 {
    /* font-size: 1.5em; */
    color: #ffffff;
    background-color: #53322b;
    padding: 6%;
    font-weight: bold;
}

/* �X�N���[���\�� */
#elevator.isActive {
    transition: all 0.3s;
    opacity: 1;
}


/*=======================================��SMP�p�i�r�Q�[�V������=======================================*/

#mm{
    position: fixed;
    width: 100%;
    padding: 16px 5px;
    bottom: 0px;
    font-size: 3.4vw;
    font-weight: bold;
    margin:0;
    z-index:30;
    box-sizing: border-box;
    background-color:#f5f5f5;/*�w�i�F*/
    border-top: 2px solid #53322b;
    opacity: 0;
    transition-duration: .3s;
}
#mm ul.bottom-menu {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   
    /* // �����X�N���[����lj� */
}
#mm ul.bottom-menu li {
    display: table-cell;
    margin: 0;
}
#mm ul.bottom-menu li a {
    display: block;
    border-right: 1px solid;
    position: relative;
    color: #53322b;/*�A�C�R���������̐F*/
    padding:10px 14px;
    line-height:10px;
    text-decoration:none;
    background-color:#f5f5f5;/*�w�i�F*/
    list-style-type:none;
    text-align:center;
}
#mm ul.bottom-menu li:last-child a{border: none;}

/*TOP�ɖ߂�{�^��*/
#mm .back_top{
    position: absolute;
    top: -96%;
    right: 2%;
}
#mm .back_top a{
    display: block;
    color: #fff;
    padding: 10px 10px;
    width: 30px;
    height: 30px;
    background: #53322b;
    border: 1px solid #fff;
    border-radius: 60px;
}
#mm .back_top a p{
    line-height: normal;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 14%;
}

/* �X�N���[���\�� */
#mm.isActive {
    transition: all 0.3s;
    opacity: 1;
}


/*=======================================�����i��=======================================*/

/*------------------------���ږ�------------------------*/
#circle section {margin-top: 5%; clear: both; overflow: hidden;padding: 1%;}

@media (max-width: 749px){#circle section h3{width: 100%; margin: auto;} }
@media (min-width: 750px){#circle section h3{width: 70%; margin: auto;} }



/*------------------------�u���b�N------------------------*/
#circle section.bs dl{ overflow: hidden;padding: 1%; margin-bottom: 12%;}
#circle section.bs dl.bo_not{margin-bottom: 4%;}
#circle section.bs dl:last-child{  margin-bottom: 0%;}


/*==���C���ʐ^==*/
#circle section.bs dt{ width: 100%; margin-bottom: 2%;position: relative; clear: both;} 

/*==�T�u�ʐ^==*/
#circle section.bs dd.sub{ width: 49%; float: left; position: relative;margin-bottom: 2%;}
#circle section.bs dd.r2{margin-right:2%;} 


/*==���i���E�i�ԁE�R�����g==*/
#circle section.bs dd.text{
	clear: both; 
	border-left: 1px #000000 solid; 
	padding: 1% 2%;
	margin: 0 0 2%; 
	width: 100%;
}
#circle section.bs dd.text div.name span{display: block;}

/*�X�}�z�\��*/
@media (min-width: 750px){
#circle section.bs dd.text{ 
	clear: both; 
	border-left: 5px #000000 solid; 
	padding: 1% 2%;
	margin: 0 0 2%; 
	float: left;
	width: 55%;
}
#circle section.bs dd.text div.name span{margin-left: 2%;}
}

#circle section.bs dd.text div.name{ text-align: left; font-size: 1.3em; font-weight: bold;    margin-bottom: 2%;}
#circle section.bs dd.text div.name span{ font-size: 0.7em; font-weight: 100;}
#circle section.bs dd.text div.comm{ clear: both;}


/*==���i�v��==*/
#circle section.bs .kakau{ width: 98%;text-align: right;margin: -3% 0 1%}

/*�X�}�z�\��*/
@media (min-width: 750px){
#circle section.bs .kakau .prices{ position:absolute; right:20px;}
#circle section.bs .kakau{ float: right; margin: 2% 0;position: relative; width: 35%;}
}

#circle section.bs .kakau .prices span{ font-size:30px; font-weight:bold;color:#c15445;}
#circle section .kakau .prices span > span > span{display: none;}/*�ō��ݕ�����\��*/



/*------------------------�^�C�v���������------------------------*/

#circle section.bs dl.itemt dd.type ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 2%;
}
#circle section.bs dl.itemt dd.type ul li{
	width: calc(98% / 2);
	position: relative;
	margin-bottom:3%;
}
#circle section.bs dl.itemt dd.type ul li.bo_not{ margin-bottom:0;}
#circle section.bs dl.itemt dd.type ul li.w100{
	width: 100%;
	position: relative;
}
#circle section.bs dl.itemt dd.type ul li.col_3{
	width:  calc(96% / 3);
	position: relative;
}
#circle section.bs dl.itemt dd.type ul li a{
    position: relative;
    text-indent: 0;
}
#circle section.bs dl.itemt dd.type ul li img{
	margin-bottom:2%;
	transition: all  0.3s ease;
}
#circle section.bs dl.itemt dd.type ul li p{
    text-align: center;
    padding: 18px 0;
    border: 1px black solid;
    margin-bottom: 1%;
    position: relative;
    color: black;
}
#circle span.material-icons{ position: absolute; right: 0;}

/*�z�o�[�A�j���[�V����*/
#circle section ul.type li div.hover{
        position: absolute;
	width: 104%;
	height: 100%;
	opacity: 0;
	left: -2%;
	padding: 12px 0;
	bottom: -4%;
	transition: all  0.3s ease;
}
#circle section ul.type li.col_3 div.hover{
	width: 100%;
	padding: 0;
	left: 0;
	bottom: 3%;
	height: 96%;
}
#circle section#page0 ul.type li div.hover{background-color: #d8445e;}
#circle section#page1 ul.type li div.hover{background-color: #c0c145;}
#circle section#page2 ul.type li div.hover{background-color: #c19d45;}
#circle section#page3 ul.type li div.hover{background-color: #bc59a1;}
#circle section#page4 ul.type li div.hover{background-color: #498bad;}
#circle section#page5 ul.type li div.hover{background-color: #47957d;}

#circle section ul.type li:hover div.hover{opacity:0.4;}
#circle section ul.type li:hover img{opacity:0.6;}

/*�X�}�z�\��*/
@media (max-width: 749px){

#circle section.bs dl.itemt dd.type ul li img{ margin-bottom:5px;}
#circle section.bs dl.itemt dd.type ul li p{padding: 10px 0;}
#circle span.material-icons{ bottom: 21%;}

}



/*------------------------�g�ݍ��킹�T�[�N���p------------------------*/

#circle section#page3 dl{ overflow: hidden; }

/*���C���ʐ^*/
#circle section#page3 dt{ width: 100%; margin-bottom: 3%;position: relative;} 

/*���i���E�i�ԁE�R�����g*/
@media (max-width: 749px){
#circle section#page3 ul li p{
	clear: both;
        border-left: 1px #000000 solid;
        padding: 1% 2%;
        margin: 2% 0;
        float: left;
        text-align: left;
        font-weight: bold;
        font-size: 3.3vw;
}
}

@media (min-width: 750px){
#circle section#page3 ul li p{
	clear: both;
        border-left: 1px #000000 solid;
        padding: 1% 0 1% 2%;
        margin: 2% 0;
        float: left;
        width: 52%;
        text-align: left;
        font-weight: bold;
}
}

/*���i�v��*/
@media (max-width: 749px){
#circle section#page3 .kakau{  clear: both;text-align: right;}}

@media (min-width: 750px){
#circle section#page3 .kakau .prices{ position:absolute; right:20px;}
#circle section#page3 .kakau{ float: right; margin: 2% 0;position: relative; width: 44%;}}

#circle section#page3 .kakau .prices span{ font-size:20px; color:#c15445; font-weight:bold;}

/*���C���i�b�v*/
#circle section#page3 dd ul{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;}
#circle section#page3 dd ul li{
    width: calc(98% / 2);
    text-align: center;
    padding: 2%;
    border: 1px black solid;
    margin-bottom: 2%;
    box-sizing: border-box;
}
@media (max-width: 749px){#circle section#page3 dd ul li:nth-child(odd){ margin-right: 2%; clear: both;float: left;}}
@media (min-width: 750px){#circle section#page3 dd ul li:nth-child(odd){ margin-right: 2%; clear: both;float: left;}}



/*------------------------�e�o�i�[------------------------*/

#circle #bana{padding-bottom: 5%;position: relative;}
#circle #bana .bn{
    padding: 3%;
    margin: 2%;
    background-color: #e6daca;
    text-align: center;
    position: relative;
    display: block;
    transition: all  0.3s ease;
}
#circle #bana .bn:hover{
    color: #fff;
    background-color: #53322b;
    transition: all  0.3s ease;
}

#circle #bana img{
    width: 96%;
    padding: 0% 2%;
} 
#circle #bana dd.kakau{
    position: absolute;
    bottom: 26%;
    right: 8%;
}
#circle #bana dd.kakau .prices span{font-size:40px;}

/*�X�}�z�p*/
@media (max-width: 749px){
#circle #bana dd.kakau{
    bottom: 14%;
    right: 11%;
}
#circle #bana dd.kakau .prices span.prdisp-taxin{font-size:26px;}
}



/*------------------------�֘A���W------------------------*/

#circle section#page5 .event li{
    margin: 0 auto 2%;
    width: 98%;
}

#circle section#page5 .swiper {
    position: relative;
    width: 84%;
    margin: 0 auto;
    overflow: visible;
    padding: 0 0 8% 0;
}
#circle section#page5 .swiper ul.swiper-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
#circle section#page5 .swiper ul.swiper-wrapper li.swiper-slide{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-transform: translate(-53%,0);
      -moz-transform: translate(-53%,0);
      -ms-transform: translate(-53%,0);
      -o-transform: translate(-53%,0);
      transform: translate(-53%,0);
}
#circle section#page5 .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: -25px !important;
    left: auto;
    top: 42%;
    }
#circle section#page5 .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: -25px !important;
    right: auto;
    top: 42%;
    }
#circle section#page5 .swiper-button-next:after,#circle section#page5 .swiper-button-prev:after{
    font-size: 1.6em;
    background-color: #43957eeb;
    padding: 65%;
    border-radius: 50%;
    width: 100% !important;
    height: 26%;
    line-height: 0.5;
    font-weight: bold;
    color: #fff;
}    
#circle section#page5 .swiper-pagination{
    width: 100%;
    position: absolute;
    bottom: 5% !important;
}
#circle section#page5 .swiper-pagination-bullet {
    background-color: #43957e;
    height: 1em;
    width: 1em;
}



/*=======================================���t�b�^�[��=======================================*/

#circle footer{
    background-color: #53322b;
    color: #ffffff;
    text-align: center;
    margin: 2vh 0 0;
}
#circle footer ul{display: flex;}
#circle footer li:nth-of-type(2){margin: 0 2em;}
#circle footer div{    margin: auto; display: inline-block;padding: 1em 0;}
#circle footer a:link,footer a:visited{color:#ffffff;}

@media screen and (max-width: 750px) { /*�X�}�z�ɓK�p*/
  #circle footer{height: 15vh;}
 }