@charset "utf-8";

/*
Theme Name: SHINKA FLEX
Description: SHINKA FLEX
Theme URI: https://house.kano-kensetsu.com
Author: L CREATE
Author URI: https://create.livre.jp
Version: 1.0,0
*/

/*コンテンツの背景*/
div.post,p.feed,#domments {background-color: #FFF;}	

/*  BODY
----------------------------------------------------------- */  
body {
	font-family:'游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
	margin: 0 auto;
	padding: 0;
    background-color: #fff;
	font-feature-settings : "palt" ;
	/*-webkit-font-smoothing: antialiased;*/  
    /*-moz-osx-font-smoothing: grayscale;*/  
    font-size: 14px;
	letter-spacing: 0.15em;
    line-height: 2.2;
    color: #000000;
}

img {
    width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	color: #000;
}
a img:hover {
	opacity: 0.8;
	color: #fff;
}

ul {
    list-style: none;
}
#main {
	word-break:break-all;
}

.wraper1 {
    width: 800px;
    margin: 0 auto; 
}
.wraper2 {
    width: 700px;
    margin: 0 auto; 
}
.w100 {
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.w70 {
	width: 40%;
	height: auto;
	margin: 0 auto;
}
.w80 {
	width: 50%;
	height: auto;
	margin: 5% auto 0 auto;
}
.w90 {
	width: 60%;
	height: auto;
	margin: 0 auto;
}
.w75 {
	width: 45%;
	height: auto;
	margin: 5% auto;
}
.wgr {
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: #e6e6e6;
	padding: 1% 0 4% 0;
}
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

.pc {
	display: block!important;
}
.sp {
	display: none!important;
}

@media screen and (max-width: 768px) {

	body,html {
		width: 100%;
		overflow-x: hidden;
	}
	.telLink {
		pointer-events: none;
	}
	.pc {
        display: none!important;
    }
    .sp {
        display: block!important;
    }
	.wraper1 {
		width: 100%;
	}
	.wraper2 {
		width: 100%;
	}
	.w70 {
		width: 80%;
	}
	.w80 {
		width: 80%;
		margin: 0 auto;
	}
	.w90 {
		width: 90%;
	}
	.w75 {
		width: 80%;
		margin: 10% auto;
	}
	
}

.bold {
	font-weight: bold;
}
.center {
	text-align:center;
}
.left {
	text-align:left;
}
.right {
	text-align:right;
}
/*線*/
hr {
  border: 1px solid #000000;
  margin: 20px 0;
}
.mgr {
  color: #5A6767;
}

/*  テキスト
----------------------------------------------------------- */  

.tx_m1 {
	font-family: '游明朝','Yu Mincho',YuMincho, 'ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
	font-size: 2.4em;
	letter-spacing: 0.05em;
	line-height: 1.8em;
	text-align: center;
	padding: 5% 0;
}
.md_m1 {
	font-family: 'Cinzel', serif;
    font-size: 1.9em;
    letter-spacing: 0.4em;
    line-height: 1.8em;
    text-align: center;
    padding: 2% 0 0 0;
}

@media screen and (max-width: 768px) {

	.tx_m1 {
		font-size: 1.4em;
	}
	.md_m1 {
		font-size: 1.5em;
		padding: 8% 0 0 0;
	}
}



/*  マージン
----------------------------------------------------------- */  

.m_t5p {
	margin-top: 10%;
}
.m_t10p {
	margin-top: 10%;
}
.m_t20p {
	margin-top: 20%;
}
.m_t30p {
	margin-top: 30%;
}
.m_t40p {
	margin-top: 40%;
}
.m_t50p {
	margin-top: 50%;
}
.m_b5p {
	margin-bottom: 5%;
}
.m_b10p {
	margin-bottom: 10%;
}
.m_b20p {
	margin-bottom: 20%;
}
.m_b30p {
	margin-bottom: 30%;
}
.m_b40p {
	margin-bottom: 40%;
}
.m_b50p {
	margin-bottom: 50%;
}
.m_5p {
	margin: 5% auto 5% auto;
}
.m_5p2 {
	margin: 5% auto 10% auto;
}
.m_10p {
	margin: 10% auto 10% auto;
}
.m_15p {
	margin: 15% auto 15% auto;
}
.m_20p {
	margin: 20% auto;
}
.m_t5ps {
	margin: 5% auto 0 auto;
}
.m_t15ps {
	margin: 25% auto 10% auto;
}
.m_t10ps {
	margin: 15% auto 10% auto;
}

@media screen and (max-width: 768px) {

	.m_t10ps {
		margin: 25% auto 10% auto;
	}
}
/* border-radius
----------------------------------------------------------- */ 

.br5 {
	border-radius: 5px;
}
.br10 {
	border-radius: 10px;
}



/* fadein
---------------------------------------------------- */

.fadein {
	opacity : 0;
	transform: translateY(20px);
	transition: all 1s;
}


/* header1
----------------------------------------------------------- */


#header {
    position: fixed;
    width: 100%;
    background: #e6e6e6;
    z-index: 210;
    top: 0;
    margin: 0 auto;
	padding: 0 8%;
}
#header h1 {
	display: none;
	text-align:center;
	margin: 0;
}
#header .logo {
	width: 300%;
    margin: 0 auto;
}
#header .logo img{
	width: 100%;
    height: auto;
    margin: 0;
}

.itemWrap {
    display: flex;
    align-items: center;
	padding: 2% 0 1% 0;
}
.itemWrap .box {
	width: 12%;
    height: auto;
    margin-right: auto;
}
.itemWrap .box + .box {
	margin: 0 2% 0 0;
}


@media screen and (max-width: 767px) {

	.hfbx {
		padding: 0 15% 0 0;
	}
	#header {
		width: 100vw;
        height: 8vh;
        padding: 0 0;
	}
	#header .logo {
		width: 150%;
		margin: 15% auto 20% 10%;
	}
	#header .logo img{
		width: 100%;
		height: auto;
	}
	.itemWrap {
		display: flex;
		padding: 1%;
	}
	.itemWrap .box {
		width: 25%;
		height: auto;
		margin-right: auto;
	}
	.itemWrap .box + .box {
		margin: 3% 1% 2% 1%;
	}
}


/* content
----------------------------------------------------------- */ 

#content {
    margin-top: 5.8%;
}
#content .wraper1 {
    overflow: hidden;
}

/* ページャー
----------------------------------------------------------- */ 

.pager{
	margin: 20px 0 20px 0;
	text-align:center;
}
a.page-numbers,
.pager .current{
	background: #ffffff;
	padding:8px 8px;
	margin:0 2px;
}
.pager .current{
	background: #ccc;
	border:solid 1px 999;
	color: #fff;
}



