@charset "Utf-8";
@import url("reset.css");


/* ------------------------------
 Color
------------------------------ */

:root {	
	--color-main: #26AD7E;
	--color-main-rgb: 60,38,23;
	--color-main: #26AD7E;
	--color-main-rgb: 38,173,126;
	--color-main-shade: #21986f;
	--color-main-tint: #3cb58b;
	
	--color-point1: #FFE555;
	--color-point1-rgb: 255,229,85;
	--color-point1-shade: #e0ca4b;
	--color-point1-tint: #ffe866;
	
	--font-bold: 600;
}





/* ------------------------------
 Layout
------------------------------ */

.wrap,.wrappc{}


a.pagetop{display: block;
	font-size: 9px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center
}

a.pagetop:before{
	font-family: icomoon;
	content: "\e978";
	display: block;
	font-size: 30px;
}




.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}


#contents {
  padding-inline: clamp(2rem, 1.455rem + 2.73vw, 4rem);
  margin-inline: auto;
}


@media screen and (max-width: 666px) {
	.wrap{width: 90%;
		margin: 0 auto}
	
	#contents{
	margin: 0 auto;
	padding: 55px 0 0;}
	
	body:not(#home) #contents{
		padding: 60px 0 0;
	}
	
	#side_fix{display: none}
		
	
	.sfc_pc{display: none}
	
	br.brpc{display: none}
}	


@media screen and (min-width: 667px){
	
	.wrap,.wrappc{
		width: 94%;
		margin: 0 auto}

	#side_fix{
		width: 60px;background: #EFECE4;
		display: flex;
		top:0;
		right: 0;
		position: fixed;
		flex-direction: column;
		align-items: center;
		height: 100vh
	}
	a.pagetop{height: 100px}
	ul.sf_contact{
		border-bottom: solid 1px #482f33;
		margin: 1.5em auto 1em;
	}
	ul.sf_contact li{margin-bottom: 1.2em}
	#contents{padding: 80px 0 0;}


	br.brsp{display: none}
	ul.sf_contact li.pcbtn{display: none}
}

@media screen and (min-width: 1360px){
	.wrap,.wrappc{
	width: 96%;
	max-width: 1000px;margin: 0 auto}
}


/* ------------------------------
 #header
------------------------------ */

#header {
	height: 80px;
}


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 前述のシャドウ */
  transition: transform 0.3s ease; /* アニメーション速度 */
  z-index: 1000;
}

/* 下スクロール時に付与するクラス */
.site-header.is-hide {
  transform: translateY(-100%); /* ヘッダーの高さ分、上に隠す */
}




.header_wrap{
	margin: 0 auto;
	display: flex;
	align-items: center;
	}
	
	
.header_wrap .header_logo{
	text-align: center
}
	
.header_wrap .header_logo p{
	font-weight: bold;
	line-height: 1.2em;
}

.header_wrap .header_logo img{
	width: 100%;
	height: auto
}


@media screen and (max-width: 767px) {
	#header{
		height: 60px;
		top: 0;
		left: 0;
		width: 100%;
		z-index:1000
	}
	
	.header_wrap{
		background: #fff;
		height: 60px
	}
	
	.header_wrap .header_logo{
		width: 100%;
		position: relative;
		z-index: 1000;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center
	}
	
	.header_wrap .header_logo img{
		max-height: 40px;
		width: auto
	}
	
	.header_wrap .header_logo p{margin: 3px 0 0}
	
	
	.header_nav{}
	/* 1. メニューが閉まっている時は、クリック判定を完全に消す */
    #opengnav nav {
        visibility: hidden;    /* 物理的に存在を消す */
        pointer-events: none;  /* タッチを背後に透過させる */
    }

    /* 2. メニューが開いた時（panelactiveクラス）に、クリック判定を戻す */
    #opengnav nav.panelactive {
        visibility: visible;
        pointer-events: auto;
    }

    /* 3. ボタン（三本線）が常に一番上にくるようにする */
    .openbtn {
        z-index: 10001; /* ヘッダー(1000)より上に */
    }

    /* 4. フォーム自体の重なり順位を少し上げておく（保険） */
    #contact_form {
        position: relative;
        z-index: 10;
    }
}	


@media print, screen and (min-width: 768px) {
	#header {}
	.header_wrap {
		padding: 10px 0;
		width: 96%;
	}
	
	.header_wrap .header_logo{
	width: 180px;
	text-align: center
	}	
	
	.header_nav{
		width: calc(100% - 180px);
	}
}


@media print, screen and (min-width: 1025px) {

	.header_wrap .header_logo{
	width: 250px;
	text-align: center
	}	
	
	.header_nav{
		width: calc(100% - 250px);
	}

}



/* ------------------------------
 #header__nav
------------------------------ */

