@charset "utf-8";
/* default */
@import url("normalize.css");
@import url("common.css");
@import url("bootstrap-grid.css");
@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500&family=Nanum+Pen+Script&display=swap");
/* ***********************　
共通
***********************　*/
.mainHeader img{
 height: auto;
 margin: 0;
 width: 100%;
}
.mainHeader{
 line-height: 0;
}
.row{
 margin: 0;
}
a{
 color: #477154;
}
a:hover{
 color: #8b6482;
}
.fixed {
 position: fixed;
 width: 100%;
 left: 0;
 top: 0;
 z-index: 1000;
}
.container-fluid{
 padding: 0 .5em;
}
.container-fluid img{
 margin: 0;
}
.container-fluid h2{
 font-family: 'Kaisei Opti', serif;
 font-size: 28px;
 margin: .5em 0;
 padding: 1em;
 text-align: center;
}
.container-fluid h3{
 color: #477154;
 font-family: 'Kaisei Opti', serif;
 font-size: 23px;
 margin: .3em 0;
 padding: .3em 0;
}
.container-fluid h3 a{
 color: #477154;
 text-decoration: none;
}
.container-fluid h3 a:hover{
 color: #8b6482;
 text-decoration: none;
}
@media print, screen and (min-width: 600px) {
.container-fluid h2{
 font-family: 'Kaisei Opti', serif;
 font-size: 40px;
 margin: .3em 0;
 padding: .5em;
 text-align: center;
}
}
@media screen and (min-width : 768px) {
.container-fluid{
 padding: 0 1.5em;
}
a[href*="tel:"] {
 pointer-events: none;
 cursor: default;
 text-decoration: none;
}
.container-fluid h3{
 margin: .5em 0;
 padding: .5em 0;
}
}
@media screen and (min-width : 1024px) {
.container-fluid{
 max-width: 1200px;
 margin: 0 auto;
}
}
/* ページTOP *************************** */
#pageTop {
 color: #477154;
 position: fixed;
 bottom: 10px;
 font-size: 50px;
 line-height: 1.3rem;
 right: -80px;
 display: block;
 opacity: 0.6;
 text-decoration: none;
}
#pageTop a{
 color: #477154;
 text-decoration: none;
}
#pageTop a:active {
}
#pageTop a:hover {
 opacity: 0.5;
 text-decoration: none;
}

/* ***********************　
ヘッダー・ナビメニュー
***********************　*/
header .contentsHead{
 background: #a8d7d1;
}
header .contentsHead img{
 display: block;
 padding: 1em 1.3em;;
 max-width: 150px;
}
header ul{
 background: #85c3bb;
 margin: 0;
}
header ul li{
 border-bottom: 1px solid #fff;
 border-right: 1px solid #fff;
 font-size: 14px;
 letter-spacing: .15rem;
}
header ul li.col-sm-3 {
 position: relative;
 width: 50%;
 padding-right: 0;
 padding-left: 0;
}
header ul li:nth-child(even){
 border-right: 0;
}
header ul li a{
 color: #fff;
 display: block;
 margin: 0;
 padding: 1em;
 text-align: center;
 text-decoration: none;
}
/*header ul li a::after{
 color: #99535b;
 content: "\00a0\f054";
 font-family: "FontAwesome";
}*/
header ul li a:hover{
 background: #d5f8f3;
 color: #85c3bb;
}
@media print, screen and (min-width: 600px) {
header ul li{
 letter-spacing: 0;
}
header ul li:nth-child(even){
 border-right: 1px solid #fff;
}
header ul li:last-child{
 border-right: 0;
}
}
@media screen and (min-width : 768px) {
header ul li{
 font-size: 16px;
 letter-spacing: .15rem;
}
}

