@charset "utf-8";

/*リセットCSS（ress.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  /* ボックス要素のサイズを算出
  paddingとborderをwidthとheightに含める */
  box-sizing: border-box;
}



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	font-size: 16px;	/*基準となるフォントサイズ。下の方にある「画面幅800px以上」で基準を大きなサイズに変更しています。*/
}

@font-face {
  font-family: "jost";
  src: url(../fonts/Jost Light.ttf);
}

body {
	overflow-x: hidden;
	font-family:"jost", "Zen Kaku Gothic New", "Arial", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #000;	/*全体の文字色*/
	line-height: 2;		/*行間*/
}

/*table全般の設定*/
table {border-collapse:collapse;
}

.inb{display:inline-block;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;
  text-decoration: none;
}


/*section全般の設定*/
section + section {
	padding-top: 30px;	/*sectionの間に空けるスペース*/
}

/*フォームタグ全般の設定*/
input, textarea, select {
	border: 1px solid #BBBBBB;	/*枠線の幅、線種、色*/
	background-color:#FFF;
	padding: 0 10px;
}

/*ress.cssでselectで矢印が消えてしまうのを戻す*/
select {
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
	appearance: menulist;
}
select::-ms-expand {
    display: block;	/*IE用*/
}

/*videoタグ*/
video {max-width: 100%;}

.both_margin5{margin-left:5px;margin-right:5px;}

/*ulタグ、olタグ*/
ul,ol {
	margin: 0 5px 30px 25px;	/*上、右、下、左へ空けるスペース*/
}

.ebi{
	position:none;
	}
	
.pickupb{
position: fixed;
    right: 0px;    
    bottom: 0px;
    z-index: 98;
    width:600px;
    background:#FFF;
    border:solid 4px #005EB4;
}

.pickupb:hover{
opacity:0.8;
}

#pickupb{
transform: translateX(0);
transition: transform 1s ease;
}

.circle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: -30px;
  background-color:#005EB4;;
  padding:5px 10px;
  color:#FFF;line-height:1;
  border: none;
  height:70px;
  width:70px;
  font-size: 30px;border-radius:100px;
  z-index: -1;
  cursor: pointer;
}

.close-button {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: -33px;
  padding:5px 10px;
  color:#FFF;line-height:1;
  border: none;
  font-size: 25px;
  z-index: 1;
  cursor: pointer;
  font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}


.pickupb2{
position: fixed;
    right: 100px;    
    bottom: 10px;
    z-index: 98;
    width:600px;
    background:#FFF;
    border:solid 1px #CCC;
    border-radius:5px;
    font-size:17px;
     opacity: 0;
  transition: opacity 1s ease;
}

.pickupb2.show {
  opacity: 1;
}

.pickupb2:hover{
opacity:1;
}

#pickupb2{

}

.door_phone_div{width:290px;}

.taiyoukou_div{width:290px;min-height:300px;
background-image: url('../housing/images/taiyoukou3_1.jpg');
  background-position: left top; /* 画像を中央寄せ */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  }

.door_phone_div:hover{opacity:0.8;}
.taiyoukou_div:hover{opacity:0.8;}
.amazon{padding10px;}

.taiyoukou_img{
line-height:1;width:220px;height:auto;margin: 125px auto 0;transform: translateX(-10px);}

.circle2 {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: -30px;
  background-color:#005EB4;;
  padding:5px 10px;
  color:#FFF;line-height:1;
  border: none;
  height:70px;
  width:70px;
  font-size: 30px;border-radius:100px;
  z-index: -1;
  cursor: pointer;
}

.close-button2 {
  position: absolute;
  top: 5px;
  right: 5px;  
  padding:5px 5px;
  color:#333;line-height:1;
  border: none;
  font-size: 25px;
  z-index: 1;
  cursor: pointer;
  font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}



.br-sp {display: none; }.br-sp2 {display: none; }

.im-none {display: none; }



/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
#new a {
	color: #333;	/*文字色*/
}

#new a:hover {
	color: #3377BB;	/*マウスオン時の文字色*/
}

a {
	color: #3377BB;	/*文字色*/
}

a:hover {
	color: #02a912;	/*マウスオン時の文字色*/
}

#new dt{width:240px;}

#new dd{width:calc(100% - 240px);}


/*container。サイト全体を囲むブロック。
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 100%;	/*最大幅。これ以上幅が広がらないように。*/
	min-height: 100vh;
	position: relative;/*←相対位置*/
    padding-bottom: 290px;/*←footerの高さ*/
    box-sizing: border-box;}
}
.zoom-box {
  display: inline-block;
  overflow: hidden;
}
.c-bnr.zoom {
  display: block;
  transition-duration: .5s;
}
.c-bnr.zoom:hover {
  transform: scale(1.2);
}

/*header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/
header {
	text-align: center;
	padding: 10px 0;		/*上下、左右のボックス内の余白*/
  height: 100px;
  background: rgba(255,255,255,0.8);  
}

/*logo画像*/
header #logo {
	width: auto;	/*画像の幅*/
	margin: 0 auto;	/*左右中央に配置する*/
  float:left;
}

input[type="submit"]{border: none;}

/*========= 検索窓を開くためのボタン設定 ===========*/

.open-btn1{
  background:url("../images/ico_search.png") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
  background-size: 40px 40px;
  width:55px;
  height:50px;
  cursor: pointer;/*カーソルを指マークに*/
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn1.btnactive{
  background:url("../images/ico_peke.png") no-repeat 15px center;/*閉じるアイコンを背景に表示*/
  background-size: 40px 40px;
}
botan{float:right;z-index:100;
}

/*　ヘッダーボタンの設定　*/

header botan ul li{
	float:left;
  list-style:none;
  background: rgba(237,237,237,0.8);
 width:85px;}
 
/*========= 検索窓の設定 ===============*/
search{width:auto;
float:right;}
moji{float:right;}

search2{display:none;}

/*==検索窓背景のエリア*/

#search-wrap,#search2-wrap{
  position:absolute;/*絶対配置にして*/
  top:150px;
  right:20px;
  z-index: -1;/*最背面に設定*/
  opacity: 0;/*透過を0に*/
  width:0;/*横幅は0に*/
  transition: all 0.4s;/*transitionを使ってスムースに現れる*/
  border-radius: 5px;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive,
#search2-wrap.panelactive{
  opacity: 1;/*不透明に変更*/
  z-index: 99;/*全面に出現*/
  width:280px;
  padding:20px;
  top:100px;
  background:#171C61;
  opacity: 0.9;
}

/*==検索窓*/
#search-wrap #searchform,
#search2-wrap #searchform2{
  display: none;/*検索窓は、はじめ非表示*/
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
#search-wrap.panelactive #searchform,
#search2-wrap.panelactive #searchform2{
  display: block;/*検索窓を表示*/
}

/*==検索フォームの設定*/

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input,#search2-wrap input{
  -webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
  outline: none;
  cursor: pointer;/*カーソルを指マークに*/
  color: #666;
}

/*テキスト入力input設定*/
 #search-wrap input[type="text"],
 #search2-wrap input[type="text"] {
  width: 100%;
  border: none;
  border-bottom:2px solid #171C61;
  transition: all 0.5s;
  letter-spacing: 0.05em;
    height:46px;
  padding: 10px;
}

/*テキスト入力inputにフォーカスされたら*/
 #search-wrap input[type="text"]:focus,
 #search2-wrap input[type="text"]:focus {
  background:#EDEDED;/*背景色を付ける*/
}

/*ボタンinput設定*/
 #search-wrap input[type="submit"],
 #search2-wrap input[type="submit"] {
  position: absolute;
    top:10px;
  right:30px;
  background:url("../images/ico_search.png") no-repeat right;/*虫眼鏡アイコンを背景に表示*/
  background-size: 20px 20px;
  width:30px;
  height: 60px;
}