@media print, screen and (min-width: 768px) {
	
	.header_list {
	display: flex;
	justify-content: flex-end;
	margin: 1em 0;
	align-items: center
	}
	
	.header_list > li {
	  transition: background-color .3s;
	  position: relative
	}
		

	
	.header_list > li > a {
	  display: block;
	  padding: 0 1em;
	  line-height: 1.2em;
	  font-weight: 700
	}
	
	.header_list > li > a.cform{
		border: solid 2px var(--color-main);
		border-radius: 50px;
		position: relative;
		font-size: .9em;
		padding: .6em 1.4em;
	}
	
	.header_list > li a:hover {
	  color: var(--color-main);
	}
	
	.header_list > li > a.cform:hover{
		background: var(--color-main);
		color: #fff
	}
	
	.megaMenu {
	  transition: opacity .3s, visibility .3s;
	}
	
	.megaMenu {
	  background: #fff;
	  left: 0;
	  opacity: 0;
	  position: absolute;
	  text-align: center;
	  visibility: hidden;
	  width: 100%;
	  border-radius: 0px 0px 1em 1em;	  
	}
	.megaMenu > ul {
	}
	.megaMenu > ul > li {
	  display: inline-block;
	}
	/* メニューをhoverした時のスタイル */
	.header_list > li:hover .megaMenu {
	  opacity: 1;
	  visibility: visible;
	}
	
	.megaMenu > ul > li a{
		display: block;
	  padding: .6em 1em;}
	  
	.megaMenu > ul > li:not(:last-child) a{
		border-bottom: solid 1px var(--color-main);
	}


}


@keyframes anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}





/* トップに戻るボタンの固定位置とサイズ */
#btn_top {
    position: fixed;
    bottom: 30px; /* 下からの位置（資料請求ボタンと被る場合は調整してください） */
    right: 20px;  /* 右からの位置 */
    z-index: 10002; /* 以前のナビゲーション修正(10001)より上に設定 */
}

#btn_top a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-point1); /* 既存のメインカラーを使用 */
    color: #fff;
    text-decoration: none;
    border-radius: 50%; /* 正円にする */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* 矢印（疑似要素で作成） */
#btn_top a::after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(-45deg); /* 矢印を上に向ける */
    margin-top: 4px; /* 中心位置の微調整 */
}

/* ホバー時の挙動 */
#btn_top a:hover {
    background-color: var(--color-point1-shade); /* 既存の濃い緑を使用 */
    transform: translateY(-5px); /* 少し上に浮くアニメーション */
}

/* スマホ表示の調整（資料請求ボタンが固定されている場合） */
@media screen and (max-width: 767px) {
    #btn_top {
        bottom: 90px; /* 資料請求ボタンが下にある場合、重ならないように上に逃がす */
        right: 15px;
    }
    #btn_top a {
        width: 45px;
        height: 45px;
    }
}



/* ------------------------------
 #opengnav 格納メニュー
------------------------------ */

#opengnav{
}

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


	/*========= ボタンCSS ===============*/
	
	.openbtn,
	.openbtn span {
	display: inline-block;
	transition: all 0.3s;
	}
	
	.openbtn{
	width: 30px;
	height: 22px;
	position: absolute;
	z-index: 1000;
	right: 16px;
	top:18px;
	}
	
		
	/*×に変化*/	
	.openbtn span{
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-main);
	}
	
	
	.openbtn span:nth-of-type(1) {top: 0;}
	.openbtn span:nth-of-type(2) {top: 9px;}
	.openbtn span:nth-of-type(3) {top: 18px;}
	
	
	.openbtn.active span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
	top:0px;
	background-color: var(--color-main);
	}
	
	.openbtn.active span:nth-of-type(2) {
		transform: translateY(0px) rotate(45deg);
		background-color: var(--color-main);
	}
	
	.openbtn.active span:nth-of-type(3){
		opacity: 0
	}
	
	
	@media screen and (max-width: 767px) {
		.openbtn{}
		.openbtn:after{letter-spacing: 0}
	}	
	

	/*========= ナビゲーションCSS ===============*/
	
	
	#opengnav nav{
	position:fixed;
	top: -250%;
	left: 0;
	width:100%;
	height: 100vh;
	background:#fff;
	transition: all 0.6s;
	opacity: 0;
	z-index: 50
	}


	/*アクティブクラスがついたら位置を0に*/
	#opengnav nav.panelactive{
	    top: 0;
	    opacity: 1
	}
	
	
	/*ナビの数が増えた場合縦スクロール*/
	#opengnav nav.panelactive .nav_scloll{
	    position: fixed;
	    z-index: 50; 
	    height: 100vh;
	    width: 100%;
	    overflow: auto;
	    -webkit-overflow-scrolling: touch;
	}
	
	
	/*ナビゲーション*/
	.nav_scloll{
		position: relative;
		z-index: 50;
	}
	
	
	.nav_wrap{
		padding: 80px 1.5em 0;
	}
	
	.nav_wrap ul li a{
		display: block;
		font-size: 1.2em;
		padding: .7em .6em;
		border-top: solid 1px #ccc;
		position: relative
	}
	
	.nav_wrap > ul > li > a{
		font-weight: 700
	}
	.gnav_top{
		display: none
	}
	ul.header_list > li a:after{
		font-family: icomoon;
		content: "\e977";
		color: var(--color-main);
		position: absolute;
		right: .8em
	}
	
	.megaMenu {margin: 0 0 0 1.5em}
	
	
	ul.header_list li ul li.gnav_co a:after{
		color: var(--color-main);
		
	}
	
	ul.header_list li span{
		padding-left: 1em;
		font-size: .8em
	}


}