/* footer
----------------------------------------------------------- */   
   
#footer {
	width: 100%;
    padding-bottom: 0px;
    overflow: hidden;
    color: #000;
    background-color: #528d9a;
	margin: 0 auto
}
#footer .foot_lg {
	width: 70%;
    margin: 5% auto;
}
#footer .foot_in {
	margin: 0;
    padding: 6% 36%;
    text-align: center;
}
#footer .foot_tp {
    text-align: center;
    font-size: 0.8em;
    line-height: 2;
}
#footer .foot_tp a{
    color: #000;
}
#footer .foot_bt {
	font-size: 0.6em;
    text-align: center;
    line-height: 3;
    letter-spacing: 0.5px;
    margin: 10% auto 5% auto;
}

@media screen and (max-width: 768px) {

	#footer {
		width: 100%;
		padding: 0;
	}
	#footer .foot_in {
		margin: 0;
		padding: 10% 20%;
	}
	#footer .foot_tp {
	}
	#footer .foot_bt {
	}
}


/*  トップへ戻るボタン
----------------------------------------------------------- */ 

/*ボタンの領域*/
#re-top {
	position:fixed; /*画面に固定*/
	bottom:0%; /*画面下へ*/
	right:0%; /*画面右へ*/
	z-index:10; /*レイヤー順序を上に*/
	background-color:transparent; /*領域の背景色（透明）*/
}
/*丸ボタン*/
.re-topB {
	position:relative;
	display:block; 
	background-color:rgba(0,0,0,0.3); /*丸ボタンの色*/
	color:rgb(255,255,255); /*三角と文字色*/
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:50px;
	height:60px;
	text-align:center;
	line-height:20px;
	padding-top:30px;
}
/*三角部分*/
.re-topB:before {
	font-family: FontAwesome;
	content:'\f106';
	position:absolute;
	top:15px;
	left:2px;
	width:100%;
	text-align:center;
	font-size:40px;
}



/*  NAVI
----------------------------------------------------------- */  	
#nav {
	font-size: 14px;
	font-weight:bold;
	letter-spacing: 0.2em;
	width: 100%;
	margin: 30px auto 30px auto;
	background-color: #fff;
	color: #000;
	text-align: center;
    padding: 10px 3% 10px 3%;
}

#nav ul {
  display: flex;
  /*justify-content: space-between;*/
}
#nav li {
  list-style-type: none;
  background-color: #fff;
  color: #000;
  flex-grow: 1;
}
#nav li + li {
  border-left: 1px solid #000;
}

#nav ul {
list-style: none;
margin: auto;
}

.main-navigation {
clear: both;
margin: 0 auto;
position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0;
}

.nav-menu li {
display: inline-block;
position: relative;
margin: 0 0;
}

.nav-menu li a {
color: #000;
background-color: #fff;
display: block;
font-size: 13px;
text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
background-color: #fff;
}

.nav-menu .sub-menu,
.nav-menu .children {
background-color: #fff;
display: none;
padding: 0;
position: absolute;
z-index: 99999;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
color: #333;
margin: 0;
width: 100px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
background-color: #fff;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: #000;
background: #fff;
}


/*  NAVI
----------------------------------------------------------- */

.menu{
    height: 20px;
    position: fixed;
    right: 3%;
    top: 5%;
    width: 30px;
    z-index: 210;
}
.menu__line{
    background: #000000;
    display: block;
    height: 1px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 9px;
}
.menu__line--bottom{
    bottom: 0;
}
.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
}
.menu__line--center.active{
    transform:scaleX(0);
}
.menu__line--bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
}


/*gnav*/
.gnav{
    background: rgba(234,232,225,0.9);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 105;
	top: 0;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav__menu__item{
    margin: 40px 0;
	text-align: center;
}
.gnav__menu__item a{
	font-family: 'Cinzel', serif;
    color: #000000;
    font-size: 1.5em;
    transition: .5s;
	letter-spacing: 0.15em;
	-webkit-font-smoothing: antialiased;
}
.gnav__menu__item a:hover{
    color: #666;
}

.hero{
    background:url(images/hero.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.sub-menu li{
	padding: 0 0 0 15%;
	position: relative;
}
.sub-menu li :before {
    border-top: 1px solid;
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    width: 5%;
}


@media screen and (max-width: 767px) {

    .menu{
		right: 4.5%;
		top: 3%;
	}
	.menu-item-description {
		margin-bottom: 15%;
	}
}







/* ==========================================================================
   レスポンシブページネーション
   ========================================================================== */
   
.pagination{
  list-style-type: none;
  padding-left: 0;
  margin: 30px 0;
}

.pagination,
.pagination li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.pagination a {
  font-weight: 300;
  padding-top: 1px;
  text-decoration:none;
  border: 1px solid #ddd;
  border-left-width: 0;
  min-width:36px;
  min-height:36px;
  color: #333;
}

.pagination li:not([class*="current"]) a:hover {
  background-color: #eee;
}

.pagination li:first-of-type a {
  border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
  display: inline-block;
  font-family: Fontawesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }

.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }

.pagination li.current a {
 background-color: #ddd;
 cursor: default;
 pointer-events: none;
}

.pagination > li:first-child > a {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
#post .section .post-data {
	margin-bottom: 1em;
}
.addtoany_list {
	display: inline-block !important;
	margin-bottom: 3em;
}

/* ----------------------------------------------------------------------
Youtube responsive - Youtube動画のレスポンシブ表示
---------------------------------------------------------------------- */
.ytube { position:relative; height:0; margin-top:20px; margin-bottom:20px; padding-bottom:56.25%; padding-top:30px; overflow:hidden; }
.ytube iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; }


/* thanks ボタンのCSS　*/
.btn-border {
  display: inline-block;
  /* max-width: 180px;　*/
  text-align: center;
  border: 2px solid #42829d;
  font-size: 1.2em;
  color: #42829d;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}

.btn-border:hover {
  background-color: #42829d;
  border-color: #42829d;
  color: #FFF;
}

/* コンタクト
----------------------------------------------------------- */ 

.contact {
	font-size:18px;
	font-weight:bold;
	margin: 20px 10px 10px 10px;
	padding: 10px 10px;
	border-bottom: 2px solid #808080;
	text-align: left;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}


.placeholder {
    color: #dcdcdc;
}
/*見出し欄*/
.inquiry .haveto,.inquiry .any {	
	font-size: 1.1em;
}
.inquiry th{
	text-align:left;
	color:#444;
	padding:2%;
	width:32%;
	background:#f7f7f7;
	border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
	font-size: 1.1em;
	border:solid 1px #d7d7d7;
	text-align: left;
	padding:2%;
}
input[type="text"],
textarea {
	font-size: 0.9em;
	padding: 1% 0 1% 1%;
}
.text2 {
	width: 15%;
	font-size: 0.9em;
	padding: 1% 0 1% 2%;
}
.drop {
	font-size: 1.1em;
}
input[type="email"],
textarea {
	font-size: 0.9em;
	padding: 1% 0 1% 2%;
}
input[type="textarea"], textarea {
    width: 100%;
	height: 100px;
    font-size: 0.9em;
}
.inquiry text{
	font-size: 1.1em;
	border:solid 1px #d7d7d7;
	text-align: left;
	padding:2%;
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
	font-size:7px;
	padding:5px;
	background:#FF7691;
	color:#fff;
	border-radius:2px;
	margin-right:5px;
	position:relative;
	bottom:1px;
}
/*任意の調整*/
.any{
	font-size:7px;
	padding:5px;
	background:#32C17D;
	color:#fff;
	border-radius:2px;
	margin-right:5px;
	position:relative;
	bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
	display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
	display: block;
	padding:15px;
	width:350px;
	background:#5EAD35;
	color:#fff;
	border:2px solid #5EAD35;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
	background:#fff;
	color:#5EAD35;
	border:2px solid #5EAD35;
}
/*送信ボタンのデザイン変更*/
#submitbtn{
	display: block;
	padding:15px;
	width:350px;
	background:#5CB531;
	color:#fff;
	border:2px solid #5CB531;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#submitbtn:hover{
	background:#fff;
	color:#5CB531;
	border:2px solid #5CB531;
}
/*送信ボタンのデザイン変更*/
#backtbtn{
	display: block;
	padding:15px;
	width:350px;
	background:#48B8CE;
	color:#fff;
	border:2px solid #48B8CE;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#backtbtn:hover{
	background:#fff;
	color:#48B8CE;
	border:2px solid #48B8CE;
}
.conmid {
	font-size: 2em;
	text-align: left;
	margin: 5% 0 0 0;
}
.contit {
	font-size: 1.1em;
	text-align: left;
	margin: 0 0;
}

