@charset "utf-8";
/* web fonts
======================================================= */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*
##########################################################################
タグ初期設定
##########################################################################*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    position: relative;
    text-align: left;
    padding: 0;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: #727272;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
dl,
dd,
dt,
table,
th,
td {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
img {
    max-width: 100%;
}
/*リンク*/
a {
    color: #e794c2;
    text-decoration: none;
}
a:hover {
    /* text-decoration:underline; */
}

/*タイトルタグ*/

h1 {
}
h2 {
    margin: 0 0 3rem;
    padding: 0.8rem;
    background: #f6f6f6;
    font-size: 0.9rem;
    text-align: center;
}
h3 {
}

/*
##########################################################################
ユーティリティタグ設定
##########################################################################*/

/*【clearfix決定版】*/
.clearfix:after,
.section:after,
ul:after,
#container:after,
#navi:after,
#pageNavi:after,
#subNavi:after,
.inner:after,
.section:after,
.wrap:after {
    content: url(../../images/spacer.gif); /* 1x1の透過gif */
    display: block;
    clear: both;
    height: 0;
}
.clearfix_for_ie7 {
    zoom: 1;
}

.section {
    width: auto;
}
.box {
    float: left;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}
.flexSection {
    display: flex;
    justify-content: space-between;
}
.flexSection:after {
    margin-left: auto;
}

.alert{
    color: red;
}
/*
##########################################################################
box
##########################################################################*/
.list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.list .box {
    width: 300px;
    padding: 0.5rem;
    border: 1px solid #f3f3f3;
    margin: 0 0.5rem 1rem;
    text-align: center;
}
.list .box .img {
    margin-bottom: 1.2rem;
}
.list .box .img img {
    display: block;
    max-width: 100%;
}
.list .box .name {
    margin-bottom: 0.5rem;
}
.list .box .new {
    font-size: 0.6rem;
    color: #e794c2;
}

/*
##########################################################################
各ページ共通
##########################################################################*/
/* line awesome */
.las {
    font-size: 150%;
}

/* toPageArea */

.toPageArea {
    margin: 0 0 2rem;
}
.toPageArea a {
    display: inline-block;
    padding: 0.3rem 0;
    margin-right: 1rem;
    color: #3f3f6f;
    border-bottom: 4px solid #d3d7dd;
}
.toPageArea a:hover {
    border-bottom: 4px solid #a0d3ea;
}
.toPageArea a::before {
    font-family: "Line Awesome Brands", "Line Awesome Free";
    margin-right: 0.4rem;
    font-size: 1.4rem;
}
.toPageArea a.create::before {
    content: "\f0fe";
}
.toPageArea a.cate::before {
    content: "\f37f";
    /*content: "\f86d;*/
}
.toPageArea a.lists::before {
    content: "\f15c";
}
.toPageArea a.point::before {
    content: "\f288";
}
.toPageArea a.history::before {
    content: "\f1ea";
}

/* contentArea */

.contentArea {
    width: auto;
    padding: 1.5rem 0;
}

/* transitionArea */
.PageTransitionArea {
    width: auto;
    margin-bottom: 2rem;
}
.back {
    width: auto;
}
.back a {
    display: inline-block;
    padding: 8px;
    color: #fff;
    background: rgb(255, 166, 0);
    border-radius: 5px;
}
.back a::before {
    content: "〈　";
}
.back a:hover {
    background: rgb(255, 182, 45);
}

/* message */
.MessageArea {
    margin-bottom: 1.5rem;
    color: #f00;
}
.MessageArea .hintArea {
    padding: 1.8rem;
    margin: 1rem;
    background: #fff;
    border-radius: 8px;
    font-size: 1rem;
    color: #555;
}
.MessageArea .hintArea p::before {
    display: inline-block;
    margin-right: 0.8rem;
    font-family: "Line Awesome Brands", "Line Awesome Free";
    content: "\f075";
    font-size: 1.5rem;
}

/* registerFormArea */

.registerFormArea {
    max-width: 450px;
    margin: 0 0 2rem;
    padding: 1rem;
    background: #fff;
    border: 2px solid #57add0;
}
.registerFormArea h3 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: bold;
}
.add {
    width: auto;
}

/* listTableArea  /index */

.listTableArea {
    width: auto;
}

.ListArea {
    width: auto;
}

/* formArea */
.formArea {
    width: auto;
}

.formArea h3{
    margin-bottom:1.5rem;
    padding:0.4rem;
    background:#F6F6F6;
}
.formArea section.section{    
    margin-bottom:2.5rem;
}
.formArea section.section .form-group{
    margin-bottom:2rem;
}
.formArea section.section .form-group h4{
    margin-bottom:0.5rem;
}
.formArea section.section .form-group p{
    width: auto;
    font-size: 0.84rem;
}
.formArea section.section .form-group td{
    font-size: 0.84rem;
}


/*
##########################################################################
レイアウト
##########################################################################*/