.btn_search{
  font-size: 24px;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;z-index: 100;
	opacity: 1;
	top: 0;		/*上からの配置場所*/
	right: 0;	/*右からの配置場所*/
	width: 85px;	/*幅*/
	height: 85px;	/*高さ*/
	background: #171C61 url(../images/icon_menu4.png) no-repeat center top/85px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}

/*小さな端末用のメニューが開いた段階の３本バーの設定。×印が出ている状態の設定。*/
#menubar_hdr.close {
width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	background: #171C61 url(../images/icon_menu4.png) no-repeat center bottom/50px;	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/	
}

/*大きな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
#menubar {
	display: none;	/*非表示にしておく*/
}

#menubar-b {
	display: none;	/*非表示にしておく*/
}

/*小さな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#menubar-s {
	display: none;				/*デフォルトで非表示にしておく*/
	animation-name: opa1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.8S;		/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	background: #171C61;		/*背景色*/
	position: fixed;overflow: auto;z-index: 99;	/*fixedはスクロールしても動かない為の指定*/
	right: 0;
	top: 0;
	width:50%;
	height: 100%;
	padding: 20px;		/*ボックス内の余白。色がついた部分と、メニューがある白いブロックとの差です。*/
	text-align: center;	/*テキストをセンタリング*/
	
 /*Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}

 /*Google Chrome、Safariへの対応*/
#menubar-s::-webkit-scrollbar{
  display: none;
}

/*nav要素*/
#menubar-s nav {
/*	height: 100%;スクロールを出す場合*/
	background: #FFF;		/*背景色。下の「#menubar-s ul」と揃えておいて下さい。*/
	padding: 5px;			/*ボックス内の余白。メニューにスクロールバーが出た場合に適度な余白をとる為です。*/
	border-radius: 10px;	/*角を丸くする指定。直角がいいならこの１行を削除。*/
}

/*ul要素。メニュー１個１個を囲む親のボックス。*/
#menubar-s ul {
	margin: 0;
/*	height: 100%;スクロールを出す場合*/
	list-style: none;
	padding: 5px;	/*ボックス内の余白*/
	background: #FFF;		/*背景色。上の「#menubar-s nav」と揃えておいて下さい。*/
/*		overflow: auto;	*/		/*中身が高さを超える場合に自動でスクロールを出す設定*/
}

/*メニュー１個あたりの設定*/
#menubar-s li {
	margin-bottom: 5px;	/*メニュー同士の余白。*/
  background: #fff;
  border: solid 2px #171C61;
  border-radius: 5px;
}

/*リンクテキスト*/
#menubar-s a {
	text-decoration: none;
	display: block;
	color: #171C61;		/*文字色*/
	padding: 5px 0;	/*上下、左右への余白*/
	transition: 0.3s;	/*0.3秒かけてアニメーションする設定。マウスオン時に影響します。*/
}

/*アイコン画像（アイコンにはFont Awesomeを使用）*/
#menubar-s i {
	/*	display: block;		改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
	padding-right: 6px;	/*テキストとの余白調整*/
	color:#171C61;			/*文字色＝アイコン色になります。*/
}

/*英字の装飾テキスト*/
#menubar-s li span {
	display: block;
	font-size: 0.8rem;
	color: #3377BB;
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定。*/
}

/*スクロールバーのカスタマイズ（※対応しているブラウザは限られます）*/

#menubar-s ul::-webkit-scrollbar {
	width: 8px;	/*スクロールバーの幅*/
}

/*スクロールバー本体（色のついた部分）*/
#menubar-s ul::-webkit-scrollbar-thumb {
    background: #171C61;
}

/*スクロールバーの背景部分（グレー色の部分）*/
#menubar-s ul::-webkit-scrollbar-track {
    background: #eee;
}

/*共通設定。角を丸くする指定。直角がいいならブロックごと削除。*/
#menubar-s ul::-webkit-scrollbar-thumb,
#menubar-s ul::-webkit-scrollbar-track {
    border-radius: 50px;	/*ある程度大きければ適当でOKです*/
}
#menubar-s .Menu li{
  width:100%;
  position:relative;/* ここで親要素を指定 */
}
#menubar-s .Menu li a{	
	display:block;
	padding:10px 0;
	text-align:center;
	text-decoration:none;
  padding:10px 0;
}
#menubar-s .Menu li:last-child a{
	border-right:none;
}

#menubar-s .Menu li ul.subMenu{
  text-align:left;
	display:none;
}

#menubar-s .Menu li:hover ul.subMenu{
	display:block;
  width:100%;
}
#menubar-s .Menu li ul.subMenu li{
  border: none;
  margin-bottom: 0;
}
#menubar-s .Menu li ul.subMenu li a{
	float:none;
  font-size: 14px;
	background:#EDEDED;
	border-right:none;
	border-bottom:1px solid #171C61;
	display:block;
}

#menubar-s .Menu li ul.subMenu li a:hover{
	background:#CCCCCC;
	}

#menubar-s .Menu li ul.subMenu li:last-child a{
	border:none;
}

#menubar-s #gnav-btn {
    color: gray;
    padding: 10px;
    font-size: 30px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
    background-color: white;
    border: solid 1px #d1caca;
    border-radius: 3px;
  }
#menubar-s #gnav-input:checked ~ #gnav-content {
    top: 0;
  }
#menubar-s #gnav-content {
    left: 0;
    z-index: 10;
    transition: 0.3s;
    width: 100%;
  }
#menubar-s .humb-menu label {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    border-top: 0.5px solid #171C61;
  }
#menubar-s .humb-menu label:first-child {    
    border-top: none;
  }
#menubar-s .humb-menu input {
    display: none;
  }

#menubar-s .humb-menu .accshow {
    height: 0;
    overflow: hidden;
  }
#menubar-s .humb-menu .accshow p {
    padding: 1.5rem;
  }
#menubar-s .humb-menu .cssacc:checked + .accshow {
    height: auto;
  }

.navi_susume a:hover{background:#EDEDED;}
/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	padding: 50px 20px 20px 20px;	/*上、右、下、左*/ 
}

main #contents{max-width: 1400px;margin: 0 auto;}

main #contents_inner{max-width: 1200px;margin: 0 auto;}

/*mainブロック内のh1タグ*/
main h1 {
	padding: 5px;			/*ボックス内の余白*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	position: relative;		/*アニメーションに必要な設定*/
	letter-spacing: ;	/*文字間隔を少しだけ広くとる設定*/
	color: #171C61;
}

/*h1タグのbefor（下線のデフォルトの状態の設定）*/
main h1::before {
	background: #d9d9d9;	/*線となる背景の色*/
}

/*h1タグのbefor,after 共通設定*/
main h1::before ,main h1::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;	/*ラインの高さ*/
}