@media print, screen and (min-width: 768px) {
	.openbtn{display: none}
}	



/* ------------------------------
 post
------------------------------ */


.postindex_title{
	background: rgba(var(--color-main-rgb), 0.5);
	padding: 2em 1em;
}

.postindex_title h1{
	font-size: 1.2rem
}


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

@media print, screen and (min-width: 768px) {
	.postindex_title{
	background: rgba(var(--color-main-rgb), 0.5);
	padding: 4em 1em;
	}
	.postindex_title h1 br{
		display: none
	}
}	

@media print, screen and (min-width: 1024px) {}	


.postindex{
	padding: 3em 0;
}

ul.postindex_list{
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

ul.postindex_list h2{
	font-size: 1.1rem
}

ul.postindex_list li figure{
	position: relative;
	width: 100%;
	margin-bottom: 1em;
	cursor: pointer;
  transition: all 0.2s ease;
  
  /* 浮かんでいる状態の影 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}



ul.postindex_list li figure::after{
	font-family: icomoon;
	content: "\e977";
	position: absolute;
	right: .8em;
	bottom: .8em;
	font-size: 1.5em;
	color: #fff;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}



ul.postindex_list li figure img{
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 5px;
	position: relative;
	display: block;
}

/* ホバーした時の動き */
ul.postindex_list li figure:hover {
  transform: translateY(4px); /* 下に4px移動 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を小さくして接地感を出す */
}

ul.postindex_list li ul{
	display: flex;
}

ul.postindex_list li ul li{
	font-size: .9em;
	color: #666
}

ul.postindex_list li ul li:not(:last-child){
	padding: 0 1em 0 0;
}

.postsingle{
	max-width: 900px;
	width: 90%;
	margin: 4em auto 4em
}

.postsingle header{
	margin-bottom: 2em;
}

.category_title{
	margin-bottom: 1em
}

.category_title h1{
	font-size: 1.2rem
}

/* ------------------------------
 よく使う
------------------------------ */

.gback{background:var(--color-main);color: #f1eee7}


.gfont{color: var(--color-main)}


ul.hlbox li{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin: 2em 0 0 0
}

ul.hlbox li div:nth-child(1){
	width: 120px
}

ul.hlbox li div:nth-child(2){
	width: calc(100% - 120px);
	padding-left: 1.6em
}

ul.hlbox li .date{display: inline-block;margin-right: 1em}
ul.hlbox li .cat{
	background:#fff;
	font-size: .8em;
	padding: 0 5px
}




/* ------------------------------
 swiper
 ------------------------------ */
.swiper,
.workswiper,
.bannerwiper,
.relatedswiper1,
.relatedswiper{
	overflow: hidden;
	position: relative
}


.banner{
	margin: 0 0 0 5%
}


@media screen and (max-width: 667px) {
	.relatedswiper,
	.relatedswiper1{margin-left: 5%}
}

.bannerwiper{margin-bottom: 5%}

.swiper-slide{ height: auto; }

.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #000}


.swiper-button-next:after,
.swiper-button-prev:after {font-size: 18px !important;}

@media screen and (max-width: 667px) {
	.swiper-button-next:after,
	.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 13px !important;
    }
}	

@media print, screen and (min-width: 668px) {
	.swiper-button-prev, .swiper-rtl .swiper-button-next{
		left: 0
	}
	.swiper-button-next, .swiper-rtl .swiper-button-prev{
		right: 0
	}
}	

@media print, screen and (min-width: 1000px) {}	




/* ************************************************ 
*	同じグループの関連リンク
* ************************************************ */

#related{margin-top: 8%}
#related h3{
	line-height: 1.1em;
	margin: 2em 0 1.2em 0;
	text-align: center;
	letter-spacing: 1px
}


.relatedswiper ul li{
	position: relative;
	padding: 1em 1em 1em 0
}

.relatedswiper ul li span{
	display: block;
	padding: .6em .8em;
}

.relatedswiper ul li a{
	display: block;
	box-shadow: 1px 1px 6px #ccc;
}

#related ul li img{
}

@media screen and (max-width: 667px) {
	.relatedswiper{margin-left: 5%}
	#related h3{margin: 2em 1em 1.2em 1em};
}	

