@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: hsc_ultimate
Version: 20200206

styleの設定は＃が基本とする
---------------------------------------------------------*/

/*---------------------------------------------------------
common
---------------------------------------------------------*/

/* Text elements */
body { font-size:16px; text-align: center; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust : 100%; }
body { color:#333;background-color:#000; }
h1,h2,h3,h4,h5,h6 { font-size:100%;}
a { color: #666; text-decoration: none; }
a:hover { text-decoration:underline;}
a:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

/*メインカラー設定*/
.c_junca { color:#C81239;}
.maincolor_bg { background-color:#C81239;}

/*---------------------------------------------------------
レイアウト
---------------------------------------------------------*/
.redline { background-color:#C81239; height:1px; width:80%; margin:60px auto;}
.top_left {	position:fixed;	top:0;	left:0; z-index:20;}
.top_right { position:fixed; bottom:0; right:0; z-index:20; margin:0; padding:0; line-height:0;}
.top_title { font-family:"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif; font-size:35px; color:#A10E2D; margin-bottom:20px;}
.top_title span { font-size:25px; display:block;}
.style001 { background-image:url(/top_images/stylebg001.jpg);background-repeat:no-repeat; background-size: cover; background-position:center; padding:60px 0;}
/*.style2_3 { background-image:url(/images/stylebg002.jpg) , url(); background-position: left 20px center, right 20px center;  background-repeat:no-repeat,no-repeat;background-size: 100px;}*/


.style2_3 { background-image:url(top_images/stylebg002.jpg);background-repeat:no-repeat; background-size: cover; background-position:center; padding:60px 0; }

.style004  { background-image:url(/top_images/stylebg004.jpg);background-repeat:no-repeat; background-position:right; padding:0px 0; margin-top:100px 0;}
ul.salonawardskist { margin-top:50px;}
ul.salonawardskist li { margin-bottom:15px; font-size:14px;}
ul.salonawardskist li p { margin:0 !important;}
.box001 { position:relative; left:10%; width:500px; color:#FFF;}


.style5 { background-image:url(top_images/bg_style5.jpg);background-repeat:no-repeat; background-size: cover; background-position:center;}

.box_ue{ position:relative; left:55%; width:500px; height:672px; color:#FFF; padding-top:180px;}
.box_shita{ position:relative; left:10%; width:500px; height:677px; color:#FFF; margin-top:180px;}


.style000 { padding:30px 0 60px 0; background-color:#FFF;}


/*全体背景*/
#wrapper { }

/*ヘッダー設定*/
#header { background:rgba(255,255,255,0.7);}

/*トップページキャッチコピー設定*/
#catch_top {}

/*キービジュアル設定*/
#keyvisual { position: relative;  width: 100%;  min-height: 100vh; background-image:url(top_images/mainbg.jpg);
background-repeat:no-repeat; background-size: cover; background-position:right;}




.swiper-slide {background-position:right top; background-repeat:no-repeat;}
body:not(.home)  #keyvisual { height:350px;}

/*ナビゲーション設定*/
#navigation { background:url(images/bg/navigation_bg.png);/*background-color:rgba( 188, 32, 38, 0.3 );*/  }/*背景*/
ul#menu-glnv { height:40px; }/*ナビゲーションの高さ*/


/*ナビゲーションの文字*/
ul#menu-glnv>li { margin-left:20px;}
ul#menu-glnv>li a { color: #FFF; font-size: 15px;	font-weight: normal; text-decoration:none;}
ul#menu-glnv>li { background:url(/images/parts/navi.png) no-repeat }/*ナビゲーションの文字の間の装飾*/

#menu-glnv > li a:hover {	color: #FF9;}/*マウスオーバー時*/
.current-menu-item a { }/*ナビゲーションカレントの背景設定*/

/*ナビゲーション　プルダウンの設定*/
li ul.sub-menu { width:280px; }/*プルダウンの幅*/
li ul.sub-menu li a { color: #333 !important; }/*プルダウンの文字の色*/
.sub-menu li { border-top: 1px dashed #E6E6E6; }/*プルダウンのメニュー間の装飾*/
ul#menu-glnv>li:first-child { background:none;}/*ナビゲーションの文字の間の装飾を一番最初は削除している*/
/*ul#menu-glnv>li.current-menu-item a { color: #FF0!important; background:none;}カレントメニューデザイン*/

footer { background-color:#FFF;}

/*ぱんくず設定*/
#pankuzu { background-color: #F8F8F8; padding:10px}





/*レイアウト構成設定*/
main { background-color:#000; position:relative;}
.width { width:1080px; margin-left:auto; margin-right:auto;}
.contents { width:750px; float:left;}
#side_contents { width:220px; float:right;}




/*タイトルデザイン*/
.design_title01 {
	font-family:'EB Garamond', 'Times New Roman', serif;
	font-size:40px;
	letter-spacing:9px;
	color:#999;
	text-align:center;
}
.design_title01:first-letter { color:#D41A4B !important; }
.design_title01_w { font-family:'EB Garamond', 'Times New Roman', serif; font-size:40px; letter-spacing:9px; color:#FFF; text-align:center; }
.design_title01_w:first-letter { color:#D41A4B !important; }
.design_title02 { font-family:'EB Garamond', 'Times New Roman', serif; font-size:22px; font-style:italic;  }

.design_title02 { position:relative;  padding:20px; line-height:1.4; font-size:30px; margin-bottom:30px; text-align:center;}
.design_title02:after {	margin-left: -101px;	position: absolute;	width: 203px;	height: 1px;	left: 50%;	bottom: 0;	border-bottom: 2px solid #808000;	content: "";}

.design_title03 { color:#FFF; font-size:14px; padding-left:30px; ; display:block; background:url(/mainsalon/top_images/arrow_w.png) no-repeat left 10px; text-align:left; font-style:italic; }
.design_title03 a { color:#FFF	!important; }

.single_title { font-size:30px; text-align:left; margin-bottom:20px;}

/*ボタン*/
.btn01 {background-color:#e6c619; color:#FFF; display:inline-block;  min-width:100px; padding:5px 20px; margin:20px 0; border-radius: 8px;}
.btn_order { background-color:#1F7CDB; box-shadow: 5px 5px 0px rgba(17,69,121,0.9); color:#FFF; display:inline-block;  min-width:60%; padding:15px 20px; margin:20px 0; border-radius: 8px; font-weight:bold; font-size:30px;}
.btn_order a {color:#FFF;} 
.yoyaku_btn { color:#FFF; padding:10px 25px; margin-right:20px;}
.yoyaku_btn:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }
.yoyaku_btn::before {content:'\f0da';	font-family:'Font Awesome 5 Free'	;font-weight:900; margin-right:10px;}


.top008 { background-color:#000}

/*申し込み部分の半透明色*/
.order_opacity {background: rgba(131,83,35,.7);}

@media screen and (min-width:768px){.profphoto { float:right; height:440px; width: auto;}}
/*---------------------------------------------------------
記事　single設定
---------------------------------------------------------*/
/*タイトルデザイン*/
h2 { background-color:none;}
.blog_ct { border:#CCC solid 1px; font-size:12px; padding:3px;}



/*---------------------------------------------------------
記事　一覧設定
---------------------------------------------------------*/
ul.itiran_tate li { margin-bottom:20px;}


/*---------------------------------------------------------
サイドバー設定
---------------------------------------------------------*/
#blogside { }
h2.sidetitle { }
#blogside h2.sidetitle { border-bottom:#F0F0F0 solid 1px;} 
#blogside select { padding:10px; border:#CCC solid 1px;  border-radius: 8px;}


/*メニューページ*/
.menu_title  { color:#333333; border-bottom: #CCC solid 1px; font-size:18px; font-weight:bold; padding-bottom:5px; margin-bottom:10px; text-align:left;}
.menu_price { color:#D98898; font-weight:bold; font-size:16px; margin-bottom:10px;}
.menu_img { width:250px; height:150px; object-fit: cover; max-width:none; float:right;}



/*---------------------------------------------------------
第二階層　デザイン
---------------------------------------------------------*/
.menu_cttitle { font-size:24px; color: #990; text-align:center; border-bottom:#D6D189 solid 2px; margin-bottom:10px; padding-bottom:5px; font-family: "Sorts Mill Goudy", '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif; font-weight: 900;}
.widgettitle { color:#bb4f80; border-bottom:#bb4f80 solid 1px; margin-bottom:15px;}
.sidewidget { margin-bottom:30px;}
.sidewidget ul li {margin-bottom:15px; padding-bottom:15px; border-bottom: dashed #ccc 1px;}








/*---------------------------------------------------------
original
---------------------------------------------------------*/
.sragmaster { display:inline-block; width:100px; text-align:center; font-weight:bold;}
.kannrenn_tite { color:#BB4F80; border-bottom:#BB4F80 solid 1px; font-size:20px; padding-bottom:5px; text-align:left;}

.relatelist_url { border-bottom:#CCC dashed 1px; padding-bottom:10px; margin-bottom:10px;}
.relatelist_url a {  color:#BB4F80;}



.info004 {background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #c5e7f5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#c5e7f5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#c5e7f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c5e7f5',GradientType=0 ); /* IE6-9 */
 border:#649B98 solid 1px; padding:15px; margin-top:20px;}
div.info004 h2 {font-family: 'Noto Serif JP', serif; margin-bottom:10px; color:#489299; font-weight:bold;}
div.info004 p { font-size:13px}

.info005 {/background: #ead4be; /* Old browsers */
background: -moz-linear-gradient(top,  #ead4be 0%, #ebdfd7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ead4be 0%,#ebdfd7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ead4be 0%,#ebdfd7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ead4be', endColorstr='#ebdfd7',GradientType=0 ); /* IE6-9 */
 border:#E4C9AD solid 1px; padding:15px; margin-top:20px;}
div.info005 h2 {font-family: 'Noto Serif JP', serif; margin-bottom:10px; color:#489299; font-weight:bold;}
div.info005 p { font-size:13px}


a.btn001 {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
    color: #fff;
  background: #C10000;
}

a.btn001::after{
   content:"";
   display:block;
   width:100%;
   height:4px;
   background-color: inherit;
   filter: brightness(70%);
   position:absolute;
   bottom:0;
   left:0px;
}

a.btn001:hover { opacity:0.6;}

/*-------------------------------------------*/
/*	クリック 表示 折りたたみ　アニメーション
/*-------------------------------------------*/
/*全体*/
.hidden_box {    margin: 2em 0;    padding: 0;}
/*ボタン装飾*/
.hidden_box label { display:block; text-align:left; font-weight: bold; cursor :pointer;/* padding: 15px; border:#CCC solid 1px; border-radius: 5px; */}
/*アイコンを表示*/
.hidden_box label:before { display: inline-block; content: '\f054'; font-family: 'FontAwesome'; padding-right: 5px; color:#999;}
/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before { content: '\f078'; color: #668ad8;}
/*チェックは見えなくする*/
.hidden_box input { display: none;}
/*中身を非表示にしておく*/
.hidden_box .hidden_show { height: 0;    padding: 0;    overflow: hidden;    opacity: 0;    transition: 0.4s;}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {  padding: 10px 0;    height: auto;    opacity: 1;}

footer { padding:60px;}
.copyright { background-color:#C81239; padding:40px; color:#FFF;}
.ptb30 { padding:30px 0;}

.blog_thum { background-repeat:no-repeat; background-size: cover; }
.blog_thum span { display:none; }
.bg_black { background-color:#000000}

div.logolistli { display: -webkit-flex; display: flex;  -webkit-justify-content: space-between; justify-content: space-between; width:1080px; flex-wrap:wrap; margin:0px auto 0 auto;}
div.logolistli div { width:270px; margin-top:60px;}
@media screen and (min-width: 320px) and (max-width: 768px) {
div.logolistli {width:100%; flex-wrap:wrap; margin:0px auto 0 auto;}
div.logolistli div { width:45%; margin-top:20px;}
}


/*-------------------------------------------*/
/*	ストーリーボックス
/*-------------------------------------------*/
.vh100 {	height: 100vh!important;}

/* スクロールの幅の設定 */
.story_bgbox::-webkit-scrollbar {  width: 3px;  height:3px;}

/* スクロールの背景の設定 */
.story_bgbox::-webkit-scrollbar-track {  border-radius: 1px;  box-shadow: 0 0 4px #aaa inset;}

/* スクロールのつまみ部分の設定 */
.story_bgbox::-webkit-scrollbar-thumb {  border-radius: 5px;  background: #F6F6F6; }

section { position:relative;}
#story001 { background-image:url(top_images/story001_bg.jpg); background-size: cover; background-position:top center; }
#story002 { background-image:url(top_images/story002_bg.jpg); background-size: cover; background-position:top center; }
#story003 { background-image:url(top_images/story003_bg.jpg); background-size: cover; background-position:top center; }
.story_width { width:1000px; margin-left:auto; margin-right:auto; position:relative;}
.story_bgbox { color:#FFF; width:500px; height: calc(100vh - 180px); overflow: scroll; overflow-x: hidden; padding-right:20px;}
.box_l {	position:absolute;	top:66px;	left:0px; padding-left:15px;}
.box_r  { position:absolute; top:60px;left:500px; }
p.story_title { font-size:22px; border-bottom:#C81239 solid 1px; padding-bottom:20px;}
.scrollable { position:absolute; bottom:20px; left: 0; width:50px;   right: 0;
  margin: auto;}

@media screen and (min-width: 320px) and (max-width: 768px) {
#story001 , #story002 ,#story003  { height: auto;  background-size: 100% auto; background-repeat:no-repeat; }
#story001 { background-image:url(top_images/story001_bg_sp.jpg); }
#story002 { background-image:url(top_images/story002_bg_sp.jpg); }
#story003 { background-image:url(top_images/story003_bg_sp.jpg); }
.story_width { width:96%; margin-left:auto; margin-right:auto; position:relative; }
.story_bgbox { color:#FFF; width:80%;height: calc(100vh - 130px); overflow: scroll; overflow-x: hidden; padding-left:10px margin-right:90px;}
.box_l {	position: relative;	top:0;	left:20px; padding-top:150px;}
.box_r  { position: relative;	top:0;	left:20px; padding-top:150px; }
p.story_title { font-size:19px; border-bottom:#C81239 solid 1px; padding-bottom:20px;}

}

/* 点滅 */
.scrollable{
	-webkit-animation:blink 2s  infinite alternate;
    -moz-animation:blink 2s  infinite alternate;
    animation:blink 2s  infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}