@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			: #010101;
	--main-color			: #ce92bf;
	--sub-color				: #ccc;
	--link-color			: #999999;
	--base-color			: #f1e1ed;
	--bg-color				: #FFF;

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

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

	/* font */
	--font-size			: 14px;
	--font-family-en	: "Varela Round", Verdana, sans-serif;
	--font-family-ja	: "Noto Sans JP","ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	--font-weight		: 500;
	--font-weight-r		: 400;
	--font-weight-m		: 500;
	--font-weight-b		: 700;
	--line-height		: 1.8;

	--border-radius		: 15px;
	--item-padding		: 15px;
}

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

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

	/* font */
	--font-size			: 16px;

	--border-radius		: 20px;
	--item-padding		: 20px;

}
}
@media screen and (min-width: 1150px) {
:root {
	/* width */
	--content-width		: 1110px;
	--slim-width		: 900px;

	--border-radius		: 30px;
	--item-padding		: 30px;

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

html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background			: var(--base-color);
	line-height			: var(--line-height);
	font-size			: var(--font-size);
	font-family			: var(--font-family-ja);
	font-weight			: var(--font-weight);
	letter-spacing: calc(50 / 1000 * 1em);
	color				: var(--text-color);
}

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

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

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

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

/* anchor(pagetop)
-----------------------------------------------------*/
p.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
-----------------------------------------------------*/
.row{
	--item-count: 2;
	--item-gap: 10px;
	display				: flex;
	flex-direction		: column;
	flex-wrap			: wrap;
	gap					: var(--item-gap);
}
.row>.col{
	flex				: 0 0 calc(calc(100% - calc(calc(var(--item-count) - 1)) * var(--item-gap)) / var(--item-count));
}

@media screen and (min-width: 769px) {
.row{
	--item-gap: 30px;
	flex-direction		: row;
}
}

/* btn
-----------------------------------------------------*/
.btn{
	position: relative;
	display				: inline-block;
	border-radius		: 30px;
	padding				: 0.75em 3em;
	background			: var(--main-color);
	text-align			: center;
	font-size			: 12px;
	letter-spacing: 0;
	color				: var(--bg-color);
	line-height: 1.2;
}
.btn.small{
	width				: auto;
	padding				: 0.25em 1.25em;
	vertical-align		: 1.2;
	font-size			: 75%;
}

.btn i{ margin: 0 0 0 0.5em; }
.btn:not(.small) i{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	right				: 1em;
}
.btn.small i{
	font-size			: 70%;
	vertical-align		: 1px;
}
@media screen and (min-width: 769px) {
.btn{
	border-radius		: 50px;
	width				: 260px;
	padding				: 1.25em 2em;
	font-size			: var(--font-size);
}
.btn.small{
	font-size			: var(--font-size);
}
.btn:not(.small) i{
	right				: 1.5em;
}
}
@media screen and (min-width: 1150px) {
.btn{
	width				: 350px;
}
}

/* navigation
-----------------------------------------------------*/
.navigation{
	letter-spacing: 0;
}
.navigation i{
	margin				: 0 0 0 5px;
	font-size			: 80%;
}
@media screen and (min-width: 769px) {
.navigation .navi{
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	justify-content		: flex-start;
	align-items			: center;
	gap					: 35px;
}
.navigation .navi li{ height: 35px; }
.navigation a{ color: var(--text-color); }
.navigation .lang{
	position			: relative;
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	align-items			: center;
	font-size			: 14px;
	line-height			: 20px;
}
.navigation .lang li					{ padding: 0 10px; }
.navigation .lang li:not(:last-child)	{ border-right: 1px solid var(--text-color); }
.navigation .lang li a			{ color: var(--main-color); }
.navigation .lang li.current a	{ color: var(--text-color); }
}
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 loader
-----------------------------------------------------*/
#loader-bg {
	display				: none;
	position			: fixed;
	width				: 100%;
	height				: 100%;
	top					: 0;
	left				: 0;
	background			: var(--sub-color);
	z-index				: 1000;
}
#loader {
	display				: none;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	z-index				: 101;
}
/*#loader img{
	-webkit-animation	: animation 1.5s infinite;
	animation			: animation 1.5s infinite;
}*/
@media screen and (max-width: 768px) {
#loader-bg { width: 100vw; }
#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
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
	width				: 100%;
}

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: var(--content-width);
}

/*-----------------------------------------------------
 main
-----------------------------------------------------*/
#main{
	margin				: 25px 0 60px 0;
	border-radius		: var(--border-radius);
	padding				: var(--item-padding);
	background			: var(--bg-color);
}

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

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header{
	position			: sticky;
	top					: 0;
	z-index				: 10;
	background			: var(--base-color);
	height				: var(--header-height);
}

/* site-name
-----------------------------------------------------*/
#header .site-name{
	background			: var(--bg-color);
	position			: relative;
	z-index				: 11;
}
#header .site-name .logo a{ display: block; }

