/**
255,100,130
ff6482
**/
/************************************************ 共通設定 ************************************************/
body {background: #fafafa; font: 12px sans-serif; color:#333333; margin: 0px; padding: 0px; line-height:1.2em;}
div,h1,h2,h3,h4,ul,li,dl,dt,dd,img {margin: 0px; padding: 0px;}
ul {list-style: none; margin: 0px; padding: 0px;}
ul li {font-size:1.2em; line-height:2em;}
p {margin: 0px; padding: 0px;}
a,a:visited {color: #d9f; text-decoration: none;}
a:hover {color: #d9f; text-decoration: underline;}
a img {border-style:none;}
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}

input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.text-center {text-align:center;}
/******************************  共通 ******************************/

/****************************** 構造 ******************************/
.wrap {width:100%;}
.header_area {width:100%; height:60px; background:#fff; position:fixed; top:0px; left:0x; box-shadow: 1px 1px 4px rgba(0,0,0,0.2); z-index:100;}
.header_area .logo {width:20%; float:left;}
.header_area .nav {width:80%; float:right; height:60px;}
.header {width:1000px; margin:0px auto;}
.main {width:1000px; margin: 60px auto 00px auto; background:#fff;}
.main_content {width:70%; float:left; padding:25px 0px; box-sizing:border-box;}
.side_area {width:30%; float:right; padding:25px 25px; box-sizing:border-box;}
.mainimage_area {width:100%; height:300px;}
.mainimage {width:100%; height:300px; text-align:right; background-image:url("../img/bg.jpg"); background-position:center center; background-size:cover;}
.mainimage h1 {text-align:center; padding-top:120px; color:#fff; font-weight:100; font-size:30px;}
.list {width:100%; padding:1em; box-sizing:border-box;}
.list .contents_area {}
.list .item {width:100%; padding: 2em 1em 2em 1em; box-sizing:border-box; margin:0.5%; position:relative; background:#fff; border-bottom:dashed #ddd 1px;}
.footer {border-top:solid #ccc 1px; padding: 2em 0em; margin-top:2em; text-align:center; background:#666;}

/* パンクず */
.pankuzu {padding-bottom:1em; border-bottom:dashed #ddd 1px;}
.pankuzu ul li {display:inline-block; color:#ddd;}

/****************************** // 構造 ******************************/
/** フォーム **/
input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.formarea {font-size:16px; margin: 2em 0px; padding:3em; }
.form {border:0; padding: 0%; margin: 0em auto; width:100%;}
.formarea label { display:block; clear:both; width:100%; text-align:left;}
.form .input {border:solid 1px #ddd; font-size: 1em; padding: 0.8em 0.8em; margin: 1em 0em 2em 0em; width:100%; box-sizing:border-box; background:#fdfdfd; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; clear:both;}
.form .input50box { display:block; width:48%; margin-right: 1%; float:left; clear:none;}
.form .keysinput { display:inline-block; width:20%; margin-right: 1%;}
.form .input {border:solid 1px #ddd; font-size: 1em; padding: 0.8em 0.8em; margin: 1em 0em 2em 0em; width:100%; box-sizing:border-box; background:#fdfdfd; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; clear:both;}
.form .input[type=checkbox] { width:20px; height:20px; vertical-align: middle;}
.form .input[type=checkbox]:checked { background:#fff; position:relative;}
.form .input[type=checkbox]:checked:before { position:absolute; top:0; left:0; content:url('./img/checked.svg'); }
.list .item p.input_info {font-size:10px;}
.list .item h3.input_title {font-size:14px; font-weight:bold; color:#000; border-bottom:solid #ccc 1px;}
.list .item h3.input_title:before {content:"【　";}
.list .item h3.input_title:after {content:"　】";}
.formarea label {padding: 5px 0px 5px 0px; font-size:12px; color:#333;}
.form .input {margin: 0em 0em 1em 0em; font-size:12px;}

@media (max-width: 1200px){ .form .input50box {width:100%; float:none;} }
.form .input:focus {background:#fff;}
.form .input.textarea {height:8em;}
.form .submit {font-size:1.2em; padding: 0.5em 1em; text-align:center; background:#000; color:#fff; margin: 1.5em auto; cursor:pointer; box-sizing:border-box; display:block; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border:none;}
.form .submit:hover {background:#393939; font-color:#ddd;}
.form .checkbox {font-size:20px;}
.form .checkbox:before {content:"□️";}
.form .checkbox:checked {}
.form .checkbox:checked:before {content:"☑️";}

/*****  menuinputbox *****/
.menubox {}
.menubox.stage2 {padding-left:30px;}
.menubox.stage3 {padding-left:60px;}
.menubox.stage4 {padding-left:90px;}
.menubox.stage5 {padding-left:120px;}
.menubox.stage6 {padding-left:150px;}
.manuname {font-size:16px; line-height:24px; display:inline-block;}
.menubox .close{ margin: 0px auto; display:block; }
.menubox .addchild_area {display:inline-block;}
.menubox .removemenu_area {display:inline-block;}
.menubox .addchild_area.hide {display:none;}
.menubox .addchild {width:24px; vertical-align:middle;}
.menubox .removemenu {width:24px; vertical-align:middle;}
.menubox .addmenu_area {display:block;}
.menubox .addmenu {width:24px;}
.menuinputbox {position:fixed; left:0px; top:0px; height:100vh; width:100vw; padding:100px; background:#fff; display:none; overflow:auto; box-sizing:border-box;}
.menuinputbox.on {display:block;}
.image span img {height:100px; width:auto;}


/*****  サービス切り替えボタン *****/
.service_area {}
.service {float:left; text-align:center; width:70px; height:50px; font-size:10px;}
.service.on {}
.service_btn_area {position:relative; width:42px; height:24px; background:#f7f7f7; border:solid #bbb 1px; margin: 0px auto;
 border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; box-sizing:border-box;}
.service.on .service_btn_area {background:#7e7;}
.service .service_btn {position:absolute; top:-1px; left:0px; width:24px; height:24px; background:#fff; border:solid #bbb 1px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; box-sizing:border-box; box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.4);}
.service.on .service_btn {left:initial; right:0px; border:solid #7e7 1px;}

/*****  header *****/
.header_area .logo img {height:60px; width:300px;}
.header_area ul.nav {margin: 0px auto; text-align:right;}
.header_area ul.nav li {text-align:right; display:inline-block; line-height:60px;}
.header_area ul.nav li a {display:block; padding: 0em 2em; color:#a6e;}
.header_area ul.nav li a:hover {background:#d9f; color:#fff;}
/*****  side_area *****/
.side_area .fbtools {padding:2em 0em; background:#009;}
.side_area .fbtools h3 {text-align:center; color:#fff; padding:0.5em 0em;}

.side_area .form_area { padding:10px 0px; }
.side_area .newuser a {display:block; padding: 1em 1em; background:#d9f; color:#fff; text-align:center; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width:150px; margin: 5px auto 25px auto;}
.side_area .form {}
.side_area .input {display:block; padding: 1em 1em; color:#666; border:solid #ccc 1px; width:150px; margin: 5px auto; background:#fff;}
.side_area .submit {display:block; padding: 1em 1em; background:#d9f; color:#fff; text-align:center; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width:170px; margin: 5px auto;}
.side_area .share_area {text-align:center;}

ul.sidenav {text-align:center;}
ul.sidenav li {padding:1em 0em; border-bottom:dashed #ddd 1px;}


/*****  footer *****/
.footer p {color:#aaa; padding:25px 0px 50px 0px; line-height:2.5em;}
.footer .copy {color:#ddd;}
.footer .copy a {color:#ddd;}

/****************************** // 共通 ******************************/

/******************************  ログインページ ******************************/
.pageform {display:block;}
.pageform .form_area { padding:10px 0px; width:80%; margin:0px auto;}
.pageform .form {}
.pageform .input {display:block; padding: 1em 1em; color:#666; border:solid #ccc 1px; width:100%; margin: 5px auto;}
.pageform .submit {display:block; padding: 1em 1em; background:#d9f; color:#fff; text-align:center; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width:100%; margin: 5px auto;}
.pageform .select {display:block; padding: 1em 1em; color:#666; border:solid #ccc 1px; width:100%; margin: 5px auto;}
.pageform .textarea {display:block; padding: 1em 1em; color:#666; border:solid #ccc 1px; width:100%; margin: 5px auto; height:3em;}

.otherlink {text-align:right; color:#d9f; font-size:12px;}

/******************************  文字列スロット ******************************/
p.slot_result {line-height:1.5em; font-size:1.2em; text-decoration:underlone;}

/******************************  リスト ******************************/
/*.list .item:nth-child(even) {background:#efefef;}*/
.list h1 {text-align:center; padding:1em 0em; line-height:2em;}
.list .item h2 {width:100%; color:#009; line-height:2em;}
.list .item h2 {width:100%; color:#009; line-height:2em;}
.list .item .imagearea {width:38%; height:150px; overflow:hidden; float:left;}
.list .item img {width:100%; height:auto;}
.list .item h3 {font-size:1.4em; line-height:2em; padding: 1.4em 0em 0.2em 0em; color:#aaa;}
.list .item p {font-size:1.2em; line-height:1.6em; padding: 0.6em 0em 0.6em 0em; color:#666;}

.list .item span.err {font-weight:bold; color:#f00;}

/****************************** // リスト ******************************/

/******************************  ブロック ******************************/
.bloc1 {width:85%; float:left; box-sizing:border-box;}
.contents_area {width:100%; background:#fff;}

.bloc1 .head_area {padding:3em; border-bottom:solid #ddd 1px;}
.bloc1 .content_head h2 {font-size:3em; line-height:1.4em; color:#333; text-align:left;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

.sub_bloc {width:100%; background:#fff; padding:3em; box-sizing:border-box; border-bottom:solid #ddd 1px;}

.sub_bloc h3 {font-size:2em; line-height:1.4em; color:#000; text-align:left; padding:2em 0em; 
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.sub_bloc h4 {font-size:2.4em; line-height:1.4em; color:#000; text-align:center; padding: 2em 0em 0.5em 0em;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.sub_bloc p {font-size:1.4em; line-height:2.4em; color:#666; text-align:left;}
.sub_bloc img {width:100%;}
.sub_bloc p.ta_left {text-align:left;}
.sub_bloc p.ta_center {text-align:center;}

.sub_bloc ul {font-size:1.4em; line-height:2.4em; color:#666; text-align:left;}
.sub_bloc ul li {}

.sub_bloc ul.check {padding: 0em 0em 2em 0em; text-align:left;}
.sub_bloc ul.check li {font-size:2.0em; line-height:3.0em; background:url(./img/check.png) no-repeat left center; background-size: 1.4em auto; padding-left:2.0em; letter-spacing:0.1em;}
.sub_bloc ul.check li:before {content:"";}

.sub_bloc ul.check.sub li {font-size:1.4em; line-height:3.0em; background:url(./img/check.png) no-repeat left center; background-size: 1.4em auto; padding-left:2.0em; letter-spacing:0.1em;}

.sub_bloc .flow_area {padding: 4em 0em;}
.sub_bloc .flow {font-size:2.0em; line-height:3.0em; text-align:center; border-bottom:solid #f00 3px;}
.sub_bloc .arrow {text-align:center; padding:2.5em 0em 1.5em 0em; font-size:16px; }
.sub_bloc .arrow:before {content:"▼"; color:#f00; line-height:2em;}

.sitemap ul {width:100%; margin: 0px auto; border-top:dotted #ff6482 1px;}
.sitemap ul li {width:100%; border-bottom:dotted #ff6482 1px; text-align:left; padding: 0em 1em; box-sizing:border-box;}
.sitemap ul li a {display:block; padding: 1.5em 0em; color:#666; text-decoration:none;}
.sitemap ul li a:hover {text-decoration:underline;}


/****************************** // ブロック ******************************/

/************************************************ ボタン ************************************************/
.cta.btn {text-align:right; padding: 0em; margin: 0em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight:bold; width:100%; box-sizing:border-box;}
.cta.btn a {display:inline-block; margin: 1em auto; background:#fff; color:#333; text-align:center; box-sizing:border-box; font-size:1.2em; padding:1em 1em; text-decoration:none; box-shadow:1px 1px 1px rgba(0,0,0,0.4);}
.cta.btn a:before {content:" > ";}
.cta.btn a:hover {background:#ddd;}
.cta.btn.fbbtn a {background:#009; color:#fff;}

.list .item .cta.btn {position:absolute; bottom:1em; right:1em;}

/******************************  管理画面 ******************************/
ul.user_btn {padding-left:2em;}
ul.user_btn li:before {content:" →　"; color:#d9f;}
ul.fbitem {padding-left:2em;}
ul.fbitem li:before {content:" →　";}
.fbtitle {}
.detail {margin-left:1em;}
.detail a {display:inline-block; line-height:20px; height:20px; width:20px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background:#d9f; text-align:center; color:#fff;}

/******************************  調整用 ******************************/

@media(max-width: 400px) {
.header_area {width:100%; float:none;}
.header_area .logo {width:32%; margin: 0px auto;}
.header_area .logo img {width:100%;}
.header_area ul.nav {display:none;}
.header_area ul.info {display:none;}

.list {width:100%; float:none;}

.list .contents_area {margin:0 0 10px 0; width:100%;
display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex;
-webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
}

.list .item {width:100%; float:none; margin:0%;}


}
@media(max-width: 800px) {
}
@media (min-width: 801px) and (max-width: 1200px) {
}
/****************************** // 調整用 ******************************/


/****************************** 以下、メモ ******************************/
/*
.salonlist_area {margin:0 0 10px 0; width:100%;
display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex;
-webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
}

border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: 0px 0.25em;
transform:rotate(-3deg);
transform:scale(1,0.5);
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

*/