@media print, screen and (min-width: 668px) {
	#related h3{font-size: 1.5em}
	.relatedswiper{margin: 0 auto 2em}
	.relatedswiper ul{
	display: flex;
	flex-wrap:wrap;
	}
	
	.relatedswiper ul li{
	width: calc(( 100% - 50px ) / 3 );
	margin: 0 25px 25px 0;
	}
	
	.relatedswiper ul li span{padding: 1em 1.3em;}
	.relatedswiper ul li:nth-child( 3n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 1024px) {}	


/* ************************************************ 
*	関連する施工例
* ************************************************ */

#reco{
	padding-top: 3em;
	margin-bottom: 2em
}
#reco h3{
	 margin: 0 auto 2em;
	 text-align: center;
	 border-top: solid 2px #c4b9b9;
	 border-bottom: solid 2px #c4b9b9;
	 position: relative;
	 padding: 1.2em .5em;
	 font-size: 1.2em;
	 letter-spacing: 1px
}



	
.reco_works figure img{
	width:100%;
	margin-bottom: .8em;
	object-fit: cover;
	height: 160px;
	border-radius: 5px;
	position: relative;
	}
			
.reco_works figure img:hover{
	opacity: .8
}


.more_reco{
	margin: 2em auto 0;
}

.more_reco a{
	display: block;
	background: #184c28;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 1em 2em;
	max-width: 450px;
	border-radius: 5px;
	position: relative;
	text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s;
	margin: 0 auto;
	font-size: 1.1em;
}

.more_reco a:hover{
	background: #177533;
}


@media screen and (max-width: 767px) {
	#reco h3{width: 90%;}
	.reco_works figure{
	padding: 0 1em 0 0
	}
}	

@media print, screen and (min-width: 768px) {
	#reco h3{
		font-size: 1.5em
	}
	.reco_works{}
	
	.reco_works .swiper-wrapper{
		flex-wrap:wrap;
	}
	
	
	}	

@media print, screen and (min-width: 768px) and (max-width: 1859px) {
	.reco_works figure{
		width: calc(( 100% - 90px ) / 4 );
		margin: 0 30px 30px 0;
		font-size: .9em;
		line-height: 1.5em
	}
	
	.reco_works figure:nth-child( 4n ) {margin-right: 0;}
	
	.reco_works figure img{height: 200px;}

}

@media print, screen and  (min-width: 1860px) {
	.reco_works figure{
	width: calc(( 100% - 80px ) / 5 );
	margin: 0 20px 20px 0;
	font-size: .9em;
		    line-height: 1.5em
	}
	
	.reco_works figure:nth-child( 5n ) {margin-right: 0;}
	
	.reco_works figure img{height: 140px;}
}	



/* ************************************************ 
*	テーマ別施工例
* ************************************************ */

#works_theme_list h2,
#works_theme h2,
#tsubo_list h2{
	margin: 1.5em auto 1em;
	text-align: center;
	font-size: 1.5em;
}


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

@media print, screen and (min-width: 768px) {
	#works_theme_list h2,
	#works_theme h2,
	#tsubo_list h2{
		font-size: 1.8em;
	}
}	



#theme_list ul li{
	margin-bottom: 1.5em;
	padding: 1em;
	border-radius: 5px;
	position: relative;
	background: rgba(220, 211, 191, 0.2);
	-webkit-transition: all .3s;
	transition: all .3s;
}

#theme_list ul li img{
	object-fit: cover;
	width: 100%;
	height: 120px;
	border-radius: 5px;
	position: relative;
	
}

#theme_list ul li h3{
	margin-bottom: .6em;
	font-weight: bold
}

#theme_list ul li p{line-height: 1.6em;}
#theme_list ul li div:nth-child(2){padding: 1em .5em 0}
#theme_list ul li a{
	text-decoration: none
}

#theme_list ul li:hover{
	background: rgba(220, 211, 191, 0.6)
}

#works_theme .relatedswiper{
	margin: 0
}

@media screen and (max-width: 767px) {
	#theme_list ul li p{font-size: .9em}
}	

@media print, screen and (min-width: 768px) {
	#theme_list ul{
	margin: 0 0 2em 0;
	display: flex;
	flex-wrap:wrap;
	}
	#theme_list ul li{
	width: calc(( 100% - 60px ) / 3 );
	margin: 0 30px 30px 0;
	}
	
	#theme_list ul li:nth-child( 3n ) {margin-right: 0;}
	#theme_list ul li img{height: 160px}

}	

@media print, screen and (min-width: 1240px) {
	#theme_list ul li img{height: 200px}
}	





/* ------------------------------
 sns
------------------------------ */

@media print, screen and (min-width: 1000px) {}	

#snslink ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-family: serif
}

#snslink li{margin: 0 1em}

