@charset "utf-8";


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


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--primary-color: #333;		/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;	/*上のprimary-colorの対となる色*/
	
	--space-large: 8vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
	--space-small: 2vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 13px;	/*基準フォントサイズ*/
	height: 100%;
	font-weight: 200;
}

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

	html, body {
		font-size: 14px;
	}

	}/*追加指定ここまで*/

	/*画面幅1600px以上の追加指定*/
	@media screen and (min-width:1600px) {

	html, body {
		font-size: 1vw;
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	
	color: var(--primary-color);		
	line-height: 2;	
}

/*リセット他*/
figure {margin: 0;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}
section li {margin-left: 1rem;}

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

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

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

/*iframeタグ*/
iframe {width: 100%;}

/*input*/
input {font-size: 1rem;}

/*section*/
section {
	overflow-x: hidden;
	padding: var(--space-large);	
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	text-decoration: none;	
	opacity: 0.9;			
}

/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	flex-shrink: 0;
	display: flex;					
	align-items: center;			
	justify-content: space-between;
	height: 60px;
}

/*ヘッダー左上の円形のテキストアニメーション*/
header .animation-text {
	position: absolute;
	width: 10vw;	/*画像の幅*/
	left: -2vw;		/*右からの距離*/
	top: -5vw;		/*上からの距離*/
}

body:not(.home) header {
	margin-bottom: var(--space-large);
}

/*左上の社名*/
#logo {
	margin: 0;
	padding: 0;
	width: 20vw;	
	position: relative;
	z-index: 1;
	top: 4.5vw;	
	left: 5.5vw;
	font-weight: 200;
}

/*レスポンシブ対応*/
@media screen and (max-width:900px) {
    /*円形のテキストアニメーション*/
	header .animation-text {  
	    position: absolute;
	    width: 20vw;	
	    left: -5vw;		
	    top: -10vw;		
    }
 
	/*左上の社名*/
    #logo {	
		width: 20vw;
		top: 8vw;	
		left: 3.5vw;	
		font-size: 1rem;
	}
}

/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
header nav ul {display: none;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin-right: 10vw;	/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;		/*横並び*/
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;
		text-decoration: none;
		font-size: 1.2rem;		
		padding: 0.5rem 1rem;	
	}
	
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem;	
	}

	}/*追加設定ここまで*/


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	background: rgba(255,255,255,0.8);	
	padding: 0.3em 1em;				
	margin-top: 4px;				
	border: 1px solid var(--primary-color);	
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 101;
	right: 0px;top: 0px;
	max-width: 800px;
	height: 100%;
	padding: 90px 10vw 50px;		/*ブロック内の余白*/
	background: var(--primary-color);	
	color: var(--primary-inverse-color);	
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*子メニューの設定*/
.small-screen #menubar ul ul {
	margin: 1rem;
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	border: 1px solid #fff;	
	margin: 1rem 0;			
	border-radius: 5px;	
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 1rem;	
    text-align: center;
}


/*ハンバーガーアイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 102;
	cursor: pointer;
	top: 0;	
	right: calc(var(--space-small) + 5px);		/*右からの配置場所*/
	width: 60px;		/*幅*/
	height: 60px;		/*高さ。基本的にheaderの高さ*/
	padding: 20px 0;	/*2本のバーの上下間のバランス調整*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	mix-blend-mode: exclusion;
}

/*マウスオン時だけmix-blend-modeを無効に*/
#menubar_hdr.ham {
	mix-blend-mode: normal;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 1.5px;		
	background-color: #fff;	
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div {
	position: relative;width: 100%;height: 100%;
	display: flex;flex-direction: column;justify-content: space-between;
}
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*画面上のメニューバー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
.nav-menu {display: none;}
.drop-menu {display: none;}

/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
.nav-menu {
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 0px;		
	right: calc(var(--space-small) + 10px);	
	width: auto;		
	height: 60px;		
	display: flex;
	justify-content:center;
	align-items: center;
	transition: transform 0.5s;
	mix-blend-mode: normal;
}
/*以下変更不要*/
.nav-menu  div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
nav-menu  div span:nth-child(1) {top: 0;}
nav-menu  div span:nth-child(2) {bottom: 0;}
nav-menu .ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
nav-menu .ham div span:nth-child(2) {top: 50%;transform: translateY(-50%) rotate(-45deg);}
/*900px未満では非表示*/
nav-menu nav ul {display: none;}
		
