@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
/* common start */
:root{
    --site-max-width:100%;
    --site-main-width:100%;
    --site-division:375;
	--site-font-family-Zen-Maru-Gothic:'Zen Maru Gothic', serif;
	--site-font-family-Noto-Sans-JP:'Noto Sans JP', sans-serif;
	--site-font-weight-Light:300;
	--site-font-weight-Regular:400;
	--site-font-weight-Medium:500;
	--site-font-weight-Bold:700;
	--site-font-weight-Black:900;
    --site-font-size-ratio:calc(100vw / var(--site-division));
    --site-padding:calc(var(--site-max-width) / var(--site-division) * calc(calc(var(--site-division) - 345) / 2));
    --site-color-gray:#858585;
	--site-color-gray-medium:#9E9D9D;
	--site-color-gray-light:#EDEDED;
	--site-color-chrome-yellow:#F8BF2D;
	--site-color-chrome-yellow-light:#f8bf2d4d;
	--site-color-red:#FF1F00;
	--site-color-pink:#FFCBCB;
	--site-color-pink-light:rgba(255, 31, 0, 0.05);
	--site-color-ivory:#FFFCF2;
	--site-color-orangered:#F8762D;
	--site-color-mistyrose:#FFD6BF;
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
}
::before,
::after{
    box-sizing: border-box;
}
input, textarea, select {
	outline: none;
}
textarea {
	resize: none;
}
fieldset{
    border: none;
}
img{
	vertical-align: top;
}
.br-mobile{
	display: initial;
}
/* common end */

/* -------------------------------base(mobile)↓-------------------------------------- */
body{
	font-family: var(--site-font-family-Zen-Maru-Gothic);
	max-width: var(--site-max-width);
    margin: auto;
}
main{
    max-width: var(--site-main-width);
	margin: auto;
}
/* header start */
.header{
	width: calc(347 * var(--site-font-size-ratio));
	margin: calc(13 * var(--site-font-size-ratio)) auto 0;
}
.header>a>img{
	width: calc(131 * var(--site-font-size-ratio));
}
/* header end */
/* footer start */
footer{
	text-align: center;
	background-color: var(--site-color-chrome-yellow);
	padding: calc(calc(7242 - 7182) * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio));
}
footer>img{
	width: calc(206 * var(--site-font-size-ratio));
}
footer>div,
footer>small{
	font-weight: var(--site-font-weight-Regular);
	line-height: calc(32 * var(--site-font-size-ratio));
	font-family: var(--site-font-family-Noto-Sans-JP);
}
footer>div{
	margin-top: calc(calc(7302 - 7242 - 50) * var(--site-font-size-ratio));
	font-size: calc(14 * var(--site-font-size-ratio));
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
footer>div>a{
	text-decoration: none;
	color: #000000;
}
footer>small{
	font-size: calc(12 * var(--site-font-size-ratio));
}
footer>figure{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(calc(88 - 15 - 63) * var(--site-font-size-ratio));
	margin-top: calc(calc(7407 - 7302 - 65) * var(--site-font-size-ratio));
}
footer>figure>img{
	width: calc(63 * var(--site-font-size-ratio));
}
footer>figure>figcaption{
	font-weight: var(--site-font-weight-Regular);
	line-height: calc(20 * var(--site-font-size-ratio));
	font-family: var(--site-font-family-Noto-Sans-JP);
	text-align: left;
	font-size: calc(12 * var(--site-font-size-ratio));
}
/* footer end */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    :root{
        --site-division: 1440;
        --site-padding: calc(80 * var(--site-font-size-ratio));
    }
	.br-mobile{
		display: none;
	}
	/* header start */
	.header{
		width: calc(1200 * var(--site-font-size-ratio));
	}
	.header>a>img{
		width: calc(151 * var(--site-font-size-ratio));
	}
	/* header end */
	/* footer start */
	footer{
		background-color: var(--site-color-chrome-yellow);
		width: 100%;
		padding: calc(calc(6633 - 6572) * var(--site-font-size-ratio)) 0;
	}
	footer>*{
		width: calc(550 * var(--site-font-size-ratio));
		margin: auto;
	}
	footer>figure{
		margin-top: calc(calc(1172 - 1072 - 65) * var(--site-font-size-ratio));
	}
	footer>img {
		width: calc(280 * var(--site-font-size-ratio));
	}
	footer>div{
		margin-top: calc(calc(3737 - 3652 - 55) * var(--site-font-size-ratio));
		justify-content: center;
		gap: calc(20 * var(--site-font-size-ratio));
	}
	/* footer end */
}

@media screen and (min-width: 1440px){
    :root{
        --site-max-width: 1960px;
        --site-main-width: 1960px;
        --site-font-size-ratio:1px;
    }
}
/* -----------------desktop(include ipad)↑-------------------- */