/*h1タグのafter（アニメーションの初期設定）*/
main h1::after {
	background: #171C61;		/*線となる背景の色*/
	transition: 1s 0.5s;		/*1sはアニメーションの実行時間は1秒。0.5秒遅れてスタートする指定。*/
	transform: scaleX(0);		/*幅。最初は0にして見えなくしておく。*/
	transform-origin: left top;	/*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}

/*h1タグのアニメーション結果。ライン幅が100%になる。*/
main h1.linestyle::after {
	transform: scaleX(1);
}

/*mainブロック内のh2タグ*/
main h2 {
	padding: 5px;			/*ボックス内の余白*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	position: relative;		/*アニメーションに必要な設定*/
	letter-spacing: ;	/*文字間隔を少しだけ広くとる設定*/
	color: #171C61;
}

main .h2_h3 {
	color:#171C61;
	padding: 5px;	/*ボックス内の余白*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	padding-left:1em;
	border-left: solid 7px #7db4e6;	
	background:#ededed;
	line-height:1.5;font-size:20px;
}

main .h2_h3::before{background: none;}
main .h2_h3::after{background: none;}

/*h2タグのbefor（下線のデフォルトの状態の設定）*/
main h2::before {
	background: #d9d9d9;	/*線となる背景の色*/
}

/*h2タグのbefor,after 共通設定*/
main h2::before ,main h2::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;	/*ラインの高さ*/
}

/*h2タグのafter（アニメーションの初期設定）*/
main h2::after {
	background: #171C61;		/*線となる背景の色*/
	transition: 1s 0.5s;		/*1sはアニメーションの実行時間は1秒。0.5秒遅れてスタートする指定。*/
	transform: scaleX(0);		/*幅。最初は0にして見えなくしておく。*/
	transform-origin: left top;	/*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}

/*h2タグのアニメーション結果。ライン幅が100%になる。*/
main h2.linestyle::after {
	transform: scaleX(1);
}

/*mainブロックのh3タグ*/
main h3 {
	color:#171C61;
	padding: 5px;	/*ボックス内の余白*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	padding-left:1em;
	border-left: solid 7px #7db4e6;	
	background:#ededed;
	line-height:1.5;
}

/*mainブロックのpタグ*/
main p {
	margin: 0 5px 10px;	/*上、左右、下へ空けるスペース*/
}

main .pankuzu{
  font-size:16px;
  font-weight: bold;
  background: #EDEDED;
  border-radius: 5px;
  padding: 5px 0 5px 0px;/*上、右、下、左*/
}

main .pankuzu a{
  text-decoration: none;
  color:#171C61;}

/*listボックスを囲むボックス*/
.list-container {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	padding: 5px;		/*上下、左右へのボックス内の余白*/
}

/*１個あたりのボックス*/
.list {
	width: 49%;				/*ボックスの幅*/
	margin-bottom: 15px;	/*ボックス同士の上下間の余白*/
	padding: ;			/*ボックス内の余白*/
	position: relative;
	overflow: hidden;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/	
  text-align: center;
  border-radius:5px;
  box-shadow: 3px 3px 8px #BBB;
}
.list img{
	border-radius: 2px;
}

/*マウスオン時にボックスの影を少し濃くする*/
.list:hover {
}

/*リンクテキスト*/
.list a {
	text-decoration: none;
	color: #333;	/*文字色*/
}

/*ボックス内のh4タグ*/
.list h4 {
	line-height: 1.5;	/*行間を少し狭くする*/
	color: #171C61;		/*文字色*/
	margin: 5px 0;		/*上下、左右に空けるスペース*/
	text-align: center;
}

/*ボックス内のpタグ。指定した行数までを表示。*/
.list p {
	margin: 0!important;	/*「main p」のマージンをリセットする*/
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;	/*表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 1.1rem;		/*文字サイズ。*/
    line-height: 1.5;		/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
    max-height: 4.5;		/*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
}

.list2 {
	width: 32%;				/*ボックスの幅*/
	margin-bottom: 15px;	/*ボックス同士の上下間の余白*/
	padding: 0px 0px 5px 0px;			/*ボックス内の余白*/
	position: relative;
	overflow: hidden;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	border-radius:5px;
  box-shadow: 3px 3px 8px #BBB;
	background: #171C61;	/*背景色*/
}
.list2 img{
	border-radius: 2px 2px 0 0;
	width: 100%;
	height: auto;
}

.list figure{
	overflow: hidden;	
	}
.list img{display: block;
  transition-duration: .5s;
}
.list img:hover{
  transform:scale(1.2,1.2);
}

.list2 figure{
	overflow: hidden;	
	}
.list2 img{display: block;
  transition-duration: .5s;
}
.list2 img:hover{
  transform:scale(1.2,1.2);
}

/*リンクテキスト*/
.list2 a {
	text-decoration: none;
	color: #333;	/*文字色*/
}

/*ボックス内のh4タグ*/
.list2 h4 {
	line-height: 1.5;	/*行間を少し狭くする*/
	color: #FFF;		/*文字色*/
	margin: 5px 5px;		/*上下、左右に空けるスペース*/
	overflow: hidden;
	text-align: center;
	font-size: 1.0rem;
	white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}

/*ボックス内のpタグ。指定した行数までを表示。*/
.list2 p {
	margin: 0!important;	/*「main p」のマージンをリセットする*/
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;	/*表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 1.1rem;
    line-height: 1.5;		/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
    max-height: 4.5;		/*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
		color: #FFF;
		text-align: center;
		white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
.sns_bt_wrap{
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	padding: 5px;
}
.sns_bt{
	margin-left: 10px;margin-bottom:10px;
}

.sns_bt a{
	text-decoration:none;
}


.sample_btn1 {
  display: inline-block;margin-left:100px;
  width: 200px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  color:#fff;
  background-color: #171C61;
  position: relative;
  border: 1px solid #ccc;
  transition: color 0.5s ease;border-radius:3px;
}

.sample_btn1:hover i{color:#fff;}
.sample_btn1:hover {
  color: #fff;
}


.sample_btn1:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.sample_btn1::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #68b8fb;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;font-size:20px;
}

/*NEW,UPアイコン
---------------------------------------------------------------------------*/
/*NEW,UPアイコン 共通*/
.newicon, .upicon {
	display: inline-block;
	text-align: center;
	padding: 0 5px;
	border-radius: 3px;
	transform: scale(0.7);
}

/*newiconへの追加指定。*/
.newicon {
	background: #f00;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*upiconへの追加指定。*/
.upicon {
	background: #257dce;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*option帯リボン
---------------------------------------------------------------------------*/
/*option1,option2 共通*/
.option1, .option2 {
	font-size: 0.9rem;
	display: inline-block;
	width: 200px;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: translate(-60px, 20px) rotate(-30deg);	/*translateは配置場所の指定。rotateは回転。*/
	box-shadow: 0px 3px 2px rgba(0,0,0,0.2);			/*影*/
}

/*h2タグ内で使った場合のoption1,option2 共通（※CMS用）*/
h2 .option1, h2 .option2 {
	width: auto;
	position: relative;
	transform: translate(0px, -4px) rotate(0deg);
	padding: 5px 20px;
	margin-left: 10px;
}

/*option1への追加指定。*/
.option1 {
	background: #d80000;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*option2への追加指定。*/
.option2 {
	background: #386091;		/*背景色*/
	color: #FFF;			/*文字色*/
}

main ul{
	margin-left:0px;}

main ul li {
	padding-top:8px;
	padding-bottom:8px;
	border-bottom:solid 1px #CCCCCC;
	text-decoration: none;
	display: block;text-indent:14px;padding-left: 10px;
  font-size: 1.1em;

}

.full1{
background: #EDEDED;
	margin: 0 calc(50% - 50vw);
	padding: 0px calc(50vw - 50% + 8px);
	width: 100vw;
}

.full_bottom{
background: #EDEDED;
	background-size:cover;
	margin: 0 calc(50% - 50vw);
	padding: 0px calc(50vw - 50% + 8px);
	padding-top:10px;
	width: 100vw;
	margin-bottom:-20px;
	margin-top:40px;
}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	background: #171C61;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 0.7rem;
	padding: 10px 25px;	/*上下、左右*/
	display: flex;		/*flexボックスを使う指定*/
	justify-content: space-evenly;	/*並びかたの種類の指定*/	
	width:100%;
	position: absolute;/*←絶対位置*/
    bottom: 50px; /*下に固定*/
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: #FFF;	/*文字色*/
}

/*リンクテキストのマウスオン時*/
#footermenu a:hover {
	color: #ccc;	/*文字色*/
}

/*ulタグ（列単位）*/
#footermenu ul {
	margin: 0;
	list-style: none;
	align-self: center;	/*フッターメニューをブロックの上下中央に配置する。上によせたいならこの１行削除。*/
}

/*title*/
#footermenu .title {
	font-weight: bold;	/*太字にする*/
	color:  #ffc700;		/*文字色*/
	padding-bottom: 5px;	/*下に空けるスペース*/
}

/*フッター右側の装飾画像*/
#footermenu .kazari {
	display: none;	/*スペースが狭いので飾りを非表示にしておく*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 1.1rem;}

footer {
	font-size: 1.1rem;line-height:1.5;
	background: #171C61;
	color: #fff;
	text-align: center;
	padding: 20px;			/*ボックス内の余白*/
	width:100%;
	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

/*リンクテキスト*/
footer a {color: #fff;text-decoration: none;}

/*リンクテキストのマウスオン時*/
footer a:hover {color: #fff;}

/*著作部分*/
footer .pr {display: block;}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border-top: 1px solid #ccc;	/*上の枠線の幅、線種、色*/
	font-weight: bold;			/*太字に*/
	padding: 10px 5px;			/*上下、左右*/
	background: #fafafa;		/*背景色*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: calc(100% - 10px);	/*テーブルの両サイドに合計10px（左右各5pxずつ）の余白を作った残りを幅にします*/
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 10px 5px;		/*上下、左右*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

/*折り畳みコンテンツ
---------------------------------------------------------------------------*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}
/*質問*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	border:solid 1px #171C61;
	background: linear-gradient(#fff, #f7f7f7);	/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -54px;				/*テキストのインデント。Qアイコンだけ左に飛び出るようにする指定。下のpaddingの一番最後の数字と合わせて下さい。※マイナスは取らないで。*/
	padding: 20px 20px 20px 54px;	/*上、右、下、左*/
}
/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\2b";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。*/
	color: #3551de;		/*アイコンの色*/
	padding: 0 20px;	/*上下、左右への余白*/
}

/*回答*/
.faq dd {
	padding: 0 40px 30px;	/*上、左右、下への余白*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	position: fixed;
	right: 30px;		/*右からの配置場所指定*/
	bottom: 80px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 50px;
	font-size: 1.4rem;
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}

/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn {
	text-align: center;	/*内容をセンタリング*/
	font-size: 1.2rem;
}

/*ボタン*/
.btn a,
.btn input {
	display: inline-block;text-decoration: none;border: none;
	background: #171C61;	/*背景色*/
	color: #fff;			/*文字色*/
	border-radius: 5px;		/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 2px 14px;		/*上下、左右へのボタン内の余白*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn i {
	padding-left: 10px;		/*アイコンとテキストの間に空ける余白*/
	transform: scale(1.5);	/*アイコン画像を1.5倍にする*/
}

/*ボタンのマウスオン時*/
.btn a:hover{background: #389a38;}
.btn input:hover {
	opacity: 0.9;	/*透明度。0.9は色が90%ついた状態のこと。*/
}

/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 100%;
}

/*大きな画像の１行目*/
#item-image #item_image1 {
	z-index: 2;
	position: relative;
	overflow: hidden;
}

/*大きな画像の２行目*/
#item-image #item_image2 {
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
}

/*大きな画像のボックスの中の画像*/
#item-image img {
	width: 100%;
}

/*サムネイル画像*/
.thumbnail {
	width: 80px;	/*画像の幅*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin-bottom: 5px;
}

.thumbnail:hover {
	border: 1px solid #999;	/*マウスオン時の枠線の幅、線種、色*/
}

/*こだわりアイコンブロックの設定（※CMS用）
---------------------------------------------------------------------------*/
.specialbox {
	display: inline-block;
}
.specialbox img {
	padding: 2px 0;;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	width: 100% !important;
	height: 200px !important;
}

/*テーマカラーの背景色の「注目物件」ボックス
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.bg1 {
	background: #171C61;	/*ボックスの背景色*/
	padding: 12px;			/*ボックス内の余白*/
	border-radius: 8px;		/*ほんの少し角を丸くする指定*/
	color: #fff;			/*文字色*/
}