span.panfu .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label:after {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
    background-image: url(./img/top/seikyumenu01.jpg);
	background-repeat: no-repeat;
	width: 680px;
	height: 0;
	padding-top: 35%;
	background-size: contain;
}
span.panfu .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label:after {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
    background-image: url(./img/top/seikyumenu02.jpg);
	background-repeat: no-repeat;
	width: 680px;
	height: 0;
	padding-top: 35%;
	background-size: contain;
}
span.panfu .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label:after {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
    background-image: url(./img/top/seikyumenu03.jpg);
	background-repeat: no-repeat;
	width: 680px;
	height: 0;
	padding-top: 35%;
	background-size: contain;
}
span.panfu .wpcf7-list-item:nth-of-type(4) .wpcf7-list-item-label:after {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
    background-image: url(./img/top/seikyumenu04.jpg);
	background-repeat: no-repeat;
	width: 680px;
	height: 0;
	padding-top: 35%;
	background-size: contain;
}

/* 未チェックの選択肢を薄く表示 */
span.panfu .wpcf7-list-item input + .wpcf7-list-item-label:after {
    opacity: 0.5;
} 
/* チェックされた選択肢を濃く表示 */
span.panfu .wpcf7-list-item input:checked + .wpcf7-list-item-label:after {
    opacity: 1;
}

/*トップに戻るbutton*/
.btbtn{
	display: block;
    padding: 2%;
    width: 75%;
    background: #5EAD35;
    color: #fff;
    border: 2px solid #5EAD35;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    border-radius: 2px;
    margin: 10% auto;
}
.btbtn:hover{
	background:#fff;
	color:#5EAD35;
	border:2px solid #5EAD35;
}
.thxmid {
	font-size: 2em;
	font-weight: bold;
    line-height: 1.6;
	padding: 10% 0 0 0;
	color:#5EAD35;
	}





@media screen and (max-width: 767px) {
	
	.inquiry th,
	.inquiry td {
		display:block!important;
		width:100%!important;
		border-top:none!important;
		-webkit-box-sizing:border-box!important;
		-moz-box-sizing:border-box!important;
		box-sizing:border-box!important;
	}
	.inquiry tr:first-child th{
		border-top:1px solid #d7d7d7!important;
	}
	.text2 {
		width: 30%;
		font-size: 0.9em;
		padding: 1% 0 1% 2%;
	}
	.conmid {
		font-size: 1.8em;
		margin: 25% 0 0 0;
	}
	.contit {
		font-size: 1em;
		margin: 2% 0 0 0;
	}
	span.panfu .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label:after {
		width: 300px;
		height: 0;
	}
	span.panfu .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label:after {
		width: 300px;
		height: 0;
	}
	span.panfu .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label:after {
		width: 300px;
		height: 0;
	}
	span.panfu .wpcf7-list-item:nth-of-type(4) .wpcf7-list-item-label:after {
		width: 300px;
		height: 0;
	}
	.btbtn{
		padding: 4%;
		width: 90%;
		font-size: 1.2em;
	}
}


/* SHINKA FLEX5
----------------------------------------------------------- */ 

#header .logof {
	width: 30%;
    text-align: center;
    margin: 0 auto;
    padding: 5% 0 0 0;
}

@media screen and (max-width: 768px) {

	#header .logof {
		width: 60%;
	}
}



.place {
	width: 60%;
	height: auto;
	margin: 5% auto;
}
.place img{
	width: 100%;
	height: auto;
}

.tex_f1 {
	font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
	font-size: 2em;
	letter-spacing: 0em;
	line-height: 1.8em;
	text-align: left;
	padding: 5% 0;
}
.tex_f2 {
	font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0em;
	line-height: 1.8em;
	text-align: center;
	margin: 0 auto;
	padding: 5% 0;
}
.b-dyellow {
	width: 100%;
	background-color: #C39501;
}
.fldybox {
	width: 100%;
	height: auto;
	background-color: #C39501;
	margin: 0 auto;
	padding: 10%
}
.wide {
	width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.wide img{
	width: 220%;
    height: auto;
}
.b-dyellow {
	width: 100%;
	background-color: #C39501;
}

a.btn_06 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background: #000;
  color: #333;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;
  position: relative;
	margin: 15% auto 5% auto;
}
a.btn_06 span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  position: absolute;
  top: -6px;
  left: -6px;
  transition-duration: 0.2s;
	    font-size: 1.2em;
    font-weight: bold;
}
a.btn_06:hover span {
  left: -1px;
  top: -1px;
}
@media screen and (max-width: 768px) {

	.tex_f1 {
		font-size: 1em;
	}
}


