@charset "UTF-8";
/*
Theme Name: おまつりワッショイ
Author: funakura
*/
/*---------root周りの設計を格納すr---------------------------------------------*/
:root {
	--color-white: #FFF;
	--color-black: #000;
	--color-gray: #808080;
	--color-red: #F00;
	--color-text: #333;
	--color-main: #FFEB3B;
	--color-sub: #E0E0E0;
	--color-sub2: #f0f0f0;
	--color-sub3: #f7cb4d;
	--color-sub4: #fef8e3;
	--color-accent: #FF5722;
	
/*
#f7cb4d
#fef8e3

*/
}
/*---------root周りの設計を格納すr---------------------------------------------*/
:root {
	--font-family-01: 'Noto Sans JP', sans-serif;
	--font-family-02: 'Montserrat', sans-serif;
	--line-height-01: 1.4em;
	--line-height-02: 2em;
	--margin-0_25em: 0.25em;
	--margin-0_5em: 0.5em;
	--margin-0_75em: 0.75em;
	--margin-1em: 1em;
	--margin-1_25em: 1.25em;
	--margin-1_5em: 1.5em;
	--margin-1_75em: 1.75em;
	--margin-2em: 2em;
	--margin-2_5em: 2.5em;
	--margin-3em: 3em;
	--margin-3_5em: 3.5em;
	--margin-4em: 4em;
	--margin-4_5em: 4.5em;
	--margin-5em: 5em;
}
/*---------root周りの設計を格納すr---------------------------------------------*/
:root {
	/* デフォルトのフォントサイズを定義 */
	--h1-size: 2rem;
	--h2-size: 1.75rem;
	--h3-size: 1.5rem;
	--h4-size: 1.25rem;
	--h5-size: 1rem;
	--body-size: 1rem;
	--small-size: 0.875rem;
	--tiny-size: 0.75rem;
}
@media screen and (min-width: 769px) {
	:root {
		--h1-size: 2.25rem;
		--h2-size: 2rem;
		--h3-size: 1.75rem;
		--h4-size: 1.5rem;
		--h5-size: 1.25rem;
		--body-size: 1.125rem;
		--small-size: 1rem;
		--tiny-size: 0.875rem;
	}
}
/* 各ボタンに対応するフォントサイズ設定 */
#font-small {
	--h1-size: 1.5rem;
	--h2-size: 1.375rem;
	--h3-size: 1.25rem;
	--h4-size: 1.125rem;
	--h5-size: 1rem;
	--body-size: 0.875rem;
	--small-size: 0.75rem;
	--tiny-size: 0.625rem;
}
#font-medium {
	--h1-size: 2rem;
	--h2-size: 1.75rem;
	--h3-size: 1.5rem;
	--h4-size: 1.25rem;
	--h5-size: 1rem;
	--body-size: 1rem;
	--small-size: 0.875rem;
	--tiny-size: 0.75rem;
}
#font-large {
	--h1-size: 2.5rem;
	--h2-size: 2.25rem;
	--h3-size: 2rem;
	--h4-size: 1.75rem;
	--h5-size: 1.5rem;
	--body-size: 1.25rem;
	--small-size: 1rem;
	--tiny-size: 0.875rem;
}
@media screen and (min-width: 769px) {
	#font-small {
		--h1-size: 1.75rem;
		--h2-size: 1.5rem;
		--h3-size: 1.375rem;
		--h4-size: 1.25rem;
		--h5-size: 1.125rem;
		--body-size: 1rem;
		--small-size: 0.875rem;
		--tiny-size: 0.75rem;
	}
	#font-medium {
		--h1-size: 2.25rem;
		--h2-size: 2rem;
		--h3-size: 1.75rem;
		--h4-size: 1.5rem;
		--h5-size: 1.25rem;
		--body-size: 1.125rem;
		--small-size: 1rem;
		--tiny-size: 0.875rem;
	}
	#font-large {
		--h1-size: 2.75rem;
		--h2-size: 2.5rem;
		--h3-size: 2.25rem;
		--h4-size: 2rem;
		--h5-size: 1.75rem;
		--body-size: 1.375rem;
		--small-size: 1.25rem;
		--tiny-size: 1rem;
	}
}

* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: var(--font-family-01);
font-weight: 400;
font-size: 16px;
/*color: #dedede; background: #505057;*/
margin-block-start: 0;
margin-block-end: 0;
padding-block-start: 0;
padding-block-end: 0;
border-spacing: 0;
}

body{background: var(--color-00);}

a {text-decoration: none; color: #6f6f6f;}
ul {list-style-type: none;}
img {max-width: 100%;}
.only--pc{display: none !important;}

h1 {font-size: var(--h1-size);}
h2 {font-size: var(--h2-size);}
h3 {font-size: var(--h3-size);}
h4 {font-size: var(--h4-size);}
h5 {font-size: var(--h5-size);}
p {font-size: var(--body-size);}

@media screen and (min-width:769px) {
	.only--sp{display: none !important;}
	.only--pc{display: block !important;}
	.text-align-01{text-align: center;}
}


.text-align-00{text-align: center;}/*sp+pc 中央 */
.text-align-01{text-align: left;}/*sp/pc 左/中央 */
.text-align-02{text-align: right;}/*sp+pc 右 */

.font-weight-01{font-weight: bold;}


.btn-01{height: 64px; width: 240px; margin: 0 auto;}
.btn-01 a{display: flex; background: var(--color-01-grd-02); align-items: center; justify-content: center; height: 100%; border-radius: 50px;}


.bg-00{background: var(--color-00);}
.bg-01{background: var(--color-option04);}
/*.bg-00{background: #e81414;}*/

.size-00{max-width: 1280px; margin: 0 auto;}

.text-tiny{
	font-size: var(--tiny-size);


}


/*===============================================================*/

.calendar-tabs {
    width: 100%;
}

.tab-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.tab-item {
    cursor: pointer;
    padding: 10px 20px;
    background-color: var(--color-sub2);
    border-radius: 5px;
}

.tab-item.active {
    background-color: #0073aa;
    color: var(--color-white);
}

.tab-pane,
.calendar-month {
    display: none;
}

.tab-pane.active,
.calendar-month.active {
    display: block;
}


.calendar {
width: 95%;
height: 550px;
margin-top: var(--margin-2em);
margin-bottom: var(--margin-2em);
margin-right: auto;
    margin-left: auto;
}
.calendar-list{
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
border-left: solid 1px;
border-color: var(--color-sub);
}
.calendar-list>div{
	width: calc(100% / 7);
	padding: var(--margin-0_5em);
	border-bottom: solid 1px;
    border-right: solid 1px;
	border-color: var(--color-sub);
	text-align: center;

}
.calendar>div:nth-child(1)>div {
	border-top: solid 1px;
	border-color: var(--color-sub);
	background: var(--color-sub3);
}
.calendar>div:nth-child(n+2)>div {
height: 80px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;

}

.calendar .today {
    width: var(--margin-1_75em);
    height: var(--margin-1_75em);
    color: var(--color-white);
    background-color: var(--color-red); /* 任意の背景色 */
	border-radius: 50%;
}

.has-event {
	background: var(--color-sub4);
}

/*===============================================================*/


.c_foot-01 {padding-bottom: var(--margin-1em);}


/*===============================================================*/


.list{}

.list-days{
	margin-top: var(--margin-0_75em);
	border-bottom: solid 1px;
	border-color: var(--color-sub);
}
.event {
	margin-top: var(--margin-0_5em);
	padding-left: var(--margin-0_5em);
    padding-right: var(--margin-0_5em);
}