.bg2 {
	background: #FFF;	/*ボックスの背景色*/
	padding: 12px;			/*ボックス内の余白*/
	border-radius: 8px;		/*ほんの少し角を丸くする指定*/
	}

/*ボックス内のリンクテキスト*/
.bg1 > a {
	color: #fff;			/*文字色*/
}

/*ボックス内のh2タグ*/
.bg1 h2 {
	/*テキストをセンタリング削除*/
	margin: 0 !important;color:#FFF;
}

.bg2 h2 {
	/*テキストをセンタリング削除*/
	margin: 0 !important;color:#171C61;
}

/*ボックス内のh2タグのbefor（下線のデフォルトの状態の設定）*/
.bg1 h2::before {
	background: transparent;		/*線となる背景の色。transparentは透明の事。*/
}

/*ボックス内のh2タグのafter（アニメーションの初期設定）*/
.bg1 h2::after {
	background: #FFF;				/*線となる背景の色*/
	transform-origin: left top;	/*線の出現起点が中央からになるように。*/
}

/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup,.pickup2 {
	position: relative;
	display: flex;			/*flexボックスを使う指定*/
}

.pickup {
	position: relative;margin-inline: auto;display: none;	
}

.pickup.slick-initialized {display: block; 
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.pickup .list:hover figure,
.pickup2 .list:hover figure {
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*１個あたりのボックス*/
.pickup .slick-slide,
.pickup2 .slick-slide {
	margin: 5px !important;
	width: auto;
}

/*ボックス内のh4タグ*/
.pickup .list h4
 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;	/*表示させたい行数。変更する際は、下２行のIE対策も変更して下さい。*/
    line-height: 1.5em;		/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
    height: 1.5em;			/*IE対策。高さ。slick内で高さを統一できなかったので、応急措置でheightのみ指定。*/
}

/*ボックス内のpタグの最大の高さ。
max-heightにするとslick内で高さを統一できなかったので、応急措置でheightのみ指定。
3行分を確保したかったので、1.5emの3倍で本来なら「4.5em」なのですが、
なぜか画面幅によってほんの少しテキストのかけらが見えてしまったので「4.4em」にしました。*/
.pickup .list p
 {
    height: 4.4em;
}

/*ボックス内の画像*/
.pickup .list img,
 {
	object-fit: cover;	/*トリミングのタイプ*/
	height: 160px;		/*画像の高さ。下の方で数カ所再設定があります。*/
	width: 100%;		/*画像の幅*/
	font-family: 'object-fit: cover;';	/*IE対策*/
}

/*左右の三角矢印の共通設定*/
.slick-arrow {
	position: absolute;
	bottom: 50%;	/*下からの配置場所*/
}

/*左右の三角矢印の共通設定。マウスオン時。*/
.slick-arrow:hover {
	cursor: pointer;
	opacity: 0.8;
}

/*左右の三角矢印の形、色、サイズ*/
.slick-prev::after,
.slick-next::after {
	display: block;
	content: "\f105";		/*この形を出力する。このままだと下向き矢印になってしまうので、下の方の設定でそれぞれ90度回転させています。*/
  font-family: FontAwesome;
  color: #171C61;		/*三角の色*/
	font-size: 25px;	/*三角のサイズ*/
	background-color: ;
	opacity: 1.0;
	border-radius: 50px;margin:-5px;
	padding: 0px 10px;	/*上下  左右*/
}

/*左側の三角*/
.slick-prev {
	left: 0px;	/*左からの配置場所*/
z-index:2;
}

/*左側の三角を回転させる指定*/
.slick-prev::after {
	transform: rotate(180deg);
}

/*右側の三角*/
.slick-next {
	right: 0px;	/*右からの配置場所*/
}

/*右側の三角を回転させる指定*/
.slick-next::after {;
}

{transform: rotate(-90deg);}

/*スライドショー左右の三角矢印の形、色、サイズ*/
.slick-prev2::after,
.slick-next2::after {
	display: block;
	content: "\f105";		/*この形を出力する。このままだと下向き矢印になってしまうので、下の方の設定でそれぞれ90度回転させています。*/
  font: var(--fa-font-solid);
  color: #FFF;		/*三角の色*/
	font-size: 20px;	/*三角のサイズ*/
	opacity: 0.7;
	border-radius: 30px;
	padding: 0px 10px;	/*上下  左右*/
}

/*左側の三角*/
.slick-prev2 {
	left: 5px;	/*左からの配置場所*/
	z-index: 9;
}

/*左側の三角を回転させる指定*/
.slick-prev2::after {
	transform: rotate(180deg);
}

/*右側の三角*/
.slick-next2 {
	right: 5px;	/*右からの配置場所*/
}

/*右側の三角を回転させる指定*/
.slick-next2::after {;
}

/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/

.mainimg {
	position: relative;margin-inline: auto;display: none;
	padding: 0 !important;animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1);
}