.menu-list {
  display: flex;
  justify-content: center; 
  margin-right: 10vw;	
}
.menu-item {
  display: block;
  text-decoration: none;
  font-size: 1.1rem;		
  padding: 0rem 0rem;	
  background: #FFF;
  border-radius: 20px 20px 20px 20px;	
  margin-right: 5px;
}

.menu-item:last-child {
  border-right: 1px solid #fff; 
}
		
/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  visibility: visible; /* 下層メニューを表示 */
}
.menu-item a {
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width:100px;
}
/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-list {
  position: absolute;
  top: 100%;
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
  border-radius: 20px 20px 20px 20px;	
}
.drop-menu-item a {
  align-items: center;
  display: flex;
  height: 20px;
  text-decoration: none; /* リンクの下線を非表示 */
  width:100px;
  background: #FFF;
  border-radius: 20px 20px 20px 20px;	
  margin-top: 10px;
}


/*画面右側にあるオンライン相談ボタン
---------------------------------------------------------------------------*/
#btn-special {padding: 0;margin: 0;}
#btn-special a {
	display: block;text-decoration: none;
	position: fixed;z-index: 100;
	right: 0px;
	top: 20vw;	
	writing-mode: vertical-rl;
	text-orientation: upright;
	background: linear-gradient(#ec9347, #d36b12);
	color: #f6ebd2;	
	padding: 2rem 1rem;	/*ボタン内の余白*/
	border-radius: 10px 0px 0px 10px;	/*角を丸く*/
	letter-spacing: 0.1em;	/*文字間隔*/
}

/*アイコンの下の余白*/
#btn-special i {padding-bottom: 0.5rem;}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	overflow-x: hidden;
	padding: 6vw 0 0;	/*上、左右、下への余白*/
}

/*h2見出し（共通）*/
main h2 {
	margin: 0;padding: 0;
	font-size: 3rem;	
	font-weight: 200;
	margin-bottom: 5vw;		
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	letter-spacing: 0.1em;
}
main h2.c {
	align-items: center;	/*見出しをセンタリングする場合*/
}
/*h2見出しのサブテキスト（sub-text）共通*/
main h2 span.sub-text {
	display: inline-block;
	border-top: 1px solid var(--primary-color);
	font-size: 0.9rem;		
	opacity: 0.6;			/*透明度*/
	letter-spacing: 0.1rem;	
	padding-top: 2rem;		
}
/*見出し上のラインを消すスタイル*/
main h2.no-line span.sub-text {
	border: none;
	padding-top: 0;
}

/*h3見出し（共通）*/
main h3 {
	font-weight: 200;
	font-size: 1.4rem;	/*文字サイズ140%*/
}
/*h2内の小文字部分*/
main h2 .hosoku {
	display: block;
	font-weight: 200;
	font-size: 0.3em;	/*親要素の40%のサイズに*/
}

/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}
/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/*アニメーションを適用するクラス*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.25s linear both;
}

/*Google Map
---------------------------------------------------------------------------*/
.iframe-box {
	width: 40%;
	height: 0;
	padding-top: 30%;	
	position: relative;
	overflow: hidden;
	 border-radius: 20px 20px 20px 20px;	/*角を丸く*/
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
/*画面幅600px以下の追加指定*/
 @media screen and (max-width:600px) {
    .iframe-box {
	    width: 80%;
	    margin-top: 2rem;
    }	 
}

/*下部の企業情報
---------------------------------------------------------------------------*/
.company-info a {color: inherit;text-decoration: none;}
.company-info small {font-size: 100%;}

.company-info {
	background: var(--primary-color);		
	color: var(--primary-inverse-color);
	font-size: 1rem;	
	padding: 5vw;	
}

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

	    .company-info {
		    display: flex;
		    justify-content: space-between;
	    }

	}

/*mapが入ったブロック*/
.company-info img {
	width: 600px;	
	text-align: center;	
}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {

	    .company-info img {
		    width: auto;	
	    }
	    .company-info img {
		    width: 80px;
	    }
	}

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

	   .company-info .text {
		    display: flex;	
		    gap: 5rem;	
	    }
	}

