/*
Theme Name: 京都府美容業生活衛生同業組合
Author: 株式会社ソノイチ
Author URI: https://www.sonoichi.co.jp
Description: 京都府美容業生活衛生同業組合のオリジナルテーマです。
*/


html {overflow: auto;}

body {
	width:100%;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	font-family: "ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Sans-Serif;
	line-height: 1.8;
	margin: 0 auto;
	padding: 0;
	-webkit-overflow-scrolling: touch;
}


body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

body.fadeout::after {
  opacity: 1;
}

body.fadeout article{
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}



a {text-decoration:none;color: #333;}

.aw {color:#fff;}

b {font-weight: bold;}

.b {font-weight: bold;}

.red {color: #cc0000;}

img { border:none;}

option {font-weight: 300;}

.bnone  {
    border:none!important;
}

.tc  {
    text-align:center;
}

.mb100  {
    margin-bottom:100px!important;
}

/* デバイス毎の表示切り替え */

@media screen and (min-width: 769px) {
.pc_none {display:none!important;}
.tab_only {display:none!important;}
.sp_only {display:none!important;}
}

@media screen and (min-width: 641px) and (max-width: 768px) {
.pc_only {display:none!important;}
.sp_only {display:none!important;}
.tab_none {display:none!important;}
}

@media screen and (max-width: 640px) {
.pc_only {display:none!important;}
.tab_only {display:none!important;}
.sp_none {display:none!important;}
}



/* 各種設定 */

.lum-lightbox {
z-index:1000;
}
.lum-gallery-button{
display:none;
}

.map_s {
font-size:11px;
}

.logo-fade {
    opacity: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}


.txt_block {
    font-size: 13px;
    line-height: 28px;
}


.con_title_h2 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 70%;
    margin: 50px auto;
    line-height: 40px;
}

.con_title_h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 60%;
    margin: 0 auto 100px auto;
    line-height: 40px;
}



.cat_title_h2 {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 3px;
    background-color: #3a1139;
    color: #fff;
    padding: 100px 100%;
    width: 100%;
    margin: 0 0 0 -100%;
    text-align: center;
}

.cat_title_h2 span {
    font-size: 16px;
    letter-spacing: 1px;
}

.cat_title_h3 {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 3px;
    padding: 100px 100%;
    width: 100%;
    margin: 0 0 0 -100%;
    text-align: center;
    line-height: 34px;
}

.cat_title_h3 span {
    font-size: 16px;
    letter-spacing: 1px;
}

.cat_title_h3_bg {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 3px;
    padding: 100px 100%;
    width: 100%;
    margin: 0 0 0 -100%;
    text-align: center;
    line-height: 34px;
    background-color: #f3eff5;
}

.cat_title_h3_bg span {
    font-size: 16px;
    letter-spacing: 1px;
}


.cat_h2 {
    font-size: 24px;
    font-weight: 200;
    margin: 80px 0 30px 0px;
    border-top: 1px solid #c7c7c7;
}

.cat_h2_n {
    font-size: 24px;
    font-weight: 200;
    margin: 80px 0 30px 0px;
}

.cat_h3 {
    font-size: 15px;
    font-weight: 200;
    margin: 50px 0 20px 0px;
    border-top: 1px solid #ccc;
    padding: 10px 0 0px 10px;
}

.cat_h3_l {
    font-size: 15px;
    font-weight: 200;
    margin: 0 0 10px 0px;
    padding: 10px 0 0px 10px;
}

.cat_h3_m {
font-size: 15px;
    font-weight: 600;
    margin: 30px 0 10px 0;
    border-bottom: 1px solid #ccc;
}

.cat_h4 {
    font-size: 13px;
    font-weight: 400;
    margin: 10px 0;
}

.cat_h4_l {
    font-size: 13px;
    font-weight: 400;
    margin: 25px 0 5px 0;
    width: fit-content;
    padding: 3px 7px;
}

 

/* 回り込み解除 */

.clearfix {zoom:1;}
.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}




/* アニメーション */


.fadein_1 {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 1.5s;
    }
 
.fadein_1.scrollin_1 {
    opacity : 1;
    transform : translate(0, 0);
    }

.fadein_2 {
    opacity : 0;
    transition : all 2.5s;
    }
 
.fadein_2.scrollin_2 {
    opacity : 1;
    }

#effect .fadein_1:nth-of-type(1) {
	-moz-transition-delay:0s;
	-webkit-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	}

#effect .fadein_1:nth-of-type(2) {
	-moz-transition-delay:0.4s;
	-webkit-transition-delay:0.4s;
	-o-transition-delay:0.4s;
	-ms-transition-delay:0.4s;
	}
	
#effect .fadein_1:nth-of-type(3) {
	-moz-transition-delay:0.8s;
	-webkit-transition-delay:0.8s;
	-o-transition-delay:0.8s;
	-ms-transition-delay:0.8s;
	}

#effect .fadein_1:nth-of-type(4) {
	-moz-transition-delay:  1.2s;
	-webkit-transition-delay:1.2s;
	-o-transition-delay:1.2s;
	-ms-transition-delay:1.2s;
	}



.fdin0  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
-webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */
 animation-delay: 1.5s;
 -webkit-animation-name: fdin00;
 animation-name: fdin00;
 visibility: visible !important;
}

@-webkit-keyframes fdin00 {
 0% { opacity: 1; }
100% { opacity: 0;}
}
@keyframes fdin00 {
 0% { opacity: 1; }
100% { opacity: 0;}
}


.fdin1  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: 0.5s; /* Safari 4.0 - 8.0 */
 animation-delay: 0.5s;
 -webkit-animation-name: fdin01;
 animation-name: fdin01;
 visibility: visible !important;
}

@-webkit-keyframes fdin01 {
 0% { opacity: 0; }
100% { opacity: 1;}
}
@keyframes fdin01 {
 0% { opacity: 0; }
100% { opacity: 1;}
}


.fdin2  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: .5s; /* Safari 4.0 - 8.0 */
 animation-delay: .5s;
 -webkit-animation-name: fdin02;
 animation-name: fdin02;
 visibility: visible !important;
}

@-webkit-keyframes fdin02 {
 0% { opacity: 0; }
100% { opacity: 1;}
}
@keyframes fdin02 {
 0% { opacity: 0; }
100% { opacity: 1;}
}



.op_bg_1  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: 0.5s; /* Safari 4.0 - 8.0 */
 animation-delay: 0.5s;
 -webkit-animation-name: ani_opbg1;
 animation-name: ani_opbg1;
 visibility: visible !important;
}

@-webkit-keyframes ani_opbg1 {
 0% { opacity: 1; z-index:100; }
100% { opacity: 0;z-index:0; }
}
@keyframes ani_opbg1 {
 0% { opacity: 1; z-index:100; }
100% { opacity: 0;z-index:0; }
}

.op_bg_2  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
 animation-delay: 3s;
 -webkit-animation-name: ani_opbg2;
 animation-name: ani_opbg2;
 visibility: visible !important;
}

@-webkit-keyframes ani_opbg2 {
 0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes ani_opbg2 {
 0% { opacity: 1; }
100% { opacity: 0; }
}


.op_logo_1  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */
 animation-delay: 1.5s;
 -webkit-animation-name: ani_oplogo1;
 animation-name: ani_oplogo1;
 visibility: visible !important;
}

@-webkit-keyframes ani_oplogo1 {
 0% { display: none; }
100% { display: block; }
}
@keyframes ani_oplogo1 {
 0% { display: none; }
100% { display: block; }
}




/* webfonts */

.muli {font-family: 'Muli', sans-serif;}
.noto {font-family: 'Noto Serif JP', serif;}
.mplus {font-family: 'M PLUS Rounded 1c', sans-serif;}

/* webfonts */



/* facebook埋め込み：レスポンシブ対応 */
.fb-page {
    display:block !important;
    width:100%;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    height:600px;
}



.h2s {
    font-size: 14px;
    padding: 0 10px;
    letter-spacing: 1px;
}



.finan01  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: 0.5s; /* Safari 4.0 - 8.0 */
 animation-delay: 0.5s;
 -webkit-animation-name: fin1;
 animation-name: fin1;
 visibility: visible !important;
}

@-webkit-keyframes fin1 {
 0% { opacity: 0; }
100% { opacity: 1;}
}
@keyframes fin1 {
 0% { opacity: 0; }
100% { opacity: 1;}
}


.finan02  {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
-webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */
 animation-delay: 1.5s;
 -webkit-animation-name: fin2;
 animation-name: fin2;
 visibility: visible !important;
}

@-webkit-keyframes fin2 {
 0% { opacity: 0; }
100% { opacity: 1;}
}
@keyframes fin2 {
 0% { opacity: 0; }
100% { opacity: 1;}
}


.contents_area {
    position: relative;
    z-index: 20;
    font-size: 13px;
    line-height: 27px;
}

.menu_area {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity:0;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);

}

.is-animation {
    height: 60px;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

.is-animation ul {
    bottom: 20px;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

.is-animation li {
    color:#2a2a2a;
}

.footer-slide {
    opacity: 0!important;
     z-index: 0;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

.header-slide {
    opacity: 1;
     z-index: 0;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}


/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out 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;}
}


/* お知らせ */

.oshirase_ban {
    position: absolute;
    z-index: 10;
    font-size: 16px;
    padding: 5px 10px;
    bottom: 100px;
    left: 50%;
    letter-spacing: 4px;
    color: #fff;
    border-radius: 5px;
    font-weight: 500;
    margin-left: -110px;
}

.oshirase_ban img {
    width: 12px;
    height: 12px;
    margin: 0 10px 0 0;
}

.oshirase_base {
background: rgba(255, 0, 0, 0.47);
    position: absolute;
    z-index: 9;
    bottom: 100px;
    left: 50%;
    width: 220px;
    height: 40px;
    border-radius: 7px;
    margin-left: -110px;
}


#news {
    padding: 10px;
    margin: 0 0 30px 0;
    border-radius: 5px;

}

#information {
    font-size: 14px;
}

#information div {
    position: relative;
    margin: 30px 0 0 0;
}

#information dt {
    padding: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
}

#information dt:after {
    content: ' 更新';
}

#information dl {
    position: relative;
    border-bottom: 1px dashed #dcc8d9;
}


#information dd {
    display: block;
    padding: 5px 5px 40px 25px;
    margin: 0;
}

#information dd a {
    color: #7b0000;
    padding: 3px 0;
}

#information dd a:hover {
    color: #fff;
    background-color: #6f5252;
    border-radius: 3px;
}

#information dd:before {
    content: "";
    width: 22px;
    height: 15px;
    display: inline-block;
    background-image: url(/img/icon_arrow_p.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0 -2px -15px;
}

.h3caution {
    font-size: 13px;
    font-weight: 400;
    margin: 40px 0px 10px 13px;
}

#information dd a:before {
    content: '→';
    padding: 5px;
}

/*#information dd a:after {
    content: '・・・詳しくはこちら';
    font-size: 12px;
    color: #424242;
}*/


/* //お知らせ トップページ */



/* トップページのスライド設定 */


.main_bg {
background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.slider01 {
    background-image: url(/img/slider/01.jpg?1);
}

.slider02 {
    background-image: url(/img/slider/02.jpg?1);
}

.slider03 {
    background-image: url(/img/slider/03.jpg?1);
}

.slider04 {
    background-image: url(/img/slider/04.jpg?1);
}




/* アイコンパネル設定 */

#cat_panel .bg1 {
    background-image: url(/img/panel/line_many_1.gif);
}

#cat_panel .bg2 {
    background-image: url(/img/panel/line_many_2.gif?4);
}

#cat_panel .bg3 {
    background-image: url(/img/panel/line_many_3.gif?4);
}

#cat_panel .bg4 {
    background-image: url(/img/panel/line_many_4.gif?4);
}

#cat_panel .bg5 {
    background-image: url(/img/panel/line_many_5.gif?4);
}

#cat_panel .bg6 {
    background-image: url(/img/panel/line_many_6.gif?5);
}


/* カテゴリートップアイコン背景 */


.p_bg_about {
    background-image: url(/img/panel/line_many_1.png);
}

.p_bg_benefit {
    background-image: url(/img/panel/line_many_2.png);
}

.p_bg_project {
    background-image: url(/img/panel/line_many_3.png);
}

.p_bg_recruit {
    background-image: url(/img/panel/line_many_4.png);
}

.p_bg_news {
    background-image: url(/img/panel/line_many_5.png);
}

.p_bg_inquiry {
    background-image: url(/img/panel/line_many_6.png);
}





.slick-slide {
    min-height:650px;
}

.slider{
    margin: 0;
    width: 100%;
    padding: 0;
    opacity: 0;
    transition: 1s;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-initialized{
    opacity: 1
}


/*thanks*/
.thanks {
    list-style: none;
    margin: 0 auto;
    width: fit-content;
}

.slick-initialized{
    opacity: 1
}



#items {
    width: 30%;
    padding: 15% 0 12px 0;
    margin: 0 1.5% 30px 1.5%;
    float: left;
    text-align: center;
    border-bottom: 1px solid #cecece;
    opacity: 1;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    color: #585858;
    overflow: hidden;
}


#items:hover {
    opacity:0.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

#items img {
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
    margin: -50% 0 5px 0;
    display: block;
}

#items .a_title {
    font-size: 15px;
    margin: 0px;
    padding: 5px 0 0 0;
    font-weight: 400;
}

#items .a_sub {
    font-size: 11px;
    margin: 0;
    padding: 0;
    font-weight: 200;
}







.mokuji {
width: 100%;

}

