@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: "Outfit", sans-serif;
	--base-font-size: 12px;

	/* color */
	--base-color: #fff;
    --bg-color: #f3f3f3; /* for bg */
	--main-color: #0072ce; /* for corporate */
	--variety-color01: #ffc23e;
    --variety-color02: #8dcdec;
    --variety-color03: #fa7946;
    --variety-color04: #6bdea6;

	--text-color: #191919;
	--link-color: #191919;
	--hover-color: #0072ce;

    /* radius */
    --section-border-radius: 40px;

	/* space */
    --container-width: 100%;
    --container-mid: 668px;
    --container-side-space: 0;
    --container-side-margin: 20px;
    --letter-spacing-min: .05em;
    --text-box-both-trim: trim-both cap alphabetic;
	
	/* animation */
	--transition-duration: .3s;
}

@media screen and (min-width: 769px) {
	:root {
		--base-font-size: 16px;
		--container-width: 100%;
        --container-side-margin: 50px;
	}

}


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

   base set

==========================================================================*/
html {
    scroll-behavior: smooth;
     /* for over full width, popping rtl animation */
}
:target {
  scroll-margin-top: var(--header-height); /* ページ内スクロール時、固定ヘッダー分をずらす */
}
body {
    position: relative;
    color: var(--text-color);
    font: 500 var(--base-font-size)/1.5 var(--font-family);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background-color: var(--base-color);
    overflow-x: hidden;
}
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

==========================================================================*/
.br-sp { display: none;}
@media screen and (max-width: 768px) {
    .br-sp { display: block;}
}
.u-iblock { display: inline-block;}

.u-font-en01 {font-family: var(--font-en);}
.u-align-center { text-align: center;}
.u-align-left { text-align: left;}
.u-align-right { text-align: right;}
.u-lazy-fade {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.u-lazy-fade.loaded {
    opacity: 1;
}
.u-no-click-pc {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: inherit;
  }
  @media screen and (max-width: 768px) {
    .u-no-click-pc {
        pointer-events: auto;
        cursor: pointer;
        /*text-decoration: underline;*/
    }
}