/*h4見出しテキスト部分*/
.company-info h4 {
	font-weight: 200;	
	font-size: 1.2rem;	
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
    clear: both;
    text-align: center;
	background: var(--primary-color);		
	color: var(--primary-inverse-color);
}
footer small {font-size: 100%;}
footer a {
	text-decoration: none;
	color: var(--primary-inverse-color);
}
footer .pr {display: block;}

/*企業情報
---------------------------------------------------------------------------*/
/*ブロック全体*/
.company {
    display: grid;	
    grid-template-columns: auto 1fr;	/*横並びの指定。項目幅は自動で、内容が入るブロックは残り幅*/
	max-width: 700px;	/*最大幅*/
	margin: 0 auto;
}

/*項目、内容（共通）*/
.company dt,.company dd {
	padding-top: 0;				/*上の余白*/
	padding-bottom: 0;			/*下の余白*/
}

/*項目*/
.company dt {
	padding-right: 4rem;			/*右の余白*/
}
/*画面幅600px以下の追加指定*/
@media screen and (max-width:600px) {
    .company {
        display: grid;	
        grid-template-columns: 200px auto;	/*横並びの指定。項目幅は自動で、内容が入るブロックは残り幅*/
	    max-width: 700px;	/*最大幅*/
	    margin: 0 auto;
    }
}

/*サービス紹介
---------------------------------------------------------------------------*/
/*ボックス全体*/
.box1 {
	overflow-x: visible;
	position: relative;
	background: #ffffff;	
	padding: var(--space-large);	
	margin-top: 5vw;	
}
.box1 a {
	color: inherit;
}
.box1 h3 {
    padding: 1rem 0;
    margin-bottom: 0.2rem;
    border-bottom: 1px dotted #b2d5de;
    font-size: 20px;
	
}
.box1 p {
	margin-left: 2vw;
	font-weight: 200;
	font-size: 15px;
}
/*ボックスの上の飛行機（大）*/
.box1 .illust1 {
	position: absolute;
	right: 15vw;
	top: 9vw;	
	width: 16vw;
	opacity: 0.2;
}

/*ボックスの上の飛行機（小）*/
.box1 .illust2 {
	position: absolute;
	right: 9vw;		
	top: 0vw;		
	width: 8vw;	
	opacity: 0.2;	
}

/*テキストボックス*/
.box1 .text {margin-bottom: 0rem;}
		
/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

	.box1 {
		display: flex;	/*横並びにする*/
		gap: 5vw;	
		border-radius: 20vw 0 20vw 0;	
	}
	
	.box1 > * {flex: 1;}

	/*ボックスの上の飛行機（大）*/
	.box1 .illust1 {
		right: 10vw;
		left: auto;		
		top: -4vw;		
		width: 7vw;	
	}

	/*ボックスの上の飛行機（小）*/
	.box1 .illust2 {
		right: 10vw;
		left: auto;		
		top: -8vw;		
		width: 3vw;		
	}

}		
/*画像の追加指定*/
.box1 .image img:nth-of-type(1) {
	width: 80%;	/*画像の幅*/
	border-radius: 1vw 1vw 1vw 1vw;
}

/*画像2の追加指定*/
.box1 .image img:nth-of-type(2) {
	width: 80%;	/*画像の幅*/
	border-radius: 1vw 1vw 1vw 1vw;
	position: absolute;
	right: 5vw;	
	top: 30vw;	
}
/*画面幅600px以下の追加指定*/
 @media screen and (max-width:600px) {
    .box1 .image img:nth-of-type(1) {display: none;}
	.box1 .image img:nth-of-type(2) {top: 0vw;}
}
		
/*list
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list {
	padding: var(--space-large);
	position: relative;
	overflow-x: hidden;
	margin-bottom: 1vw;	
}
.list img{
	width: 40;
	aspect-ratio: 4 / 3;
}
/*テキストブロック*/
.list .text {
	position: relative;z-index: 1;
	width: 80%;		
	height: 100%;
	color: #6b5038;
}

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

	/*テキストブロック*/
	.list .text {
		width: 100%;		/*幅*/
	}

	}/*追加指定ここまで*/

