@charset "UTF-8";

/* Layout ver.1.1.0 last update  15/12/29
	Befine CSS for Layout
*/

/*===================================================
    saran
===================================================*/


.saran_1 {
　width: 100%;
  aspect-ratio: 683 / 402;
  background-image: url(../img/saran/web1366/bg_001.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.saran_2 {
　width: 100%;
  aspect-ratio: 2732 / 1759;
  background-image: url(../img/saran/web1366/bg_002.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.saran_3 {
　width: 100%;
  aspect-ratio: 2732 / 2821;
  background-image: url(../img/saran/web1366/bg_003.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.saran_4 {
　width: 100%;
  aspect-ratio: 1366 / 1349;
  background-image: url(../img/saran/web1366/bg_004.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.saran_5 {
　width: 100%;
  aspect-ratio: 2732 / 1453;
  background-image: url(../img/saran/web1366/bg_005.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.saran_5 p a:hover{
	opacity:0.7;
	transition:0.3s;
}




.saran_6 {
　width: 100%;
  aspect-ratio: 1366 / 1895;
  background-image: url(../img/saran/web1366/bg_006.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.saran_7 {
　width: 100%;
  aspect-ratio: 683 / 720;
  background-image: url(../img/saran/web1366/bg_007.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



.saran_8 {
　width: 100%;
  aspect-ratio: 1366 / 2123;
  background-image: url(../img/saran/web1366/bg_008.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}




.saran_9 {
　width: 100%;
  aspect-ratio: 2732 / 3473;
  background-image: url(../img/saran/web1366/bg_009.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_10 {
　width: 100%;
  aspect-ratio: 2732 / 2869;
  background-image: url(../img/saran/web1366/bg_010.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_11 {
　width: 100%;
  aspect-ratio: 683 / 665;
  background-image: url(../img/saran/web1366/bg_011.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_1 {
　width: 100%;
  aspect-ratio: 393 / 856;
	
  background-image: url(../img/saran/mobile393/bg_m_001.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.saran-text_m_1{
  position: relative;/*親要素にrelative*/
}
.saran-text_m_1 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
　font-size: clamp(0.375rem, -0.182rem + 1.27vw, 1.25rem);
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-text_m_2{
  position: relative;/*親要素にrelative*/
}
.saran-text_m_2 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
　font-size: clamp(0.375rem, -0.182rem + 1.27vw, 1.25rem);
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}




.saran_m_2 {
　width: 100%;
  aspect-ratio: 393 / 761;
  background-image: url(../img/saran/mobile393/bg_m_002.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran-text_m_3{
  position: relative;/*親要素にrelative*/
}
.saran-text_m_3 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
　font-size: clamp(0.375rem, -0.182rem + 1.27vw, 1.25rem);
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}



.saran_m_3 {
　width: 100%;
  aspect-ratio: 393 / 1669;
  background-image: url(../img/saran/mobile393/bg_m_003.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_4 {
　width: 100%;
  aspect-ratio: 393 / 1663;
  background-image: url(../img/saran/mobile393/bg_m_004.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_5 {
　width: 100%;
  aspect-ratio: 786 / 1471;
  background-image: url(../img/saran/mobile393/bg_m_005.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_6 {
　width: 100%;
  aspect-ratio: 786 / 5051;
  background-image: url(../img/saran/mobile393/bg_m_006.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_7 {
　width: 100%;
  aspect-ratio: 393 / 2540;
  background-image: url(../img/saran/mobile393/bg_m_007.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_8 {
　width: 100%;
  aspect-ratio: 393 / 2984;
  background-image: url(../img/saran/mobile393/bg_m_008.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_9 {
　width: 100%;
  aspect-ratio: 786 / 5329;
  background-image: url(../img/saran/mobile393/bg_m_009.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_10 {
　width: 100%;
  aspect-ratio: 786 / 4247;
  background-image: url(../img/saran/mobile393/bg_m_010.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.saran_m_11 {
　width: 100%;
  aspect-ratio: 131 / 796;
  background-image: url(../img/saran/mobile393/bg_m_011.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



/*===================================================
     saran用のヘッダー
===================================================*/
header_2 {
    position: fixed; /*** ← fixedで固定 ***/
	z-index: 10;
    width: 75%; 
    height: 60px; 
    box-sizing: border-box;
    top: 0; 
    left: 11%;
	text-align: center;
    display: flex; 
    align-items: center; 
   /* ロゴとメニューを横並びにする */
    display: flex; 
    justify-content:space-between;
}
header_2 .nav_2 .menu_2 {
    display: flex; 
}
header_2 .nav_2 .menu_2 li {
    list-style: none; 
}
header_2 .nav_2 .menu_2 li a{
   font-weight:bold;
   text-decoration: none;

}




/*===================================================
    作成中↓css　（本文）画像重ね
===================================================*/
.saran-1{
  position: relative;/*親要素にrelative*/
}
.saran-1-1{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:5%;
  left: 35%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-1-2{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-1-3{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}



.saran-1 p a:hover{
	opacity:0.7;
	transition:0.3s;
}



.saran-2{
  position: relative;/*親要素にrelative*/
}
.saran-2 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-2 p a:hover{
	opacity:0.7;
	transition:0.3s;
}



.saran-3{
  position: relative;/*親要素にrelative*/
}
.saran-3 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-3 p a:hover{
	opacity:0.7;
	transition:0.3s;
}



.saran-4{
  position: relative;/*親要素にrelative*/
}
.saran-4 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-4 p a:hover{
	opacity:0.7;
	transition:0.3s;
}


.saran-5{
  position: relative;/*親要素にrelative*/
}
.saran-5 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-5 p a:hover{
	opacity:0.7;
	transition:0.3s;
}


.saran-6{
  position: relative;/*親要素にrelative*/
}
.saran-6 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-6 p a:hover{
	opacity:0.7;
	transition:0.3s;
}


.saran-7{
  position: relative;/*親要素にrelative*/
}
.saran-7 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-7 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.saran-8{
  position: relative;/*親要素にrelative*/
}
.saran-8 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-8 p a:hover{
	opacity:0.7;
	transition:0.3s;
}



.saran-m1{
  position: relative;/*親要素にrelative*/
}
.saran-m1 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m1 p a:hover{
	opacity:0.7;
	transition:0.3s;
}


.saran-m2{
  position: relative;/*親要素にrelative*/
}
.saran-m2 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m2 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.saran-m3{
  position: relative;/*親要素にrelative*/
}
.saran-m3 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m3 p a:hover{
	opacity:0.7;
	transition:0.3s;
}


.saran-m4{
  position: relative;/*親要素にrelative*/
}
.saran-m4 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m4 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.saran-m5{
  position: relative;/*親要素にrelative*/
}
.saran-m5 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m5 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.saran-m6{
  position: relative;/*親要素にrelative*/
}
.saran-m6 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m6 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.saran-m7{
  position: relative;/*親要素にrelative*/
}
.saran-m7 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m7 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.saran-m8{
  position: relative;/*親要素にrelative*/
}
.saran-m8 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.saran-m8 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

/*===================================================
    現行の↓css　（本文）画像重ね
===================================================*/

.kasaneru-1{
  position: relative;/*親要素にrelative*/
}
.kasaneru-1 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.kasaneru-1 p a:hover{
	opacity:0.7;
	transition:0.3s;
}


.kasaneru-2{
  position: relative;/*親要素にrelative*/
}
.kasaneru-2 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:4%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.kasaneru-2 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.kasaneru-3{
  position: relative;/*親要素にrelative*/
}
.kasaneru-3 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.kasaneru-3 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.kasaneru-4{
  position: relative;/*親要素にrelative*/
}
.kasaneru-4 p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:8%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.kasaneru-4 p a:hover{
	opacity:0.7;
	transition:0.3s;
}

.kasaneru-1m{
  position: relative;/*親要素にrelative*/
}
.kasaneru-1m p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:-2%;
  left: 35.5%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

.kasaneru-2m{
  position: relative;/*親要素にrelative*/
}
.kasaneru-2m p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:2%;
  left: 35.5%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

.kasaneru-3m{
  position: relative;/*親要素にrelative*/
}
.kasaneru-3m p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:1%;
  left: 35.5%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

.kasaneru-4m{
  position: relative;/*親要素にrelative*/
}
.kasaneru-4m p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:12%;
  left: 35.5%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

.kasaneru-5m{
  position: relative;/*親要素にrelative*/
}
.kasaneru-5m p{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:6%;
  left: 46%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

   /* 現行↑css */










/*===================================================
    TOP / Header Img
===================================================*/
.top_slide {
	position: relative;
}
.top_slide_text {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
}
div.img_header {
	height: 100%;
	overflow: hidden;
}


/* Top main BrakePoint  */

.top_main {
	position: relative;
}

/* col-xs */
@media (max-width: 767px){
	.top_main {
		height: 195px;
	}
}
/* col-sm */
@media (min-width: 768px){
	.top_main {
		height: 520px;
	}
}
/* col-md */
@media (min-width: 992px){
	.top_main {
		height: 607px;
	}
}
/* col-lg */
@media (min-width: 1200px){
	.top_main {
		height: 720px;
	}
}

/* Top slide BrakePoint  */

.top_slide {
	position: absolute;
	left: 0;
	top: 0;
}
/* col-xs */
@media (max-width: 767px){
	.top_slide {
		width: 100%;
		margin: 0px 0 30px 0;
		position: relative;
		}
}
/* col-sm */
@media (min-width: 768px){
	.top_slide {
		width: 640px;
		height: 438px;
		margin-left: 60px;
		}
}
/* col-md */
@media (min-width: 992px){
	.top_slide {
		width: 826px;
		height: 566px;
		margin-left: 80px;
		}
}
/* col-lg */
@media (min-width: 1200px){
	.top_slide {
		height: 685px;
		width: 1000px;
		margin: 0 100px;
		}
}

/* col-lg */
@media (min-width: 1200px){
	.nopadding {
		padding: 0 20px 0 0;
		margin: 0;
	}
	.nopadding-1st {
		padding: 0;
		margin: 0 8px 0 0;
		}
	.nopadding-odd {
		padding: 0;
		margin: 0 8px 0 8px;
	}
	.nopadding-even {
		padding: 0;
		margin: 0 9px 0 9px;
	}
	.nopadding-4th {
		padding: 0;
		margin: 0 0 0 8px;
		}
}

/*===================================================
    Top Salon Area
===================================================*/


.salon_lineup div dl {
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: 0;
	margin-bottom: 25px;
}
/* col-sm */
@media (max-width: 991px){
	.salon_lineup div dl {
		margin-bottom: 40px;
	}
}.salon_lineup div dt {
	width: 90%;
	float: left;
}
.salon_lineup div dd {
	width: 10%;
	float: left;
	text-align: right;
}
@media (max-width: 767px){
	.salon_lineup div {
		margin-bottom: 20px;
	}
}
/*===================================================
    Top Hair Catalog Area
===================================================*/


.title_haircatalog {
	margin-top: 44px;
}

.catalog_ul li {
	margin-right: 20px;
	float: left;
}
/* col-lg */
@media (min-width: 1200px){
	.catalog_ul li img {
		width: 214px;
	}
}
.catalog_ul li:last-child {
	margin: 0;
}
/* col-md */
@media (max-width: 1199px){
	.catalog_ul li {
		margin-right: 17px;
	}
}

/* col-xs */
@media (max-width: 767px){
	.catalog_ul {
		margin-bottom: 30px
	}
	.catalog_ul li {
		width: 45%;
		margin-bottom: 13px;
	}
	.catalog_ul li:last-child {
		margin-bottom: 30px;
	}
}
/* col-sm */
@media (max-width: 991px){
	.catalog_ul li {
		margin-right: 13px;
	}
}



/*===================================================
    left Menu
===================================================*/

.affix-nav.affix{
    top:0;
    position:fixed;
}
.affix-nav.affix-top{
    position:static;
}
.affix-nav.affix-bottom{
    position:absolute;
}
.left_menu {
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
}

@media (max-width: 767px){
	.left_menu {
		position: relative;
	}
}

.leftmenu_2nd {
	position: relative;
}


.left_menu_ul {
	margin: 70px 0 100px 0;

}
/* col-sm */
@media (max-width: 991px){
	.left_menu_ul {
		margin: 30px 0 70px 30px;
	}
	.left_menu_ul_2 {
		margin: 30px 30px 30px 30px;
	}
	.news_dl {
		margin: 0 30px 40px 30px;
	}
}

.left_menu li {
	margin-bottom: 0.75em;
}

.news_dl dt {
	float: left;
	width: 6em;
}
.news_dl dd {
	margin-bottom: .5em;
}


/*===================================================
    right Menu
===================================================*/

.right_menu {
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 48px;
	z-index: 1001;
	margin-top: 50px;
}

/* col-sm */
@media (max-width: 991px){
	.right_menu {
		margin-top: 20px;
	}
}

.right_menu ul li a {
	display: block;
	width: 48px;
	margin: 10px 0 60px 0;
}
a.rightmenu_tourist {
	height: 59px;
	background-position: 0 0;
	background: url(../img/top_r_sidemenu_1.png) no-repeat left top;
}
a.rightmenu_tourist:hover {
	background-position: -48px 0;
}
a.rightmenu_concept {
	background: url(../img/top_r_sidemenu_2.png) no-repeat left top;
	background-position: 0 0;
	height: 115px;
}
a.rightmenu_concept:hover {
	background-position: -48px 0;
}

a.rightmenu_creative {
	background: url(../img/top_r_sidemenu_3.png) no-repeat left top;
	background-position: 0 0;
	height: 37px;
}
a.rightmenu_creative:hover {
	background-position: -48px 0;
}

a.rightmenu_recruit {
		background: url(../img/top_r_sidemenu_4.png) no-repeat left top;
		background-position: 0 0;
		height: 12px;
	}
a.rightmenu_recruit:hover {
		background-position: -48px 0;
	}

/*===================================================
    2nd page
===================================================*/
.title_2nd {
/* 	margin-top: 15px; */
}

/* col-md */
@media (max-width: 1199px){
	.title_2nd {
		margin-top: 54px;
	}
}

/* col-xs */
@media (max-width: 767px){
	.title_2nd {
		margin-top: 0px;
	}
}


/* second header menu */


.salon_name_h2 {
	margin: 0 0 50px 0;
	padding: 0;
	font-size: 16px;
/* 	text-transform: uppercase; */
}
/* col-xs */
@media (max-width: 767px){
	.salon_name_h2 {
		font-size: 22px;
	}
}

.second-headermenu li {
	width: 24%;
}

.second-headermenu li:nth-child(1) {
	text-align: left;
}
.second-headermenu li:nth-child(2) {
	text-align: center;
}
.second-headermenu li:nth-child(3) {
	text-align: center;
	padding-left: 4em;
}

.second-headermenu li:nth-child(4) {
	text-align: right;
}
/* col-xs */
@media (max-width: 767px){
	.second-headermenu li {
		width: 33%;
		margin-bottom: 45px;
		margin-left: 50px;
	}
	.second-headermenu li:nth-child(1),
	.second-headermenu li:nth-child(2),
	.second-headermenu li:nth-child(3),
	.second-headermenu li:nth-child(4) {
		text-align: left;
		padding: 0;
	}
	.second-headermenu li:nth-child(3) {
		padding-left: 0em;

	}
}



.toggle_box{
    display:none;
    color:#fff;
    background-color:#f26c4f;
    padding:20px;
    margin-top:20px;
}
.btn{
}
.btn.active{
}
.btn:hover{
    cursor:pointer;
}
.box{
    background-color:#132343;
    width:100%;
    height:20px;
    margin-top:20px;
    margin-bottom:20px;
}

/*===================================================
     Top Hair Catalog Area
===================================================*/

.staff_ul li {
	width: 18%;
	margin-right: 18px;
	float: left;
}
.staff_ul li:nth-child(5) {
	margin: 0;
}

/*===================================================
   Hair Catalog Archive
===================================================*/
.style_archive>div {
	margin-bottom: 30px;
	text-align:center;
}
/* col-xs */
@media (max-width: 767px){
	.style_archive>div {
		margin-bottom: 0;
		 text-align:center;
	}
	.style_archive>div:nth-child(odd) {
		padding: 0 7px 14px 14px;
		 text-align:center;
	}
	.style_archive>div:nth-child(even) {
		padding: 0 13px 14px 7px;
		
		
		
	}
}


/*===================================================
   Hair Catalog Detail
===================================================*/
.hairstyle_h2 {
	font-size: 22px;
	margin: 0 0 50px 0;
	padding: 0;
}

.stylist_h3 {
	font-size: 17px;
	font-weight: 200;
	margin: 0 0 40px 0;
	padding: 0;
}
.detail_title {
	margin: 0 0 6px 0;
}
.salon_h3 {
	font-size: 17px;
	font-weight: 200;
	margin: 0 0 50px 0;
	padding: 0;
}

.photochange-ul li {
	width: 29.7%;
	float: left;
	margin-top: 20px;
	margin-right: 20px;
}
.photochange-ul li:last-child {
	margin-right: 0;
}
/* col-sm */
@media (max-width: 991px){
	.photochange-ul li {
	margin-top: 5px;
	margin-right: 5px;
	}
}
/*===================================================
     Staff Detail Page
===================================================*/


/* col-md PC 1200px以上のみに適用 */
@media (min-width: 1200px){
	.pc_l_staff_detailarea {
		padding-left: 30px;
	}
}

.staffname_h2 {
	font-size: 22px;
	margin: 0 0 50px 0;
	padding: 0;
	float: left;
}
/* col-xs */
@media (max-width: 767px){
	.staffname_h2 {
		margin: 0 0 30px 0;
		float: none;
	}
}


/* col-xs */
@media (max-width: 767px){
	.btn_sns {
		margin: 0 20px;
	}
}

.btn_sns li a {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 20px 10px 0 0;
	float: left;

}
a.btn_fb, a.btn_tw, a.btn_pin , a.btn_ins{
	background: url(../img/btn_sns.png) no-repeat 0 0;
}
a.btn_tw {
	background-position: -50px 0;
}
a.btn_pin {
	background-position: -100px 0;
}
a.btn_ins {
	background-position: -150px 0;
}


.staff_styling_ul li {
	width: 18.25%;
	margin-right: 20px;
	float: left;
}

/* col-sm */
@media (max-width: 991px){
	.staff_styling_ul li {
		width: 31.5%;
		margin: 0 10px 10px 0;
	}
}
/* col-sm */
@media (max-width: 767px){
	.staff_styling_ul li {
		width: 47%;
		margin: 0 13px 13px 0;
	}
	.staff_styling_ul li:nth-child(even) {
		margin-right: 0;
	}
}
.staff_styling_ul li:last-child {
	margin: 0;
}

/*===================================================
     2015.12.15 edit
===================================================*/

span.name_s {
    padding-left: 20px;
}
.cal-icn ul li {
    list-style: none;
    font-size: 12px;
    line-height: 2.5em;
}
.cal-icn ,
.cal-icn ul{
	padding-left: 0 !important;
}
.cal-icn ul li i {
    padding-right: 10px;
    font-size: 24px;
    vertical-align: sub;
}
.cal-icn ul li:first-child i{
	color: #ed3000;
}
.cal-icn ul li:nth-child(2) i{
	color: #00ffff;
}
.cal-icn ul li:nth-child(3) i{
	color: #ffff57;
}
.cal-icn ul li:nth-child(4) i{
	color: #00cd5e;
}
.cal-icn ul li:nth-child(5) i{
	color: #aa66d0;
}
/*full calendar*/
#calendar {
    margin-bottom: 50px;
}
/*.fc td, .fc th {
	border: none !important;
}*/
@media (max-width: 767px){
.calendar-left{
    margin-bottom: 50px;
}
}



/* style gallery */
.style-photo a:hover{
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
}


@media (min-width: 1200px){
.style-photo{
	width: 214px;
	height: 286px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}
.style-photo img{
	position: absolute;
	clip: rect(0px 214px 286px 0px);
	margin: 0 auto;
}
.staff_styling_ul li{
	width: 172px;
	height: 242px;
	overflow: hidden;
	position: relative;
}
.staff_styling_ul li img{
	position: absolute;
	clip: rect(0px 172px 242px 0px);
}
}



@media screen and (min-width: 992px) and (max-width: 1199px) {
.style-photo{
	width: 172px;
	height: 230px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}
.style-photo img{
	position: absolute;
	clip: rect(0px 172px 230px 0px);
	margin: 0 auto;
}
.staff_styling_ul li{
	width: 142px;
	height: 190px;
	overflow: hidden;
	position: relative;
}
.staff_styling_ul li img{
	position: absolute;
	clip: rect(0px 142px 190px 0px);
}
}





@media screen and (min-width: 768px) and (max-width: 991px) {
.style-photo{
	width: 178px;
	height: 239px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}
.style-photo img{
	position: absolute;
	clip: rect(10px 178px 239px 0px);
	margin: 0 auto;
}
.staff_styling_ul li{
	width: 187px;
	height: 251px;
	overflow: hidden;
	position: relative;
}
.staff_styling_ul li img{
	position: absolute;
	clip: rect(0px 187px 251px 0px);
}
}


@media (max-width: 767px){
.style-photo{
	width: 142px;
	height: 200px; /* サイズ変更… Android要確認 */
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}
.style-photo img{
	position: absolute;
	clip: rect(0px 172px 230px 0px);
	margin: 0 auto;
}
.staff_styling_ul li{
	width: 166px;
	height: 223px;
	overflow: hidden;
	position: relative;
}
.staff_styling_ul li img{
	position: absolute;
	clip: rect(0px 167px 223px 0px);
}
}
/* pager */
.blog_pager ul li {
    list-style: none;
}



/* Press Photo Gallery */



@media (min-width: 1200px){
.press-photo{
	height: 366px;
	overflow: hidden;
	position: relative;
}
.press-photo img{
	position: absolute;
	clip: rect(0px 214px 366px 0px);
}


@media screen and (min-width: 992px) and (max-width: 1199px) {
.press-photo{
	height: 258px;
	overflow: hidden;
	position: relative;
}
.press-photo img{
	position: absolute;
	clip: rect(0px 172px 258px 0px);
}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.press-photo{
		width: 178px;
		height: 239px;
		overflow: hidden;
		position: relative;
	}
	.press-photo img{
		position: absolute;
		clip: rect(0px 178px 239px 0px);
	}
}

@media (max-width: 767px){
	.press-photo{
		width: 198px;
		height: 200px; /* サイズ変更… Android要確認 */
		overflow: hidden;
		position: relative;
	}
	.press-photo img{
		position: absolute;
		clip: rect(0px 172px 230px 0px);
	}
}
/* pager */
.blog_pager ul li {
    list-style: none;
}


/*===================================================
     Modal Override
===================================================*/



.modal {
    left: 50%;
    width: 700px;
    margin-left: -350px;
    background-color: rgba(256,256,256, 0.85);
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    -o-transition: opacity 0.8s;
    transition: opacity 0.8s;
}
.modal.fade.in {
    top: 18%;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    -o-transition: opacity 0.8s;
    transition: opacity 0.8s;
}
.modal-content {
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.modal-body {
    padding: 0;
    text-align: center;
}

.modal-body h3 {
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 30px;
}

.modal-body h4 {
	font-size: 18px;
	margin-bottom: 30px;
}

.modal-body p {
	line-height: 1.75em;
	margin-bottom: 1em;
	font-size: 14px;
}
.modal-content {
	background: none;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
}

.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.1;
    filter: alpha(opacity=10);
    background: none;
}


@media (max-width: 767px){
	.modal {
		left: 0;
	}
.modal.fade.in {
    top: 18%;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    -o-transition: opacity 0.8s;
    transition: opacity 0.8s;
}
.modal-content {
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.modal-body {
    padding: 0;
    text-align: center;
}

.modal-body h3 {
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 30px;
}

.modal-body h4 {
	font-size: 18px;
	margin-bottom: 30px;
}

.modal-body p {
	line-height: 1.75em;
	margin-bottom: 1em;
	font-size: 14px;
}
.modal-content {
	background: none;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
}

.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.1;
    filter: alpha(opacity=10);
    background: none;
}}