@charset "utf-8";
/*
Theme Name: Soukaan template
Theme #
Description

/* スライドショー
--------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');
body {
    color: #40220f;
    font-family: 'M PLUS 1p', sans-serif;
    background-repeat: repeat;
    font-weight: 400;
    background-color: #f4eaec;
}
.mg1 {
    margin-top: -1px;
}
/* テキスト
--------------------------- */
.font_s1,.font_s2,.font_s3,.font_s4,.font_s5,.font_s6,.font_s7{letter-spacing: 0.1em;}
.font_s {font-size: 1.2rem;line-height: 20px;letter-spacing: 0.07em;}
.font_s1 {font-size: 1.3rem;line-height: 24px;}
.font_s2 {font-size: 1.4rem;line-height: 30px;}
.font_s3 {font-size: 1.6rem;line-height: 32px;}
.font_s4 {font-size: 2.4rem;line-height: 42px;}
.font_s5 {font-size: 2.8rem;line-height: 46px;}
.font_s6 {font-size: 2.0rem;line-height: 30px;}
.font_s7 {font-size: 1.8rem;line-height: 28px;}
.font_s8 {font-size: 3.2rem;line-height: 64px;}
.font_s9 {font-size: 4.2rem;}
.font_s10 {font-size: 6.6rem;line-height: 76px;letter-spacing: 0.07em;}

.ls_b {letter-spacing: 0.12em;}
.f_b {font-weight: 900;}
.f_b2 {font-weight: 800;}
.f_b3 {font-weight: 600;}
.f_b4 {font-weight: 400;}