#footer .ftflex5 {
    background-color: #fff;
}



/* SHINKA FLEX5
----------------------------------------------------------- */ 

#header .logoC {
	width: 45%;
    text-align: center;
    margin: 0 auto;
    padding: 8% 0 8% 0;
}

@media screen and (max-width: 768px) {

	#header .logoC {
		width: 60%;
	}
}

.gray {
	width: 100%;
	background-color: #E4E4E4;
}
.conc_tex {
	font-size: 14px;
	font-feature-settings : "palt" ;
	letter-spacing: 0.15em;
    line-height: 1.6;
}

/* menu-trigger -------------------------*/
	
.menu-trigger,
.menu-trigger span{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  cursor :pointer;
  margin-top: 6px;
}
.menu-trigger{
  position: fixed;
  width: 50px;
  height: 50px;
  top: 0px;
  right: 5px;
  z-index: 9999;
}
.menu-trigger span{
  position: absolute;
  background-color: #000;;
  width: 30px;
  height: 2px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9999;
}
.menu-trigger span:nth-of-type(1){
  top: 15px;
}
.menu-trigger span:nth-of-type(2){
  top: 0;
  bottom: 0;
}
.menu-trigger span:nth-of-type(3){
  bottom: 15px;
}
.menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(9px) rotate(-45deg);
	transform: translateY(9px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-9px) rotate(45deg);
	transform: translateY(-9px) rotate(45deg);
}

.g-nav{
	display: none;
    top: 0;
    background-color: #ffffff;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 500;
}
.g-nav .list{
  padding: 0;
}
.g-nav .list .item{
	list-style: none;
	padding: 0% 8%;
}
.g-nav .list .item a{
	display: block;
	font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    color: #000;
    padding: 10px 0 2px 1.2em;
    position: relative;   
}
.g-nav .list .item a:before {
  font-family: FontAwesome;
  content: "\f0da";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 10px;/*アイコンの位置*/
  color: #BF9C46; /*アイコン色*/
}
.item__toptit {
	background: #E4E4E4;
    padding: 0 0;
	margin: 0 0 10% 0;
    display: block;
}
.item__toptit img{
	width: 45%;
    height: auto;
    margin: 0 0;
    padding: 5% 0 5% 5%;
}

.item__footlg {
	background: #fff;
    display: block;
}
.item__footlg img{
	width: 40%;
    height: auto;
    margin: 0 0;
    padding: 5% 10% 10% 0;
    float: right;
}
@media screen and (max-width: 768px) {

	.menu-trigger{
		position: fixed;
		width: 50px;
		height: 50px;
		top: 0px;
		right: 5px;
		z-index: 9999;
		}
}

@media screen and (max-width: 768px){

	/*追従ボタン*/
	.ftbtn {
		position: fixed;
		bottom: 0px;
		padding-bottom: 0px;
		display: flex;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap; 
	}
	/*フタ—バナー*/
	.ftbtn_li {
		width: 49.5%;
		margin-bottom: 0;
		text-align: center;
		background: rgba(132,196,170,0.9); /*191,156,70,0.9*/
	}
}



/*  トップへ戻るボタン
----------------------------------------------------------- */ 

/*ボタンの領域*/
#re-topc {
	position:fixed; /*画面に固定*/
	bottom:0%; /*画面下へ*/
	right:0%; /*画面右へ*/
	z-index:10; /*レイヤー順序を上に*/
	background-color:transparent; /*領域の背景色（透明）*/
}
/*丸ボタン*/
.re-topC {
	position:relative;
	display:block; 
	background-color:rgba(255,255,255,0.0); /*丸ボタンの色*/
	color:rgb(0,0,0); /*三角と文字色*/
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:50px;
	height:60px;
	text-align:center;
	line-height:20px;
	padding-top:30px;
}
/*三角部分*/
.re-topC:before {
	font-family: FontAwesome;
	content:'\f106';
	position:absolute;
	top:15px;
	left:2px;
	width:100%;
	text-align:center;
	font-size:40px;
}

@media screen and (max-width: 768px){

	/*ボタンの領域*/
	#re-topc {
		position:fixed; /*画面に固定*/
		bottom:2%; /*画面下へ*/
		right:0%; /*画面右へ*/
		z-index:10; /*レイヤー順序を上に*/
		background-color:transparent; /*領域の背景色（透明）*/
	}
}

@media screen and (min-width: 751px){
  .telLink a[href^="tel:"]{
    pointer-events: none;
  }
}


/* CANVAS
----------------------------------------------------------- */ 

.w96 {
	width: 96%;
	height: auto;
	margin: 0 auto;
}
/*送信ボタンのデザイン変更*/
#formbtnc{
	display: block;
	padding:15px;
	width:350px;
	background:#BF9C46;
	color:#fff;
	border:2px solid #BF9C46;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtnc:hover{
	background:#fff;
	color:#BF9C46;
	border:2px solid #BF9C46;
}
/*送信ボタンのデザイン変更*/
#submitbtnc{
	display: block;
	padding:15px;
	width:350px;
	background:#BF9C46;
	color:#fff;
	border:2px solid #BF9C46;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#submitbtnc:hover{
	background:#fff;
	color:#9D1C33;
	border:2px solid #9D1C33;
}
/*送信ボタンのデザイン変更*/
#backtbtnc{
	display: block;
	padding:15px;
	width:350px;
	background:#9D1C33;
	color:#fff;
	border:2px solid #9D1C33;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#backtbtnc:hover{
	background:#fff;
	color:#9D1C33;
	border:2px solid #9D1C33;
}


/* YouTube -------------------------*/

.tpmv {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.tpmv iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/* YouTube 縦-------------------------*/

.tpmv2 {
	position: relative;
    width: 100%;
    padding-top: 66%;
    margin-top: -4%;
}
.tpmv2 iframe {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 101% !important;
    height: 86% !important;
}
.yttx {
    position: relative;
    font-size: 4em;
    letter-spacing: 0em;
    line-height: 1.2em;
    text-align: center;
    padding: 0;
    z-index: 200;
    color: #fff;
    margin: -15% auto 0 auto;
    /* z-index: 800; */
}

#header .logoN {
	width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

.videoWrap{
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}
.videoWrap video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (max-width: 768px) {

	.tpmv2 {
		position: relative;
		width: 100%;
		padding-top: 80%;
		margin-top: 50%;
	}
	.tpmv2 iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		width: 260% !important;
		height: 180% !important;
	}
	.yttx {
		font-size: 2em;
		margin: -25% auto 0 auto;
	}
	#header .logoN {
		width: 100%;
	}
	.videoWrap {
		padding-top: 0;
		margin-top: 0;
		height: auto;
	}
	.videoWrap video{
		/* width: 100%; */
		height: 140%;
		position: relative;
		top: 0;
		left: 0;
		/* width: 100%; */
		height: 70vh;
		/* -webkit-transform: translate(-50%, -50%); */
		-moz-transform: translate(-50%, -50%);
		/* transform: translate(-50%, -50%); */
		/* display: block; */
		object-fit: cover;
	}
}