/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.list .text.reverse {
	margin-left: auto;
}
/*list内の価格*/
.list h5 {
	margin: 0;padding: 0;
	font-weight: bold;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 1rem;		
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 2;		/*行間*/
	color: #ff0000;
}
.list p {
	margin: 0;padding: 0;
	font-weight: nomal;	/*h要素*/
	font-size: 1.1rem;	
	line-height: 1.5;		/*行間*/
}		
.list.sumi figure img {
	opacity: 0.4;	/*ご契約済み、透明度を下げる*/
}

/*list-grid1
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-grid1 {
	display: grid;
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1 .list * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	color: #6b5038;
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


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

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}


/*ボックス１個あたり*/
.list-grid1 .list {
	padding: 1rem;			/*ボックス内の余白*/
	background: #ffffff;		/*背景色*/
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}


/*ボタン（btnと、btn-border-radius）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn a,
.btn-border-radius a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		
	background: #f49f68;	
	color: #fff !important;	
	padding: 0.5rem !important;		
	margin-top: 1rem !important;
}

/*ボタン共通（マウスオン時に少し明るくする）*/
.btn a:hover,
.btn-border-radius a:hover {
	filter: brightness(1.2);
}

/*btn-border-radiusの上書き*/
.btn-border-radius a {
	display: inline-block;
	padding: 0.5rem 2rem !important;
	border-radius: 100px;	
}
/*btn3*/
.btn3 {
	text-align: right;	
	letter-spacing: 0.1em;	
}
.btn3 a {
	display: inline-block;text-decoration: none;
	color: inherit;
	position: relative;
	padding-right: 5rem;	
}

/*btn3の矢印のアイコン設定*/
.btn3 a::after {
	content: "";
	background: url("../images/arrow1.svg") no-repeat right center / 100px;	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	display: block;
	position: absolute;
	right: 0px;
	bottom: -1rem;		/*下からの配置場所*/
	width: 50px;		/*アイコンの幅。ここを変更する場合は、上と下にあるbackgroundの100pxの数値も調整します。*/
	height: 50px;		/*アイコンの高さ*/
	border-radius: 50%;	/*円形にする指定。この１行を削除すれば正方形になります。*/
	text-align: center;
	transition: 0.3s;		/*hover時に切り替えをなめらかにする*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、色*/
}

/*btn3の矢印のマウスオン時*/
.btn3 a:hover::after {
	background-color: var(--primary-color);	
	background-position: left center;		
}

/*背景色が暗い所で使う場合*/
.btn3.white {
	color: #fff;
}
.btn3.white a::after {
	background: url("../images/arrow1_white.svg") no-repeat right center / 100px;	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	border: 1px solid #fff;	
}
.btn3.white a:hover::after {
	background-color: #fff;			
	background-position: left center;	
}

/*物件情報の背景
---------------------------------------------------------------------------*/
/*ボックス全体*/
.box2 {
	overflow-x: visible;
	position: relative;
	background: #e8eaee;	
	padding: var(--space-large);	
	margin: 0 0 10vw 0;	
}
.box2 a {
	color: inherit;
}
/*ボックス上部の大きな装飾テキスト*/
.box2 .deco-text {
	position: absolute;
	right: 5vw;
	top: -13.6vw;		/*文字とボックスの配置バランス*/
	color: #e8eaee;		/*文字色*/
	font-size: 7vw;		
	line-height: 1;
}
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.box2 {
		display: flex;	/*横並びにする*/
		gap: 5vw;		/*左右の間のスペース*/
		border-radius: 20vw 0 20vw 0;	
	}
	
	.box2 > * {flex: 1;}
}

/*物件情報の帯
---------------------------------------------------------------------------*/
.band-recommend, .band-Contracted {
	display: inline-block;
	width: 200px;		
	text-align: center;	
	position: absolute;	/*絶対配置する指定*/
	top: 0px;	/*上からの配置場所。*/
	left: 0px;	/*左からの配置場所。*/
	transform: translate(-60px, 20px) rotate(-30deg);	/*translateは移動する距離(X軸, Y軸)でrotateは回転*/
	box-shadow: 0px 3px 2px rgba(0,0,0,0.2);	/*影*/
}

