@charset "utf-8";
/* --------- */
/* ★検証用 */
/* 
header {background-color:lightskyblue; }
main {background-color:plum; }
footer {background-color:lemonchiffon; }
p {background-color:green;}
footer > p {border-radius: 0 0 10px 10px;}
div.wrapper{border:01px solid red;}
 */
/* --------------------------------------------------- */
/* ==== base ==== */
/* --------------------------------------------------- */
header, main, footer, nav, div, p, h1, h2, h3, h4, h5 {
	margin: 0;padding:0;
}
/* --------- */
* {box-sizing: border-box;}	/* *要素のwidthとheightにpaddingとborderのサイズを含む* */
/* --------- */
html{
	scroll-behavior: smooth;
	width :100%;
}
/* --------- */
body{
	margin:3rem;	/* 3em 60px*/
	text-align:center;
	font-family: "Nico Moji", "Kaisei Opti", "Noto Sans JP", "Sawarabi Gothic", "M Plus 1p", "M PLUS Rounded 1c", "Lato", sans-serif;
	font-size: 14px;
	line-height: 2.5em;
	font-weight: normal;
	font-style: normal;
	color: #483D8B;		/* darkslateblue */
text-size-adjust: auto;
-webkit-text-size-adjust: 100%; /* Safari */
-webkit-font-smoothing: antialiased;	/* anti-aliasing */
}
/* --------- */
/* alink */
a {text-decoration: none;}
a:link {color:#483D8B;text-decoration:none;}
a:visited{color:#585189;text-decoration:none;}
a:hover{color:#816FFC;text-decoration:none;}
a:active{color:#816FFC;text-decoration:none;}
a img {border-style:none;}
/* --------- */
/* Google Web Fonts */
.wf-notosansjp { font-family: "Noto Sans JP"; }
.wf-sawarabig { font-family: "Sawarabi Gothic"; }
.wf-mplus1p { font-family: "M Plus 1p"; }
.wf-mplusrounded1c { font-family: "M PLUS Rounded 1c"; }
.wf-kaiseiopti { font-family: "Kaisei Opti"; }
.wf-kaiseidecol { font-family: "Kaisei Decol"; }
.wf-kaiseitokumin { font-family: "Kaisei Tokumin"; }
.wf-kaiseiharunoumi { font-family: "Kaisei HarunoUmi"; }
.wf-nikukyu { font-family: "Nikukyu"; }
.wf-nicomoji { font-family: "Nico Moji"; }
.wf-loto { font-family: "Loto"; }
/* --------- */
/* --------- */
/*  sticky  */
div.wrapper{
	height:100%;		/*  sticky  */
}
div.innerwrapper{
	height:calc(100%-60px);		/*  sticky  */
}
footer.sticky{
	position:sticky;		/*  sticky  */
	top:100vh;			/*  sticky  */
}
/* --------- */
/* 角丸 */
div.wrapper, div.innerwrapper{
	border:1px solid #fff;
	border-radius:15px 15px 15px 15px;
}
header{border-radius:15px 15px 0 0;}
footer{border-radius:0 0 15px 15px;}
footer > p {border-radius: 0 0 15px 15px;}
/* --------------------------------------------------- */
/* ==== parts ==== */
/* --------------------------------------------------- */
/* --------- */
div.wrapper{
	width:100%;
	height:100%;
	background-color:#fff;
	margin: 0 auto;
}
/* --------- */
div.innerwrapper{
	width:100%;
	height:100%;
	background-color:#fff;
	margin: 0 auto;
}
/* --------- */
/* header */
header{
	padding:3rem 1rem 3rem 1rem ;}
/* --------- */
/* 
div.toptxt{
	line-height:;
} */
/* --------- */
h1{
/* 	font-size: ; */		/* ● */
	margin:0 0 0.6rem 0;	/* h1下 */
}
/* --------- */
p.subtl{
	font-family:"Noto Sans JP";
	font-size:0.9rem;
}
/* --------- */
/* main */
main{
	padding:1.5rem 1rem 1.5rem 1rem ;
}
/* --------- */
h2{
	font-family:"Nikukyu";
	font-size: 1.5rem;		/* ● */
/* 	font-size: 30px; */
	margin:0 0 0.5rem 0;	/* h2下 */
}
/* --------- */
div.links{
	padding:1rem 0 1rem 0;
	font-family: "Kaisei Opti";
/* 	font-size: 14px;		 */
		line-height:2rem;
}
/* --------- */
span.dot{
	font-size:0.625rem;
}
/* --------- */
div.fontawesome{
	line-height:3rem;
	padding:0.6rem 0 2rem 0;	/* 文字列上 */
}
/* --------- */
/* footer */
footer {
	border-top: solid 1px #d5d5d5;
	padding:5px 0 5px 0 ;	/* 文字上下 */
	font-size: 0.8rem;
	line-height: 1.5rem;
	width:100%;
}
	/* height:30px;〓下アク */
/* --------- */
p.footer{margin: 0;}
/* --------- */
/* h3{}
h4{}
h5{} */
/* --------------------------------------------------- */
/* ==== logoimg ==== */
/* --------------------------------------------------- */
/* logoimg */
/* 
img.nekot{
	width: 100px;height: 100px;margin:0px;
}
 */
/* --------- */
div.logoimg{
	margin:2.5rem 0 4rem 0;
}
/* --------- */
/* -- logo - flip-container -- */
/* --  【AI】-- */
.flip-container {
	margin: auto;
  perspective: 1000px;
  width: 100px;
  height: 100px;
}
.flip-container .flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.flip-container .flipper .front,
.flip-container .flipper .back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  backface-visibility: hidden;
}
.flip-container .flipper .front {
  background-image: url('../img/nekot100.png');
}
.flip-container .flipper .back {
  background-image: url('../img/nekot100r.png');
  transform: rotateY(180deg);
}
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
/* --------- */
/* ------ flip ------ */
/* 【初版】
.flipbox{
	width:100%;
	height:150px;
	margin: 50px 0px 50px 0px;
	position: relative;
	padding:0;
	perspective:150rem;
	-moz-perspective: 150rem;
	cursor: pointer;
	}
.front{
	height:100%; width:100%;
	transition:.8s;
	position: absolute;
	top: 100px;
	left: 50%;
	}
.back{
	height:100%; width:100%;
	transform:rotateY(180deg);
	transition:.8s;
	position: absolute;
	top: 100px;
	left: 50%;
	}
.front, .back{
	height:100%; width:100%;
	transition:.8s;
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	}
.back{
	transform:rotateY(180deg);
	}
.flipbox:hover .front{
	transform:rotateY(180deg);
	}
.flipbox:hover .back{
	transform:rotateY(0);
	}/
 */
/* --------- */
/* ------------------------------------------------------------ */
/* ==== to page-top（with Google Material icons） ==== */
/* ------------------------------------------------------------ */
#page-top{
	position: fixed;
	width: 48px; height: 48px;
	right: 2px;
	bottom: 30px;
/*	background:#e68493;	ボタン色 */
	opacity: 0.6;
/* 	border-radius:50%; */
}
/* --------- */
.material-icons{
	position: relative;
	display: block;
	width: 48px; height: 48px;
	font-family: 'Material Icons';
	font-size: 36px;	
	color:#fff;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
/* --------- */