.gmap {
	width: 100%;
	height: auto;
	margin: 5% auto;
}
.ftel {
	width: 70%;
	height: auto;
	margin: 4% auto 8% auto;
}




.tmd1 {
    font-size: 1.2em;
    line-height: 1.5;
    padding: 0.75em;
    text-align: center;
    color: #528d9a;
    border: 1px solid #528d9a;
    background: #fff;
    margin-bottom: 5%;
}

.contbx {
    display: flex;
    width: 80%;
    margin: 5% auto 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cmd1 {
    font-size: 4.5em;
    font-weight: bold;
    line-height: 1.4;
	letter-spacing: 0.2em;
}
.cmd2 {
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    /* margin-bottom: 5%;*/
    position: relative; /* after要素のためにrelativeを追加 */
}
.cmd2::after {
    content: '〉'; /* 矢印の記号 */
    display: block;
    font-size: 1em;
    text-align: center;
    margin-top: 10px;
    transform: rotate(90deg); /* 90度回転 */
}
.subtext {
    display: block;
    font-size: 0.5em;
}
.ctx1 {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 2;
}
.cst {
    font-size: 1.6em;
    font-weight: bold;
	text-align: center;
    line-height: 2;
	margin: 10% auto;
}
.contL {
    width: 45%;
	height: auto;
    text-align: justify;
    margin: 0 auto;
}
.contR {
    width: 55%;
	height: auto;
    text-align: justify;
	margin: 0 auto;
}
.contR .wbimg img {
    width: 100%;
    height: auto;
    margin: 0 auto;
	box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 10px;
}
.conts {
    width: 48%;
    text-align: justify;
    margin: 0 0 4% 0;
    height: 100%; /* 追加 */
}

@media screen and (max-width: 767px) {

	.contbx {
		width: 90%;
	}
	.conts {
		width: 100%;
	}
	.contL {
		width: 100%;
		margin: 0 auto;
	}
	.contR {
		width: 100%;
		margin: 0 auto;
	}
	.cmd1 {
		font-size: 3em;
		margin: 10% auto;
	}
	.cmd2 {
		font-size: 2.2em;
	}
	.ctx1 {
		font-size: 1.2em;
		line-height: 2;
		margin: 10% auto 15% auto;
	}
}






/* ボタンの基本スタイル */
.floating-button1, .floating-button2 {
    position: fixed;
    right: 0;
    transform: translateY(-50%);
    width: 8%;
    height: 5%;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    border-radius: 5px 0 0 5px;
	border: solid 1px #dcdcdc;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    cursor: pointer;
    text-decoration: none;
	padding: 0 0.5%;
}
.floating-button1.visible,.floating-button2.visible {
    transform: translate(0px, -50%); /* ボタンを左にスライドしつつ中央に揃える */
    opacity: 1; /* 表示 */
}
.floating-button1.visible:hover,.floating-button2.visible:hover {
    opacity: 0.8;
}
.floating-button1 {
    top: 47%;
}
.floating-button2 {
    top: 53%;
}
@media screen and (max-width: 767px) {
    .floating-button1,.floating-button2 {
        top: auto;
        bottom: 0;
        left: 0;
        width: 25%;
        height: 50px;
        border-radius: 5px 5px;
		padding: 0 4%;
        transform: none;
    }
    .floating-button1.visible {
        transform: translate(0px, 0%);
        opacity: 1; /* 表示 */
    }
	.floating-button2.visible {
        transform: translate(100%, 0%);
        opacity: 1; /* 表示 */
    }
}




/* =========================================================
   モデルハウス（高知/岡山） リスト & slick 両対応CSS
   ---------------------------------------------------------
   通常表示 = ul:not(.slick-initialized)
   カルーセル = ul.slick-initialized
   ========================================================= */

/* --- 通常表示（flexで2件並び） ------------------------ */
#kcapp22 ul:not(.slick-initialized),
#kcappEveTop ul:not(.slick-initialized){
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  box-sizing: border-box;
}

#kcapp22 ul:not(.slick-initialized) > li,
#kcappEveTop ul:not(.slick-initialized) > li{
  flex: 1 1 100%;
  max-width: calc(50% - 8px);         /* PC 2件表示 */
  box-sizing: border-box;
  list-style: none;
}

/* 1つ目と2つ目の間だけスペース */
#kcapp22 ul:not(.slick-initialized) > li:nth-child(2),
#kcappEveTop ul:not(.slick-initialized) > li:nth-child(2){
  margin-left: 16px;
}

/* --- モバイル（通常表示時のみ適用） ------------------ */
@media (max-width: 768px){
  #kcapp22 ul:not(.slick-initialized) > li,
  #kcappEveTop ul:not(.slick-initialized) > li{
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 10%;
  }
  /* プレースホルダは slick 化時は出さない */
  #kcapp22 ul:not(.slick-initialized)::after,
  #kcappEveTop ul:not(.slick-initialized)::after{
    content: '';
    flex: 1 1 100%;
    box-sizing: border-box;
  }
}

/* --- 画像/figure 共通体裁 ------------------------------ */
#kcapp22 li figure,
#kcappEveTop li figure{
  margin: 0;
  padding: 0;
}
#kcapp22 li img,
#kcappEveTop li img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* --- タグ/H4/本文 -------------------------------------- */
#kcapp22 .tag span,
#kcappEveTop .tag span{
  display: inline-block;
  border: 1px solid #343434;
  color: #333;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  padding: 0 10px;
  margin: 10px 0;
  border-right: none;
}
#kcapp22 .tag span:last-child,
#kcappEveTop .tag span:last-child{
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-right: 1px solid #343434;
}
#kcapp22 h4,
#kcappEveTop h4{
  font-size: 1em;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 2% auto 8% auto;
}

@media (max-width: 768px){
  #kcapp22 .tag span,
  #kcappEveTop .tag span{
    font-size: 0.9em;
  }
}