#snslink a{color: #fff;text-decoration: none;font-size: 1.2em}

a.ig:before{
	font-family: sns;
	content: "\e903";
	padding-right: .3em
}

a.fb:before{
	font-family: sns;
	content: "\e90d";
	padding-right: .3em
}


a.tw:before{
	font-family: sns;
	content: "\e611";
	padding-right: .3em
}

a.line:before{
	font-family: sns;
	content: "\e009";
	padding-right: .3em
}

a.pinta:before{
	font-family: sns;
	content: "\e63a";
	padding-right: .3em
}

a.plane:before{
	font-family: sns;
	content: "\e900";
	padding-right: .3em
}

a.yt:before{
	font-family: icomoon;
	content: "\e912";
	padding-right: .3em
}

a.ns:before{
	font-family: sns;
	content: "\e902";
	padding-right: .3em
}

a.map:before{
	font-family: icomoon;
	content: "\e9ee";
	margin-right: .3em
}


a.hp:before{
	font-family: icomoon;
	content: "\ea73";
	margin-right: .3em
}

a.call:before{
	font-family: icomoon;
	content: "\e905";
	margin-right: .3em
}

a.home:before{
	font-family: icomoon;
	content: "\e908";
}

a.event:before{font-family: icomoon;content: "\e9b5";}
a.sodan:before{font-family: sns;content: "\e90f";}
a.contact:before{font-family: sns;content: "\e900";}

a.works:before{
	font-family: icomoon;
	content: "\e9d6";
}

a.madori:before{
	font-family: icomoon;
	content: "\ea30";
}



/* ------------------------------
 ページコンテンツ共通スタイル
------------------------------ */

#page_header{
	text-align: left;
	margin:5% auto 8%;
}

#page_header h1{
	padding:3px 0 3px 5%;}
	
#page_header h1 span{display: block;
	font-size: 1.5em;padding: 10px 0 0 0;color: var(--color-main)}


.ctitle{
	text-align:center;
	background: url(../img/h3ctitle_bg.png) center top repeat-x,url(../img/h3ctitle_bg.png) center bottom repeat-x;
	color: #300;
	padding: .8em 1em;
	letter-spacing: 2px;
	margin: 10% auto 5%;
	font-size: 1.3em
}



@media screen and (max-width: 667px) {
	#page_header p{
		margin-top: 1em
	}
}	

@media print, screen and (min-width: 668px) {
	#page_header{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	#page_header h1{
		font-size:24px;
		padding-left: 3%;
		border-left: solid 3px var(--color-main)
	}
	.ctitle{font-size: 20px;margin: 8% auto 3%;}
}	

@media print, screen and (min-width: 1024px) {
	#page_header h1{font-size:30px}
	.ctitle{font-size: 26px}
}	



.read{
	margin: .8em auto 0;
}

@media screen and (max-width: 767px) {
	.read{width: 95%;}
}	

@media print, screen and (min-width: 768px) {
	#header_l2{padding: 3em 2em;}
	#header_l2 h1 span{font-size: 38px;margin-bottom: 20px;}
}	

@media print, screen and (min-width: 1024px) {
	#header_l3 h1{font-size: 2em}
	.read{
		text-align: center;
		margin:0 auto;
		max-width: 1000px
	}
}	


a.btag{}

a.btag:before{
	font-family: icomoon;
	content: "#";
}



a.kw_tag{display: block;background: #666;color: #fff;padding: .4em 1em;
	border-radius: 50px;
	position: relative;
	font-size: .9em;
	line-height: 1em}	

a.kw_tag:before{
	font-family: icomoon;
	content: "\ea1a";
	padding-right: .5em;
	color: rgba(255, 255, 255, 0.8)
}

a.kw_tag:hover{
	background: #007fa8
}


a.cat {
	display: block;
    background: #fff;
    text-align: center;
    color: #007fa8!important;
    border: solid 1px #007fa8;
    text-decoration: none;
    border-radius: 50px;
    padding: 2px .6em;
    font-size: .8em;
    line-height: 1em
}

/* ------------------------------
 INDEX
------------------------------ */

ul.newsList > li{}
ul.newsList > li .date{display: inline-block;margin-right: 1em}
ul.newsList > li .cat{
	background:#f3f3e6;
	font-size: .8em;
	padding: 0 5px
}

ul.newsList > li h3{
	font-size: 1.1em;margin-top: .5em
}

ul.newsList > li img{
	width: 100%;
	object-fit: cover;
}

ul.newsList > li div:nth-child(2){padding: 1em 0;}