#wrapper {
    width: 100%;
    height: 100%;
}
#container {
    padding-top: 100px;
    display: flex;
}
#side {
    width: 140px;
    padding: 1.5rem 0;
    background: #f9d9eb;
}
.contents {
    /* width:calc(100% - 180px); */
    margin: 0 20px;
    padding: 1.2rem 0;
}
.contents > .inner {
    padding-left: 1rem;
}

/*
##########################################################################
ヘッダー
##########################################################################*/

/* upperArea
===================================================*/
header#header {
    width: 100%;
    margin: auto;
    padding-top: 5px;
    z-index: 999;
    background: rgba(255, 255, 255, 1);
}
header#header h1 {
    text-align: center;
}
header#header a {
}
header#header .inner {
}

/* logo */
header#header #logo {
    width: 180px;

    /* -webkit-animation-name:logo;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease;

	-moz-animation-name:logo;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:ease;	 */
}
header#header #logo a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 99;
}

/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes logo {
    0% {
        -webkit-transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -4px);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}
@-moz-keyframes logo {
    0% {
        -moz-transform: translate(0, 0);
    }
    50% {
        -moz-transform: translate(0, -4px);
    }
    100% {
        -moz-transform: translate(0, 0);
    }
}

/* sns
=========================================*/

header#header .sns {
    display: flex;
}
header#header .sns li {
    display: inline-block;
    width: 32px;
}
header#header .sns img {
    width: 100%;
}

/* catch
=========================================*/

header#header .catch {
    width: 400px;
    margin: 0 3rem;
    color: #e794c2;
}

/* recruit
=========================================*/

header#header .recruit {
    margin-left: auto;
}
header#header .recruit a {
    display: block;
    margin-right: 1rem;
    padding: 0.3rem 1rem;
    border: 2px solid #bbb;
    border-radius: 8px;
    color: #bbb;
    text-decoration: none;
}
header#header .recruit a:hover {
    background: #f3f3f3;
}
header#header .recruit strong {
    font-size: 2.3rem;
}
header#header .recruit span {
    font-size: 1rem;
}

/* login area
=========================================*/
header#header .loginArea {
    margin-left: auto;
    margin: 0 20px;
    padding: 8px;
    background: #666;
    border-radius: 8px;
}
header#header .loginArea a {
    color: #fff;
}
header#header .loginArea .forUser {
    margin: 0 0;
    color: #dfdfdf;
}
header#header .loginArea .forUser a.member_reg {
    display: inline-block;
    margin: 0 15px 0 0;
    color: #fff;
    font-size: 0.9rem;
}
header#header .loginArea .forUser a.user_log {
    display: inline-block;
    margin: 0 15px 0 0;
    padding: 3px 10px;
    background: #999;
}
header#header .loginArea .forUser a.logout {
    display: inline-block;
    margin: 0 0;
}

/*
##########################################################################
side
##########################################################################*/
#side {
}
#side section {
}
/*
##########################################################################
ナビゲーション
##########################################################################*/

ul.navi {
    margin: 0 auto;
    text-align: center;
}
ul.navi li {
}
ul.navi li a {
    display: inline-grid;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    border: 3px solid #fff;
    color: #fff;
    text-decoration: none;
    text-align: center;
    align-content: center;
    word-break: break-all;
}
ul.navi li a:hover {
    background: #f3c7e0;
}
ul.navi li img {
    display: block;
    width: 25px;
    text-align: center;
    margin: 0 auto 0.2rem;
}
ul.navi li a span {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
}
ul.navi li a strong {
    display: block;
    font-size: 0.65rem;
    color: #727272;
}

/*
##########################################################################
フッター
##########################################################################*/
footer {
    width: 100%;
    padding: 2.8% 0 0;
    background: #f6f6f6;
}
footer .inner {
    display: flex;
}

/* navi
=================================================*/

footer nav {
    width: 800px;
    margin: 0 0 1rem 8rem;
    text-align: center;
}
footer nav ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}
footer nav li {
    display: block;
    width: 120px;
    white-space: nowrap;
    font-size: 0.8rem;
    margin: 0 1.5rem 1.5rem;
    text-align: left;
}
footer nav a {
    color: #333;
}
footer nav a:visited {
    text-decoration: none;
}
footer nav a:link {
    text-decoration: none;
}
footer nav a:hover {
    text-decoration: underline;
}
/* navi
=================================================*/
footer .logo {
    width: 180px;
}

/* shopinfoArea
=================================================*/
footer .contactArea {
    max-width: 400px;
    padding: 1.5rem;
    box-sizing: border-box;
    background: #f0f0f0;
}
footer .contactArea dl {
    margin: 0 0 10px;
}
footer .contactArea dl dt {
    display: inline-block;
}
footer .contactArea dl dd {
    display: inline-block;
    margin: 0 15px 0;
}

/* copyright
=================================================*/

footer .copyright {
    background: #f0f0f0;
    padding: 8px;
    text-align: center;
}
footer .copyright small {
}

/*
##########################################################################
その他
##########################################################################*/
.shinobi {
    position: absolute;
    top: -200px;
}