/* ***********************　
フッター
***********************　*/
footer{
 background: #85c3bb;
}
footer h2{
 font-family: 'Kaisei Opti', serif;
 font-size: 25px;
 margin: .5em 0;
 padding: 1em;
 text-align: center;
}
footer p{
 font-size: 14px;
 margin: 0 2em;
}
footer .map {
 position: relative;
 width: 100%;
 height: 0;
 margin-bottom: 1em;
 padding-top: 50%;
}
footer .map iframe {
margin: 0 2em;
 position: absolute;
 top: 0;
 left: 0;
 width: calc(100% - 4em);
 height: 100%;
}
footer .access .add,
footer .access .tel,
footer .access .toHaru{
 text-indent: -1.8em;
 padding: .5em 0 .5em 2em;
}
footer .access .tel a{
 color: #333; 
 text-decoration: none;
}
footer .access .add::before{
 color: #477154;
 content: "\f015";
 font-family: "FontAwesome";
 margin-right: .5em;
}
footer .access .tel::before{
 color: #477154;
 content: "\f095";
 font-family: "FontAwesome";
 margin-right: .5em;
}
footer .access .toHaru::before{
 color: #477154;
 content: "\f3c5";
 font-family: "FontAwesome";
 margin-right: .5em;
}
@media print, screen and (min-width: 600px) {
.container-fluid h2,
footer h2{
 font-family: 'Kaisei Opti', serif;
 font-size: 40px;
 margin: .3em 0;
 padding: .5em;
 text-align: center;
}
footer .map {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: 30%;
}
footer p{
 font-size: 16px;
}
}

/* ***********************　
ホーム・サロン情報
***********************　*/
li.topics{
 border-bottom: 1px solid #dedede;
 font-size: 14px;
 padding: .3em 1em;
}
li.topics:last-child{
 border-bottom: 0;
}
li.topics a .date{
 color:#ccc;
 margin: 0 5px;
}
li.topics a .topicTtl{
 margin-left: 5px;
}
li.topics a{
 color: #333;
 display: flex;
 padding: .3em 0;
 text-decoration: none;
}
li.topics a:hover{
 color: #8b6482;
}
li.topics a::before{
 color: #85c3bb;
 content: "\f138";
 font-family: "FontAwesome";
}
li.topics a:hover::before{
 color: #8b6482;
 content: "\f138";
 font-family: "FontAwesome";
}
.greeting {
 display: flex;
}
.greeting .balloon {
 position: relative;
 background-color: #a8d7d1;
 display: inline-block; /* 横幅を自動で変更 */
 margin: 1.5em;
 padding: 1.3em 1.4em;
 min-width: 120px;
 max-width: 100%;
 box-sizing: border-box;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}