/*option1(おすすめ)の追加指定。*/
.band-recommend {
	background: #ff0000;
	color: #fff;
}	

/*option2(ご契約済み)の追加指定。*/
.band-Contracted {
	background: #5b5b5b;
	color: #fff;
}	

/*物件情報の詳細ページ
---------------------------------------------------------------------------*/
/*PR*/
.bu-pr {
    position: relative;
    padding: 0rem 1rem 1rem;
    width: 50%;
    border: 2px solid #d2d2d2;
    border-radius: 10px;
	margin: 10rem auto 0 auto;
}
.bu-pr.new-badge::before {
    position: absolute;
    top: -2.05rem;
    left: 8%;
    width: auto;
    height: 15px;
    line-height: 5px;
    transform: translateX(-50%);
    border-radius: 30px 30px 0 0;
    border: 2px solid #d2d2d2;
    border-bottom: transparent;
    padding: 1rem 1rem 0 1rem;
	background-image: linear-gradient(135deg, #f49f68 65%, #efdcc6 35%);
    color: white;
    text-align: center;
    text-transform: uppercase;
	font-size: 1.3rem;
    content: 'PR';   
}
.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}
.list_test:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #f49f68;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 5px;          /* 余白指定 */
}
/*物件概要表全体*/
.bu-ta {
    display: grid;	
    grid-template-columns: auto 1fr;	/*横並びの指定。項目幅は自動で、内容が入るブロックは残り幅*/
	width: 75%;	
	margin: 0 auto ;
}
/*項目、内容（共通）*/
.bu-ta dt,.bu-ta dd {
	border-bottom: 1px solid #dedede;	/*下線の幅、線種、透過度10％*/
	padding-top: 0.5rem;				/*上の余白*/
	padding-bottom: 0.5rem;			/*下の余白*/

}
/*項目*/
.bu-ta dt {
	padding-right: 4rem;			/*右の余白*/
}
.bu-ta a {
    display: inline-block;
    color: #333;
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    background-image: linear-gradient(135deg, #b2d5de 60%, #dedede 40%);
}
/* HOMEのスタイル */
.center-container {
  display: flex;          
  justify-content: center;
  align-items: center;    
  height: 100px;  
}      
.center-container a:hover {
	color: #b2d5de;
}  

/*オンライン相談＆問い合わせ
---------------------------------------------------------------------------*/
/*ブロック全体*/
.contact {
	background: #5E5C5A;	
	color: #fff;			
	position: relative;	
	margin-top: 50vw;
}
/*h2見出し*/
.contact h2 {
	margin: 0;padding: 0;
}
/*右側の英語の飾り文字*/
.contact h2 .kazari {
	writing-mode: vertical-lr;	/*縦書き*/
	font-size: 0rem;	/*文字サイズ*/
	position: absolute;
}
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
        .contact {
	        margin-top: 0vw;
        }
	    /*右側の英語の飾り文字*/
	    .contact h2 .kazari {
		    font-size: 8vw;	/*文字サイズ*/
		    position: absolute;
		    right: 40px;
		    top: var(--space-large);
    	    color: rgba(255,255,255,0.10);	/*文字色5％表示。*/
	    }
	}

/*テキストブロック*/
	.contact .text {
		position: relative;
        width: 65%;
        margin: 3rem auto 5rem auto;
	}
	
/*追加指定ここまで*/


/*調整用スタイル
---------------------------------------------------------------------------*/
/*並べ替え*/
.order1 {
	order: 1;	/*orderは数字の小さな順番に並びます。デフォルトは0なので、それより後ろに表示させたいブロックに使います。（※flex内で使用）*/
}

.padding0 {
	padding: 0 !important;
}
.padding-bottom0 {
	padding-bottom: 0 !important;
}
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/*左右の余白*/
.space-small {
	padding-left: var(--space-small);
	padding-right: var(--space-small);
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block; border: 1px solid rgba(0,0,0,0.3);}
.wl {width: 95%;display: block; border: 1px solid rgba(0,0,0,0.3);}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%; display: inline;}
	.sh {display: none;}
	.pc {display: block;}
	}