@media screen and (max-width: 768px) {
#header .site-name{
	position			: relative;
	display				: flex;
	flex-direction		: row;
	align-items			: center;
	gap					: 10px;
	height				: var(--header-height);
}
#header .site-name .logo{
	flex				: 0 0 auto;
	padding				: 0 2.5vw;
}
#header .site-name img{ max-height: 40px; }
#header .site-name .description{
	flex				: 0 1 auto;
	line-height			: 1.5;
	font-size			: 8px;
	letter-spacing		: calc(1em * 50 / 1000);
	color				: var(--main-color);
}
}
@media screen and (min-width: 769px) {
#header .site-name{
	position			: absolute;
	width				: 400px;
	border-radius		: 0 0 var(--border-radius) 0;
	padding				: 15px 35px 15px 30px;
	height				: var(--header-height);
}
#header .site-name .logo{
	height: 100%;
  display: grid;
  place-content: center;
}
}


/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/

@media screen and (max-width: 768px) {
#header .navigation{ background: var(--base-color); }
#header .navigation .container{
	width				: 100%;
	padding				: 1em;
}
#header .navigation .navi{
	display				: flex;
	flex-direction		: column;
	gap					: 10px;
	margin				: 0 0 50px 0;
}
#header .navigation .navi a{
	position			: relative;
	display				: block;
	background			: var(--bg-color);
	border-radius		: 6px;
	text-align			: center;
	font-size			: 16px;
	line-height			: 40px;
	color				: var(--main-color);
}
#header .navigation .navi li:not(:last-child) a::after{
	position			: absolute;
	right				: 10px;
	top					: 50%;
	transform			: translateY(-50%);
	content				: "\f105";
	font-family			: "Font Awesome 6 Free";
	font-weight			: 900;
	display				: inline-block;
	width				: 20px;
	border-radius		: 10px;
	background			: var(--main-color);
	height				: 20px;
	text-align			: center;
	line-height			: 20px;
	font-size			: 10px;
	color				: var(--bg-color);
}
#header .navigation .navi li:last-child i{
	position			: absolute;
	right				: 13px;
	top					: 50%;
	transform			: translateY(-50%);
}
#header .navigation .lang{
	display				: flex;
	flex-direction		: row;
	justify-content		: center;
	gap					: 10px;
}
#header .navigation .lang a{
	display				: inline-block;
	border-radius		: 18px;
	width				: 33px;
	height				: 33px;
	background			: var(--bg-color);
	text-align			: center;
	line-height			: 33px;
	color				: var(--main-color);
}
#header .navigation .lang .current a{
	background			: var(--main-color);
	color				: var(--bg-color);
}
}
@media screen and (min-width: 769px) {
#header .navigation{
	margin				: 0 auto;
	width				: var(--content-width);
	padding				: 0 0 0 calc(450px - calc(calc(100vw - var(--content-width)) / 2));
}
#header .navigation .container{
	display				: flex;
	flex-direction		: row;
	justify-content		: flex-end;
	align-items			: flex-end;
	gap					: 50px;
	width				: 100%;
	height				: var(--header-height);
}
#header .navigation .lang{
	position			: relative;
	top					: -8px;
}
}
@media screen and (min-width: 769px) and (max-width: 1150px){
#header .navigation .container{
	flex-direction		: column-reverse;
	justify-content		: flex-start;
	align-items			: flex-end;
	gap					: 5px 0;
}
#header .navigation .navi{
	justify-content		: flex-end;
	gap					: 0 15px;
	font-size			: 14px;
}
#header .navigation .lang{ top: 0; }
}


/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer{
	padding				: 0 0 20px 0;
	background			: var(--bg-color);
}

/* pagetoplink
-----------------------------------------------------*/
#footer .pagetoplink{
	--item-size: 30px;
	text-align			: center;
}
#footer .pagetoplink a{
	position			: relative;
	top					: calc(var(--item-size) * -0.5);
	display				: inline-block;
	border-radius		: calc(var(--item-size) * 0.5);
	width				: var(--item-size);
	height				: var(--item-size);
	background			: var(--main-color);
	line-height			: var(--item-size);
	color				: var(--bg-color);
}
@media screen and (min-width: 769px) {
#footer .pagetoplink{
	--item-size: 60px;
}
}

/* footer-content
-----------------------------------------------------*/
#footer .footer-content{
	display				: flex;
	flex-direction		: column;
	align-items			: center;
	gap					: 15px;
}
#footer .footer-content .logo img{ max-width: 215px; }

@media screen and (min-width: 769px) {
#footer .footer-content{ gap: 50px; }
#footer .navigation{
	display				: flex;
	flex-direction		: row;
	align-items			: center;
	gap					: 30px;
}
#footer .footer-content .logo img{ max-width: 470px; }
}


#footer .link-list .btn{
	text-align: left;
}
#footer .link-list .btn{
	max-width: 240px;
}
@media screen and (min-width: 769px) {
#footer .link-list .btn{
	max-width: 410px;
}
}
/* copy
-----------------------------------------------------*/
#footer .copy{
	text-align			: center;
	line-height			: 1.2;
}
#footer .copy small{ font-size: 9px; }
@media screen and (min-width: 769px) {
.copy small{ font-size: 12px; }
}