ul.newsList > li .new{color: #ff1d1d;padding-right: 1em}

.hlbox_thumb{position: relative}

.es{}

.es.upcoming{
	display: none
}

.closed{
 color: #ff3800
}

@media screen and (max-width: 667px) {
	ul.newsList{max-width: 270px;margin: 0 auto}
	ul.newsList > li{margin-bottom: 2em}
}	

@media print, screen and (min-width: 668px) {
	ul.newsList{
	display: flex;
	flex-wrap:wrap;
	}
	
	ul.newsList > li{
	width: calc(( 100% - 80px ) / 3 );
	margin: 0 40px 40px 0;
	position: relative;
	}
	
	ul.newsList > li img{}
	
	ul.newsList li:nth-child( 3n ) {margin-right: 0;}
	
}	

@media print, screen and (min-width: 1024px) {
	ul.newsList{padding: 0 5%}
	ul.newsList > li{
	width: calc(( 100% - 120px ) / 3 );
	margin: 0 60px 50px 0;
	position: relative;
	}
}

/* ------------------------------
 pageList
------------------------------ */

ul.pageList li{box-shadow: 1px 1px 6px #ccc;border-radius: 6px;}

ul.pageList li h3{
	font-size: 1.3em;
}

ul.pageList li h3 a{display: block;padding: 1.5em;
	position: relative
}

ul.pageList li h3:after{
	
}


ul.pageList li h3 a{
	color: #174c28;
  position: relative;
    transition: all .2s linear;
}


/*矢印と下線の形状*/
ul.pageList li h3 a::before{
  content:"";
  position: absolute;
  bottom:20px;
  right:26px;
  width:40px;
  height:1px;
  background:#174c28;
    transition: all .2s linear;
}

ul.pageList li h3 a::after{
  content:"";
  position: absolute;
  bottom:20px;
  right: 30px;
  width:1px;
  height:10px;
  background:#174c28;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
ul.pageList li:hover h3 a::before{
  right:14px;
}

ul.pageList li:hover h3 a::after{
  right:18px;
}




ul.pageList li img{
	border-radius: 6px 6px 0px 0px;
	width: 100%;
	object-fit: cover;
}

ul.pageList li div:nth-child(2){padding: 1em}


@media screen and (max-width: 767px) {
	ul.pageList li{margin-bottom: 2em}
}	

@media print, screen and (min-width: 768px) {
	ul.pageList{
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	}
	
	ul.pageList li{
	width: calc(( 100% - 30px ) / 2 );
	margin: 0 30px 30px 0;
	position: relative;
	}
	
	ul.pageList li img{
		height: 280px;
	}
	
	
	ul.pageList li:nth-child( 2n ) {margin-right: 0;}
	
}	

@media print, screen and (min-width: 1024px) {
	
}	



/* ------------------------------
 #headline
------------------------------ */

#headline{
	margin-top: 5%
}

#headline h2{font-size: 18px;
	border-bottom: solid 1px #ccc;
	padding-bottom: .8em
}

#headline h2 span{
	font-size: 1.3em;
	padding-right: .8em
}

ul.hlbox > li{
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	margin: 2em 0 0 0;
}

ul.hlbox > li div:nth-child(1){
	width: 80px;
	overflow: hidden;
}
ul.hlbox > li div:nth-child(1) img{
	display: block;
    height: 80px;
    object-fit: cover;
    width: auto;
}
ul.hlbox > li div:nth-child(2){
	width: calc(100% - 80px);
	padding-left: 1.6em
}

ul.hlbox > li .date{display: inline-block;margin-right: .5em}
ul.hlbox li .new{
	font-size: .8em;
	color: red;
	margin-right: 1em
}
ul.hlbox li .cat{
	background:#fff;
	font-size: .8em;
	padding: 0 5px
}

ul.hlbox li h3{
	font-family: sans-serif;
	font-size: .9em
}

ul.hlbox ul.favorites_count{
	display: none
}


@media screen and (max-width: 767px) {
	#headline >div{
		background: #f6f6f6;
		padding: 6% 5% 5%;
		margin-bottom: .5em
	}
	#hl_news{margin-bottom: 3em;}
}	

@media print, screen and (min-width: 768px) {
	#headline{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		background: #f6f6f6;
		padding: 5%
	}
	#headline > div{width: 48%}
}	

@media print, screen and (min-width: 1024px) {
	ul.hlbox li h3{font-size: 1em}
}	


/* ------------------------------
 .kibako_ban
------------------------------ */
.kibako_ban_sub{
margin:2em auto;
padding: 3%;
text-align: center;
background: #f9f7e7
}

.kibako_ban_sub p{
	margin-bottom: 15px;
	font-size: 1.2em;
	text-decoration: underline
}

.kibako_ban_sub p a{
	text-decoration: underline;
	color: #d05d18
	}

@media screen and (max-width: 767px) {
	.kibako_ban_sub{padding: 5px}
}	




@media print, screen and (min-width: 768px) {
	.kibako_ban_sub p br{display: none}
}




/* ************************************************ 
*	CTA
* ************************************************ */