.mainimg.slick-initialized {display: block; 
}

.mainimg img{width: 100%;height:calc(100vh - 90px);}

/*マウスオン時の設定。
マウスオンでスライドがストップするので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.mainimg:hover {
	opacity: 1;	/*透明度なしに変更。色が80%出た状態。*/
}

@keyframes mainimg {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); /* 拡大率 */
  }
}

@keyframes zoomNone {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1); /* 拡大率 */
  }
}



.mainimg .add-animation {
	animation: zoomUp 10s linear 0s normal both;
}

.slick-slide .s-right-text {
 
}

.slick-active .s-right-text p{
  animation: slideFromRight 1.5s ease 0s 1 normal both;
}

.slick-active .s-right-text p:nth-child(1){
  animation-delay: 0.0s;
}
.slick-active .s-right-text p:nth-child(2){
  animation-delay: 1.3s;
}

.slick-active .s-right-text p:nth-child(3){
  animation-delay: 2.0s;
}


@keyframes slideFromRight {
  0% { transform: scale( .75 );opacity: 0;text-shadow: 0px 0px 1px rgba(255,255,255,0.1); }
  100% { transform: scale( 1 );opacity: 1;text-shadow: 0px 0px 20px rgba(255,255,255,0.0); }
}

.slide-animation{
    animation: fadezoom 10s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

/*丸いページナビボタン全体を囲むブロック*/
.slick-dots {
	text-align: center;
	width: 100%;
	margin:0;
	line-height: 1;
	position: absolute;
	bottom: 30px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
.slick-dots li button {
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 10px;			/*ボタンの幅*/
	height: 10px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #AAA;		/*背景色。白。*/
	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
	background: #FFF;	/*色*/
}

.mainimg2 img{width: 100%;height:auto; animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1);}
@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #171C61 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.large {font-size: 2rem;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}

/*　検索フォームの設定　*/

header search {
	font-size: 18px;
	text-align: center;
	font-style: normal;
	letter-spacing: 0.1em;
	line-height: 1;
	color: #f28900;
	font-weight: bold;
}

.img-wrap {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}


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


.img-wrap0 {
  overflow: hidden;
  position: relative;
}

.img-wrap0::before {
  animation: img-wrap0 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #DDD;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap0 {
  100% {
    transform: translateY(100%);
  }
}



.img-wrap1 {
  overflow: hidden;
  position: relative;
}

.img-wrap1::before {
  animation: img-wrap1 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap1 {
  100% {
    transform: translateX(100%);
  }
}

.img-wrap2 {
  overflow: hidden;
  position: relative;
}

.img-wrap2::before {
  animation: img-wrap2 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ededed;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap2 {
  100% {
    transform: translateX(-100%);
  }
}


.img-wrap3 {
  overflow: hidden;
  position: relative;
}

.img-wrap3::before {
  animation: img-wrap3 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap3 {
  100% {
    transform: translateY(-100%);
  }
}

.img-wrap4 {
  overflow: hidden;
  position: relative;
}

.img-wrap4::before {
  animation: img-wrap4 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.img-wrap4_1 {
  overflow: hidden;
  position: relative;
}

.img-wrap4_1::before {
  animation: img-wrap4 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ededed;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap4 {
  100% {
    transform: translateY(100%);
  }
}

.anim-box {
  animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}





.b{font-weight:bold;}
.red{color: #d80000;}
.fs12{font-size:0.8em;}
.fs14{font-size: 0.9rem;}
.fs16{font-size: 1.1rem;}
.fs17{font-size: 1.2rem;}
.fs18{font-size: 1.3rem;}
.fs20{font-size: 1.5rem;}
.fs22{font-size: 1.6rem;}
.blue{color: #0904fc;}
.kon{color: #171C61;}
.gray{color:#333333;}
.green{color: #157a04;}
    .fuchidori {
      text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                  0px 1px 0 #FFF,  0-1px 0 #FFF,
                  -1px 0 0 #FFF, 1px 0 0 #FFF;
    }

.pd_l10{
	padding-left:10px;
	}
.pd_r10{
	padding-right:10px;
	}
.bg_white{
	background-color:#FFF;
	}

.fl_left{
  float:left;
}
.fl_right{
  float: right;
}

.fl_cl{
  clear: both;
}
.center{
  text-align: center;
}

.wd47{
	width:47%
	}
.wrap{
	width:100%;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;
}

.mini-text{font-size:12px;}/*文字の大きさ*/



ul.bottom-menu {
    position: fixed ;
    left:0;
    bottom:0;
    width: 100%;
    height:60px;/*アイコン枠の高さ*/
    margin:0;
    padding:0;
    background-color:#171C61;/*背景色*/    
    z-index:30;border-top:1px solid #FFF;
    padding-bottom:env(safe-area-inset-bottom);
}

ul.bottom-menu li {
    float:left;height:60px;
    width:25%;/*メニューアイコンを5つ並べる*/
    background-color:#171C61;/*背景色*/
    list-style-type:none;
    text-align:center;border-right:solid 1px #FFF;
    font-size:22px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#FFF;/*アイコンと文字の色*/
    padding-top:10px;height:60px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    background:#d59938;/*マウスオーバー時の色*/}

.bottom-menu i{margin-bottom:5px;}

ul.bottom-menu li:last-child{border-right:none;}

@media screen and (max-width:1600px) {
main #contents{max-width: 95%;margin: 0 auto;}

main #contents_inner{max-width: 95%;margin: 0 auto;}
}

@media screen and (max-width:1215px) {
.pickup .list p{
	font-size:18px;}
.br-pc{
	display:none;}
}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以下の追加指定
---------------------------------------------------------------------------*/

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

main ul{
	margin-left:0px;}

main ul li {
	padding-top:8px;
	padding-bottom:8px;
	border-bottom:solid 1px #CCCCCC;
	text-decoration: none;
	display: block;text-indent:14px;padding-left: 10px;

}
.list h4 {font-size:18px;}
.list p {font-size:18px;}
.pickup,.pickup2 {
	padding: 20px;		/*ボックス内の余白*/
}

.fl_right2{
  float: none;
}

.fs20{
	font-size:18px;}

#container {	
    padding-bottom: 275px;/*←footerの高さ*/}
}

@media screen and (max-width:799px) {
#container{
    padding-bottom: 210px;/*←footerの高さ*/}
main #contents{max-width: 100%;}

main #contents_inner{max-width: 100%;}

header{
	flex-direction: row;			/*子要素を横並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	position:fixed;height:85px;padding-top:7px;
	z-index:11;width:100%;top:0;background: rgba(255,255,255,1.0);
}
.list p {font-size:18px;}
.mainimg{margin-top:85px;}.mainimg2{margin-top:85px;}
#mainimg3{margin-top:85px;}
#footermenu {
    bottom: 105px; /*下に固定*/
    }
    
.pickupb{bottom:60px;}  
.pickupb2{bottom:110px;width:400px;left: 50%;font-size:16px;
transform: translateX(-50%);}  
.door_phone_div{width:48%;}
.taiyoukou_div{width:48%;}
.taiyoukou_img{
line-height:1;width:100%;height:auto;}


    
#container {	
    padding-bottom: 250px;/*←footerの高さ*/}
    }
    
@media screen and (max-width:700px) { 
.pickupb{
position: fixed;    
    z-index: 98;
    width:500px;
}

.close-button {
  position: absolute;  
  left: -35px;
  font-size: 25px;
}
}

@media screen and (max-width:600px) {
#menubar-s {	
	width:100%;
}
#footermenu {
    bottom: 105px; /*下に固定*/
    }
#container {	
    padding-bottom: 250px;/*←footerの高さ*/}
    
    
  }


@media screen and (max-width:600px) {
.list h4 {font-size:18px;}

}
@media screen and (max-width:550px) {
.pickupb{
position: fixed;    
    z-index: 98;
    width:400px;
}

.pickupb2{bottom:110px;width:400px;}  
.door_phone_div{width:48%;}
.taiyoukou_div{width:48%;}
.taiyoukou_img{
line-height:1;width:100%;height:auto;}


}

@media screen and (max-width:510px) {
#footermenu {
	background: #171C61;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 0.7rem;
	padding: 10px 25px;	/*上下、左右*/
	display: flex;		/*flexボックスを使う指定*/
	justify-content: space-evenly;	/*並びかたの種類の指定*/	
	width:100%;
	position: absolute;/*←絶対位置*/
    bottom: 100px; /*下に固定*/
}
footer{font-size:12px;}
.list p {font-size:16px;}
#container {	
    padding-bottom: 250px;/*←footerの高さ*/}

header #logo {
		width: auto;	/*画像の幅*/
		margin-left: 10px;	/*左右中央に配置する*/
	}
	
header{height:85px;padding-top:4px;}
.mainimg{margin-top:85px;}.mainimg2{margin-top:85px;}
#mainimg3{margin-top:85px;}

#menubar_hdr {
	display: block;
	position: fixed;z-index: 100;	
	top: 0px;		/*上からの配置場所*/
	right: 10px;	/*左からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	background: #171C61 url(../images/icon_menu2.png) no-repeat center top/50px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}

/*小さな端末用のメニューが開いた段階の３本バーの設定。×印が出ている状態の設定。*/
#menubar_hdr.close {
	background: #171C61 url(../images/icon_menu4.png) no-repeat center bottom/50px;	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

.close-button {
  position: absolute;  
  left: -30px;
  font-size: 25px;
}
.circle {
width:40px;
height:40px;
left:-20px;
}

}

/*---------------------------------------------------------------------------
ここから下は画面幅479px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:479px) {
	.sns_bt_wrap{
	text-align: center;}

/*mainブロックの設定*/
main {
	padding: 20px 20px 20px 20px;	/*上、右、下、左*/ 

}

.list p {font-size:16px;}

.mainimg2 {
	position: relative;
	margin-bottom:-40px;
} 
#mainimg3 {
	position: relative;
	margin-bottom:-40px;
}

.pickupb{
position: fixed;
    z-index: 98;
    width:300px;
}

.pickupb2{
position: fixed;   /* または absolute */
  left: 50%;font-size:15px;
  transform: translateX(-50%);
}

.taiyoukou_img{
width:95%;height:auto;margin: 125px auto 0;transform: translateX(-3px);}

}

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