/* --- ボタン -------------------------------------------- */
#kcapp22 .bottom-btn-container .detail-btn,
#kcappEveTop .bottom-btn-container .detail-btn{
  display: inline-block;
  background-color: #485859;
  color: #fff;
  padding: 5px 20px;
  font-size: 0.8em;
  text-align: center;
  margin-top: 10px;
  transition: background-color 0.3s ease;
  border-radius: 4px;
}
#kcapp22 .bottom-btn-container .detail-btn:hover,
#kcappEveTop .bottom-btn-container .detail-btn:hover{
  background-color: #80989b;
}
#kcapp22 .bottom-btn-container .special-btn .detail-btn,
#kcappEveTop .bottom-btn-container .special-btn .detail-btn{
  background-color: #80989b;
  margin-left: 10px;
}
#kcapp22 .bottom-btn-container .special-btn .detail-btn:hover,
#kcappEveTop .bottom-btn-container .special-btn .detail-btn:hover{
  background-color: #485859;
}

/* 個別指定（既存互換） */
#kcappEveTop .bottom-btn-container .detail-btn,
.detail-btn{
  display: inline-block;
  background-color: #485859 !important;
  color: #fff !important;
  padding: 5px 20px;
  font-size: 0.8em;
  text-align: center;
  margin-top: 10px;
  transition: background-color 0.3s ease;
  border-radius: 4px;
}

@media (max-width: 768px){
  #kcapp22 .bottom-btn-container .detail-btn,
  #kcappEveTop .bottom-btn-container .detail-btn{
    padding: 2px 10px;
  }
  #kcapp22 .bottom-btn-container .special-btn .detail-btn,
  #kcappEveTop .bottom-btn-container .special-btn .detail-btn{
    background-color: #0056b3;
    margin-left: 0;
  }
}

/* --- 住所/日付: Font Awesome 4.7 ---------------------- */
.address, .date{
  font-size: 0.8em;
  line-height: 1.5;
}
.address::before{
  font-size: 1.2em;
  content: "\f041";
  font-family: "FontAwesome";
  margin-right: 8px;
}
.date::before{
  font-size: 1.2em;
  content: "\f073";
  font-family: "FontAwesome";
  margin-right: 8px;
}

/* --- “最新2件のみ表示”は通常表示の時だけ -------------- */
#kcapp22 ul:not(.slick-initialized) li:nth-child(n+3),
#kcappEveTop ul:not(.slick-initialized) li:nth-child(n+3){
  display: none;
}

/* =========================================================
   slick 初期化後（カルーセル中）にだけ効かせる調整
   ========================================================= */

/* UL は通常フローに、余計な擬似要素も無効化 */
#kcappEveTop ul.slick-initialized,
#kcapp22    ul.slick-initialized{
  display: block !important;
  padding: 0;
}
#kcappEveTop ul.slick-initialized::after,
#kcapp22    ul.slick-initialized::after{
  content: none;
}

/* li の幅/余白/フレックス/非表示を全て解除（SPの大きな余白対策も含む） */
#kcappEveTop ul.slick-initialized > li,
#kcapp22    ul.slick-initialized > li{
  display: block !important;
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
}
#kcappEveTop ul.slick-initialized > li:nth-child(n+3),
#kcapp22    ul.slick-initialized > li:nth-child(n+3){
  display: block !important;
}

/* スライド間のすき間（左右ガター） */
#kcappEveTop ul.slick-initialized .slick-slide,
#kcapp22    ul.slick-initialized .slick-slide{
  padding: 0 12px;
}
#kcappEveTop ul.slick-initialized .slick-list,
#kcapp22    ul.slick-initialized .slick-list{
  margin: 0 -12px;
}

/* 親がflexのときに子がはみ出さないように */
.contbx > .conts{ min-width: 0; }

/* ---------------------------------------------------------
   alink（予約ボタンの見出しライン演出）そのまま流用
   --------------------------------------------------------- */
.alink{ display: block; }
.alink_wrapper{
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 5%;
}
.alink_tt{
  position: relative;
  display: inline-block;
  color: #000;
  white-space: nowrap;
  margin-bottom: 0.5em;
  overflow: hidden;
}
.alink_tt::before{
  content: attr(data-text);
  opacity: 1;
  display: block;
  transition: opacity 650ms, transform 650ms cubic-bezier(0.165,0.84,0.44,1);
  transform: translateY(0%);
}
.alink_tt::after{
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  display: block;
  transform: translateY(100%);
  transition: opacity 650ms, transform 650ms cubic-bezier(0.165,0.84,0.44,1);
}
.alink:hover .alink_tt::before{
  opacity: 0;
  transform: translateY(-50%);
}
.alink:hover .alink_tt::after{
  opacity: 1;
  transform: translateY(0%);
}
.alink_line{
  flex-grow: 1;
  height: .6px;
  border-bottom: .7px solid #000;
  margin-left: 10px;
  position: relative;
  transition: transform .3s ease;
}
.alink_line::after{
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px; height: 0;
  border-bottom: .7px solid #000;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center;
}
.alink:hover .alink_line{ transform: translateX(5px); }



/* slick 初期化された UL にだけ当てる “打ち消し” と 余白調整 */
#kcappEveTop ul.is-slick-target,
#kcapp22    ul.is-slick-target{
  display:block !important;
  padding:0;
}

/* 既存の flex/幅/マージン/2件制限 を無効化（SPで空白が出る原因もこれ） */
#kcappEveTop ul.is-slick-target > li,
#kcapp22    ul.is-slick-target > li{
  display:block !important;
  flex:none !important;
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
}

/* 3件目以降を再表示（既存の n+3 {display:none} を解除） */
#kcappEveTop ul.is-slick-target > li:nth-child(n+3),
#kcapp22    ul.is-slick-target > li:nth-child(n+3){
  display:block !important;
}

/* スライドの左右ガター */
#kcappEveTop ul.is-slick-target .slick-slide,
#kcapp22    ul.is-slick-target .slick-slide{ padding:0 12px; }
#kcappEveTop ul.is-slick-target .slick-list,
#kcapp22    ul.is-slick-target .slick-list{ margin:0 -12px; }

/* 親がflexの時のはみ出し防止 */
.contbx > .conts{ min-width:0; }






.btn-wrap {
  text-align: center;   /* 子要素を中央に */
  margin: 0 auto;       /* 上下余白を調整 */
}

