@import url(https://fonts.googleapis.com/css?family=Fredericka+the+Great);
@import url(https://fonts.googleapis.com/css?family=Chewy);

.header {
    background: rgba(240,250,255, 1);
}

.contents {
    background: url('https://www.lino-hair-resort.com/images/bg001.jpg') center top;    
}

/*** タイトル ***/
#product-heading,
.heading-section{
    padding-top: 20px;
    font-family: 'Fredericka the Great', cursive;
    color: black;
    text-shadow: 5px 5px 1px rgba(100,200,230, 0.65);
}
.service-item h2,
.info-section{
    font-size: 24px;
    font-family: 'Chewy', cursive;
    color: black;
    text-shadow: 4px 4px 1px rgba(0,0,0, 0.3);
}
.footer-title{
    font-size: 24px;
    font-family: 'Chewy', cursive;
    color: black;
    text-shadow: 4px 4px 1px rgba(0,255,255, 0.2);
}

/*** Staff 紹介文 ***/
.list5 li i{
    font-size: 20px;
    color: rgba(100,200,230, 0.65);
}
.list5 li{
    color: black;
	position:relative;
    margin-top: 0px;
	padding-left:0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.list5 li:before{
	content:''; 
	height:0px; 
	width: 90%;
	display:block; 
	position:absolute; 
	top:50px; 
	left:0px; 
	border-bottom: 1px dashed #aaa;
}

/*** Menu カテゴリ ***/
.filter-list input{
	display: none;
}
.filter-list label{
	display: block;
	float: left;
	cursor: pointer;
	min-width: 30px;
    max-width: 12.5%;
    width: 20%;
    height: 35px;
    margin:0 auto;
	padding: 12px 0px;
	border-right: 1px solid #abb2b7;
	background: rgba(0,0,0, 0.65);
	color: rgba(100,200,230, 1);
	font-size: 10px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.filter-list label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.filter-list label:last-of-type{
	border-right: 0px;
	border-radius: 0 3px 3px 0;
}
.filter-list input[type="radio"]:checked + label {
	background-color: rgba(100,200,230, 1);
	color: #fff;
}

.list-menu {
	list-style: none;
	overflow: hidden;
	width: 90%;
	padding: 0px;
	margin: auto;
}
.list-menu li {
	list-style: none;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #879c18;
    font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.list-menu li:last-child {
	border-bottom: 0px;
}
.list-menu li a {
	display: block;
	position: relative;
	z-index: 10;
	height: 40px;
	margin: 0;
	padding: 0px 0px 0px 40px;
	background: #a1b91d;
	background: rgba(100,200,230, 0.65);
	color: #fff;
	font-size: 12px;
	line-height: 40px;
	font-weight: bold;
	text-decoration: none;
}
.list-menu li a:hover {
	background: #879c18;
	background: rgba(100,200,230, 1);
}
#menu-list8 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 15px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #d7e975;
	background: rgba(255,255,255, 0.8);
	transition: .2s;
}
#menu-list8 li a:hover:before {
	left: -16px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
}
#menu-list8 li .price,
#menu-list8 li .price2,
#menu-list8 li .price3-1,
#menu-list8 li .price3-2
{
    position:absolute;
    z-index: 11;
    height: 40px;
    width: 85%;
    padding-right: 10px;
    text-align:right;
    font-size: 20px;
    line-height: 40px;
    color: #d7e975;
	color: rgba(0,0,0, 0.6);
    display: block;
    pointer-events: none;
}
#menu-list8 li .price2{
    padding-right: 8px;
    font-size: 20px;
}
#menu-list8 li .price3-1{
    padding-right: 8px;
    text-align:right;
    line-height: 20px;
    font-size: 20px;
}
#menu-list8 li .price3-2{
    padding-top: 20px;
    padding-right: 8px;
    text-align:right;
    line-height: 20px;
    font-size: 20px;
}

.icon i {
  border-radius: 50%;
  border: 20px solid rgba(100,200,230, 0.8);
  color: rgba(100,200,230, 0.8);
  font-size: 20px;
  line-height: 40px;
  width: 80px;
  height: 80px;
}

.author-details p{
    font-size: 18px;
    color:  rgba(20,80,150, 0.80);
}

.new_text{
    color:red;
    position:relative;
    left:0px;
    top:-5px;
    font-size:9px;
}