.fl_left{
  float:none;
}
.fl_right{
  float: none;
}

.fs20{
	font-size:16px;
	}

.fs18{
	font-size:14px;
	}

.pickup,.pickup2 {
	padding: 10px;}

/*ボックス*/
.pickup .list{
	width: 98%;
	height: auto;		/*画像の高さ*/
}




.list-container .list{
	width: 98%;
	height: auto;		/*画像の高さ*/
  padding: 8px;
}

.list-container .list2{
	width: 98%;
	height: auto;		/*画像の高さ*/
  padding: 2px;
}

main .pankuzu{
  font-size:12px;
  font-weight: bold;
  background: #EDEDED;
  border-radius: 5px;
  padding: 5px 0 5px 15px;/*上、右、下、左*/
}

#container{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 95px;/*←footerの高さ*/
    box-sizing: border-box;}

footer{
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

#footermenu{
  display:none;
}

footer small {font-size: 1rem;line-height:1.5;}

.br-sp {display: block; }
.pickup .list p{font-size:16px;}
	
main h2{
line-height: 1.5;
font-size: 1.1rem;}

main h3{
line-height: 1.5;
font-size: 1em;
padding-left:8px;padding-top:5px;padding-bottom:5px;margin-bottom:10px;
}

main ul{
	margin-left: : 0;
}

.sns_bt_wrap{
	margin-top: 10px;
text-align: center;
}
header botan{display: none;}


/*　※注意！　下の閉じカッコ　}　は削除しないで下さい。　*/

}
@media screen and (max-width:799px) {
  .open-btn1{display: none;
}

/*mainブロックの設定*/
main {
	padding: 40px 20px 20px 20px;	/*上、右、下、左*/ 

}

.fl_left{
  float:none;
}
.fl_right{
  float: none;
}
main h2{font-size:1.3rem;}
main p{font-size: 1rem;}
.br-pc{
	 display: none;
	}
.mg_b10{
		margin-bottom:10px;
		}
footer{margin-bottom:45px;}
footer small{font-size:14px;}
}
@media screen and (max-width:600px) {
.slick-dots {	
	position: absolute;
	bottom: 20px;	/*下からの配置場所指定*/
}
}

@media screen and (max-width:480px) {
.sp-none{
	display:none;}

main h2 {
	padding: 5px;			/*ボックス内の余白*/
	margin-bottom: 10px;}
	
.pickupb2{width:80%;}

}
@media screen and (max-width:399px) {
#container {	
    padding-bottom: 120px;/*←footerの高さ*/}
    
.close-button {
  position: absolute;  
  left: -28px;
  font-size: 18px;
}
main h1{font-size:24px;line-height:1.4;}
}
@media screen and (max-width:380px) {
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;z-index: 100;	
	top: 0px;		/*上からの配置場所*/
	right: 10px;	/*左からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	background: #171C61 url(../images/icon_menu2.png) no-repeat center top/50px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}

/*小さな端末用のメニューが開いた段階の３本バーの設定。×印が出ている状態の設定。*/
#menubar_hdr.close {
	background: #171C61 url(../images/icon_menu4.png) no-repeat center bottom/50px;	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

.mini-text{font-size:12px;}/*文字の大きさ*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅345px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:345px) {
.mini-text{font-size:10px;}/*文字の大きさ*/
  .br-sp2 {display: block; }
  .anshin ul li{text-align: center;} 
  
  .sp-none{
	display:none;}
main p{
	font-size:0.8em;
	}
ol li{font-size:0.8em;}
ul li{font-size:0.8em;}
dt,dd{font-size:0.8em;}
main h2{font-size:1em;}
main h3{font-size:1em;}
main h4{font-size:0.9em;}
main .full2 .anshin h2{font-size:1em;}
header #logo {
	width:75%;height:auto;
}

.pickupb{
position: fixed;
    z-index: 98;
    width:280px;
}

.pickupb2{
    width:280px;
    font-size:16px;
}

header{height:80px;padding-top:2px;margin-top:0;}
.fs16{font-size:0.9em;}
.pickup,.pickup2 {
	padding: 5px;}
.mainimg{width:100%;margin:0 auto;margin-top:80px;}.mainimg2{margin-top:80px;}
#mainimg3{margin-top:80px;}
header #logo{padding-top:0;margin-top:0;}
section + section {
	padding-top: 20px;	/*sectionの間に空けるスペース*/
}
}
@media screen and (max-width:300px) {
.mini-text{font-size:10px;}/*文字の大きさ*/
.pickupb2{
    width:90%;margin:0 auto;
}

}
@media screen and (max-width:290px) {
.mini-text{font-size:9px;}/*文字の大きさ*/
}
/*---------------------------------------------------------------------------
ここから下は画面幅480px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:480px) {


/*ボックス内の画像*/
.pickup .list img {
	width: 100%;
	height: auto;		/*画像の高さ*/
}
.mainimg2 {
	margin-bottom:-40px;
}


.br-pc{
	 display: none;
	}
.sns_bt_wrap{
	margin-top: 10px;
text-align: center;}
/*　※注意！　下の閉じカッコ　}　は480px以上の設定に必要なので、削除しないで下さい。　*/
header botan{display: none;}