.grad-btn {
  display: inline-block; 
  padding: 10px 30px;
  border-radius: 5px;
  background: linear-gradient(to right, #c64b59, #4e7c85);
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: opacity 0.3s;
}
.grad-btn:hover {
  opacity: 0.85;
}

@media screen and (max-width: 768px) {
	
	.grad-btn {
		width: 90%;
		line-height: 1.8;
	}
}

/* PC（デフォルト）：幅100% ＋ 画像比率で高さ自動 */
.kv-div {
	width: 100%;
	height: auto;
	display: block;
}
.kv-div img {
	width: 100%;
	height: auto;
}
.kv-div .kv-copy {
	position: absolute;
    top: 8%;
    left: 14vw;
    color: #fff;
    font-family: "BIZ UDGothic", sans-serif;
    /* font-weight: 400; */
    line-height: 2.4;
    letter-spacing: 0.3em;
    font-size: clamp(18px, 2.6vw, 1.6em);
    z-index: 6;
}

/* ヒーローの器は相対配置のまま */
.kv-div{ position: relative; }

/* 右端・白表示 */
.kv-div .scroll{
  position: absolute;
  right: 3%;
  bottom: 8%;
  transform: none;          /* 以前の translate を無効化 */
  writing-mode: vertical-rl;
  font-size: 0.8em;
  color: #e6e6e6;              /* 白で表示 */
  text-decoration: none;
  z-index: 5;
}

/* 縦線（文字の下から伸びる・白） */
.kv-div .scroll::before{
  content: "";
  position: absolute;
  top: calc(100% + 24px);    /* 文字の直下から */
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 80px;
  background-color: currentColor;  /* 文字色=白 */
  transform-origin: top;
  animation: scroll 2s infinite;
  opacity: .9;
}
@keyframes scroll{
  0%   { transform: translateX(-50%) scaleY(0); }
  50%  { transform: translateX(-50%) scaleY(1); }
  100% { transform: translateX(-50%) scaleY(1); }
}

/* SPは少し短く＆下寄せ */
@media screen and (max-width: 768px) {
  .kv-div .scroll {
	  right: 3%;
	  bottom: 10%;
	  font-size: 0.8em;
	}
	.kv-div .scroll::before {
		height: 60px;
	}
}

/* 明るい背景で白が埋もれる場合の補助（任意） */
.kv-div .scroll{
  text-shadow: 0 0 4px rgba(0,0,0,.35);
}


/* SP：高さ60vhでトリミング、カバー表示 */
@media screen and (max-width: 768px) {
	
  .kv-div img {
	  height: 80vh;
	  object-fit: cover;
  }
	.kv-div .kv-copy{
		top: 8vh;
        left: 8vw;
        font-size: clamp(1.2em, 4vw, 2em);
	}
}



/* 共通 */
.flatlife-section {
  padding: 5% 5% 3% 5%;              /* 上下左右の余白 */
  text-align: center;
  background: #fff;            /* 背景色 */
}

.flatlife-inner {
  margin: 0 auto;
}

.flatlife-logo img {
  width: 40%;                  /* PC時はロゴ幅を25% */
  height: auto;
  margin: 0 auto 40px;
  display: block;
}

.flatlife-text {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #000;
}

.flatlife-text p {
  margin-bottom: 1.8em;
}

/* PC用 */
@media screen and (min-width: 768px) {
  .flatlife-text {
    font-size: 1.1rem;
    line-height: 2.2;
  }
}

/* SP用 */
@media screen and (max-width: 767px) {
  .flatlife-logo img {
    width: 80%;               /* スマホ時はロゴを画面幅の半分 */
    margin: 5% auto 10% auto;
  }

  .flatlife-text {
    font-size: 0.9rem;
    line-height: 1.8;
    padding: 0 5%;
  }
}



/* 2つの平屋暮らしをご提案
----------------------------------------------------------- */ 

/* 外枠 */
.flatplan {
  padding: 6% 5%;
  background: #fff;
}
.flatplan__inner {
  display: flex;
  gap: 4%;
  margin: 0 auto;
}

/* カード */
.flatplan__card1 {
	flex: 1 1 48%;
	padding: 5% 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	border: 1px solid #7778a4;
}
.flatplan__card2 {
	flex: 1 1 48%;
	padding: 5% 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	border: 1px solid #528d9a;
}
.flatplan__head {
	font-family: "Lexend Peta", sans-serif;
	font-size: 2rem;
	text-align: center;
	margin: 0 0 0.5em;
	letter-spacing: 0.08em;
}
.flatplan__sub1 {
	width: 88%;
    font-size: 1.3rem;
    text-align: center;
    margin: 0 auto 1.5em;
    background: #528d9a;
    color: #fff;
}
.flatplan__sub2 {
	width: 88%;
    font-size: 1.3rem;
    text-align: center;
    margin: 0 auto 1.5em;
    background: #528d9a;
    color: #fff;
}
.flatplan__img img {
	display: block;
	max-width: 88%;
	margin: 0 auto 1.5em;
}
.flatplan__txt {
	font-family: "Zen Old Mincho", serif;
	font-size: 0.95rem;
	line-height: 1.9;
	width: 88%;
    margin: 0 auto 2em auto;
}


.flatplan__photos {
	width: 97.6%;
	height: auto;
	margin: 0 auto;
}
.flatplan__photos img {
	width: 100%;
	height: auto;
}


/* ← flexアイテムが中身（slick）に引っ張られて広がらないようにする */
.flatplan__inner > * { min-width: 0; }

/* slick後は block を強制（flex干渉対策） */
.js-flatplan-carousel.slick-initialized{ display:block !important; }

/* 画像の基本 */
.js-flatplan-carousel img{ display:block; width:100%; height:auto; }

/* スライド同士の“すき間” */
.js-flatplan-carousel .slick-slide{ padding: 0 8px; } /* ← 数字を好みで */
.js-flatplan-carousel .slick-list { margin: 0 -8px; } /* 打ち消し */


/* SP */
@media screen and (max-width: 768px) {
	
	.flatplan__photos {
		width: 96%;
		height: auto;
		margin: 0 auto;
	}
	.flatplan__inner {
		flex-direction: column;
		gap: 40px;
	}
	.flatplan__card1,.flatplan__card2 {
		flex: 1 1 100%;
		padding: 5% 0;
	}
}

/* 見出し */
.cta-ttl{
	font-family: "Zen Old Mincho", serif;
	text-align: center;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    letter-spacing: .06em;
    margin: 0 0 3%;
}
.cta-list{
	font-family: "Zen Old Mincho", serif;
    width: 80%;
    margin: 0 auto 10% auto;
    padding: 0;
    list-style: none;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    line-height: 2.2;
}
.cta-list li{
	font-family: "Zen Old Mincho", serif;
    position: relative;
    padding-left: 2.2em;
    margin: 0;
}
.cta-list li::before{
  content:"";
  position:absolute;
  left:0.6em; top:0.6em;
  width:0.8em; height:0.8em;
  border-radius:50%;
  background:#b8545b;   /* 画像の赤ドットに近い色 */
}

/* マーカー（折り返し対応・角丸） */
.marker{
  /* ① 背景グラデーションで下部だけ色を敷く */
  background: linear-gradient(transparent 60%, rgba(184,84,91,.35) 60%);
  box-decoration-break: clone;              /* 複数行で角丸を維持 */
  -webkit-box-decoration-break: clone;
  padding: 0 .15em .1em;                    /* 余白で端をきれいに */
  border-radius: .15em;
}

/* もう少し濃い/太いマーカーにしたい時のバリエーション */
.marker--bold{
  background: linear-gradient(transparent 55%, rgba(184,84,91,.5) 55%);
}
.marker--thin{
  background: linear-gradient(transparent 72%, rgba(184,84,91,.35) 72%);
}

/* 代替：影で敷く（影幅で太さ調整。好みで切替可）
.marker{ box-shadow: inset 0 -0.5em rgba(184,84,91,.35); }
*/

@media screen and (max-width: 768px) {
	.cta-list{
		width: 90%;
	}
}



/* feature
----------------------------------------------------------- */ 

.flmd1 {
	text-align: center;
    margin: 5% auto 0 auto;
}
.flmd1-en {
	font-family: "Lexend Peta", sans-serif;
    font-size: 2.2rem;
    letter-spacing: 0.15em;
    line-height: 1.4;
}
.flmd1-ja {
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    margin: 0;
    line-height: 1.4;
}
.flmd2 {
	font-family: "Zen Old Mincho", serif;
    font-size: 2.2rem;
    letter-spacing: 0.08em;
    margin: 0;
    line-height: 1.6;
}


@media screen and (max-width: 768px) {
  .flmd1 {
    margin: 12% auto 8%;
  }
  .flmd1-en {
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
  }
  .flmd1-ja {
    font-size: 1rem;
  }
	.flmd2 {
    font-size: 1.6rem;
  }
}



/* セクション外側 */
.feature { padding: 6% 0; background:#fff; }
.feature + .feature { padding-top: 0; }

/* --- PC 基本レイアウト（左右並び） --- */
.feature__inner {
  display: flex;
  gap: 0;
  align-items: flex-start;
  margin: 0 auto;
}

/* 左=テキスト / 右=写真（比率は画像を見て少し写真広め） */
.feature__text  { width: 50%; padding: 0 6%; }
.feature__photos{ width: 64%; }

/* 交互：左右を反転（PCのみ効かせる） */
.feature--rev { flex-direction: row-reverse; }

/* タイポ */
.feature__badge { width: 40%; height: auto; display: block; margin: 0 0 18px; }
.feature__ttl   {
	font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.1rem;
    line-height: 1.7;
    margin: 0 0 10%;
}
.feature__lead  { font-size: 1rem; line-height: 2; letter-spacing: .03em; }

/* 画像グリッド（あなたのクラスを活かす） */
.fbx{
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;                 /* セクション内での余白は外で調整 */
}
.fbx .it3{
  width: 50%;                /* PC：3列 */
  margin: 0;
}
.fbx .it3 img{
	display:block;
	width:100.3%;
	height:100.3%;
}

/* --- Breakpoints --- */
/* タブレット：写真2列 */
@media (max-width: 1024px){
  .feature__ttl { font-size: 1.5rem; }
  .fbx .it3 { width: 48%; }           /* 2列 */
}

/* SP：文章→写真に固定＆写真1列 */
@media screen and (max-width: 768px) {
  .feature__inner{
    flex-direction: column;            /* 縦積み */
  }
  .feature__text, .feature__photos{ width: 100%; }
  .feature__text{
	  padding-top: 5%;
	  order: 1;
	}          /* 文章を常に先頭に */
  .feature__photos{ order: 2; }        /* 写真を後ろに */
  .feature__badge{
	  width: 35%;
	  margin-bottom: 5%;
	}
  .feature__ttl{
	  font-size: 2em;
	  line-height: 1.6;
	  margin: 0 0 10%;
	}
  .feature__lead{
	  font-size: 1em;
	  line-height: 2;
	  margin: 0 0 10%;
	}
  .fbx .it3{
	  width: 90%;
	  margin: 0 auto;
	}
}



/* works
----------------------------------------------------------- */ 

.case-sec {
	width: 90%;
    padding: 6% 0;
    margin: 0 auto;
}
.case-head{             /* 見出しエリア */
  position:relative;
  width: 90%;
  margin:0 auto 3%;
}
.case-badge{            /* CASE番号（画像） */
  position:relative; left:0; top:0;
  transform:translateY(-35%);  /* セクション外側へ少しはみ出す演出 */
}
.case-badge img{ display:block; width:110px; height:auto; }
.case-ttl{
  font-family:"Zen Old Mincho", serif;
  font-weight:400; line-height:1.6;
  font-size:clamp(1.4rem,2.2vw,2rem);
  margin:0 0 .4em;
}
.case-lead{
  font-size:clamp(.95rem,1.2vw,1rem);
  line-height:1.9; margin:0;
}

/* ===== 画像グリッド：PC=2列 / SP=1列 ===== */
.fbx2 {
	width: 90%;
	display:flex;
	flex-wrap:wrap;
	margin:0 auto;
}
.fbx2 .it2{
  width:50%;                      /* 2列 */
}
.fbx2 .it2 img{ display:block; width:100.2%; height:100.2%; }

/* 幅いっぱいにしたい要素（例：PLANブロック等） */
.fbx2 .it2--wide{ width:100%; }

/* ===== SP ===== */
@media screen and (max-width: 768px) {
  .case-head{ margin-bottom:6%; }
  .case-badge img{ width:88px; }
  .fbx2{ width: 90%; margin: 0 auto; gap:0; }
  .fbx2 .it2{ width:100%; }       /* 1列 */
}

/* （任意）PLANラベル付きの背景ボックス */
.case-plan{
  background:#bdb1cf;             /* 画像の薄紫に近い色 */
  padding:28px 24px;
  position:relative;
}
.case-plan::before{
  content:"PLAN";
  position:absolute; left:16px; top:8px;
  font-size:.8rem; letter-spacing:.18em; color:#fff;
}



/* カードの横並び用（左右のすき間） */
.events-slider .slick-slide { padding: 0 10px; }
.events-slider .slick-list  { margin: 0 -10px; }

/* 画像が含まれる場合の基本 */
.events-slider img { display:block; width:100%; height:auto; }

/* 親のflexが干渉する場合の保険 */
.events-slider.slick-initialized { display:block !important; }
.contbx > .conts { min-width: 0; }  /* flex子のはみ出し防止（重要） */



html { scroll-padding-top: 120px; }
@media (max-width: 767px){
  html { scroll-padding-top: 8vh; }
}
#reserv::before{
  content:"";
  display:block;
  height:120px;
  margin-top:-120px;
  visibility:hidden;
}
@media (max-width: 767px){
  #reserv::before{
    height:10vh;
    margin-top:-10vh;
  }
}