/*===============================================
●style.css 画面の横幅が990px以上
===============================================*/
@media screen and (min-width: 990px){
    .header {
        background: rgba(255,255,255,1);
    }
    img{
        max-width: 100%;
        height: auto;
        width: auto;　
    }
    img.logo-hawaii {
        position: absolute;
        margin: 15px 0px 0px -30px;
        width: 80px;
        height: 80px;
        opacity: 0.8;
    }
    img.logo {
        margin-left: 50px;
    }
    img.heding-line{
        margin: -60px 0px 0px -20px;
        opacity: 0.5;
    }
    img.heding-line2{
        margin: 0px 0px 0px 0px;
        opacity: 0.4;
    }
    
    #container{
        width:100%;
    }
    .menu-button{
        display: none;
    }
    #mobile-head{
        display: none;
    }
    
    #adsense-pc{
    }
    #adsense-mobile{
        display: none;
    }
        
    /*** SHOP INFO ***/
    .info {
        background: rgba(240,250,255,0.5);
        margin: 0px -20px 0px 0px;
        padding: 0px 0px 0px 25px;
    }
    
    /*** MENU ***/
    .filter-list label{
        padding: 8px 0px;
        font-size: 18px;
    }
    .list-menu li a {
        font-size: 18px;
    }
    #menu-list8 li .price,
    #menu-list8 li .price2,
    #menu-list8 li .price3-1,
    #menu-list8 li .price3-2
    {
        font-size: 24px;
    }
}
/*===============================================
●smart.css  画面の横幅が990pxまで
===============================================*/
@media screen and (max-width:990px){
    /*** 共通 ***/
    img{
        max-width: 100%;
        height: auto;
        width: auto;　
    }
    #container{
        width:100%;
    }
    .heading-section{
        padding: 30px 0px 70px 0px;
    }
    .logo {
        padding: 0px;
        text-align: left;
        height: 50px;
    }
    .logo img{
        position: relative;
        float: left;
        margin-top: 4px;
        width:auto;
        height:auto;
        max-height:45px;
        vertical-align: middle;/*IE7*/
        display: none;
    }
    img.logo-hawaii {
        position: absolute;
        margin: 15px 0px 0px 2px;
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }
    img.logo {
        margin-left: 25px;
    }
    img.heding-line{
        margin: -60px 0px 0px -20px;
        opacity: 0.5;
    }
    img.heding-line2{
        margin: 0px 0px 0px 0px;
        opacity: 0.4;
    }
    
    #adsense-pc{
        display: none;
    }
    #adsense-mobile{
    }
    
    #mobile-head {
        top:top-head 0;
        right: 0;
        position: fixed;
        margin-top: 0;
        width: 100%;
        height: 56px;
        z-index: 999;
    }
    /* Fixed reset */
    #mobile-head.fixed {
        padding-top: 0;
        background: transparent;
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #mobile-head.fixed .static-header,
    #mobile-head .static-header {
        background: rgba(240,250,255, 1);
        position: relative;
        z-index: 1000;
    }    
    #mobile-head.fixed .static-header .mobile-logo,
    #mobile-head .static-header .mobile-logo {
        padding: 0px;
        height: 50px;
    }    
    #mobile-head .static-header .mobile-logo img{
        position: relative;
        margin-top: 4px;
        width:auto;
        height:auto;
        max-height:45px;
        vertical-align: middle;/*IE7*/
    }
    #nav-toggle {
        display: block;
        position: absolute;
        right: 12px;
        top: 14px;
        width: 34px;
        height: 36px;
        cursor: pointer;
        z-index: 101;
    }
    #nav-toggle div {
        position: relative;
    }
    #nav-toggle span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #666;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }
    #nav-toggle span:nth-child(1) {
        top: 0;
    }
    #nav-toggle span:nth-child(2) {
        top: 11px;
    }
    #nav-toggle span:nth-child(3) {
        top: 22px;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(550px);
        -webkit-transform: translateY(550px);
        transform: translateY(550px);
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        width: 100%;
        text-align: left;
        margin: 0px;
        padding: 0px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style:none;
        position: static;
        background: #333;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
        margin-right: 50px;
        border-bottom:1px solid #CCC;
    }
    #mobile-head #global-nav ul li a,
    #mobile-head.fixed #global-nav ul li a{
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    .menu-button{
        position: absolute;
    }
    .menu-button ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    .main-menu ul li{
        float:none;
        position: static;
        text-indent: 100px;
        display: none;
    }
    
    /*** STAFF ***/
    .info {
        background: rgba(240,250,255,0.5);
        padding: 0px 0px 0px 5px;
    }
    .list5 li{
        color: black;
        position:relative;
        margin: 0px;
    }
    .list5 li:before{
        content:''; 
        height:0px; 
        width: 95%;
        display:block; 
        position:absolute; 
        top:45px; 
        left:0px; 
        border-bottom: 1px dashed #aaa;
    }
    .list5 li h3{
        font-size: 12px;
    }

    /*** SHOP INFO ***/
    .service-item {
        text-align: left;
        padding-left: 5px;
    }    
    .service-item h2{
        margin-bottom: 0px;
    }    
    .service-item h4{
        margin: 0px;
        padding-left: 100px;
    }    
    .icon i {
        text-align: center;
        float: left;
    }
    
    /*** footer ***/
    .top-footer .social-bottom{
        margin: 5px 0px 0px 0px;
        padding: 0px;
    }
    .main-footer .shop-list{
        /*display: none;*/
    }

    .icon_new {
      position: relative;
      left:-250px;
      top: -20px;
      overflow: hidden; /* 不要部分を消す */
    }

    .icon_new:after {
      content: "";
      position: absolute;
      z-index: -5;
      width: 200px;
      height: auto;
      background: #FF005A;
      content: "New!!"; /* 表示するテキストをここで変えます */
      text-align: center;
      color: #fff;
      font-family: 'Geo', sans-serif;/* Webフォント ※別途読み込みが必要です */
      font-size: 1.5em;
      padding: 5px 10px;
      left: 0px;
      top: 10px;
      -webkit-transform: rotate(-30deg);  /* Safari,Chrome用 */
      -moz-transform: rotate(-30deg); /* Firefox用 */
      -o-transform: rotate(-30deg);  /* Opea用 */
      transform: rotate(-30deg); /* CSS3 */
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .icon_new:hover:after {
      filter: alpha(opacity=60); /* IE用 */
      -webkit-opacity:0.6; /* Safari,Chrome用 */
      -moz-opacity:0.6; /* Firefox用 */
      -o-opacity:0.6; /* Opea用 */
      opacity:0.6; /* Opea用 */
    }

    
}