.greeting .balloon:before {
 content: '';
 position: absolute;
 display: block;
 width: 0;
 height: 0;
 left: -15px;
 top: 50%;
 margin-top: -15px;
 border-right: 15px solid #a8d7d1;
 border-top: 15px solid transparent;
 border-bottom: 15px solid transparent;
}
.greeting .balloon:after {
}
.greeting .balloon p {
 margin: 0;
 padding: 0;
}
.greeting img {
 max-width: 120px;
 max-height: 120px;
}
.eigyo{
 margin-bottom: 2em;
}
.eigyo .col-sm-3{
 background: #eeeeee;
}
.eigyo .col-sm-3,
.eigyo .col-sm-9{
 border: 1px solid #ccc;
 border-collapse: collapse;
 margin: 0 -1px -1px 0;
 padding: 1em;
}
.gglcalendar .calendarWrap {
 margin: 1em 0 1.5em;
}
.gglcalendar iframe {
 width: 100%;
 aspect-ratio: 3 / 2.5;/**/
}
@media all and (min-width: 768px) {
.gglcalendar iframe {
 /*aspect-ratio: 1 / 1;*/
}
.closingday{
 margin-bottom: 12em;
}
.gglcalendar iframe {
 width: 100%;
 height: 600px;
}
.gglcalendar iframe {
}
li.topics{
 font-size: 16px;
}
}
/* ***********************　
メニュー
***********************　*/
.menuWrap table{
 border-collapse: collapse;
 margin: 1.5em 0;
 width: 100%;
}
.menuWrap th {
 border: solid 1px #ccc;
 box-sizing: border-box;
 background: #efefef;
 padding: 10px;
 text-align: left;
 width: 30%;
}
.menuWrap td{
 border: solid 1px #ccc;
 box-sizing: border-box;
 padding: 10px;
}
.menuWrap td.col2-1 {
 width: 20%;
}
.menuWrap td.col2-2 {
 width: 50%;
}
@media screen and (max-width: 640px) {
.menuWrap tr:last-child{
 border-bottom: solid 1px #ccc;
}
.menuWrap th,
.menuWrap td,
.menuWrap td.col2-1,
.menuWrap td.col2-2 {
 display: block;
 width: 100%;
 border-bottom:none;
}
.menuWrap td.col2-1 {
}
.menuWrap td.col2-2 {
 border-top: 1px dashed #ddd;
}
}
/* ***********************　
予約
***********************　*/
.howto,
.noSended{
 background: rgba(167,216,182,.3);
 border-radius: 5px;
 margin: 1em 0;
 padding: 1em;
}
.howto h4,
.noSended h4{
 border-bottom: 2px solid #333;
 display: inline-block;
 font-family: 'Kaisei Opti', serif;
 font-size: 20px;
 line-height: 0;
 margin: 0 0 .5em;
 padding: .5em 0 20px;
}
.howto ol {
 counter-reset: my-counter;
 list-style: none;
 padding: 0;
 margin-left: -.1em;
}
.howto li {
 padding: 5px 0 5px 30px;
 position: relative;
}
.howto li:before {
 content: counter(my-counter);
 counter-increment: my-counter;
 background: #539C6A;
 border-radius: 50%;
 box-sizing: border-box;
 display: flex;
 font-size: 12px;
 justify-content: center;
 align-items: center;
 height: 24px;
 width: 24px;
 color: #ffffff;
 line-height: 26px;
 position: absolute;
 padding: 2px 0 2px 1px;
 top: 6px;
 left: 0;
 }
.noSended ul {
 margin: 0;
 padding: 0;
 }
.noSended ul li{
 padding-left: 1.3em;
 text-indent: -1.3em;
 line-height: 1.5;
 margin: .5em 0 0 0;
 border-bottom: 0;
 padding-bottom: 0
}
.noSended ul li:before {
 content: "";
 width: .8em;
 height: .8em;
 display: inline-block;
 background: #539C6A;
 border-radius: 50%;
 margin-right: .5em;
}
/* ***********************　
お知らせ
***********************　*/
.article{
 border-bottom: 1px solid #ccc;
 margin-bottom: 3em;
 padding: 1.5em 1.5em
}
.article:last-child{
 border-bottom: none;
}
.article p{
 line-height: 2.5;
}
.article p.date{
 color: #ccc;
 font-size: 13px;
 margin: 1.5em 0;
 text-align: right;
}
@media screen and (max-width: 640px) {
.article{
 padding: 1.5em .5em
}
}
.newsWrap a.prev.page-numbers,
.newsWrap a.next.page-numbers{
}
.newsWrap a.page-numbers{
 color: #477154;
 padding: .1em .5em;
 text-decoration: none;
}
.newsWrap .page-numbers.current{
 background: #85c3bb;
 border-radius: 50%;
 color: #fff;
 font-weight: bold;
 padding: .2em .5em;
}

.newsWrap a.page-numbers:hover{
 border-bottom: 1px solid #8b6482;
 color: #8b6482;
}
@media screen and (min-width: 564px) {
.newsWrap .page-numbers.current{
 padding: .5em;
}
}
@media screen and (max-width: 768px) {
.newsWrap .page-numbers.current{
 padding: .4em .5em;
}
}
.sideMenu{
 margin-bottom: 2.5em
}
.sideMenu ul li{
 text-indent: -1em;
 padding-left: 1em;
}
.sideMenu ul li a{
 color: #333;
 font-size: 14px;
 text-decoration: none;
}
.sideMenu ul li a:hover{
 color: #8b6482;
}
.sideMenu ul li a::before{
 color: #85c3bb;
 content: "\f138";
 font-family: "FontAwesome";
}
.sideMenu ul li a:hover::before{
 color: #8b6482;
}
.sideMenu label{
 display: none;
}