@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./asset/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--text-color			: #252525;
	--main-color			: #FF0080;
	--sub-color				: #eee;
	--link-color			: #003399;
	--base-color			: #f5f5f5;
	--bg-color				: #FFF;

	/* width */
	--content-width		: 95vw;

	/* height */
	--header-height		: 80px;

	/* font */
	--font-size			: 1.4rem;
	--font-family		: "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	--line-height: 1.8;
}

@media screen and (min-width: 769px) {
:root {
	/* width */
	--content-width		: 768px;

	/* height */
	--header-height		: 100px;

	/* font */
	--font-size			: 1.6rem;
}
}

/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/

html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background			: var(--bg-color);
	line-height			: var(--line-height);
	font-size			: var(--font-size);
	font-family			: var(--font-family);
	color				: var(--text-color);
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	color				: var(--link-color);
	text-decoration		: none;
}

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.u-separator{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.u-page-anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}

/* sensor
-----------------------------------------------------*/
.sensor{
	display				: none;
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
@media screen and (min-width: 769px) { .sensor{ display: block; } }

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

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 769px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 769px) { [data-show=pc]{ display: block; } }


/* row
-----------------------------------------------------*/
.l-grid{
	--item-count: 2;
	--item-gap: 10px;
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
	gap					: var(--item-gap);
}
.l-grid>.l-grid__item{
	flex				: 0 0 calc(calc(100% - calc(calc(var(--item-count) - 1)) * var(--item-gap)) / var(--item-count));
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 loader
-----------------------------------------------------*/
.m-loader-bg {
	display				: none;
	position			: fixed;
	width				: 100%;
	height				: 100%;
	top					: 0;
	left				: 0;
	background			: var(--sub-color);
	z-index				: 1000;
}
.m-loader {
	display				: none;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	z-index				: 101;
}
/*.m-loader img{
	-webkit-animation	: animation 1.5s infinite;
	animation			: animation 1.5s infinite;
}*/
@media screen and (max-width: 768px) {
.m-loader-bg { width: 100vw; }
.m-loader img{ width: 100px; }
}


/*@-webkit-keyframes animation {
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}
@keyframes animation {
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.l-wrap{
	position			: relative;
	width				: 100%;
	text-align: center;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.l-area{
	position			: relative;
	clear				: both;
	width				: 100%;
}
.l-header{
	position			: sticky;
	top					: 0;
	z-index				: 10;
	background			: var(--bg-color);
	height				: auto;
}
.l-mainview{
	text-align			: center;
}
.l-navigation{
	position			: sticky;
	top					: var(--header-height);
	z-index				: 10;
}
.l-contents{  }
.l-footer{
	padding				: 10px 0;
	background			: var(--sub-color);
}
/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.l-container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: var(--content-width);
}

.l-contents .l-column-container{
	display				: flex;
	flex-direction		: column;
}
@media screen and (min-width: 769px) {
.l-contents .l-column-container{
	flex-direction		: row;
	gap: 20px;
}
}

/*-----------------------------------------------------
 column
-----------------------------------------------------*/
.l-column{
	position			: relative;
}

.l-side{
	flex				: 1;
}
.l-main{
	flex				: 3;
}


/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
.l-header .m-site-logo{
	margin				: 0 0 -10px 0;
	font-size			: 3rem;
}
.l-header>.l-container{
	height				: var(--header-height);
  display: grid;
  place-content: center;
}

/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/
.m-global-nav{
	background			: var(--base-color);
}
.m-global-nav .m-global-nav__list{
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: column;
}
.m-global-nav .m-global-nav__list li{ flex: 1; }
.m-global-nav .m-global-nav__list li a{
	display				: block;
	padding				: 0 10px;
	line-height			: 50px;
	text-decoration		: none;
	color				: var(--text-color);
}
.m-global-nav .m-global-nav__list li a:hover{
	background			: rgba(0,0,0,.1);
}
@media screen and (max-width: 768px) {
.m-global-nav .l-container{
	width				: 100%;
	padding				: 0;
}
.m-global-nav .m-global-nav__list li:first-child{
	border-top			: 1px solid var(--sub-color);
}
.m-global-nav .m-global-nav__list li{
	border-bottom		: 1px solid var(--sub-color);
}
}
@media screen and (min-width: 769px) {
.m-global-nav .m-global-nav__list{
	flex-direction		: row;
}
.m-global-nav .m-global-nav__list li a{
	border-right		: 1px solid var(--base-color);
	background			: var(--sub-color);
}
.m-global-nav .m-global-nav__list li:first-child a{ border-left: 1px solid var(--base-color); }
}

/*-----------------------------------------------------
 side
-----------------------------------------------------*/
.l-side nav{
	position			: sticky;
	top					: 150px;
	background			: var(--base-color);
}
.l-side .m-local-nav__list li{ border-bottom: 1px solid var(--sub-color); }
.l-side .m-local-nav__list li a{
	display				: block;
	padding				: 3px 10px;
	text-decoration		: none;
	color				: var(--text-color);
}
.l-side .m-local-nav__list li a:hover{
	background			: rgba(0,0,0,.1);
}
/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
.l-footer small{
}