header #logo {
	width: auto;	/*画像の幅*/
	margin-left: 10px;		/*中央から左に戻る為の設定*/
}
}


/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {

.mainimg2 {
	margin-bottom:-40px;
}
#mainimg3 {
	margin-bottom:-40px;
}

/*ボックス内の画像*/
.pickup .list img {
	width: 100%;
	height: auto;		/*画像の高さ*/
}
main ul li{
  font-size: 1em;
}
.br-pc{
	 display: none;
	}



/*　※注意！　下の閉じカッコ　}　は600px以上の設定に必要なので、削除しないで下さい。。　*/

}


@media screen and (min-width:700px) {

.br-tab1{
	display:none;
	}
}

/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {


/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 16px;	/*基準となるフォントサイズの上書き*/
}

/*section全般の設定*/
section + section {
	padding-top: 20px;	/*sectionの間に空けるスペース*/
}

/*header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/
header{
	flex-direction: row;			/*子要素を横並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	padding: 20px;					/*ボックス内の余白*/
	position:fixed;
	z-index:11;width:100%;top:0;
}

header{
	background: #FFF;padding-top:6px;height:85px;
	}

header botan{
  display: block;
}

.bottom-menu{display:none; }

/*logo画像*/
header #logo {
	width: auto;	/*画像の幅*/
	margin: 0;		/*中央から左に戻る為の設定*/
}

.br-pc{
	 display: none;
	}

.sns_bt_wrap{
	margin-top: 10px;
text-align: center;}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: none;	/*非表示にする*/
}

/*大きな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#menubar {
	display:none;	/*表示させない*/
  clear: both;
  background:-webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#FFF));
    background:-webkit-linear-gradient(top, #EDEDED, #FFF);
    background:-moz-linear-gradient(top, #EDEDED, #FFF);
    background:-o-linear-gradient(top, #EDEDED, #FFF);
    background:linear-gradient(#EDEDED, #FFF);
    position:fixed;z-index:10;width:100%;top:100px;
}
#menubar_hdr {
	display: block;}
.mainimg {
	position: relative;
	padding: 0 !important;margin-top:85px;
}

.open-btn1{display:none;}

.mainimg2 {
	position: relative;
	padding: 0 !important;margin-top:85px;margin-bottom:-40px;
}
#mainimg3 {
	position: relative;
	padding: 0 !important;margin-top:85px;margin-bottom:-40px;
}

/*==矢印の設定*/
#menubar ul {
  list-style: none;
  padding:0;margin: 0;
  border-top: 1px solid #EDEDED;		/*上の線の幅、線種、色*/
	border-bottom: 1px solid #FFFFFF;
}

#menubar ul li ul{
  border-top:none;
}

/*リンクテキスト*/
#menubar li a {
	text-decoration: none;
	display: block;
	color: #171C61;	/*文字色*/
	padding: 12px 0px 17px 0px;	/*上、右、下、左への余白*/
  font-weight: bold;
}
/*アイコン画像（アイコンにはFont Awesomeを使用）*/
#menubar i {
/*	display: block;	改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
	padding-right: 6px;	/*アイコンの下に空ける余白*/
	color: #171C61;			/*文字色＝アイコン色になります。*/
}

/*アイコンのマウスオン時*/
#menubar li:hover i {
	transition: 0.3s;		/*アニメーション時間。0.3秒。*/
	transform: scale(1.15);	/*サイズを1.15倍にする。*/
}

/*spanタグ（装飾用のテキスト）*/
#menubar span {
	color:#043f7c;
	display: block;
	font-size: 0.6rem;
	opacity: 0.6;		/*透明度。0.6は60%色が出た状態。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる指定*/
}

#menubar .menu {
  display: flex;
  position: relative;
}
#menubar .menu .menu_list {
  width: 33.33%;
}
#menubar .menu .menu_list > a {
  display: block;
  padding: 10px;
  text-align: center;
  transition: .3s;
}
#menubar .menu .menu_list > a:hover {
  color: #043f7c;
  background: #EDEDED;
}

/* ②メガメニューのスタイル */
#menubar .menu_contents {
  background: #EDEDED;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 98;
}

#menubar .menu_contents li {
  width: 100%;
}

#menubar .menu_contents .menu_cont{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
}

#menubar .menu_contents .menu_cont ul{
  border: none;
  overflow:hidden;
}

#menubar .menu_contents li .fl_left{
  width: 100%;
}

#menubar .menu_contents li a {
  color: #171C61; float: left;
  display: block;
  width: 250px;
  padding: 5px;
  font-size: 14px;
}


  

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	padding: 40px 20px 20px 20px;	/*上、右、下、左*/ 

}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	font-size: 0.9rem;
	padding: 20px 55px;	/*上下、左右へのボックス内の余白*/
}
/*フッター右側の装飾画像*/
#footermenu .kazari {
	display: block;		/*非表示から表示に。*/
	max-width: 200px;	/*画像の最大幅。これ以上大きくならないように。*/
}

.search {
  /* アイテム位置の起点にする */
  position: relative;
  height: 50px;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 20%;		/*幅*/
}

/*よく頂く質問
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
	text-indent: -58px;				/*テキストのインデントの調整*/
	padding: 20px 20px 20px 58px;	/*余白の調整*/
}

/*listブロック設定
---------------------------------------------------------------------------*/
/*１個あたりのボックス*/
.list-container .list {
	width: 30%;				/*ボックスの幅*/
  padding: 10px;
}

/*btnの設定
---------------------------------------------------------------------------*/
/*ボタン*/
.btn a {
	padding: 5px 20px;		/*上下、左右へのボタン内の余白*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn i {
	padding-left: 20px;		/*アイコンとテキストの間に空ける余白*/
}

/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	width: 80%;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	height: 500px !important;
}

/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup,.pickup2 {
	padding: 20px;		/*ボックス内の余白*/
}

/*１個あたりのボックス*/
.pickup .slick-slide,
.pickup2 .slick-slide {
	margin: 10px !important;
}

/*ボックス内の画像*/
.pickup .list img,
.pickup2 .list img {
	height: auto;			/*画像の高さ*/
}
/*その他
---------------------------------------------------------------------------*/
.ws {width: 45%;display: inline-block;}

#menubar li{font-size:0.8rem;}

/*１個あたりのボックス*/
.list-container .list {
  width: 32%;				/*ボックスの幅*/
}

/*　ヘッダーボタンの設定　*/

header botan ul li{
float:none;
  list-style:none;
 width:85px;
 padding:10px;
 margin-bottom:5px;
 background: rgba(255,255,255,0.8);} 
 
.ebi {
    position: fixed;
    right: -200px;    
    bottom: 50%;
    z-index: 98;
}



/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、うっかり削除しないように。　*/

}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

/*ボックス内の画像*/
.pickup .list img,
.pickup2 .list2 img {
	height: auto;		/*画像の高さ*/
}
#menubar li{font-size:1rem;}


header{
  background:#FFF;
}

/*logo画像*/
header #logo {
	width: auto;	/*画像の幅*/
	margin: 0px;		/*中央から左に戻る為の設定*/
}

#footermenu {
	font-size: 1rem;}

  #menubar .menu_contents .menu_cont{
    width: 90%;}

#menubar .menu_contents li a {
    display: block;
    width: 260px;padding:5px 5px 0 0;/*上右下左*/
    font-size:15px;
  }
.both_margin5{margin-left:10px;margin-right:10px;}

.mainimg2 {
	margin-bottom:-40px;
}
#mainimg3 {
	margin-bottom:-40px;
}
/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/

}

/*---------------------------------------------------------------------------
ここから下は画面幅1200px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1200px) {

main{
	padding:50px;
	}

/*ボックス内の画像*/
.pickup .list img{
	height: 230px;		/*画像の高さ*/
}

.pickup2 .list2 img{
height: 190px;
}

