@charset "utf-8";
/*==========================================================================

   variable set

==========================================================================*/
:root {
	/* font */
	--font-family: "Zen Kaku Gothic New", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	--font-en: "Barlow Condensed", sans-serif;
    --font-ja: "Shippori Mincho", serif;
	--base-font-size: 14px;

	/* color */
	--base-color: #fff; /* for bg */
	--main-color: #71b0d1; /* for header, logo, primary button */
	--accent-color: #fff; /* for footer, space  */
	--cv-color: #f03331; /* for conversion (icon, contact button, reservation button */
    --key-color: #bd1212ff;

	--text-color: #333;
	--link-color: #4394e0;
	--hover-color: #006;

	/* space */
	/* --header-height: 100px; 管理画面から設定 */
    --container-width: 100%;
    --container-side-space: 0;
    --container-side-margin: 32px;
	
	/* animation */
	--transition-duration: .3s;
}

@media screen and (min-width: 769px) {
	:root {
		--base-font-size: 16px;
		/*--header-height: 87px; 管理画面から設定 */
		--container-width: 1020px;
	}

}


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

   base set

==========================================================================*/
html {
    scroll-behavior: smooth;
}
:target {
  scroll-margin-top: var(--header-height); /* ページ内スクロール時、固定ヘッダー分をずらす */
}
body {
    position: relative;
    color: var(--text-color);
    font: 400 var(--base-font-size)/1.7 var(--font-family);
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background-color: var(--base-color);
}
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-duration), background-color var(--transition-duration);
}
a:hover {
    color: var(--hover-color);
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
* {
    box-sizing: border-box;
}


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

   utility style

==========================================================================*/
.u-font-en01 {font-family: var(--font-en);}
.u-font-ja01 {font-family: var(--font-ja);}

.u-align-center { text-align: center;}
.u-align-left { text-align: left;}
.u-align-right { text-align: right;}


.br-sp { display: block;}

@media screen and (min-width: 769px) {
    .br-sp { display: none;}
}