#cta{
	text-align: center;
	margin: 0 auto 1em;
	padding: 6% 5%;
	background: rgba(240, 240, 224, 0.8)
}
#cta h4{
	font-size: 1.2em;
	margin-bottom: 1em;
	line-height: 1.6em;
}

#cta h4 br,#cta p br{display: none}

#cta p{margin-bottom: 1em;font-size: 1.1em}

ul#cta_contact{width: 90%;margin: 0 auto}

ul#cta_contact li{letter-spacing: .1em;
	font-size: 1.3em;
	text-align: center
}

ul#cta_contact li a,
ul#cta_contact li.cta-tel-pc span{
	display: block;
	border: solid 2px #301816;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	padding: .8em .5em;
	text-decoration: none;
	color: #fff;
	background: #301816;
	font-weight: bold
}




ul#cta_contact li a:hover{
	background: #fff;
	color: #301816
}

ul#cta_contact li.cta-tel a:before,
ul#cta_contact li.cta-tel-pc span:before{
	font-family: icomoon;
	content: "\e905";
	margin-right: .5em
}

ul#cta_contact li.cta-tel-pc a:hover{}

ul#cta_contact li.cta-form a:before{
	font-family: icomoon;
	content: "\e904";
	margin-right: .5em
}

@media screen and (max-width: 667px) {
	ul#cta_contact li:first-child{
		margin-bottom: 1em
	}
}	

@media print, screen and (min-width: 668px) {
	#cta{}
	#cta h4{font-size: 1.4em;}
	ul#cta_contact li.cta-tel,
	ul#cta_contact li.cta-tel-pc{
		float: left;
		width: 48%
	}
	ul#cta_contact li.cta-form{
		float: right;
		width: 48%;
	}

}	

@media print, screen and (min-width: 1024px) {
	ul#cta_contact{width: 80%}
}	


/* ************************************************ 
*	お気に入りボタン
* ************************************************ */



.heart-full,
.heart-empty{
	display: block;
	font-style: normal;
	line-height: 1em
}

.heart-full::before{
	font-family: icomoon;
	font-size: 30px;
	content: "\e9d0";
}

.heart-empty::before{
	font-family: icomoon;
	font-size: 30px;
	content: "\e9cf";
}


.favoritelist{
	position: fixed;
	top:180px;
	right: 30px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: #fff;
	box-shadow: 1px 1px 6px #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100
}
.favoritelist a{
	display: block
}

.favoritelist a::before{
	position: absolute;
	left: 10px;
	top: 15px;
	font-family: icomoon;
	font-size: 30px;
	content: "\e9d0";
	color: #d7d7d7;
	display: block;
}

ul.favorites_count{
	display: flex;
	justify-content: flex-end;
	align-items: center
}


ul.favorites_count li .heart-empty::before,
ul.favorites_count li .heart-full::before{
	font-size: 20px;
}

ul.favorites_count li.f_count{padding: 0 5px;}




/* ************************************************ 
*	.bread_crumb
* ************************************************ */

#bread{padding: 1.5em 1em 1em;
	background: rgba(var(--color-main-rgb), 0.3)
}

#bread a{text-decoration: none;color: #444}

ul.bread_crumb{}
	
ul.bread_crumb li{display: inline-block;
	font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem)
}

ul.bread_crumb li br{display: none}

ul.bread_crumb li + li:before {
	margin: 0 .6em;
	font-size: 1.1em;
	color: #999;
	font-family: icomoon;
	content: "\e977";
}

@media screen and (max-width: 667px) {	
	ul.bread_crumb li{}
}	

@media print, screen and (min-width: 668px) {
	#bread{padding: 1.5em;}
}

/* ************************************************ 
*	prevnext
* ************************************************ */

.pagenav{
	max-width: 1240px;
	margin: 3% auto;
}

.pagenav li {
	margin:0 0 .6em;
	font-size: .8em
}

.pagenav li a{
	display: block;
	text-decoration: none;
	padding: .3em .8em;
	position: relative;
	color: #444;
	-webkit-transition: all .3s;
	transition: all .3s;
	}

	
.pagenav li a:hover{color: #510000}	
.pagenav li.prev{text-align: left;}

.pagenav li.prev a{}

.pagenav li.prev a:before{
		font-family: icomoon;
		content: "\e973";
		padding-right: .5em}
	
.pagenav li.next{text-align: right;}

.pagenav li.next a:after{
	font-family: icomoon;
	content: "\e974";
	padding-left: .5em}

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

@media print, screen and (min-width: 668px) {
	.pagenav{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.pagenav li{width: 45%}
}	
	


.pageback {display: block;
	margin: 0 auto;
	background: #007fa8;
	color: #fff;
	padding: .6em 1em;
	text-align: center;
	max-width: 400px;
}

.pageback:before{
	font-family: icomoon;
	content: "\e973";
	padding-right: 5px
}



/* ************************************************ 
*	Pager
* ************************************************ */

#pager{overflow: hidden;
    position: relative;}
    
    
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em 0 3em;
    position: relative;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px 6px;
    padding: 8px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    position: relative;
    border-bottom: solid 3px #FFF
}