/*ボックス内の画像*/
.list-container .list img {
	height: 250px;		/*画像の高さ*/
}

#menubar_hdr {
	display: none;}

#menubar .Menu li ul.subMenu{
	position:absolute;
	z-index:10;
	top:58px;display:none;
}

.slick-prev2::after,
.slick-next2::after {
	font-size: 35px;	/*三角のサイズ*/
	border-radius: 35px;
	padding: 0px 26px;	/*上下  左右*/
}

#menubar .menu_contents li a {
  display: block;
  width: 250px;padding:10px 5px 0 0;/*上右下左*/  
}
.mainimg {
	position: relative;
	padding: 0 !important;margin-top:100px;
}

.open-btn1{display:none;}

.mainimg2 {
	position: relative;
	padding: 0 !important;margin-top:100px;margin-bottom:-40px;
}
#mainimg3 {
	position: relative;
	padding: 0 !important;margin-top:100px;margin-bottom:-40px;
}

header{
   background: none;display: flex;
   justify-content: center;
   background: #FFF;height:90px;padding:10px;
   position:fixed;z-index:11;top:0;width:100%;
   }
   
.mainimg {
	position: relative;
	padding: 0 !important;margin-top:90px;
}

.mainimg2 {
	position: relative;
	padding: 0 !important;margin-top:90px;margin-bottom:-50px;
}
#mainimg3 {
	position: relative;
	padding: 0 !important;margin-top:90px;margin-bottom:-50px;
}

search{display:none;}
search2{display:block;}
.open-btn1{display:block;}
 #menubar {
   display:none;}

#menubar-b {
   display: block;	/*表示させる*/
   padding-left: 25px;
 }

 /*==矢印の設定*/
 #menubar-b ul {
   list-style: none;
   padding:0;margin: 0;
 }

 #menubar-b ul li ul{
   border-top:none;
 }

 /*リンクテキスト*/
#menubar-b ul li a {
   text-decoration: none;
   font-weight:bold;
   display: inline-block;
   width:170px;font-size:14px;
   color: #171C61;	/*文字色*/
   padding:0 0 10px 0 ;	/*上、右、下、左への余白*/
 }

#menubar-b .menu_contents .blk a{color: #3c7834;	/*文字色*/width:39%;}
#menubar-b .menu_contents .blk i{color: #3c7834;}
#menubar-b .menu_contents .kaim a{width:22%;}
#menubar-b .menu_contents .kaim2 a{width:39%;}
#menubar-b .menu_contents .kaim3 a{width:30%;}


 /*アイコン画像（アイコンにはFont Awesomeを使用）*/
 #menubar-b i {
 /*	display: block;	改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
   padding-right: 6px;	/*アイコンの下に空ける余白*/
   color: #171C61;			/*文字色＝アイコン色になります。*/
 }

 /*アイコンのマウスオン時*/
 #menubar-b li:hover i {
   transition: 0.3s;		/*アニメーション時間。0.3秒。*/
   transform: scale(1.15);	/*サイズを1.15倍にする。*/
 }

 /*spanタグ（装飾用のテキスト）*/
 #menubar-b span {
   color:#043f7c;
   display: block;
   font-size: 0.6rem;
   opacity: 0.6;		/*透明度。0.6は60%色が出た状態。*/
   letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる指定*/
 }

 #menubar-b .menu {
   display: flex;
   position: relative;width: 100%;

 }
 #menubar-b .menu .menu_list {
   width: 33.33%;
 }
 #menubar-b .menu .menu_list > a {
   display: block;
   padding: 10px;
   text-align: center;
   transition: .3s;
 }
 #menubar-b .menu .menu_list > a:hover {
   color: #171C61;
   background: #EDEDED;
 }

 /* ②メガメニューのスタイル */
 #menubar-b .menu_contents {
   background: #EDEDED;
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 100;
 }

 #menubar-b .menu_contents li {
   width: 100%;
 }

 #menubar-b .menu_contents{
   margin-left: auto;
   margin-right: auto;
   padding-top: 15px;
 }

 #menubar-b .menu_contents .menu_cont ul{
   border: none;overflow:hidden;
 }


 #menubar-b .menu_contents li .fl_left{
   width: 100%;font-weight:normal;
 }

 #menubar-b .menu_contents li a {
   color: #171C61; float: left;
   display: inline-block;
   width: 33%;height:40px;
   padding: 5px;
   font-size: 15px;
   text-align: left;
 }

 #menubar-b .mc_image{
   float:left;position:relative;
   margin-right: 10px;
 padding:0 10px;}

 #menubar-b .mc_image img{/*上右下左*/
    border-radius:5px;}
 
 #menubar-b .mc_image a:hover{/*上右下左*/
    opacity:0.7;}
    
 #menubar-b .mc_caption{ position:absolute;bottom:10px;color:#FFF;left:0;right:0;margin:0 auto;font-weight:500;background:rgba(23,28,97,0.6);width:calc(100% - 20px);border-radius: 0 0 5px 5px;}
 #menubar-b .mc_caption2{ position:absolute;bottom:10px;color:#171C61;left:0;right:0;margin:0 auto;font-weight:bold;}
 
 #menubar-b .tnaka3{
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin:0 auto;}

 #menubar-b .tnaka3 .tnaka2{width:28%;}
 #menubar-b .tnaka3 .tnaka2 ul li a{display:block;float:none;width:250px;}

 #menubar-b .tnaka3 .tnaka{width:34%;}
 #menubar-b .tnaka3 .tnaka ul li a{display:block;float:none;width:250px;}
 
 #menubar-b .tnaka3 .tnaka0{width:34%;}
 #menubar-b .tnaka3 .tnaka0 ul li a{display:block;float:none;width:250px;color:#3c7834;}
 #menubar-b .tnaka3 .tnaka0 ul li a i{color:#3c7834;}

botan{position: fixed;bottom:50%;z-index:100;
}

/*　ヘッダーボタンの設定　*/

header botan ul li{
float:none;
  list-style:none;
 width:85px;
 padding:10px;
 margin-bottom:5px;
 background: rgba(255,255,255,0.8);} 
 
.ebi {
    position: fixed;
    right: -200px;    
    bottom: 50%;
    z-index: 100;
}

#menubar-b .menu_contents .blk a{color: #3c7834;	/*文字色*/width:48%;}
#menubar-b .menu_contents .blk i{color: #3c7834;}
#menubar-b .menu_contents .kaim a{width:25%;}
#menubar-b .menu_contents .kaim2 a{width:48%;}
#menubar-b .menu_contents .kaim3 a{width:30%;}



.full_bottom{
	margin-bottom:-50px;
	}

/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/

}

@media screen and (min-width:1400px) {
main {
	padding: 20px 20px 20px 20px;	/*上、右、下、左*/ 

}

.PmgT{
	margin-top:30px;
	}

.mainimg2 {
	position: relative;
	margin-bottom:-20px;
}
#mainimg3 {
	position: relative;
	margin-bottom:-20px;
}

main .pankuzu{  
  padding: 5px 0 5px 90px;/*上、右、下、左*/
}

#menubar-b ul li a {font-size:16px;width:200px;}

.br-pc{
	display:block;
	}
.full_bottom{
	margin-bottom:-20px;
	}
}

@media screen and (min-width:1600px) {
main {
	padding: 20px 20px 20px 20px;	/*上、右、下、左*/ 
}

.mainimg2 {
	position: relative;
	margin-bottom:-20px;
}
#mainimg3 {
	position: relative;
	margin-bottom:-20px;
}
/*ボックス内の画像*/
.pickup .list img,
.pickup2 .list2 img {
	height: 250px;		/*画像の高さ*/
}

/*ボックス内の画像*/

.list-container .list h4{
  font-size: 20px;
}


#menubar .menu_contents li a {
  display: block;
  width: 320px;padding:10px 5px 0 0;/*上右下左*/
  font-size:16px;
}
.br-pc{
	display:block;
	}

}