/* テキストカラー
--------------------------- */
.f_c1 {color: #541935;}
.f_c2 {color: #ffffff;}
.f_c3 {color: #345b7b;}
.f_c4 {color: #C40D23;}
.f_c5 {color: #00417a;}

.top_f2 {font-size: 2.4rem;line-height: 34px;letter-spacing: 0.05em;border-left: 8px solid #541935;}
.top_f1 {font-size: 2.4rem;line-height: 34px;letter-spacing: 0.05em;border-left: 8px solid #ffffff;}

#blog p {font-size: 1.4rem;line-height: 25px;letter-spacing: 0.04em; clear: both; padding-bottom: 16px;box-sizing: border-box; }
#blog img { padding: 0 0 16px 0;}
#blog h6 {font-size: 1.6rem;line-height: 28px;letter-spacing: 0.04em;font-weight: 600; clear: both; padding-bottom: 16px; }
#blog h5 {font-size: 1.6rem;line-height: 28px;letter-spacing: 0.04em;font-weight: 600; clear: both; padding-bottom: 16px; }
#blog h4 {font-size: 1.8rem;line-height: 28px;letter-spacing: 0.05em;font-weight: 600; clear: both; padding-bottom: 16px;}
#blog h3 {font-size: 2.2rem;line-height: 35px;letter-spacing: 0.05em;font-weight: 900; clear: both; padding-bottom: 16px;}
#blog h2 {font-size: 2.6rem;letter-spacing: 0.05em;line-height: 34px;font-weight: 900; clear: both; padding-bottom: 16px;}
#blog h1 {font-size: 2.8rem;letter-spacing: 0.05em;line-height: 42px;font-weight: 900; clear: both; padding-bottom: 16px;}
#blog storng {font-weight: 900;}

#cat li:first-child {padding-top: 8px;}
#cat li {font-size: 1.3rem;line-height: 40px;letter-spacing: 0.05em;border-bottom: 1px solid #9fa0a0;}
#cat li:last-child {border-bottom: none;padding-bottom: 8px;}
.pd_4{padding: 16px 16px 15px 16px;}
/* テキストフォント
--------------------------- */
.f_f1 {font-family: 'Noto Serif JP', serif;font-weight: 700;}
embed,iframe,object{max-width: 100%;}
br.sp { display: inline; }
br.pc { display: none; }

/* リンクカラー
--------------------------- */
a, a:link, a:visited  {color: #541935;text-decoration: none;} 
.w a, .w a:link, .w a:visited  {color: #ffffff;text-decoration: none;} 
.b a, .b a:link, .b a:visited  {color: #231815;text-decoration: none;} 
.me a, .me a:link, .me a:visited  {color: #7DBAB9;text-decoration: none;} 
.sl a, .sl a:link, .sl a:visited  {color: #6EABF7;text-decoration: none;}
.l a, .l a:link, .l a:visited  {color: #DB9EB5;text-decoration: none;} 
a, a img, a em, a p, a, .op a img, .op a em, .op a p {
	-webkit-transition: 0.4s ease-in-out;
	   -moz-transition: 0.4s ease-in-out;
	     -o-transition: 0.4s ease-in-out;
	        transition: 0.4s ease-in-out;
}
a:hover, a:hover img, a:hover em, a:hover p {
	opacity: 0.95;
	filter: alpha(opacity=95);
}
.op a:hover, .op a:hover img, .op a:hover em, .op a:hover p {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.os a:hover img {
	opacity: 0.2;
	filter: alpha(opacity=20);
}
.outer{display: table;width: 50%;height: 100%;text-align: center;}
.inner{display: table-cell;vertical-align: middle;text-align:center;}
.topbg1 {width: 100%;height: 100%;}
.logo{width: 306px;height: 345px;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);margin: auto;z-index: 900;}
.outer_t1{display: table;width: 100%;height: 100%;}
.inner_t1{display: table-cell;vertical-align: middle;}
.textbox {
    position: absolute;
    right: 0%;
    top: 50%;
    z-index: 1000;
    transform: translateY(-50%) translateX(37%) rotate(-90deg);
  -webkit- transform: translateY(-50%) translateX(37%) rotate(-90deg);
}
.mgm6 {margin-top: -12px}
.mg_tt1{}
.mg_tt2{margin-top: 48px;}
.mg_tt3{margin-top: 96px;}
.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.swiper-slide-active .fadeSlider_01 {
    animation: fadeSlideImg01 5s ease 0s 1 normal;
    animation-iteration-count: 1;
    animation-delay: 0.3s;
    opacity: 0;
    }
@keyframes fadeSlideImg01 {
    0% { opacity: 0; transform: translateX(100px);}
    33% { opacity: 1; transform: translateX(0px); }
    66% { opacity: 1; }
    100% { opacity: 1; }
}
.swiper-slide-active .s-right-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
@keyframes s-right-text {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

.motion-txt {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.motion-txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #f6e8ee;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}
.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;
}


/* スライドショー
--------------------------- */
html, body { width: 100%;height: 100%;margin: 0px;padding: 0px;}
body > .tophaikei {height: auto;}
body > .tophaikei3 {height: auto;}
.tophaikei {width: 100%;height: 100%;background-size: contain;}
.tophaikei2 {}
.MENU_haikei {width: 100%;height: 100%;background-position: center center ;background-size: cover;background-repeat: no-repeat;background-image: url("img/s_haikei1.jpg");}
.STYLE_haikei {width: 100%;height: 100%;background-position: center center ;background-size: cover;background-repeat: no-repeat;background-image: url("img/s_haikei3.jpg");}
.RECRUIT_haikei {width: 100%;height: 100%;background-position: center center ;background-size: cover;background-repeat: no-repeat;background-image: url("img/s_haikei4.jpg");}
.STAFF_haikei {width: 100%;height: 100%;background-position: center center ;background-size: cover;background-repeat: no-repeat;background-image: url("img/s_haikei2.jpg");}
.BLOG_haikei {width: 100%;height: 100%;background-position: center center ;background-size: cover;background-repeat: no-repeat;background-image: url("img/s_haikei2.jpg");}
.WHITENING_haikei {width: 100%;height: 100%;background-position: center center ;background-size: cover;background-repeat: no-repeat;background-image: url("img/s_haikei5.jpg");}
.h_haikei_t {
    width: 100%;
	height: 100%;
    background-position: center center ;
	background-size: cover;
	background-repeat: no-repeat;
    margin: 0 auto;
}
.h_haikei_t2 {
    width: 90%;
	height: 90%;
    background-position: center center ;
	background-size: cover;
	background-repeat: no-repeat;
}
.tophaikei4{width: 100%;height: 100%;}
.d_no {display: none;}
.fix_h {position: fixed;z-index: 900;top:0;transition: .3s;transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.c-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
}

/* ライン
--------------------------- */

.line_b1 {border-bottom: 1px solid #40220f;}
.line_b2 {border-bottom: 1px dashed #40220f;}
.line_b3 {border-bottom: 1px solid #ffffff;}
.line_t1 {border-top: 1px solid #40220F;}
.line_o1 {border: 1px solid #ffffff;}
.line_o2 {border: 1px solid #541c37;}
.line_o3 {border: 1px solid #231815;}
.line_lr1 {border-left: 1px solid #727171;border-right: 1px solid #727171;}
.line_l1 {border-left: 3px solid #40220f;}
.line_l2 {border-left: 1px solid #231815;}
.line_l3 {border-left: 1px solid #231815;}
.line_r1 {border-right: 1px solid #000000;}
.line_tb1 {border-top: 1px solid #40220f;border-bottom: 1px solid #40220f;}
.line_tb2 {border-top: 2px solid #000000;border-bottom: 1px solid #000000;}

/* ナビメニュー
--------------------------- */
.menu{*zoom: 1;list-style-type: none;margin-left: auto;margin-right: auto;text-align: right;}
.menu-footer_nav-container .menu{*zoom: 1;list-style-type: none;margin-left: auto;margin-right: auto;text-align:  left;}
.menu:before, .menu:after{content: "";display: table;}
.menu:after{clear: both;}
.menu li img{vertical-align:middle;}
.menu li {position: relative;text-align: center;display: inline-block;*display: inline;font-weight: 500;padding-right: 16px;padding-left: 16px;font-size: 1.4rem;line-height: 32px;letter-spacing: 0.1em;}
.menu-footer_nav-container .menu li {position: relative;text-align:center;display: inline-block;*display: inline;font-weight: 500;padding-right: 8px;padding-left: 8px;font-size: 1.1rem;line-height: 26px;letter-spacing: 0.1em;}
.menu li:last-child {display: inline-block;*display: inline;padding-right: 0px;padding-left: 12px;}
.menu li:first-child {background-image: url(none);}
.menu li a {margin: 0;text-decoration: none;display: block;color: #ffffff;}
.menu li ul {list-style: none;position: absolute;z-index: 9999;top: 100%; left: 0;}
.menu li ul li {width: 256px;text-align: left;font-size: 1.2rem;background-image: url(none), url(none);padding-left: 16px;padding-right: 16px;background: rgba(0,0,0,0.8);}
.menu li ul li:last-child {background-image: url(none), url(none);padding-left: 16px;padding-right: 16px;}
.menu li ul li:first-child {padding-left: 16px;padding-right: 16px;}
.menu li ul li a{color: #fff;}
.menu li:hover > a{}
.menu li a:hover{}
.menu li ul li{overflow: hidden;height: 0; transition: .2s;}
.menu li:hover ul li{overflow: visible;height: 36px;}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
    
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 1px;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 1em;
	cursor: pointer;
    border-bottom: 1px dashed #b3b3b3;
}
.cp_qa .cp_actab label:hover {
	color: #541935;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s ease;
	        transition: max-height 0.5s ease;
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em;
}
/* 質問を開いた時の仕様 */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
	color: #541935;
}
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
	line-height: 1.6;
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 3em;
	margin-top: -12.5px;
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	text-align: center;
}
.cp_qa .cp_actab input[type=checkbox] + label::after {
	content: '▼';
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
/* 背景
--------------------------- */
.s_haikei1 {height: 50%;background-color: rgba(64,34,15,0.1);padding-bottom: 96px;}
.s_haikei2 {height: 30%;background-color: rgba(246,232,238,1);margin-bottom: 120px;}
.s_haikei3 {height: 70%;background-color: rgba(246,232,238,1);}
.t_title {position: absolute;right: 0;bottom: -64px;left: 0;margin: auto;}
.t_title2 {position: absolute;top: 50%; left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);margin: auto;}
.s_bg1 {background-color: rgba(246,232,238,1);position: absolute;bottom: 0;height: 112px;width: 100%}
.bg1 {background-color: #541c37;}
.bg2 {
    background-image: url("img/haikei1.jpg");
    background-repeat: repeat-x;
    background-position: left top;
    background-size: 50px 336px;
}
.bg3 {
    background-color: rgba(84,28,55,1);
}
.bg3_2 {
    background-color: rgba(84,28,55,0.1);
}
.bg4 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 400px;
}
.bg4_1 {background-image: url("img/s_haikei1.jpg");}
.bg4_2 {background-image: url("img/s_haikei2.jpg");}
.bg4_3 {background-image: url("img/s_haikei3.jpg");}
.bg4_4 {background-image: url("img/s_haikei4.jpg");}
.bg4_5 {background-image: url("img/s_haikei5.jpg");}
.bg4_6 {background-image: url("img/s_haikei6.jpg");}
.bg4_7 {background-image: url("img/s_haikei7.jpg");}
.bg4_8 {background-image: url("img/s_haikei8.jpg");}
.bg4_9 {background-image: url("img/s_haikei9.jpg");}
.bg4_10 {background-image: url("img/s_haikei10.jpg");}
.bg4_11 {background-image: url("img/s_haikei11.jpg");}
.bg4_12 {background-image: url("img/s_haikei12.jpg");}
.bg4_13 {background-image: url("img/s_haikei13.jpg");}
.bg4_14 {background-image: url("img/s_haikei14.jpg");}
.bg4_15 {background-image: url("img/s_haikei15.jpg");}
.bg4_16 {background-image: url("img/s_haikei16.jpg");}
.bg4_17 {background-image: url("img/s_haikei17.jpg");}
.bg4_18 {background-image: url("img/s_haikei18.jpg");}
.bg4_19 {background-image: url("img/s_haikei19.jpg");}
.bg4_20 {background-image: url("img/s_haikei20.jpg");}
.bg4_21 {background-image: url("img/s_haikei21.jpg");}
.bg4_22 {background-image: url("img/s_haikei22.jpg");}
.bg5 {
	background-color: rgba(52,91,112,0.1);
}
.bg6 {
    background-image: url("img/haikei4.png");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 240px 240px;
}
.bg6_2{
    background-image: url("img/haikei1.jpg");
    background-repeat: repeat-x;
    background-position: left top;
    background-size: 50px 336px;
}

.bg7 {
	background-color: rgba(246,232,238,1);
}
.bg8{
	background-image: url("img/haikei2.jpg");
    background-size: 250px 208px;
    background-repeat: repeat;
    background-position: center top;
}
.bg9{
    background-image: url("img/style01.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 45%;
}
.bg10{
    background-image: url("img/staffimg.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 45%;
}
.bg11 {
	background-color: rgba(255,255,255,0.6);
}
.bg12 {
	background: rgba(214,128,160,1);
}
.rel_t {  position: relative; width: 100%;height: 100%;}
.shadow {box-shadow: 24px 24px 0px 0 rgb(64, 34, 15, 0.12);}
.re_phot{ position: relative;}
.re_title{ position: absolute; z-index: 100;top:0;right:24px;}
.top_logo {
	position: absolute;
	top:32px;
    z-index: 100;
    left: 0;
    right: 0;
    margin: auto;
}
.top_t1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.top_logo2{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 200;
}
.top_t {
	position: absolute;
	top:48px;
	left: 16px;
    z-index: 100;
}
.phot_b {
	position: absolute;
	bottom:0;
    z-index: 90;
    right: 0;
    margin: auto;
    background-color: rgba(64,34,15,0.08);
}
.phot_t{
    position: absolute;
    z-index: 100;
}
.bg_p{
	background-position: center center;
	background-repeat: repeat-x;
	height: 256px;
	animation: cloudmove 20s linear infinite;
	-webkit-animation: cloudmove 20s linear infinite;
	-moz-animation: cloudmove 20s linear infinite;
}
@keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 0px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 0px;}
	100% {background-position: 800px 0;}
}
@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 0px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 0px;}
	100% {background-position: 800px 0;}
}
@-moz-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 0px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 0px;}
	100% {background-position: 800px 0;}
}

@media screen and (max-width: 780px) {
.menu-header_nav-container{display: none;}
.d_no {display: block;}
.d_no_m {display: none;}
.n_main {height: auto;}
br.sp { display: none; }
br.pc { display: inline; }

    /* ナビメニュー
--------------------------- */

.menu-drawer_nav-container{width: 100%;height: 100%;}
.menu{*zoom: none;list-style-type: none;width: 100%;max-width: 100%;padding:0;margin:0;text-align: center;overflow: hidden;position: static;  }
.menu:before, .menu:after{content: "";display:inline;}
.menu:after{clear:none;}
.menu li {position: static;background-image: none;background-repeat: no-repeat;background-position: left center;padding-left: 0px;padding-right: 0px;display: inline-block;*display: inline;width:90%;margin: 0px auto;height:auto;color:#fff;padding:10px;border-bottom:1px solid #fff;text-align: center;margin-top: 0px;}
.menu li:first-child {padding:16px 10px 16px 10px;}
.menu li:last-child {padding-left: 0px;padding-right: 0px;}
.menu li a{text-decoration:none;font-size:16px;display:block;height:auto;line-height:26px;font-weight:bold;color:#fff;}
.menu li ul.sub-menu {list-style: none;position: static;z-index: auto;top: auto;left: 0;margin-top: 0px;padding: 8px 0px 0px 16px;display:block;background:none;}
.menu li ul.sub-menu li {width: 100%;text-align: justify;font-size: 1.2rem;background-image: url(none), url(none);padding: 0px 0px 0px 16px;position: static;border-bottom:none;background: rgba(0,0,0,0.0);margin-top: 0px;}
.menu li ul.sub-menu li a{color:#fff; }
.menu li:hover > a{}
.menu li a:hover{}
.menu li ul li{overflow: visible;height: 36;transition: .0;margin-top: 0px;}
.menu li:hover ul li{overflow: visible;height: auto;margin-top: 0px;}
.tophaikei {width: 100%;height: 100%; background-size: cover !important;}
.s_haikei1 {height: 60%;padding-bottom: 54px;}
.t_title {bottom: -40px;}
.mg_tt3{margin-top: 48px;}
.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
  padding: 48px 16px 16px 16px;
  background-color: rgba(255,255,255,0.8);
}
.top_logo {
	position: absolute;
	 margin: 24px auto;
}
    .top_logo2{
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 200;
}
.bg4 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 256px;
}
.eye_btn{position: fixed;bottom: 16px;right:16px;width: 200px; z-index: 1000;}
.rec_btn{position: fixed;bottom: 16px;right:16px;width: 200px; z-index: 1000;}
.shadow {box-shadow: 0px 0px 0px 0 rgb(64, 34, 15, 0);}
    .font_s6 {font-size: 1.6rem;line-height: 26px;}
body{overflow-x: hidden;}
}