/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    border-bottom: solid 3px #000
}

/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}



/* ------------------------------
 #contact_book
------------------------------ */


#contact_book {
    width: 245px;
    position: fixed;
    bottom: 24px;
    left: -250px;
    z-index: 100;
    -webkit-transition: all .3s;
    transition: all .3s;
}

#contact_book:hover img{
	opacity: 1;
	transform: scale(1.15,1.15);
}

/* ------------------------------
 #sitemap
------------------------------ */

#sitemap{}


dl.sitemap_add{text-align: center;
	margin: 2em 0
}

dl.sitemap_add dt{margin-bottom: 10px}

.sitemap_list{
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		gap:2em
	}
  
.sitemap_list dl{flex: 1}
.sitemap_list dt{
	font-size: clamp(0.938rem, 0.915rem + 0.11vw, 1rem);
	font-weight: bold;
	padding-bottom: .5em;
	margin-bottom: .5em;
	border-bottom: solid 1px rgba(72, 46, 51, 0.6);
}
.sitemap_list dd{
	font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem)
}

@media screen and (max-width: 767px) {
	#sitemap{width: 90%;margin: 0 auto}
	.sitemap_list{}
	.sitemap_list dl{
		box-sizing: border-box;
	}
		
	/* 上段：A を横幅いっぱい */
	.sitemap_list dl.fnav_kibako {
	  flex: 0 0 100%;    /* 1行を全部使う */
	}
	
	/* 下段：B と C を2分割 */
	.sitemap_list dl.fvav_official,
	.sitemap_list dl.fvav_official {
	  flex: 1 1 calc(50% - 30px); /* 2カラム（gap 分少し引く） */
	}
	

}	


@media print, screen and (min-width: 768px) {
	
	
	.sitemap_list dl{margin: 0 0 30px 0;}
	
	.sitemap_list dl:nth-child( 4n ) {margin-right: 0;}
}	


@media print, screen and (min-width: 1025px) {
	dl.sitemap_add{padding: 5em 0 0;
		margin-bottom: 4em;
	}
	.sitemap_list{
		width: 90%;
	}
	.sitemap_list dl{
		margin: 0 0 50px 0;
	}

}	



/* ------------------------------
 footer
------------------------------ */

#footer{
	margin: 0 auto;
	text-align: center;
	position: relative;
	color: #f1eee7
}



.footer_cta{
	margin: 0 auto
}


.cta_form ul{}

/* .cta_form ul li{width: 48%} */
.cta_form ul li a{
	display: block;
	background: #fff;
	color: var(--color-main);
	padding: 1em 0;
	line-height: 1em;
	font-size: 1.1em;
	font-weight: bold
}

.cta_form ul li a:before{
	padding-right: 1em
}

.cta_form .to_ob{text-align: left;padding-top: .7em}
.cta_form .to_ob:before{
	font-family: icomoon;
	content: "\e977";
}

@media print, screen and (min-width: 668px) {
	.sp-fixed-btn{display: none}
	}
	
	

@media screen and (max-width: 768px) {
	#footer{padding: 5% 6% 80px;}
	.cta_daial{margin-bottom: 2em}
}	

@media print, screen and (min-width: 768px) {
	.footer_cta{width: 90%;padding: 3em 0 2em;}
}	

@media print, screen and (min-width: 769px) {

	.footer_cta{
	display: flex;
	justify-content: center;
	gap:20px;
	flex-wrap:wrap;
	align-items: center;}
	.cta_daial{width: 40%}
	.cta_form{min-width: 40%}
}	



@media print, screen and (min-width: 1200px){
	.cta_form{padding-left: 40px;}
	.cta_form ul li{}
}




.iemori119{}


.iemori119 dl{margin-bottom: 2em;}
.iemori119 dl dd{text-align: left;font-size: .9em}


.iemori119 ul{
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto 1em;
	font-size: .9em;
}

.iemori119 ul li:not(:last-child):after{
	content: "｜"
}

@media screen and (max-width: 768px) {
	.iemori119 dl dt{text-align: center;margin: 2em auto 1em}
}

@media print, screen and (min-width: 667px) {
	.iemori119 dl{
		display: flex;
		justify-content: center;
		align-items: center;}
		
	.iemori119 dl dt{padding-right: 2em}
}

@media print, screen and (min-width: 1025px) {

	.iemori119 ul{max-width: 1000px;margin: 0 auto 2em;}

}	

.cr{
	padding: 1.5em 0;
	font-size: .8em;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, 0.6)
}




@media print{
	#footer{display: none}
}



/* ------------------------------
 Youtube
------------------------------ */	

.video-container {
   position: relative;
     padding-bottom: 56.25%;
     height: 0;}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}