.mokuji ul {
    font-size: 15px;
    line-height: 40px;
    list-style: none;
    margin: 0;
    padding: 10px 0 20px 0;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

.mokuji li {
padding: 0 10px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.mokuji li:before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #5a0858;
    border-radius: 50%;
    position: relative;
    top: -1px;
    margin-right: 5px;
    transition: .2s;
}

.mokuji li:hover {
background-color: #ececec;
}


#mokuji_button {
    opacity:0;
    display:  block;
    background-color: #000000;
    color: #fff;
    border-radius:  10px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 95px;
    height: 40px;
    z-index: 999;
    font-size: 13px;
    text-align: center;
    line-height: 40px;
    font-weight: 300;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

#mokuji_button:hover {
    background-color: #bfbfbfd6;
    color:#000;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.mokuji-fade {
    opacity:1!important;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}



.contents_txt_area {
    font-size: 13px;
    margin: 0 0 60px 0;
}

.contents_txt_area h3 {
    font-size: 18px;
    color: #1b3d2e;
    margin: 50px 0 15px 0;
    letter-spacing: 2px;
}

.contents_txt_area h4 {
    font-size: 16px;
    color: #a23628;
    margin: 5px 0;
    letter-spacing: 2px;
}

.contents_txt_area .moku {
    font-size: 18px;
    background-color: #a23628;
    color: #fff;
    padding: 5px 8px;
    font-weight: 500;
    border-radius: 20px;
    margin: 0 5px 0 0;
    width: 23px;
    height: 29px;
    display: inline-block;
    text-align: center;
    line-height: 29px;
}

.contents_txt_area .signe {
width:230px;
}
















































/* PC */
@media screen and (min-width: 769px) {


#container {
    height: auto;
    position: relative;
    padding: 0 3% 100px 3%;
    width: 94%;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 10;
    background-color: #fff;
}

#wrapper {
min-width: 770px;
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    overflow-x: hidden;
}

.arrow {
    background-image: url(/img/arrow.png);
    background-position: center top;
    position: absolute;
    background-size: 100%;
    z-index: 5;
    bottom: 15px;
    left: 0;
    right: 0;
    width: 70px;
    height: 20px;
    margin: auto;
    -webkit-animation: bounce1 2s infinite;
    background-repeat: no-repeat;
    opacity: .8;
}

@-webkit-keyframes bounce1 {
  0%   {
    margin-bottom:0;
  }
  50% {
    margin-bottom:10px;
  }
  100% {
    margin-bottom:0;
  }
}







.opning_bg_1 {
    background-color: #000;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.opning_bg_2 {
    position: absolute;
    background-color: #000;
    width: 100%;
    z-index: 0;
}

.opning_logo_1 {
    position: absolute;
    width: 90%;
    height: 130px;
    z-index: 2;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    font-size: 2.5vw;
    text-align: center;
    color: #fff;
    font-weight: 100;
}

.opning_logo_2 {
    background-image: url(/img/op/op_logo_1.png);
    position: absolute;
    background-size: 100%;
    width: 140px;
    height: 270px;
    z-index: 2;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
}


.main_bg {
    background-position: center;
}



 /* バーガーメニュー */

header {
    position: fixed;
    width: 100%;
    height: 70px;
    z-index: 1000!important;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    opacity: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#350a34+2,350a34+100&1+15,0+99 */
background: -moz-linear-gradient(left,  rgba(53,10,52,1) 2%, rgba(53,10,52,1) 15%, rgba(53,10,52,0) 99%, rgba(53,10,52,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(53,10,52,1) 2%,rgba(53,10,52,1) 15%,rgba(53,10,52,0) 99%,rgba(53,10,52,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(53,10,52,1) 2%,rgba(53,10,52,1) 15%,rgba(53,10,52,0) 99%,rgba(53,10,52,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#350a34', endColorstr='#00350a34',GradientType=1 ); /* IE6-9 */
	}

.inner{
    width: 40px;
    margin: 0 0 0 auto;
	}

.change_btn{
		width: 90%;
		margin: 32px auto;
}


.img_c {
width: 70%;
margin: 20px 15%;
}

.img_y{
width: 90%;
    margin: 20px 5%;
}

.img_r {
width: 70%;
margin: 20px 15%;
}


.img_s {
width: 100%;
margin: 20px 0;
}

.img_balogo {
    width: 10%;
    margin: 150px 45% -25px 45%;
}

/*メニュー部分*/
nav {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    left: 0;
    z-index: 50;
    overflow: visible;
    color: #fff;
    overflow-y: auto;
}

header nav ul {
    display: block;
    width: 96%;
    font-size: 0;
    margin: 0 2%;
    padding: 120px 0 0 0;
}

header nav ul li {
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-weight: 200;
    letter-spacing: 2px;
    width: 50%;
    display: inline-block;
    padding: 20px 0;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    vertical-align: top;
    border-top: 1px solid #4c4c4c!important;
    line-height: 27px;
   font-weight: 600;
}

header nav ul li:hover {
    background-color: rgba(53,10,52,0.6);
}

header nav .sns {
font-size: 14px;
    text-align: center;
    margin: 35px;
}

header nav .sns a {
    text-align: center;
    color: #fff;
    margin: 25px;
}



header nav ul li a {
    display: block;
    color: #390b3e;
}

.nav_inner {
    width: 100%;
    height: 100%;
}

header nav ul li span {
    display: block;
    font-size: 13px;
    font-weight: 200;
}


.li_s {
    font-size: 14px;
    margin: -25px 0 0 0;
}


.map {
margin:auto;
}

.map img {
width:100%;
margin:auto;
}



.instagram {
    background-image: url(/img/icon_instagram_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: 0px 3px -3px 0;
}

.facebook {
    background-image: url(/img/icon_facebook_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: 0px 3px -3px 0;
}

.sns_link {color:#fff;}


.inq_access {
    width: 100%;
    margin: 40px auto;
    text-align: center;
    font-size: 15px;
}

.inq_access .footer_tel {
    background-image: url(/img/telnumber_pc.png?1);
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    background-size: 96%;
    margin: 20px 0 2px 0;
}

.inq_access .footer_inq {
background-image: url(/img/inquiry_pc.png?1);
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    background-size: 96%;
}



.inq_access .address_area {
width: fit-content;
    text-align: left;
    margin: 0 auto;
    font-size: 13px;
}

.inq_access .address_area  .gmap {
    border-radius: 10px;
    padding: 4px 6px;
    background-color: #1b3d2e;
    color: #fff;
    font-weight: 600;
    line-height: 40px;
   }



.menu_name_s {
    width: 100%;
    display: block;
    text-align: center;
    margin: 50px 0;
}

.menu_name_s .name_s_s {
    font-size: 12px;
    margin: 0px 0 0 0;
    color: #fff;
}

.menu_name_s .menu_s_logo {
    height: 150px;
    margin: 50px auto;
    background-image: url(/img/footer_logo.png);
    background-size: 100%;
    width: 130px;
    background-repeat: no-repeat;
}
	
	
/*開閉ボタン*/
#nav_toggle {
    display: block;
    width: 20px;
    height: 26px;
    position: relative;
    top: 0;
    z-index: 400;
    padding: 22px 30px;
    right: 40px;
    cursor: pointer;
    background: rgba(53,10,52,1);
}

#nav_toggle div {
    position: relative;
}

#nav_toggle span {
display: block;
    height: 3px;
    background: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    border-radius: 5px;
}

#nav_toggle span:nth-child(1) {
    top:0px;
}

#nav_toggle span:nth-child(2) {
    top:9px;
}

#nav_toggle span:nth-child(3) {
    top:18px;
}
	
/* open時 */
.open #nav_toggle span {
    background: #fff;
}

.open #nav_toggle {
    background: #fff;
    cursor: pointer;
}

.open #nav_toggle span:nth-child(1) {
top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
    background: rgba(55, 7, 104, 1);
    position: relative;
    z-index: 1;
    width: 20px;
    left: 0px;
}

.open #nav_toggle span:nth-child(2) {
    background: rgba(255, 255, 255, 0);
}

.open #nav_toggle span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    background: #000;
    width: 20px;
    left: 0px;
}

 /* //バーガーメニュー */


.slider img{
    height: auto;
    width: 100%;
}

.img_c , .img_s  {
width: 90%;
    margin: 10px 5%;
}

.img_y{
width: 70%;
    margin: 20px 15%;
}

.img_l {
    width: 40%;
    margin: 0 10px;
    float: left;
}

.img_ls {
    width: 30%;
    margin: 0 20px 40px 0;
    float: left;
}

.img_shop {
    width: 46%;
    float: left;
    margin: 2%;
}

.img_r {
width: 35%;
    margin: 0 10px;
    float: right;
}

.img_app {
width: 15%;
    margin: 0 50px;
    float: right;
}


 /* 共通 */

.main_logo {
    position: fixed;
    z-index: 999;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 350px;
    height: 70px;
    line-height: 60px;
    left: 15px;
}

.main_logo_s {
    font-size: 11px;
    font-weight: 100;
    margin: -11px 0 0 50px;
    padding: 0;
    line-height: 0;
}

.main_logo:before {
    width: 40px;
    height: 43px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 2px -20px 0;
    background-position: center;}


 /* トップページ */

.copy_logo {
    color: #fff;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 2px;
    width: 350px;
    height: 50px;
    margin: 20px auto 0 auto;
}

.copy_logo_s {
    font-size: 11px;
    font-weight: 100;
    margin: 2px 0 0 52px;
    padding: 0;
    line-height: 0;
}

.copy_logo:before {
    width: 40px;
    height: 43px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 13px -20px 0;
    background-position: center;
}



#cat_panel {
    width: 100.4%;
    font-size: 0;
    max-width: 1400px;
    margin: 0 auto 100px auto;
}

#cat_panel .panel {
    width: calc(100% / 3);
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 -1px -1px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    border: 1px dashed #dcc8d9;
    color: #000;
    font-size: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
}

#cat_panel .panel:before {
    content: "";
    display: block;
    padding-top: 100%;
	}

#cat_panel .panel:hover {
    background-size: 110%;
    background-color: #a5f7a7;
    background-blend-mode: multiply;
    -webkit-filter:invert(100%);
    -moz-filter:invert(100%);
    -ms-filter:invert(100%);
    filter:invert(100%);
    letter-spacing: 8px;
}




#cat_panel .title {
    font-size: 24px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 40px;
}


#cat_panel .sub {
    font-size: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 40px;
    letter-spacing: 1px;
}




/* カテゴリートップ */
.header_area {
    width: 100%;
    height: 700px;
    position: relative;
    background-size: cover;
    background-color: #3a1139;
}

.cat_area_bg {
    width: 100%;
    height: 700px;
    position: absolute;
    top:0;
    left:0;
    background-color: #3a1139;
    z-index:1;
}

.header_area .cat_title {
    width: 300px;
    height: 350px;
    position: absolute;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    line-height: 350px;
    top: 50%;
    left: 50%;
    margin: -175px 0 0 -300px;
    z-index: 2;
    letter-spacing: 3px;
    background-position: center;
    background-size: cover;
}

.header_area .cat_title_c {
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    line-height: 350px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    z-index: 2;
    letter-spacing: 3px;
    background-position: center;
    background-size: cover;
}

.header_area .mokuji {
    width: 300px;
    height: 350px;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    top: 50%;
    margin: -175px 0 0 0px;
    left: 50%;
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    display: table;
}


/* トップページ 加入の魅力 */

.miryoku_block {
display: inline-block;
    width: 25%;
    border: 1px solid #fbeef9;
    border-radius: 5px;
    padding: 3%;
    margin: 1%;
    height: auto;
    transition: .3s;
    vertical-align: top;
    background-color: #fbeef9;
}

.miryoku_block:hover {
    background-color: #fbf7ff;
    border: 1px solid #c3c3c3;
}

.miryoku_block h3 {
    text-align: center;
    font-size: 18px;
}
.user_icon {
    background-image: url(/img/icon_user_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.miryoku_icon {
width: 50%;
    margin: -90px auto 0 auto;
    display: block;
}

.miryoku_list {
list-style: disc;
    margin: 40px 0 0 -20px;
    text-indent: 2px;
}

.miryoku_list li {
    margin: 0 0 10px 0;
}

.miryoku_list li:last-child {
list-style: none;
}

.kanyu_btn  {
width: 60%;
    height: 100px;
    margin: 80px auto;
    color: #fff;
    text-align: center;
    line-height: 100px;
    border-radius: 15px;
    font-size: 30px;
    letter-spacing: 15px;
    border: 5px solid #bfbfbf;
    background-color: #af1957;
    transition:.3s;
}

.kanyu_btn:hover  {
    color: #af1957;
    border: 5px solid #af1957;
    background-color: #fff;
}


/* カテゴリートップ画像 */
.top_about {
    background-image: url(/img/cat_top/about.jpg);
}

.top_benefit {
    background-image: url(/img/cat_top/benefit.jpg);
}

.top_inquiry {
    background-image: url(/img/cat_top/inquiry.jpg);
}

.top_news {
    background-image: url(/img/cat_top/news.jpg);
}

.top_privacy {
    background-image: url(/img/cat_top/privacy.jpg);
}




/* カテゴリー内部 */

.cat_txtarea {
    font-size: 14px;
    width: 90%;
    margin: 50px auto 100px auto;
}

.cat_txtarea .lc {
    color: #7b0000;
    text-decoration: none;
    transition: .3s;
    padding: 0 3px;
}

.cat_txtarea .lc:hover {
    color: #fff;
    background-color: #6f5252;
    border-radius: 3px;
}

.cat_txtarea_sub {
    font-size: 14px;
    width: fit-content;
    margin: 50px auto;
}

.cat_txtarea_sub_2 {
    font-size: 14px;
    width: fit-content;
    margin: 0 auto;
}

.cat_txtarea_sub_3 {
    font-size: 13px;
    width: fit-content;
    margin: 0 auto;
}

.cat_txtarea_bg {
    background-color: #f3eff5;
    padding: 0 100% 100px 100%;
    width: 100%;
    margin: 0 0 0 -100%;
    display: flex;
}



/* テーブル設定 */

.table01 {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
}

.table01 th,.table01 td {
    padding: 7px 0;
}

.td01 {
    width: 100px;
}

.td02 {
    width: auto;
}

.table02 {
width: 90%;
    border: 0;
    font-weight: 200;
    font-size: 14px;
    margin: 50px auto;
}

.table02 th,.table02 td {
    padding: 7px 0;
}

.tr01 {
    width: 150px;
    font-weight: 600;
    vertical-align: top;
    padding: 7px;
    border-bottom: 1px dashed #c39ec2;
    text-align: center;
}

.tr02 {
    width: auto;
    vertical-align: top;
    border-bottom: 1px dashed #c39ec2;
}

.tr03 {
    width: 110px;
    font-weight: 600;
    vertical-align: top;
    padding: 7px 0 40px 7px;
}

.table_list {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
}

.table_list li {
    margin: 0 0 0 1.5em;
}

.map_link {
    background-image: url(/img/map_icon_w.png);
    background-repeat: no-repeat;
    background-color: #2d5fab;
    background-size: 14px;
    padding: 2px 8px 2px 28px;
    color: #fff;
    border-radius: 5px;
    background-position: 8px center;
    display: inline-block;
    transition: .3s;
}

.map_link:hover {
opacity:.7;
}


.pdf_link {
    margin: 0 6px 20px 0;
    background-image: url(/img/pdf_icon_w.png);
    background-repeat: no-repeat;
    background-color: #b90a0a;
    background-size: 17px;
    padding: 10px 10px 10px 37px;
    color: #fff;
    border-radius: 5px;
    background-position: 10px center;
    display: inline-block;
    transition: .3s;
}

.pdf_link:hover {
opacity:.7;
}



/* 組合について */

.jigyou {
    font-size: 15px;
    width: fit-content;
    margin: 100px auto;
    list-style: none;
    line-height: 30px;
}

.jigyou li {
margin: 30px 0px;
}

.jigyou li:before {
    content: "";
    width: 15px;
    height: 10px;
    display: inline-block;
    background-image: url(/img/icon_arrow_p.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0 0px -15px;
}


.profdata  {
font-size: 15px;
    width: 50%;
    float: left;
    list-style: none;
    margin: 0 0 0 2%;
}

.profdata li {
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    line-height: 31px;
}



.organization {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
    margin: 0 0 30px 0;
}

.organization th {
    background-color: #cacaca;
    font-weight: 600;
}

.organization .pn  {
vertical-align: top;
    text-align: center;
    padding: 13px 0 0 0;
}

.organization th,.organization td {
    padding: 7px;
    border: 1px solid #cacaca;
}

.organization .position  {
width: 150px;
    border-right: 1px solid #fff;
}

.organization span  {
    margin: 10px 1.5%;
    word-break: keep-all;
    line-height: 20px;
    vertical-align: top;
}

.organization td p  {
    width: 21%;
    display: inline-block;
    margin: 10px 1.5%;
    word-break: keep-all;
    line-height: 20px;
    vertical-align: top;
    text-align: center;
}

.organization td img  {
    width: 80%;
    max-width: 90px;
}

.organization .p_name {
    width: auto;
    border-right: 1px solid #fff;
}



.shibu {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
    margin: 0 0 150px 0;
}

.shibu col {
    padding: 7px 0;
}

.shibu th {
    background-color: #cacaca;
    font-weight: 600;
}

.shibu th,.shibu td {
    padding: 7px;
    border: 1px solid #cacaca;
}

.shibu .area  {
width: 50px;
    border-right: 1px solid #fff;
}

.shibu .shop {
    width: 210px;
    border-right: 1px solid #fff;
}

.shibu .tel {
    width: 85px;
    border-right: 1px solid #fff;
}

.shibu .fax {
    width: 85px;
    border-right: 1px solid #fff;
}

.shibu .zip {
    width: 55px;
    border-right: 1px solid #fff;
}


.nagare {
    list-style: decimal;
    margin: 0 0 0 10px;
    text-indent: 2px;
}

.nagare li {
    margin: 0 0 10px 0;
}





 /* おしらせ */

.bn_list {
    margin: 40px;
}

.bn_list a {
    margin: 10px 1%;
    background-image: url(/img/pdf_icon_w.png);
    background-repeat: no-repeat;
    background-color: #7b0000;
    background-size: 17px;
    padding: 10px 10px 10px 37px;
    color: #fff;
    border-radius: 5px;
    background-position: 10px center;
    display: inline-block;
    transition: .3s;
    width: 22.3%;
    text-align: center;
    border: 1px solid #7b0000;
    font-size: calc(60% + 0.4vw);
}

.bn_list a:hover {
    background-image: url(/img/pdf_icon_red.png);
    border: 1px solid #7b0000;
    color: #7b0000;
    background-color: #fff;
}

#information p img {
width: 280px;
    margin: 10px;
    float: right;
    object-fit: scale-down;
    height: 220px;
}

#information dl {
    position: relative;
    border-bottom: 1px dashed #dcc8d9;
    min-height: 280px;
}

#information div {
    position: relative;
    margin: 30px 0 0 0;
    clear: both;
}


/* お問い合わせ */

.block_area {
    display: inline-flex;
}

.inq_block {
    display: inline-block;
    width: 37%;
    border: 1px solid #3a1139;
    border-radius: 5px;
    padding: 5%;
    margin: 1%;
    height: auto;
    transition: .3s;
    vertical-align: top;
}

.inq_block:hover {
    background-color: #fbf7ff;
    border: 1px solid #c3c3c3;
}

.tel_icon {
    background-image: url(/img/icon_tel_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.mail_icon {
    background-image: url(/img/icon_mail_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.man_icon {
    background-image: url(/img/icon_man_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}


.tel_btn {
    margin: 0 6px 20px 0;
    background-color: #4f85ad;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    letter-spacing: 4px;
    cursor: pointer;
    width: 88%;
}



/* プライバシーポリシー */
.p_h3 {
    font-size: 13px;
    font-weight: 200;
    margin: 50px 0 20px 0px;
    padding: 10px 0 0px 10px;
}

.p_title {
    font-weight: 600;
    font-size: 16px;
    padding: 40px 0 0 0!important;
    border-bottom: 1px dashed #a9a9a9;
}

.p_list {
    font-size: 13px;
    margin: 0;
    padding: 0;
    font-weight: 200;
}

.p_list ul {
list-style: none;
line-height: 33px;
}

.p_list li {
    padding: 10px 0;
}

.p_list .child {
    list-style: decimal;
    margin: 0 0 0 -23px;
    text-indent: 5px;
}

.p_list .child li {
    padding: 0;
}










.about {
    margin: 100px 0;
}

.about ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0;
}

.about li {
    display: inline-block;
    position:relative;
    margin: 3px 0.5%;
    width: 32%;
    border: 1px solid #1b3d2d;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about li:hover {
opacity:.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about img {
width:100%;
}

.about .name {
background: #1b3d2d;
    width: 100%;
    height: 42px;
    position: absolute;
    color: #fff;
    text-align: center;
    z-index: 2;
    bottom: 0;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 42px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about li:hover > .about.name {
    background-color: #734e4e;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


/* blog */
.blog_btn {
    font-size: 12px;
    background-color: #195ca5;
    padding: 5px;
    color: #fff;
    border-radius: 6px;
    letter-spacing: 0;
    margin: 0 0 0 10px;
}

/* about */
.top_about_1 {
    background-image: url(/img/mutual-12.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_2 {
    background-image: url(/img/mutual-13.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_3 {
    background-image: url(/img/mutual-14.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_4 {
    background-image: url(/img/mutual-15.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_bg {
    height: 500px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 1;
    width: 100%;
}


.top_about_txt {
    font-size: 18px;
    vertical-align: middle;
    display: table-cell;
    width: 68%;
    padding: 0 16%;
    line-height: 38px;
    position: absolute;
    top: 55px;
    z-index: 2;
    font-weight: 400;
}

.top_about_txt a {
    background-color: #eeedeb;
    padding: 3px 5px;
    border-radius: 6px;
    transition: .2s;
}

.top_about_txt a:hover {
    color: #fff;
    background-color: #aeaeae;
}

.top_about_ban {
    color: #fff;
    background-color: #aeaeae;
    transition: .2s;
}



.history_txt_c {
    font-size: 17px;
    height: 90px;
    width: 100%;
    padding: 50px 0 0 0;
    line-height: 28px;
    text-align: center;
    color: #680b0b;
    letter-spacing: 2px;

}

.shop_txt {
    font-size: 14px;
    height: 330px;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    padding: 0 5%;
    line-height: 28px;
}

.shop_txt a {
    background-color: #eeedeb;
    padding: 3px 5px;
    border-radius: 6px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.shop_txt a:hover {
    color: #fff;
    background-color: #aeaeae;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


.menu_txt {
height: 480px;
    width: 100%;
    margin: 0 auto 50px auto;
    background-image: url(/img/omen_img_2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}



/* フォローボタン */
.follow_btn_ig {
background-image: url(/img/icon_instagram_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}

.follow_btn_fb {
    background-image: url(/img/icon_facebook_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}

.follow_btn_tw {
    background-image: url(/img/icon_twitter_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}


/* 採用情報 */

.recruit_img_block {
    background-image: url(/img/recruit.jpg);
    width: 100%;
    margin: 0 0 200px 0;
    position: relative;
    height: 415px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.recruit_img_block h2 {
position: absolute;
    bottom: -80px;
    left: 10px;
}

.recruit_img_block h3 {
    position: absolute;
    bottom: -120px;
    left: 10px;
}


/* 会社概要 */
.company_img_block {
    background-image: url(/img/omen_ginkakuji.jpg?4);
    width: 70%;
    margin: 0 0 70px auto;
    position: relative;
    height: 420px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.company_img_block h2 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 0px;
    left: -20%;
}

.company_img_block .img_marunitsuta {
    position: absolute;
    top: 40%;
    height: 115px;
    left: -37%;
    opacity: 0.15;
}




/* footer */

footer {
    list-style: none;
    padding: 0;
    width: 100%;
    clear: both;
    position: relative;
    color: #fff;
    height: 320px;
    background-color: #000;
    z-index: 10;
    background-position: 0 30px;
}

footer a {
    color: #fff;
    text-decoration:none;
}

footer .logo {
    color: #fff;
    font-size: 24px;
    font-weight: 200;
    letter-spacing: 2px;
    width: 440px;
    height: 80px;
    margin: 0 auto;
    padding: 60px 0 0 0;
}

footer .logo_s {
color: #fff;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
    margin: -12px 0 0 60px;
}

footer .logo:before {
width: 50px;
    height: 52px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 10px -27px 0;
    background-position: center;
}



footer .back {
    width: 100%;
    height: 50px;
    margin: -50px auto 0 auto;
    position: relative;
    background-color: #565656;
    text-align: center;
    display: table;
    line-height: 50px;
    font-size: 18px;
    letter-spacing: 4px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;

}

footer .back:hover {
    background-color: #eeeeee;
    color: #828282;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .gmap {
    border-radius: 10px;
    padding: 1px 3px;
    background-color: #fff;
    border:1px solid #fff;
    color: #1b3d2e;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .gmap:hover {
    background-color: #1b3d2e;
    border:1px solid #fff;
    color: #fff;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .inner {
margin: 0 auto;
    position: relative;
    width: 750px;
    height: 100%;
    z-index: -1;
}



footer .links {
    position: relative;
    width: 100%;
    margin: 30px 0 0 0;
}


footer .links ul {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center;
}

footer .links li {
    display: inline-block;
    margin: 0 10px;
}

footer .links li a {
opacity:1;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .links li a:hover {
opacity:.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .footer_txt {
    text-align: center;
    font-size: 20px;
}

footer .footer_top {
    width: 100%;
    padding: 20px 0;
    background-color: #4e4e4e;
    text-align: center;
    font-size: 15px;
    display: block;
    vertical-align: middle;
    color: #fff;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 0;
}


footer .footer_tel {
    background-image: url(/img/telnumber_pc.png?1);
    background-size: auto;
    background-repeat: no-repeat;
    width: 49.9%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    float: left;
    margin-top: 96px;
}

footer .footer_inq {
    background-image: url(/img/inquiry_pc.png?1);
    background-size: auto;
    background-repeat: no-repeat;
    width: 49.9%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    float: right;
    margin-top: 96px;
}


footer .other-contents {
position: absolute;
    width: 100%;
    bottom: 10px;
}

footer .other-contents ul {
    list-style: none;
    text-align: center;
    margin-bottom: 100px;
    padding: 0;
}

footer .other-contents li {
    font-size: 14px;
    display: inline-block;
    border-left: 1px solid #fff;
    padding: 5px 10px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    margin: 0 -5px 0 0;
    height: 10px;
    line-height: 10px;
}

footer .other-contents li:first-child {
    border-left: none;
}

footer .other-contents li:hover {
    background-color: #ffffff61;
    color: #fff;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .footer_logo {
    background-image: url(/img/footer_logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 190px;
    height: 220px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 180px;
}

footer .other-contents .footer_txt_logo {
    height: 100px;
    position: absolute;
    right: 20px;
    width: 330px;
    text-align: center;
    line-height: 45px;
    letter-spacing: 2px;
    top: 0px;
}

footer .other-contents .footer_s {
    font-size: 22px;
    padding: 0;
    margin: 0;
}

footer .other-contents .footer_l {
    font-size: 45px;
    padding: 0;
    margin: 0;
}

footer .other-contents .footer_address {
    left: 290px;
    font-size: 14px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 110px;
}

footer .other-contents .copyright {
    font-size: 11px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 10px;
}


#kanri_banner {
    width: 100%;
    margin: -100px auto 0 auto;
    max-width: 1400px;
}


#kanri_banner .kanri_ban {
    width: 70%;
    margin: 30px 15%;
}


#bms_banner {
    width: 100%;
    margin: 50px auto 0 auto;
    max-width: 1400px;
}


#bms_banner .bms_ban {
    width: 50%;
    margin: 0 25%;
    box-shadow: 0px 0px 2px 1px #bebebe;
}


}





































/* タブレット */
@media screen and (min-width: 641px) and (max-width: 768px) {


#container {
    height: auto;
    position: relative;
    padding: 0 3% 100px 3%;
    width: 94%;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 10;
    background-color: #fff;
}

#wrapper {
min-width: 700px;
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    overflow-x: hidden;
}

.arrow {
    background-image: url(/img/arrow.png);
    background-position: center top;
    position: absolute;
    background-size: 100%;
    z-index: 5;
    bottom: 15px;
    left: 0;
    right: 0;
    width: 70px;
    height: 20px;
    margin: auto;
    -webkit-animation: bounce1 2s infinite;
    background-repeat: no-repeat;
    opacity: .8;
}

@-webkit-keyframes bounce1 {
  0%   {
    margin-bottom:0;
  }
  50% {
    margin-bottom:10px;
  }
  100% {
    margin-bottom:0;
  }
}







.opning_bg_1 {
    background-color: #000;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.opning_bg_2 {
    position: absolute;
    background-color: #000;
    width: 100%;
    z-index: 0;
}

.opning_logo_1 {
    position: absolute;
    width: 90%;
    height: 130px;
    z-index: 2;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    font-size: 2.5vw;
    text-align: center;
    color: #fff;
    font-weight: 100;
}

.opning_logo_2 {
    background-image: url(/img/op/op_logo_1.png);
    position: absolute;
    background-size: 100%;
    width: 140px;
    height: 270px;
    z-index: 2;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
}


.main_bg {
    background-position: center;
}



 /* バーガーメニュー */

header {
    position: fixed;
    width: 100%;
    height: 70px;
    z-index: 1000!important;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    opacity: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#350a34+2,350a34+100&1+15,0+99 */
background: -moz-linear-gradient(left,  rgba(53,10,52,1) 2%, rgba(53,10,52,1) 15%, rgba(53,10,52,0) 99%, rgba(53,10,52,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(53,10,52,1) 2%,rgba(53,10,52,1) 15%,rgba(53,10,52,0) 99%,rgba(53,10,52,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(53,10,52,1) 2%,rgba(53,10,52,1) 15%,rgba(53,10,52,0) 99%,rgba(53,10,52,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#350a34', endColorstr='#00350a34',GradientType=1 ); /* IE6-9 */
	}

.inner{
    width: 40px;
    margin: 0 0 0 auto;
	}

.change_btn{
		width: 90%;
		margin: 32px auto;
}


.img_c {
width: 70%;
margin: 20px 15%;
}

.img_y{
width: 90%;
    margin: 20px 5%;
}

.img_r {
width: 70%;
margin: 20px 15%;
}


.img_s {
width: 100%;
margin: 20px 0;
}


.img_balogo {
    width: 10%;
    margin: 150px 45% -25px 45%;
}


/*メニュー部分*/
nav {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    left: 0;
    z-index: 50;
    overflow: visible;
    color: #fff;
    overflow-y: auto;
}

header nav ul {
    display: block;
    width: 96%;
    font-size: 0;
    margin: 0 2%;
    padding: 120px 0 0 0;
}

header nav ul li {
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-weight: 200;
    letter-spacing: 2px;
    width: 50%;
    display: inline-block;
    padding: 20px 0;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    vertical-align: top;
    border-top: 1px solid #4c4c4c!important;
    line-height: 27px;
   font-weight: 600;
}

header nav ul li:hover {
    background-color: rgba(53,10,52,0.6);
}

header nav .sns {
font-size: 14px;
    text-align: center;
    margin: 35px;
}

header nav .sns a {
    text-align: center;
    color: #fff;
    margin: 25px;
}



header nav ul li a {
    display: block;
    color: #390b3e;
}

.nav_inner {
    width: 100%;
    height: 100%;
}

header nav ul li span {
    display: block;
    font-size: 13px;
    font-weight: 200;
}


.li_s {
    font-size: 14px;
    margin: -25px 0 0 0;
}


.map {
margin:auto;
}

.map img {
width:100%;
margin:auto;
}



.instagram {
    background-image: url(/img/icon_instagram_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: 0px 3px -3px 0;
}

.facebook {
    background-image: url(/img/icon_facebook_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: 0px 3px -3px 0;
}

.sns_link {color:#fff;}


.inq_access {
    width: 100%;
    margin: 40px auto;
    text-align: center;
    font-size: 15px;
}

.inq_access .footer_tel {
    background-image: url(/img/telnumber_pc.png?1);
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    background-size: 96%;
    margin: 20px 0 2px 0;
}

.inq_access .footer_inq {
background-image: url(/img/inquiry_pc.png?1);
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    background-size: 96%;
}



.inq_access .address_area {
width: fit-content;
    text-align: left;
    margin: 0 auto;
    font-size: 13px;
}

.inq_access .address_area  .gmap {
    border-radius: 10px;
    padding: 4px 6px;
    background-color: #1b3d2e;
    color: #fff;
    font-weight: 600;
    line-height: 40px;
   }



.menu_name_s {
    width: 100%;
    display: block;
    text-align: center;
    margin: 50px 0;
}

.menu_name_s .name_s_s {
    font-size: 12px;
    margin: 0px 0 0 0;
    color: #fff;
}

.menu_name_s .menu_s_logo {
    height: 150px;
    margin: 50px auto;
    background-image: url(/img/footer_logo.png);
    background-size: 100%;
    width: 130px;
    background-repeat: no-repeat;
}
	
	
/*開閉ボタン*/
#nav_toggle {
    display: block;
    width: 20px;
    height: 26px;
    position: relative;
    top: 0;
    z-index: 400;
    padding: 22px 30px;
    right: 40px;
    cursor: pointer;
    background: rgba(53,10,52,1);
}

#nav_toggle div {
    position: relative;
}

#nav_toggle span {
display: block;
    height: 3px;
    background: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    border-radius: 5px;
}

#nav_toggle span:nth-child(1) {
    top:0px;
}

#nav_toggle span:nth-child(2) {
    top:9px;
}

#nav_toggle span:nth-child(3) {
    top:18px;
}
	
/* open時 */
.open #nav_toggle span {
    background: #fff;
}

.open #nav_toggle {
    background: #fff;
    cursor: pointer;
}

.open #nav_toggle span:nth-child(1) {
top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
    background: rgba(55, 7, 104, 1);
    position: relative;
    z-index: 1;
    width: 20px;
    left: 0px;
}

.open #nav_toggle span:nth-child(2) {
    background: rgba(255, 255, 255, 0);
}

.open #nav_toggle span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    background: #000;
    width: 20px;
    left: 0px;
}

 /* //バーガーメニュー */


.slider img{
    height: auto;
    width: 100%;
}

.img_c , .img_s  {
width: 90%;
    margin: 10px 5%;
}

.img_y{
width: 70%;
    margin: 20px 15%;
}

.img_l {
    width: 40%;
    margin: 0 10px;
    float: left;
}

.img_ls {
    width: 30%;
    margin: 0 20px 40px 0;
    float: left;
}

.img_shop {
    width: 46%;
    float: left;
    margin: 2%;
}

.img_r {
width: 35%;
    margin: 0 10px;
    float: right;
}

.img_balogo {
    width: 26%;
    margin: 100px 37% -25px 37%;
}



 /* 共通 */

.main_logo {
    position: fixed;
    z-index: 999;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 350px;
    height: 70px;
    line-height: 60px;
    left: 15px;
}

.main_logo_s {
    font-size: 11px;
    font-weight: 100;
    margin: -11px 0 0 50px;
    padding: 0;
    line-height: 0;
}

.main_logo:before {
    width: 40px;
    height: 43px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 2px -20px 0;
    background-position: center;}


 /* トップページ */

.copy_logo {
    color: #fff;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 2px;
    width: 350px;
    height: 50px;
    margin: 20px auto 0 auto;
}

.copy_logo_s {
    font-size: 11px;
    font-weight: 100;
    margin: 2px 0 0 52px;
    padding: 0;
    line-height: 0;
}

.copy_logo:before {
    width: 40px;
    height: 43px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 13px -20px 0;
    background-position: center;
}



#cat_panel {
    width: 100.4%;
    font-size: 0;
    max-width: 1400px;
    margin: 0 auto 100px auto;
}

#cat_panel .panel {
    width: calc(100% / 3);
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 -1px -1px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    border: 1px dashed #dcc8d9;
    color: #000;
    font-size: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
}

#cat_panel .panel:before {
    content: "";
    display: block;
    padding-top: 100%;
	}

#cat_panel .panel:hover {
    background-size: 110%;
    background-color: #a5f7a7;
    background-blend-mode: multiply;
    -webkit-filter:invert(100%);
    -moz-filter:invert(100%);
    -ms-filter:invert(100%);
    filter:invert(100%);
    letter-spacing: 8px;
}




#cat_panel .title {
    font-size: 24px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 40px;
}


#cat_panel .sub {
    font-size: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 40px;
    letter-spacing: 1px;
}




/* カテゴリートップ */
.header_area {
    width: 100%;
    height: 700px;
    position: relative;
    background-size: cover;
    background-color: #3a1139;
}

.cat_area_bg {
    width: 100%;
    height: 700px;
    position: absolute;
    top:0;
    left:0;
    background-color: #3a1139;
    z-index:1;
}

.header_area .cat_title {
    width: 300px;
    height: 350px;
    position: absolute;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    line-height: 350px;
    top: 50%;
    left: 50%;
    margin: -175px 0 0 -300px;
    z-index: 2;
    letter-spacing: 3px;
    background-position: center;
    background-size: cover;
}

.header_area .cat_title_c {
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    line-height: 350px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    z-index: 2;
    letter-spacing: 3px;
    background-position: center;
    background-size: cover;
}

.header_area .mokuji {
    width: 300px;
    height: 350px;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    top: 50%;
    margin: -175px 0 0 0px;
    left: 50%;
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    display: table;
}


/* トップページ 加入の魅力 */

.miryoku_block {
display: inline-block;
    width: 25%;
    border: 1px solid #fbeef9;
    border-radius: 5px;
    padding: 3%;
    margin: 1%;
    height: auto;
    transition: .3s;
    vertical-align: top;
    background-color: #fbeef9;
}

.miryoku_block:hover {
    background-color: #fbf7ff;
    border: 1px solid #c3c3c3;
}

.miryoku_block h3 {
    text-align: center;
    font-size: 18px;
}
.user_icon {
    background-image: url(/img/icon_user_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.miryoku_icon {
width: 50%;
    margin: -90px auto 0 auto;
    display: block;
}

.miryoku_list {
list-style: disc;
    margin: 40px 0 0 -20px;
    text-indent: 2px;
}

.miryoku_list li {
    margin: 0 0 10px 0;
}

.miryoku_list li:last-child {
list-style: none;
}

.kanyu_btn  {
width: 60%;
    height: 100px;
    margin: 80px auto;
    color: #fff;
    text-align: center;
    line-height: 100px;
    border-radius: 15px;
    font-size: 30px;
    letter-spacing: 15px;
    border: 5px solid #bfbfbf;
    background-color: #af1957;
    transition:.3s;
}

.kanyu_btn:hover  {
    color: #af1957;
    border: 5px solid #af1957;
    background-color: #fff;
}


/* カテゴリートップ画像 */
.top_about {
    background-image: url(/img/cat_top/about.jpg);
}

.top_benefit {
    background-image: url(/img/cat_top/benefit.jpg);
}

.top_inquiry {
    background-image: url(/img/cat_top/inquiry.jpg);
}

.top_news {
    background-image: url(/img/cat_top/news.jpg);
}

.top_privacy {
    background-image: url(/img/cat_top/privacy.jpg);
}




/* カテゴリー内部 */

.cat_txtarea {
    font-size: 14px;
    width: 90%;
    margin: 50px auto 100px auto;
}

.cat_txtarea .lc {
    color: #7b0000;
    text-decoration: none;
    transition: .3s;
    padding: 0 3px;
}

.cat_txtarea .lc:hover {
    color: #fff;
    background-color: #6f5252;
    border-radius: 3px;
}

.cat_txtarea_sub {
    font-size: 14px;
    width: fit-content;
    margin: 50px auto;
}

.cat_txtarea_sub_2 {
    font-size: 14px;
    width: fit-content;
    margin: 0 auto;
}

.cat_txtarea_sub_3 {
    font-size: 13px;
    width: fit-content;
    margin: 0 auto;
}

.cat_txtarea_bg {
    background-color: #f3eff5;
    padding: 0 100% 100px 100%;
    width: 100%;
    margin: 0 0 0 -100%;
    display: flex;
}



/* テーブル設定 */

.table01 {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
}

.table01 th,.table01 td {
    padding: 7px 0;
}

.td01 {
    width: 100px;
}

.td02 {
    width: auto;
}

.table02 {
width: 90%;
    border: 0;
    font-weight: 200;
    font-size: 14px;
    margin: 50px auto;
}

.table02 th,.table02 td {
    padding: 7px 0;
}

.tr01 {
    width: 150px;
    font-weight: 600;
    vertical-align: top;
    padding: 7px;
    border-bottom: 1px dashed #c39ec2;
    text-align: center;
}

.tr02 {
    width: auto;
    vertical-align: top;
    border-bottom: 1px dashed #c39ec2;
}

.tr03 {
    width: 110px;
    font-weight: 600;
    vertical-align: top;
    padding: 7px 0 40px 7px;
}

.table_list {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
}

.table_list li {
    margin: 0 0 0 1.5em;
}

.map_link {
    background-image: url(/img/map_icon_w.png);
    background-repeat: no-repeat;
    background-color: #2d5fab;
    background-size: 14px;
    padding: 2px 8px 2px 28px;
    color: #fff;
    border-radius: 5px;
    background-position: 8px center;
    display: inline-block;
    transition: .3s;
}

.map_link:hover {
opacity:.7;
}


.pdf_link {
    margin: 0 6px 20px 0;
    background-image: url(/img/pdf_icon_w.png);
    background-repeat: no-repeat;
    background-color: #b90a0a;
    background-size: 17px;
    padding: 10px 10px 10px 37px;
    color: #fff;
    border-radius: 5px;
    background-position: 10px center;
    display: inline-block;
    transition: .3s;
}

.pdf_link:hover {
opacity:.7;
}



/* 組合について */

.jigyou {
    font-size: 15px;
    width: fit-content;
    margin: 100px auto;
    list-style: none;
    line-height: 30px;
}

.jigyou li {
margin: 30px 0px;
}

.jigyou li:before {
    content: "";
    width: 15px;
    height: 10px;
    display: inline-block;
    background-image: url(/img/icon_arrow_p.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0 0px -15px;
}


.profdata  {
font-size: 15px;
    width: 50%;
    float: left;
    list-style: none;
    margin: 0 0 0 2%;
}

.profdata li {
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    line-height: 31px;
}



.organization {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
    margin: 0 0 30px 0;
}

.organization th {
    background-color: #cacaca;
    font-weight: 600;
}

.organization .pn  {
vertical-align: top;
    text-align: center;
    padding: 13px 0 0 0;
}

.organization th,.organization td {
    padding: 7px;
    border: 1px solid #cacaca;
}

.organization .position  {
width: 150px;
    border-right: 1px solid #fff;
}

.organization span  {
    margin: 10px 1.5%;
    word-break: keep-all;
    line-height: 20px;
    vertical-align: top;
}

.organization td p  {
    width: 21%;
    display: inline-block;
    margin: 10px 1.5%;
    word-break: keep-all;
    line-height: 20px;
    vertical-align: top;
    text-align: center;
}

.organization td img  {
    width: 80%;
    max-width: 90px;
}

.organization .p_name {
    width: auto;
    border-right: 1px solid #fff;
}



.shibu {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
    margin: 0 0 150px 0;
}

.shibu col {
    padding: 7px 0;
}

.shibu th {
    background-color: #cacaca;
    font-weight: 600;
}

.shibu th,.shibu td {
    padding: 7px;
    border: 1px solid #cacaca;
}

.shibu .area  {
width: 50px;
    border-right: 1px solid #fff;
}

.shibu .shop {
    width: 210px;
    border-right: 1px solid #fff;
}

.shibu .tel {
    width: 85px;
    border-right: 1px solid #fff;
}

.shibu .fax {
    width: 85px;
    border-right: 1px solid #fff;
}

.shibu .zip {
    width: 55px;
    border-right: 1px solid #fff;
}


.nagare {
    list-style: decimal;
    margin: 0 0 0 10px;
    text-indent: 2px;
}

.nagare li {
    margin: 0 0 10px 0;
}





 /* おしらせ */

.bn_list {
    margin: 40px;
}

.bn_list a {
    margin: 10px 1%;
    background-image: url(/img/pdf_icon_w.png);
    background-repeat: no-repeat;
    background-color: #7b0000;
    background-size: 17px;
    padding: 10px 10px 10px 37px;
    color: #fff;
    border-radius: 5px;
    background-position: 10px center;
    display: inline-block;
    transition: .3s;
    width: 22.3%;
    text-align: center;
    border: 1px solid #7b0000;
    font-size: calc(60% + 0.4vw);
}

.bn_list a:hover {
    background-image: url(/img/pdf_icon_red.png);
    border: 1px solid #7b0000;
    color: #7b0000;
    background-color: #fff;
}

#information p img {
width: 280px;
    margin: 10px;
    float: right;
    object-fit: scale-down;
    height: 220px;
}

#information dl {
    position: relative;
    border-bottom: 1px dashed #dcc8d9;
    min-height: 280px;
}

#information div {
    position: relative;
    margin: 30px 0 0 0;
    clear: both;
}


/* お問い合わせ */

.block_area {
    display: inline-flex;
}

.inq_block {
    display: inline-block;
    width: 37%;
    border: 1px solid #3a1139;
    border-radius: 5px;
    padding: 5%;
    margin: 1%;
    height: auto;
    transition: .3s;
    vertical-align: top;
}

.inq_block:hover {
    background-color: #fbf7ff;
    border: 1px solid #c3c3c3;
}

.tel_icon {
    background-image: url(/img/icon_tel_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.mail_icon {
    background-image: url(/img/icon_mail_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.man_icon {
    background-image: url(/img/icon_man_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}


.tel_btn {
    margin: 0 6px 20px 0;
    background-color: #4f85ad;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    letter-spacing: 4px;
    cursor: pointer;
    width: 88%;
}



/* プライバシーポリシー */
.p_h3 {
    font-size: 13px;
    font-weight: 200;
    margin: 50px 0 20px 0px;
    padding: 10px 0 0px 10px;
}

.p_title {
    font-weight: 600;
    font-size: 16px;
    padding: 40px 0 0 0!important;
    border-bottom: 1px dashed #a9a9a9;
}

.p_list {
    font-size: 13px;
    margin: 0;
    padding: 0;
    font-weight: 200;
}

.p_list ul {
list-style: none;
line-height: 33px;
}

.p_list li {
    padding: 10px 0;
}

.p_list .child {
    list-style: decimal;
    margin: 0 0 0 -23px;
    text-indent: 5px;
}

.p_list .child li {
    padding: 0;
}










.about {
    margin: 100px 0;
}

.about ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0;
}

.about li {
    display: inline-block;
    position:relative;
    margin: 3px 0.5%;
    width: 32%;
    border: 1px solid #1b3d2d;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about li:hover {
opacity:.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about img {
width:100%;
}

.about .name {
background: #1b3d2d;
    width: 100%;
    height: 42px;
    position: absolute;
    color: #fff;
    text-align: center;
    z-index: 2;
    bottom: 0;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 42px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about li:hover > .about.name {
    background-color: #734e4e;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


/* blog */
.blog_btn {
    font-size: 12px;
    background-color: #195ca5;
    padding: 5px;
    color: #fff;
    border-radius: 6px;
    letter-spacing: 0;
    margin: 0 0 0 10px;
}

/* about */
.top_about_1 {
    background-image: url(/img/mutual-12.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_2 {
    background-image: url(/img/mutual-13.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_3 {
    background-image: url(/img/mutual-14.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_4 {
    background-image: url(/img/mutual-15.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_bg {
    height: 500px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 1;
    width: 100%;
}


.top_about_txt {
    font-size: 18px;
    vertical-align: middle;
    display: table-cell;
    width: 68%;
    padding: 0 16%;
    line-height: 38px;
    position: absolute;
    top: 55px;
    z-index: 2;
    font-weight: 400;
}

.top_about_txt a {
    background-color: #eeedeb;
    padding: 3px 5px;
    border-radius: 6px;
    transition: .2s;
}

.top_about_txt a:hover {
    color: #fff;
    background-color: #aeaeae;
}

.top_about_ban {
    color: #fff;
    background-color: #aeaeae;
    transition: .2s;
}



.history_txt_c {
    font-size: 17px;
    height: 90px;
    width: 100%;
    padding: 50px 0 0 0;
    line-height: 28px;
    text-align: center;
    color: #680b0b;
    letter-spacing: 2px;

}

.shop_txt {
    font-size: 14px;
    height: 330px;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    padding: 0 5%;
    line-height: 28px;
}

.shop_txt a {
    background-color: #eeedeb;
    padding: 3px 5px;
    border-radius: 6px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.shop_txt a:hover {
    color: #fff;
    background-color: #aeaeae;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


.menu_txt {
height: 480px;
    width: 100%;
    margin: 0 auto 50px auto;
    background-image: url(/img/omen_img_2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}



/* フォローボタン */
.follow_btn_ig {
background-image: url(/img/icon_instagram_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}

.follow_btn_fb {
    background-image: url(/img/icon_facebook_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}

.follow_btn_tw {
    background-image: url(/img/icon_twitter_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}


/* 採用情報 */

.recruit_img_block {
    background-image: url(/img/recruit.jpg);
    width: 100%;
    margin: 0 0 200px 0;
    position: relative;
    height: 415px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.recruit_img_block h2 {
position: absolute;
    bottom: -80px;
    left: 10px;
}

.recruit_img_block h3 {
    position: absolute;
    bottom: -120px;
    left: 10px;
}


/* 会社概要 */
.company_img_block {
    background-image: url(/img/omen_ginkakuji.jpg?4);
    width: 70%;
    margin: 0 0 70px auto;
    position: relative;
    height: 420px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.company_img_block h2 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 0px;
    left: -20%;
}

.company_img_block .img_marunitsuta {
    position: absolute;
    top: 40%;
    height: 115px;
    left: -37%;
    opacity: 0.15;
}




/* footer */

footer {
    list-style: none;
    padding: 0;
    width: 100%;
    clear: both;
    position: relative;
    color: #fff;
    height: 320px;
    background-color: #000;
    z-index: 10;
    background-position: 0 30px;
}

footer a {
    color: #fff;
    text-decoration:none;
}

footer .logo {
    color: #fff;
    font-size: 24px;
    font-weight: 200;
    letter-spacing: 2px;
    width: 440px;
    height: 80px;
    margin: 0 auto;
    padding: 60px 0 0 0;
}

footer .logo_s {
color: #fff;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
    margin: -12px 0 0 60px;
}

footer .logo:before {
width: 50px;
    height: 52px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 10px -27px 0;
    background-position: center;
}



footer .back {
    width: 100%;
    height: 50px;
    margin: -50px auto 0 auto;
    position: relative;
    background-color: #565656;
    text-align: center;
    display: table;
    line-height: 50px;
    font-size: 18px;
    letter-spacing: 4px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;

}

footer .back:hover {
    background-color: #eeeeee;
    color: #828282;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .gmap {
    border-radius: 10px;
    padding: 1px 3px;
    background-color: #fff;
    border:1px solid #fff;
    color: #1b3d2e;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .gmap:hover {
    background-color: #1b3d2e;
    border:1px solid #fff;
    color: #fff;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .inner {
margin: 0 auto;
    position: relative;
    width: 750px;
    height: 100%;
    z-index: -1;
}



footer .links {
    position: relative;
    width: 100%;
    margin: 30px 0 0 0;
}


footer .links ul {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center;
}

footer .links li {
    display: inline-block;
    margin: 0 10px;
}

footer .links li a {
opacity:1;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .links li a:hover {
opacity:.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .footer_txt {
    text-align: center;
    font-size: 20px;
}

footer .footer_top {
    width: 100%;
    padding: 20px 0;
    background-color: #4e4e4e;
    text-align: center;
    font-size: 15px;
    display: block;
    vertical-align: middle;
    color: #fff;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 0;
}


footer .footer_tel {
    background-image: url(/img/telnumber_pc.png?1);
    background-size: auto;
    background-repeat: no-repeat;
    width: 49.9%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    float: left;
    margin-top: 96px;
}

footer .footer_inq {
    background-image: url(/img/inquiry_pc.png?1);
    background-size: auto;
    background-repeat: no-repeat;
    width: 49.9%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    float: right;
    margin-top: 96px;
}


footer .other-contents {
position: absolute;
    width: 100%;
    bottom: 10px;
}

footer .other-contents ul {
    list-style: none;
    text-align: center;
    margin-bottom: 100px;
    padding: 0;
}

footer .other-contents li {
    font-size: 14px;
    display: inline-block;
    border-left: 1px solid #fff;
    padding: 5px 10px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    margin: 0 -5px 0 0;
    height: 10px;
    line-height: 10px;
}

footer .other-contents li:first-child {
    border-left: none;
}

footer .other-contents li:hover {
    background-color: #ffffff61;
    color: #fff;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .footer_logo {
    background-image: url(/img/footer_logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 190px;
    height: 220px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 180px;
}

footer .other-contents .footer_txt_logo {
    height: 100px;
    position: absolute;
    right: 20px;
    width: 330px;
    text-align: center;
    line-height: 45px;
    letter-spacing: 2px;
    top: 0px;
}

footer .other-contents .footer_s {
    font-size: 22px;
    padding: 0;
    margin: 0;
}

footer .other-contents .footer_l {
    font-size: 45px;
    padding: 0;
    margin: 0;
}

footer .other-contents .footer_address {
    left: 290px;
    font-size: 14px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 110px;
}

footer .other-contents .copyright {
    font-size: 11px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 10px;
}


#kanri_banner {
    width: 100%;
    margin: -100px auto 0 auto;
    max-width: 1400px;
}


#kanri_banner .kanri_ban {
    width: 70%;
    margin: 30px 15%;
}

#bms_banner {
    width: 100%;
    margin: 50px auto 0 auto;
    max-width: 1400px;
}


#bms_banner .bms_ban {
    width: 50%;
    margin: 0 25%;
    box-shadow: 0px 0px 2px 1px #bebebe;
}



}














































/* スマートフォン */
@media screen and (max-width: 640px) {

#container {
    height: auto;
    position: relative;
    padding: 0 3% 100px 3%;
    width: 94%;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 10;
    background-color: #fff;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    overflow-x: hidden;
}

.con_title_h2 {
    font-size: 16px;
    letter-spacing: 2px;
    width: 90%;
    line-height: 32px;
}


.arrow {
    background-image: url(/img/arrow.png);
    background-position: center top;
    position: absolute;
    background-size: 100%;
    z-index: 5;
    bottom: 15px;
    left: 0;
    right: 0;
    width: 70px;
    height: 20px;
    margin: auto;
    -webkit-animation: bounce1 2s infinite;
    background-repeat: no-repeat;
    opacity: .8;
}

@-webkit-keyframes bounce1 {
  0%   {
    margin-bottom:0;
  }
  50% {
    margin-bottom:10px;
  }
  100% {
    margin-bottom:0;
  }
}







.opning_bg_1 {
    background-color: #000;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.opning_bg_2 {
    position: absolute;
    background-color: #000;
    width: 100%;
    z-index: 0;
}

.opning_logo_1 {
    position: absolute;
    width: 90%;
    height: 200px;
    z-index: 2;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    font-size: 4.5vw;
    text-align: center;
    color: #fff;
    font-weight: 100;
}

.opning_logo_2 {
    background-image: url(/img/op/op_logo_1.png);
    position: absolute;
    background-size: 100%;
    width: 140px;
    height: 270px;
    z-index: 2;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
}


.main_bg {
    background-position: center;
}


.con_title_h3 {
    width: 90%;
}


 /* バーガーメニュー */

header {
    position: fixed;
    width: 100%;
    height: 70px;
    z-index: 1000!important;
    -webkit-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all .5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    opacity: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#350a34+2,350a34+100&1+15,0+99 */
background: -moz-linear-gradient(left,  rgba(53,10,52,1) 2%, rgba(53,10,52,1) 15%, rgba(53,10,52,0) 99%, rgba(53,10,52,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(53,10,52,1) 2%,rgba(53,10,52,1) 15%,rgba(53,10,52,0) 99%,rgba(53,10,52,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(53,10,52,1) 2%,rgba(53,10,52,1) 15%,rgba(53,10,52,0) 99%,rgba(53,10,52,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#350a34', endColorstr='#00350a34',GradientType=1 ); /* IE6-9 */
	}

.inner{
    width: 40px;
    margin: 0 0 0 auto;
	}

.change_btn{
		width: 90%;
		margin: 32px auto;
}


.img_c {
width: 70%;
margin: 20px 15%;
}

.img_y{
width: 90%;
    margin: 20px 5%;
}

.img_r {
width: 70%;
margin: 20px 15%;
}


.img_s {
width: 100%;
margin: 20px 0;
}


.img_balogo {
    width: 26%;
    margin: 100px 37% -25px 37%;
}


/*メニュー部分*/
nav {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    left: 0;
    z-index: 50;
    overflow: visible;
    color: #fff;
    overflow-y: auto;
}

header nav ul {
    display: block;
    width: 96%;
    font-size: 0;
    margin: 0 2%;
    padding: 120px 0 0 0;
}

header nav ul li {
    text-align: left;
    font-size: 15px;
    color: #fff;
    font-weight: 200;
    letter-spacing: 2px;
    width: 50%;
    display: inline-block;
    padding: 20px 0;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    vertical-align: top;
    border-top: 1px solid #4c4c4c!important;
    line-height: 27px;
   font-weight: 600;
}

header nav ul li:hover {
    background-color: rgba(53,10,52,0.6);
}

header nav .sns {
font-size: 14px;
    text-align: center;
    margin: 35px;
}

header nav .sns a {
    text-align: center;
    color: #fff;
    margin: 25px;
}



header nav ul li a {
    display: block;
    color: #390b3e;
}

.nav_inner {
    width: 100%;
    height: 100%;
}

header nav ul li span {
    display: block;
    font-size: 12px;
    font-weight: 200;
    text-align: left;
}


.li_s {
    font-size: 14px;
    margin: -25px 0 0 0;
}


.map {
margin:auto;
}

.map img {
width:100%;
margin:auto;
}



.instagram {
    background-image: url(/img/icon_instagram_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: 0px 3px -3px 0;
}

.facebook {
    background-image: url(/img/icon_facebook_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: 0px 3px -3px 0;
}

.sns_link {color:#fff;}


.inq_access {
    width: 100%;
    margin: 40px auto;
    text-align: center;
    font-size: 15px;
}

.inq_access .footer_tel {
    background-image: url(/img/telnumber_pc.png?1);
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    background-size: 96%;
    margin: 20px 0 2px 0;
}

.inq_access .footer_inq {
background-image: url(/img/inquiry_pc.png?1);
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    background-size: 96%;
}



.inq_access .address_area {
width: fit-content;
    text-align: left;
    margin: 0 auto;
    font-size: 13px;
}

.inq_access .address_area  .gmap {
    border-radius: 10px;
    padding: 4px 6px;
    background-color: #1b3d2e;
    color: #fff;
    font-weight: 600;
    line-height: 40px;
   }



.menu_name_s {
    width: 100%;
    display: block;
    text-align: center;
    margin: 50px 0;
}

.menu_name_s .name_s_s {
    font-size: 12px;
    margin: 0px 0 0 0;
    color: #fff;
}

.menu_name_s .menu_s_logo {
    height: 150px;
    margin: 50px auto;
    background-image: url(/img/footer_logo.png);
    background-size: 100%;
    width: 130px;
    background-repeat: no-repeat;
}
	
	
/*開閉ボタン*/
#nav_toggle {
    display: block;
    width: 20px;
    height: 26px;
    position: relative;
    top: 0;
    z-index: 400;
    padding: 22px 30px;
    right: 40px;
    cursor: pointer;
    background: rgba(53,10,52,1);
}

#nav_toggle div {
    position: relative;
}

#nav_toggle span {
display: block;
    height: 3px;
    background: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    border-radius: 5px;
}

#nav_toggle span:nth-child(1) {
    top:0px;
}

#nav_toggle span:nth-child(2) {
    top:9px;
}

#nav_toggle span:nth-child(3) {
    top:18px;
}
	
/* open時 */
.open #nav_toggle span {
    background: #fff;
}

.open #nav_toggle {
    background: #fff;
    cursor: pointer;
}

.open #nav_toggle span:nth-child(1) {
top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
    background: rgba(55, 7, 104, 1);
    position: relative;
    z-index: 1;
    width: 20px;
    left: 0px;
}

.open #nav_toggle span:nth-child(2) {
    background: rgba(255, 255, 255, 0);
}

.open #nav_toggle span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    background: #000;
    width: 20px;
    left: 0px;
}

 /* //バーガーメニュー */


.slider img{
    height: auto;
    width: 100%;
}

.img_c , .img_s  {
width: 90%;
    margin: 10px 5%;
}

.img_y{
width: 70%;
    margin: 20px 15%;
}

.img_l {
    width: 80%;
    margin: 0 10%;
}

.img_ls {
    width: 100%;
    margin: 0 0 20px 0;
}

.img_shop {
    width: 46%;
    float: left;
    margin: 2%;
}

.img_r {
width: 35%;
    margin: 0 10px;
    float: right;
}

.img_balogo {
    width: 26%;
    margin: 100px 37% -25px 37%;
}



 /* 共通 */

.main_logo {
    position: fixed;
    z-index: 999;
    color: #fff;
    font-size: 3.5vw;
    font-weight: 400;
    letter-spacing: 2px;
    width: 78%;
    line-height: 55px;
    left: 15px;
}

.main_logo_s {
font-size: 3vw;
    font-weight: 100;
    margin: -17px 0 0 40px;
    padding: 0;
    line-height: 13px;
    letter-spacing: 0;
}

.main_logo:before {
    width: 30px;
    height: 35px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 2px -20px 0;
    background-position: center;
}


 /* トップページ */

.copy_logo {
color: #fff;
    font-size: 4.5vw;
    font-weight: 200;
    letter-spacing: 2px;
    width: 90%;
    height: 50px;
    margin: 30px auto 0 auto;
    line-height: 34px;
}

.copy_logo_s {
font-size: 3.4vw;
    font-weight: 100;
    margin: 2px 0 0 25px;
    padding: 0;
    line-height: 0;
    letter-spacing: 0.2vw;
}

.copy_logo:before {
    width: 35px;
    height: 40px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 9px -23px -15px;
    background-position: center;
}



#cat_panel {
    width: 100.4%;
    font-size: 0;
    max-width: 1400px;
    margin: 0 auto 100px auto;
}

#cat_panel .panel {
    width: calc(100% / 2);
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 -1px -1px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    border: 1px dashed #dcc8d9;
    color: #000;
    font-size: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#cat_panel .panel:before {
    content: "";
    display: block;
    padding-top: 100%;
	}





#cat_panel .title {
    font-size: 18px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 10px;
}


#cat_panel .sub {
    font-size: 13px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 10px;
    letter-spacing: 1px;
    line-height: 16px;
}




/* カテゴリートップ */
.header_area {
    width: 100%;
    height: 700px;
    position: relative;
    background-size: cover;
    background-color: #3a1139;
}

.cat_area_bg {
    width: 100%;
    height: 700px;
    position: absolute;
    top:0;
    left:0;
    background-color: #3a1139;
    z-index:1;
}

.header_area .cat_title {
width: 80%;
    height: 200px;
    position: absolute;
    font-size: 6vw;
    background-color: #fff;
    text-align: center;
    line-height: 200px;
    top: 40%;
    left: 50%;
    margin: -175px 0 0 -40%;
    z-index: 2;
    letter-spacing: 3px;
    background-position: center;
    background-size: cover;
}

.header_area .cat_title_c {
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 24px;
    background-color: #fff;
    text-align: center;
    line-height: 350px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    z-index: 2;
    letter-spacing: 3px;
    background-position: center;
    background-size: cover;
}

.header_area .mokuji {
    width: 80%;
    height: auto;
    background-color: #fff;
    text-align: center;
    top: 40%;
    margin: 25px 0 0 -40%;
    left: 50%;
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    display: table;
}

.mokuji ul {
    font-size: 15px;
    line-height: 40px;
    list-style: none;
    margin: 0 auto;
    padding: 10px 20px 20px 20px;
    text-align: left;
}


/* トップページ 加入の魅力 */

.miryoku_block {
    width: 92%;
    border: 1px solid #fbeef9;
    border-radius: 5px;
    padding: 4%;
    height: auto;
    transition: .3s;
    vertical-align: top;
    background-color: #fbeef9;
    margin: 0 0 90px 0;
}

.miryoku_block h3 {
    text-align: center;
    font-size: 18px;
}
.user_icon {
    background-image: url(/img/icon_user_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.miryoku_icon {
    width: 45%;
    margin: -80px auto 0 auto;
    display: block;
}

.miryoku_list {
list-style: disc;
    margin: 40px 0 0 -20px;
    text-indent: 2px;
}

.miryoku_list li {
    margin: 0 0 10px 0;
}

.miryoku_list li:last-child {
list-style: none;
}

.kanyu_btn  {
    width: 98%;
    height: 100px;
    margin: 60px auto 0 auto;
    color: #fff;
    text-align: center;
    line-height: 100px;
    border-radius: 15px;
    font-size: 23px;
    letter-spacing: 6px;
    border: 5px solid #bfbfbf;
    background-color: #af1957;
}



/* カテゴリートップ画像 */
.top_about {
    background-image: url(/img/cat_top/about.jpg);
}

.top_benefit {
    background-image: url(/img/cat_top/benefit.jpg);
}

.top_inquiry {
    background-image: url(/img/cat_top/inquiry.jpg);
}

.top_news {
    background-image: url(/img/cat_top/news.jpg);
}

.top_privacy {
    background-image: url(/img/cat_top/privacy.jpg);
}




/* カテゴリー内部 */

.cat_txtarea {
    font-size: 14px;
    width: 95%;
    margin: 50px auto 100px auto;
}

.cat_txtarea .lc {
    color: #7b0000;
    text-decoration: none;
    transition: .3s;
    padding: 0 3px;
}

.cat_txtarea .lc:hover {
    color: #fff;
    background-color: #6f5252;
    border-radius: 3px;
}

.cat_txtarea_sub {
    font-size: 14px;
    width: fit-content;
    margin: 50px auto;
}

.cat_txtarea_sub_2 {
    font-size: 14px;
    width: fit-content;
    margin: 0 auto;
}

.cat_txtarea_sub_3 {
    font-size: 13px;
    width: fit-content;
    margin: 0 auto;
}

.cat_txtarea_bg {
    background-color: #f3eff5;
    padding: 20px 10% 80px 10%;
    width: 100%;
    margin: 0 0 0 -10%;
}



/* テーブル設定 */

.table01 {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
}

.table01 th,.table01 td {
    padding: 7px 0;
}

.td01 {
    width: 100px;
}

.td02 {
    width: auto;
}

.table02 {
width: 90%;
    border: 0;
    font-weight: 200;
    font-size: 14px;
    margin: 50px auto;
}

.table02 th,.table02 td {
    padding: 7px 0;
}

.tr01 {
    width: 150px;
    font-weight: 600;
    vertical-align: top;
    padding: 7px;
    border-bottom: 1px dashed #c39ec2;
    text-align: center;
}

.tr02 {
    width: auto;
    vertical-align: top;
    border-bottom: 1px dashed #c39ec2;
}

.tr03 {
    width: 110px;
    font-weight: 600;
    vertical-align: top;
    padding: 7px 0 40px 7px;
}

.table_list {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
}

.table_list li {
    margin: 0 0 0 1.5em;
}

.map_link {
    background-image: url(/img/map_icon_w.png);
    background-repeat: no-repeat;
    background-color: #2d5fab;
    background-size: 14px;
    padding: 2px 8px 2px 28px;
    color: #fff;
    border-radius: 5px;
    background-position: 8px center;
    display: inline-block;
    transition: .3s;
}

.map_link:hover {
opacity:.7;
}


.pdf_link {
    margin: 0 6px 20px 0;
    background-image: url(/img/pdf_icon_w.png);
    background-repeat: no-repeat;
    background-color: #b90a0a;
    background-size: 17px;
    padding: 10px 10px 10px 37px;
    color: #fff;
    border-radius: 5px;
    background-position: 10px center;
    display: inline-block;
    transition: .3s;
}

.pdf_link:hover {
opacity:.7;
}



/* 組合について */

.jigyou {
    font-size: 15px;
    width: fit-content;
    margin: 100px auto;
    list-style: none;
    line-height: 30px;
}

.jigyou li {
margin: 30px 0px;
}

.jigyou li:before {
    content: "";
    width: 15px;
    height: 10px;
    display: inline-block;
    background-image: url(/img/icon_arrow_p.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0 0px -15px;
}


.profdata  {
    font-size: 15px;
    width: 100%;
    list-style: none;
}

.profdata li {
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    line-height: 31px;
}



.organization {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
    margin: 0 0 30px 0;
}

.organization th {
    background-color: #cacaca;
    font-weight: 600;
}

.organization .pn  {
    text-align: center;
    padding: 10px 0px;
    display: block;
    width: 100%;
    background-color: #ccc;
}

.organization tr {
    border: 1px solid #cacaca;
    width: 100%;
    display: block;
}

.organization .position  {
width: 150px;
    border-right: 1px solid #fff;
        display: none;
}

.organization span  {
    margin: 10px 1.5%;
    word-break: keep-all;
    line-height: 20px;
    vertical-align: top;
}

.organization td p  {
    width: 29%;
    display: inline-block;
    margin: 10px 1.5%;
    word-break: keep-all;
    line-height: 20px;
    vertical-align: top;
    text-align: center;
}

.organization td img  {
    width: 80%;
    max-width: 90px;
}

.organization .p_name {
    width: auto;
    border-right: 1px solid #fff;
        display: none;
}

.organization tr {
    display: block;
    width: 100%;
}



.shibu {
    width: 100%;
    border: 0;
    font-weight: 200;
    font-size: 13px;
    margin: 0 0 150px 0;
}

.organization th,.organization td {
    width: 100%;
    display: block;
}


.shibu col {
    padding: 7px 0;
}

.shibu th {
    background-color: #cacaca;
    font-weight: 600;
}

.shibu th,.shibu td {
    padding: 7px;
}

.shibu tr {
    width: 100%;
    display: block;
}

.shibu .sa {
    display: block;
    background-color:#ccc;
}

.shibu .area  {
    display: none;
}

.shibu .ads  {
    display: none;
}

.shibu .shop {
    display: none;
}

.shibu .tel {
    display: none;
}

.shibu .fax {
    display: none;
}

.shibu .zip {
    display: none;
}


.shibu .st {
    text-align: center;
    padding: 5px 5%;
    border-bottom: 1px solid #ccc;
    display: block;
    text-align: left;
    width: 90%;
}

.nagare {
    list-style: decimal;
    margin: 0 0 0 10px;
    text-indent: 2px;
}

.nagare li {
    margin: 0 0 10px 0;
}

form#mail_form { 
   width: 110%;
    margin: 0 0 0 -5%;
    }



 /* おしらせ */

.bn_list {
    margin: 40px 0;
}

.bn_list a {
    margin: 10px 0;
    background-image: url(/img/pdf_icon_w.png);
    background-repeat: no-repeat;
    background-color: #7b0000;
    background-size: 17px;
    padding: 10px 10px 10px 37px;
    color: #fff;
    border-radius: 5px;
    background-position: 10px center;
    display: inline-block;
    transition: .3s;
    width: 28vw;
    text-align: center;
    border: 1px solid #7b0000;
    font-size: calc(75% + 0.4vw);
    line-height: 16px;
}

.bn_list a:hover {
    background-image: url(/img/pdf_icon_red.png);
    border: 1px solid #7b0000;
    color: #7b0000;
    background-color: #fff;
}

#information p img {
    width: 100%;
    margin: 20px 0;
    float: right;
}

#information dl {
    position: relative;
    border-bottom: 1px dashed #dcc8d9;
    min-height: 280px;
}

#information div {
    position: relative;
    margin: 30px 0 0 0;
    clear: both;
}


/* お問い合わせ */

.block_area {

}

.inq_block {
display: inline-block;
    width: 90%;
    border: 1px solid #3a1139;
    border-radius: 5px;
    padding: 5%;
    margin: 4% 0;
    height: auto;
    transition: .3s;
    vertical-align: top;
}

.inq_block:hover {
    background-color: #fbf7ff;
    border: 1px solid #c3c3c3;
}

.tel_icon {
    background-image: url(/img/icon_tel_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.mail_icon {
    background-image: url(/img/icon_mail_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.man_icon {
    background-image: url(/img/icon_man_b.png);
    background-repeat: no-repeat;
    background-size: 26px;
    padding: 0px 15px 0px 40px;
    background-position: 0px center;
    font-size: 18px;
    margin: 0 0 30px 0;
}


.tel_btn {
    margin: 0 6px 20px 0;
    background-color: #4f85ad;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    letter-spacing: 4px;
    cursor: pointer;
    width: 88%;
}



/* プライバシーポリシー */
.p_h3 {
    font-size: 13px;
    font-weight: 200;
    margin: 50px 0 20px 0px;
    padding: 10px 0 0px 10px;
}

.p_title {
    font-weight: 600;
    font-size: 16px;
    padding: 40px 0 0 0!important;
    border-bottom: 1px dashed #a9a9a9;
}

.p_list {
    font-size: 13px;
    margin: 0;
    padding: 0;
    font-weight: 200;
}

.p_list ul {
list-style: none;
line-height: 33px;
    padding: 0;
}

.p_list li {
    padding: 10px 0;
}

.p_list .child {
    list-style: decimal;
    margin: 0 0 0 23px;
    text-indent: 5px;
}

.p_list .child li {
    padding: 0;
}










.about {
    margin: 100px 0;
}

.about ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0;
}

.about li {
    display: inline-block;
    position:relative;
    margin: 3px 0.5%;
    width: 32%;
    border: 1px solid #1b3d2d;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about li:hover {
opacity:.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about img {
width:100%;
}

.about .name {
background: #1b3d2d;
    width: 100%;
    height: 42px;
    position: absolute;
    color: #fff;
    text-align: center;
    z-index: 2;
    bottom: 0;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 42px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.about li:hover > .about.name {
    background-color: #734e4e;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


/* blog */
.blog_btn {
    font-size: 12px;
    background-color: #195ca5;
    padding: 5px;
    color: #fff;
    border-radius: 6px;
    letter-spacing: 0;
    margin: 0 0 0 10px;
}

/* about */
.top_about_1 {
    background-image: url(/img/mutual-12.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_2 {
    background-image: url(/img/mutual-13.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_3 {
    background-image: url(/img/mutual-14.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_4 {
    background-image: url(/img/mutual-15.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    position: relative;
    background-size: 70%;
    background-position: center bottom;
    margin: 0 0 120px 0;
}

.top_about_bg {
    height: 500px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 1;
    width: 100%;
}


.top_about_txt {
    font-size: 18px;
    vertical-align: middle;
    display: table-cell;
    width: 68%;
    padding: 0 16%;
    line-height: 38px;
    position: absolute;
    top: 55px;
    z-index: 2;
    font-weight: 400;
}

.top_about_txt a {
    background-color: #eeedeb;
    padding: 3px 5px;
    border-radius: 6px;
    transition: .2s;
}

.top_about_txt a:hover {
    color: #fff;
    background-color: #aeaeae;
}

.top_about_ban {
    color: #fff;
    background-color: #aeaeae;
    transition: .2s;
}



.history_txt_c {
    font-size: 17px;
    height: 90px;
    width: 100%;
    padding: 50px 0 0 0;
    line-height: 28px;
    text-align: center;
    color: #680b0b;
    letter-spacing: 2px;

}

.shop_txt {
    font-size: 14px;
    height: 330px;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    padding: 0 5%;
    line-height: 28px;
}

.shop_txt a {
    background-color: #eeedeb;
    padding: 3px 5px;
    border-radius: 6px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.shop_txt a:hover {
    color: #fff;
    background-color: #aeaeae;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


.menu_txt {
height: 480px;
    width: 100%;
    margin: 0 auto 50px auto;
    background-image: url(/img/omen_img_2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}



/* フォローボタン */
.follow_btn_ig {
background-image: url(/img/icon_instagram_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}

.follow_btn_fb {
    background-image: url(/img/icon_facebook_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}

.follow_btn_tw {
    background-image: url(/img/icon_twitter_w.png);
    font-size: 12px;
    background-color: #de4210;
    padding: 5px 5px 5px 24px;
    color: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 6px 4px;
    letter-spacing: 0px;
        word-break: keep-all;
}


/* 採用情報 */

.recruit_img_block {
    background-image: url(/img/recruit.jpg);
    width: 100%;
    margin: 0 0 200px 0;
    position: relative;
    height: 415px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.recruit_img_block h2 {
position: absolute;
    bottom: -80px;
    left: 10px;
}

.recruit_img_block h3 {
    position: absolute;
    bottom: -120px;
    left: 10px;
}


/* 会社概要 */
.company_img_block {
    background-image: url(/img/omen_ginkakuji.jpg?4);
    width: 70%;
    margin: 0 0 70px auto;
    position: relative;
    height: 420px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.company_img_block h2 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 0px;
    left: -20%;
}

.company_img_block .img_marunitsuta {
    position: absolute;
    top: 40%;
    height: 115px;
    left: -37%;
    opacity: 0.15;
}




/* footer */

footer {
    list-style: none;
    padding: 0;
    width: 100%;
    clear: both;
    position: relative;
    color: #fff;
    height: 320px;
    background-color: #000;
    z-index: 10;
    background-position: 0 30px;
    overflow-x: hidden;
}

footer a {
    color: #fff;
    text-decoration:none;
}

footer .logo {
    color: #fff;
    font-size: 4.5vw;
    font-weight: 200;
    letter-spacing: 2px;
    width: 90%;
    height: 80px;
    margin: 0 0 0 8vw;
    padding: 40px 0 0 0;
}

footer .logo_s {
    color: #fff;
    font-size: 3.3vw;
    font-weight: 200;
    letter-spacing: 1px;
    margin: -5px 0 0 52px;
}

footer .logo:before {
width: 40px;
    height: 46px;
    background-image: url(/img/rogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: inline-block;
    margin: 0px 10px -27px 0;
    background-position: center;
}



footer .back {
    width: 100%;
    height: 50px;
    margin: -50px auto 0 auto;
    position: relative;
    background-color: #565656;
    text-align: center;
    display: table;
    line-height: 50px;
    font-size: 18px;
    letter-spacing: 4px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;

}

footer .back:hover {
    background-color: #eeeeee;
    color: #828282;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .gmap {
    border-radius: 10px;
    padding: 1px 3px;
    background-color: #fff;
    border:1px solid #fff;
    color: #1b3d2e;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .gmap:hover {
    background-color: #1b3d2e;
    border:1px solid #fff;
    color: #fff;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .inner {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
}



footer .links {
    position: relative;
    width: 100%;
    margin: 30px 0 0 0;
}


footer .links ul {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center;
}

footer .links li {
    display: inline-block;
    margin: 0 10px;
}

footer .links li a {
opacity:1;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .links li a:hover {
opacity:.7;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


footer .footer_txt {
    text-align: center;
    font-size: 20px;
}

footer .footer_top {
    width: 100%;
    padding: 20px 0;
    background-color: #4e4e4e;
    text-align: center;
    font-size: 15px;
    display: block;
    vertical-align: middle;
    color: #fff;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 0;
}


footer .footer_tel {
    background-image: url(/img/telnumber_pc.png?1);
    background-size: auto;
    background-repeat: no-repeat;
    width: 49.9%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    float: left;
    margin-top: 96px;
}

footer .footer_inq {
    background-image: url(/img/inquiry_pc.png?1);
    background-size: auto;
    background-repeat: no-repeat;
    width: 49.9%;
    height: 90px;
    background-color: #4e4e4e;
    background-position: center;
    float: right;
    margin-top: 96px;
}


footer .other-contents {
position: absolute;
    width: 100%;
    bottom: 10px;
}

footer .other-contents ul {
    list-style: none;
    text-align: center;
    margin-bottom: 100px;
    padding: 0;
}

footer .other-contents li {
    font-size: 15px;
    display: inline-block;
    border-left: 1px solid #fff;
    padding: 5px 10px;
    margin: 0 -5px 15px 0;
    height: 10px;
    line-height: 11px;
}

footer .other-contents li:first-child {
    border-left: none;
}

footer .other-contents li:nth-child(5) {
    border-left: none;
}

footer .other-contents li:hover {
    background-color: #ffffff61;
    color: #fff;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

footer .footer_logo {
    background-image: url(/img/footer_logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 190px;
    height: 220px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 180px;
}

footer .other-contents .footer_txt_logo {
    height: 100px;
    position: absolute;
    right: 20px;
    width: 330px;
    text-align: center;
    line-height: 45px;
    letter-spacing: 2px;
    top: 0px;
}

footer .other-contents .footer_s {
    font-size: 22px;
    padding: 0;
    margin: 0;
}

footer .other-contents .footer_l {
    font-size: 45px;
    padding: 0;
    margin: 0;
}

footer .other-contents .footer_address {
    left: 290px;
    font-size: 14px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 110px;
}

footer .other-contents .copyright {
    font-size: 11px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 10px;
}


#kanri_banner {
    width: 100%;
    margin: -100px auto 0 auto;
    max-width: 1400px;
}


#kanri_banner .kanri_ban {
width: 100%;
    margin: 0;
}


#bms_banner {
    width: 100%;
    margin: 30px auto 0 auto;
    max-width: 1400px;
}


#bms_banner .bms_ban {
width: 95%;
    margin: 10px auto;
    display: block;
    box-shadow: 0px 0px 5px 1px #ccc;
}
}




/* =========================================
   美容組合求人サイト用スタイル v5.0 - モックアップ完全再現版
   ========================================= */

:root {
  --color-primary: #4a044e;
  --color-accent: #fb7185;
  --color-bg: #fdfbf7;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-gray: #6b7280;
  --color-border: #e5e7eb;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--color-text);
  line-height: 1.6;
}

/* 全幅レイアウト用ラッパー */
.recruit-full-wrapper {
  background-color: var(--color-bg);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-bottom: 4rem;
}

.salon-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.1rem;
}

/* =========================================
   詳細ページ - モダンヒーローセクション
   ========================================= */
.salon-hero-modern {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 420px;
  background-size: cover;
  background-position: center;
  background-color: #d1d5db;
  margin-bottom: -30px; /* カードを重ねるための調整 */
}

/* ダークオーバーレイ（全面に薄く暗く） */
.hero-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
}

/* 画像がない場合 */
.hero-dark-overlay.no-image-bg {
  background: var(--color-primary);
}

.hero-content-modern {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

/* 戻るボタン（左上スタイル） */
.back-link-modern {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  text-decoration: none;
  color: white;
  font-size: 0.9rem;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.back-link-modern:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* バッジ */
.hero-badge-modern {
  display: inline-block;
  background: rgba(74, 4, 78, 0.85);
  color: white;
  padding: 0.35rem 1.2rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* タイトル（白文字） */
.hero-title-modern {
  font-size: 2.75rem;
  font-weight: bold;
  color: white;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* エリア情報 */
.hero-area-modern {
  display: flex;
  align-items: center;
  color: white;
  font-size: 1rem;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .salon-hero-modern {
    height: 320px;
    margin-bottom: -60px;
  }
  .hero-title-modern {
    font-size: 2rem;
  }
}

/* =========================================
   フローティングカードレイアウト
   ========================================= */
.floating-layout {
  position: relative;
  z-index: 20;
  display: grid;
  gap: 1rem;
  padding: 0 1rem;
}

@media (min-width: 900px) {
  .floating-layout {
    grid-template-columns: 1fr 340px;
    gap: 1rem;
  }
}

/* メインコンテンツ（左） */
.detail-main-modern {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .detail-main-modern {
    padding: 1.5rem 1rem;
  }
}

/* --- 店舗について --- */
.section-about-modern {
  margin-bottom: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #f3f4f6;
}

.section-title-modern {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 1rem 0;
    padding-left: 1rem;
    border-left: 6px solid var(--color-primary);
    color: #111;
}

.about-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #4b5563;
  margin-bottom: 2rem;
}

/* 店舗画像グリッド（2枚） */
.salon-images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .salon-images-grid {
    grid-template-columns: 1fr;
  }
}

.salon-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hero-furigana {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin: 0 0 1rem 0;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- 募集中の求人 --- */
.section-jobs-modern {
  margin-top: 2rem;
}

/* 左に紫のアクセントライン */
.section-title-accent-modern {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
  padding-left: 1rem;
  border-left: 6px solid var(--color-primary);
  color: #111;
}

.jobs-count {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 2rem;
}

/* 求人カード */
.job-list-modern {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.job-card-modern {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.75rem;
}

.job-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.job-card-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  color: #111;
}

.job-type-tag {
  background: #d1fae5;
  color: #065f46;
  padding: 0.3rem 0.9rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.job-card-body {
  margin-top: 1rem;
}

.job-card-body h5 {
    font-size: 0.8rem;
    margin: 0 0 0 10px;
    padding: 0;
}

.job-description-box {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 20px;
}

.job-description-box strong {
  display: block;
  margin-bottom: 0.75rem;
  color: #374151;
  font-size: 0.9rem;
}

.job-description-box p {
  margin: 0;
  line-height: 1.7;
  color: #4b5563;
  font-size: 0.95rem;
  white-space: pre-wrap;
}

/* Added application method buttons styling */
.job-action-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.job-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border-radius: 99px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s;
  font-weight: 500;
}

.job-btn-outline {
  background: white;
  border: 1.5px solid #e5e7eb;
  color: #374151;
}

.job-btn-outline:hover {
  background: #f9fafb;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.job-btn-outline svg {
  flex-shrink: 0;
}

.job-btn-no-link:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #374151;
}


.no-jobs-message {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}

.no-jobs-message p {
  margin: 0.5rem 0;
}

.sub-note {
  font-size: 0.9rem;
}

/* =========================================
   サイドバー（右側）
   ========================================= */
.detail-sidebar-modern {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  color: #111;
}

/* 情報リスト */
.info-list-modern {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  align-items: flex-start;
}

.info-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  display: flex;
}

.info-text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

.info-text a {
  color: #374151;
  text-decoration: none;
}

.info-text a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.info-text .map-link {
    display: block;
    background: #f7e6f8;
    width: fit-content;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 0.8em;
    margin-top: 5px;
	text-decoration:none;
}

.info-row-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.info-row-link a {
  color: var(--color-primary);
  text-decoration: none;
}

.info-row-link a:hover {
  text-decoration: underline;
}

/* マップエリア */
.map-area {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f9fafb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
}

/* =========================================
   一覧ページ (Recruit List)
   ========================================= */
.recruit-hero-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 600px;
  background-size: cover;
  background-position: center;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
}

.recruit-hero-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-copy-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 2.5rem 3rem;
  display: inline-block;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero-badge {
  background: #e9d5ff;
  color: var(--color-primary);
  font-weight: bold;
  padding: 0.3rem 1.2rem;
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border-radius: 4px;
}

.hero-title-sub {
  font-size: 1.1rem;
  color: #6b7280;
  display: block;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

.hero-title-main {
  font-size: 2.5rem;
  font-weight: bold;
  color: #111;
  line-height: 1.3;
  margin: 0;
}

@media (max-width: 768px) {
  .recruit-hero-section {
    height: 320px;
  }
  .hero-copy-box {
    padding: 1.5rem 2rem;
  }
  .hero-title-main {
    font-size: 1.8rem;
  }
}

/* レイアウト */
.salon-recruit-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.recruit-layout {
  display: flex;
  gap: 2rem;
  flex-direction: column;
}

@media (min-width: 900px) {
  .recruit-layout {
    flex-direction: row;
  }
}

/* サイドバー */
.recruit-sidebar {
  width: 100%;
}

@media (min-width: 900px) {
  .recruit-sidebar {
    width: 280px;
    flex-shrink: 0;
  }
}

.search-panel {
  background: white;
  border: 1px solid var(--color-border);
  padding: 1.75rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Added header styling with icon */
.search-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
}

.search-panel-header svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.search-title {
  font-weight: bold;
  color: #111;
  font-size: 1.05rem;
  margin: 0;
}

/* Added form group spacing */
.form-group {
  margin-bottom: 1.25rem;
}

.search-label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #374151;
  font-weight: 500;
}

.search-input,
.search-select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.95rem;
  background: white;
  transition: border-color 0.2s;
}

.search-input:focus,
.search-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.search-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

/* Added search button styling */
.btn-search {
  width: 100%;
  padding: 0.85rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 0.75rem;
}

.btn-search:hover {
  background: #3a0339;
}

/* Updated reset button to include icon and better styling */
.btn-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  padding: 0.7rem;
  text-align: center;
  border: 1.5px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-reset:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-reset svg {
  flex-shrink: 0;
}

/* メインエリア */
.recruit-main {
  flex: 1;
}

/* 地域ショートカット */
.area-shortcut-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.area-shortcut-title {
  font-size: 1.1rem;
  font-weight: bold;
}

.reset-link-sm {
  font-size: 0.8rem;
  color: #666;
  text-decoration: none;
  border: 1px solid #ddd;
  padding: 4px 12px;
  border-radius: 99px;
  transition: background 0.2s;
}

.reset-link-sm:hover {
  background: #f3f4f6;
}

/* =========================================
   地域ショートカット - 固定リンク版
   ========================================= */
.area-grid-fixed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .area-grid-fixed {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 480px) {
  .area-grid-fixed {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 京都市ボタン（ポップアップトリガー） */
.area-btn-kyoto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.area-btn-kyoto svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.area-btn-kyoto:hover svg {
  transform: translateY(2px);
}

/* =========================================
   京都市ポップアップ
   ========================================= */
.kyoto-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.kyoto-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.kyoto-popup {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  transform: translateY(20px);
  transition: transform 0.3s;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.kyoto-popup-overlay.active .kyoto-popup {
  transform: translateY(0);
}

.kyoto-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.kyoto-popup-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: #111;
}

.kyoto-popup-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.kyoto-popup-close:hover {
  background: #f3f4f6;
  color: #111;
}

.kyoto-popup-body {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 400px) {
  .kyoto-popup-body {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kyoto-ward-btn {
  background: #f3e8ff;
  color: #6b21a8;
  text-align: center;
  padding: 0.85rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s;
  font-weight: 500;
}

.kyoto-ward-btn:hover {
  background: #e9d5ff;
}

.kyoto-ward-btn.active {
  background: var(--color-primary);
  color: white;
  font-weight: bold;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .area-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.area-btn {
  background: #f3e8ff;
  color: #6b21a8;
  text-align: center;
  padding: 0.5rem 0.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s;
  font-weight: 500;
}

.area-btn:hover {
  background: #e9d5ff;
}

.area-btn.active {
  background: var(--color-primary);
  color: white;
  font-weight: bold;
}

/* 件数表示のスタイルを追加 */
.area-count {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-left: 0.25rem;
  font-weight: normal;
}

.area-btn.active .area-count {
  opacity: 0.9;
}

.kyoto-ward-btn .area-count {
    display: inline-block;
    font-size: 0.7rem;
    margin-top: 0;
    margin-left: 0.5rem;
}

/* サロンカードグリッド */
.salon-grid {
  display: grid;
    grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

@media (min-width: 640px) {
  .salon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .salon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.salon-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.salon-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* サムネイル用のリンクスタイル追加（旧salon-card-linkは削除） */
.card-thumb-link {
  display: block;
  text-decoration: none;
}

.card-thumb {
  aspect-ratio: 16 / 9;
  background: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-weight: bold;
  font-size: 1.1rem;
}

.card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 0.2rem 0;
  color: #111;
}

.card-area {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 0.75rem;
}

.card-desc {
  font-size: 0.7rem;
  color: #6b7280;
  margin-bottom: 1.25rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
	flex-direction: column;
}

/* ボタンをaタグ用にスタイル追加 */
.btn-detail,
.btn-job {
  text-decoration: none;
}

.btn-detail {
  flex: 1;
  text-align: center;
  border: 1px solid #e5e7eb;
  padding: 0.6rem;
  font-size: 0.9rem;
  border-radius: 99px;
  color: #374151;
  background: white;
  transition: all 0.2s;
}

.btn-detail:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-job {
  flex: 1;
  text-align: center;
  background: var(--color-accent);
  color: white;
  padding: 0.6rem;
  font-size: 0.9rem;
  border-radius: 99px;
  border: 1px solid var(--color-accent);
  font-weight: 600;
  transition: all 0.2s;
}

.btn-job:hover {
  background: #f43f5e;
  border-color: #f43f5e;
}

/* ページネーション */
.pagination {
  margin-top: 3rem;
    margin-bottom: 3rem;
	display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  gap: 0.5rem;
}

.pagination li {
  margin: 0;
    border: 1px solid #e5e7eb;
}

.pagination .page-numbers {
    display: flex;
    padding: 0.6rem 1rem;
    border: none;
    background: white;
    text-decoration: none;
    color: #374151;
    border-radius: 6px;
    transition: all 0.2s;
    min-width: 10px;
    text-align: center;
    gap: 5px;
    list-style: none;
    justify-content: center;
}

.pagination .page-numbers:hover {
    background: #fff;
    border-color: #fff;
}

.pagination .current {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: bold;
}

/* =========================================
   掲載依頼ボタン（検索パネル下部）
   ========================================= */
.listing-request-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f3f4f6;
}

.btn-listing-request {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem;
  background: linear-gradient(135deg, #9d1347 0%, #902858 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(74, 4, 78, 0.15);
}

.btn-listing-request:hover {
  background: linear-gradient(135deg, #c41b5b 0%, #cf0f68 100%);
  box-shadow: 0 4px 8px rgba(74, 4, 78, 0.25);
  transform: translateY(-1px);
}

.btn-listing-request svg {
  flex-shrink: 0;
}

/* =========================================
   掲載依頼ポップアップ
   ========================================= */
.listing-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.listing-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.listing-popup-content {
    background: white;
    border-radius: 16px;
    width: calc(98% - 1rem);
    max-width: 800px;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    animation: slideUp 0.3s ease-out;
    position: relative;
    left: -1rem;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.listing-popup-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: white;
  border: 1px solid #e5e7eb;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: #6b7280;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 10; /* Ensure it's above content */
}

.listing-popup-close:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111;
}

.listing-popup-header {
  padding: 2rem 2rem 1.5rem 2rem;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
}

.listing-popup-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #111;
}


.listing-popup-body {
  padding: 2rem;
}

.listing-popup-body .listing-alert {
    display: flex;
    font-size: 18px;
    justify-content: flex-start;
    align-items: center;
    color: #ec3636;
}

.listing-popup-body .listing-notes {
    font-size: 16px;
    line-height: 2em;
}

.listing-popup-body .listing-description {
    font-size: 12px;
}

.listing-popup-body .btn-listing-form {
    text-decoration: none;
    color: #fff;
	background: linear-gradient(135deg, #9d1347 0%, #902858 100%);
    width: auto;
    display: flex;
    padding: 1rem;
    line-height: 20px;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 18px;
    justify-content: center;
    align-items: center;
  transition: all 0.2s;
}

.listing-popup-body .btn-google {
    color: #902858;
}

.listing-popup-body .btn-listing-form:hover {
  background: linear-gradient(135deg, #c41b5b 0%, #cf0f68 100%);
  transform: translateY(-1px);
}


/* 注意事項ボックス */
.listing-notice {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.notice-title {
  margin: 0 0 1rem 0;
  font-size: 1.05rem;
  font-weight: bold;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notice-title::before {
  content: "⚠️";
  font-size: 1.2rem;
}

.notice-list {
  margin: 0;
  padding-left: 1.5rem;
  list-style: disc;
}

.notice-list li {
  margin-bottom: 0.75rem;
  color: #78350f;
  line-height: 1.6;
  font-size: 0.95rem;
}

.notice-list li:last-child {
  margin-bottom: 0;
}

/* アクションボタンエリア */
.listing-popup-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.btn-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.95rem 2.5rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 99px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(74, 4, 78, 0.2);
}

.btn-form-submit:hover {
  background: #3a0339;
  box-shadow: 0 6px 10px rgba(74, 4, 78, 0.3);
  transform: translateY(-2px);
}

.btn-form-submit svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.btn-form-submit:hover svg {
  transform: translateX(3px);
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .listing-popup-header,
  .listing-popup-body {
    padding: 1.5rem;
  }

  .listing-popup-title {
    font-size: 1.25rem;
  }

  .listing-notice {
    padding: 1.25rem;
  }

  .btn-form-submit {
    width: 100%;
    padding: 0.85rem 1.5rem;
  }
}