@charset "utf-8";

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');
/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--text-color: #eee;				/*テキストカラー*/

	--primary-color: #ff9c00;		/*テンプレートのメインとなる色*/
	--primary-text-color: #eee;		/*メインカラーの上で使うテキスト色*/
	
	--global-space: 5vw;			/*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


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


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 14px;	/*基準となるフォントサイズ。*/
}

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

		html, body {
			font-size: 16px;	/*基準となるフォントサイズ。*/
		}

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


body {
	margin: 0;padding:0;
	font-family: "M PLUS Rounded 1c", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類（ゴシック）*/
	font-size: 16px;
	color: #444444;
	font-weight: 400;
	background: #fff;	/*背景色*/
	line-height: 2;		/*行間*/
}

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

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

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

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

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

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}



/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin: 0 auto;
	max-width: 2000px;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	width: 100%;
	margin: 0;
	padding: 0;
}



/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;					/*flexボックスを使う指定*/
	align-items: flex-end;
	justify-content: flex-start;
	height: 100px;					/*ヘッダーの高さ*/
	padding: 0 3vw;				/*ヘッダー内の余白。上下、左右への順番。*/
    position: absolute;
    z-index: 10;
    width: 100%;
	background-color: rgba(255,255,255,0.7);
	max-width: 2000px;
}

	/*画面幅900px以上の追加指定*/
@media screen and (min-width:1050px) {
	header {
		position: fixed;	/*スクロールしても動かないようにする指定。*/
	}
}




/*ロゴ（※画像にする場合）*/
#logo img {
	display: block;
	width: 300px;
	margin-right: 3vw;
}

.toplink{
	width: 150px;
	position: absolute;
	bottom:10px;
	right:10px;
	display: flex;
	flex-direction: row;
}	

.toplink_item{
	width: 50px;
	margin: 0;
}
.toplink_item img:a{
	width: 100%;
}
.toplink_item a img:hover{
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
	opacity: 0.8;
}
@media screen and (max-width:1150px) {
.toplink{
	position: absolute;
	bottom:0;
	top:25px;
	right:65px;
	display: flex;
	flex-direction: row;
}
}
@media screen and (max-width:480px) {
header {
	display: flex;					/*flexボックスを使う指定*/
	align-items: flex-start;
	justify-content: flex-start;
	height: 90px;					/*ヘッダーの高さ*/
	padding: 0 0;				/*ヘッダー内の余白。上下、左右への順番。*/
    z-index: 10;
    width: 100%;
	max-width: 480px;
	}
#logo img {
	display: block;
	width: 250px;
	margin: 0 20px;
}
}
@media screen and (max-width:540px) {
.toplink{
	display: none;
}
}
/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#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;}

/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;		/*横並びにする*/
	font-size: 0.85rem;	/*文字サイズ。85%。*/
	gap: 0.5rem;		/*メニュー同士の間に空けるマージン的な要素*/
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
	color: #735c49;
	display: flex;
	flex-direction: column;
}
.large-screen #menubar li img {
	width: 50px;
	margin: 0 auto;
}
.large-screen #menubar li img:hover {
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
}



/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;
	z-index: 100;
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {width: 160px;
	margin-top: 0.4rem;	/*上に空けるスペース。メニュー同士の隙間です。*/
	padding: 6px 15px;
	margin-left: -30px;
	background-color: rgba(255,255,255,0.90);
	border:1px solid #26469a;
	text-align: center;
	border-radius: 10px;
	
}
.large-screen #menubar ul ul a:hover{
	color: #26469a;
	background-color: rgba(255,255,255,1.00);
}
.large-screen #menubar ul a:hover{
	color: #26469a;
}

/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 20px;
	background: rgba(128,109,91,0.80);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 0 3rem;		/*メニュー内の余白。上下、左右へ。*/
	font-size: 1.2rem;
	background-color: rgba(255,255,255,0.90);
}

.small-screen #menubar a {
	padding: 0.5rem 1rem;	/*メニュー内の余白*/
}
.small-screen #menubar a:hover{
	color: #26469a; 
}
@media screen and (max-width:480px){
	.small-screen #menubar nav ul li {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 0 1rem;		/*メニュー内の余白。上下、左右へ。*/
	font-size: 1.2rem;
	background-color: rgba(255,255,255,0.90);
}

}
/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
	color: #735c49;
}
nav ul li img{
	width: 40px;
	margin-right: 10px;
}

/*900px以下でのみ表示させるブロック*/
#menubar .tb {
	font-weight: normal;		/*文字の太さを標準にする*/
	padding: 1rem 2rem 2rem;	/*上、左右、下へのブロック内の余白*/
}
#menubar .tb a{
	color: #fff;
}
#menubar .submenu{
	width: 100%;
	margin: 10px auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-size: 1rem;
	color: #fff;
}
#menubar .submenu_item{
	padding: 0 2rem 0 0;

}
@media screen and (min-width:700px){
	
	
#menubar .submenu{
	width: 100%;
	margin: 10px auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 1rem;
	color: #fff;
}
#menubar .submenu_item{
	padding: 0 2rem 0 0;

}
}
.sublink{
	width: 50%;
	position: absolute;
	top:35px;
	left:20px;
	display: flex;
	flex-direction: row;
}	

.sublink_item{
	width: 70px;
	margin: 0;
}
.sublink_item img{
		width: 100%;
}


.sublink_item a img:hover{
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
	opacity: 0.8;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 20px;			/*右からの配置場所指定*/
	top: 25px;				/*上からの配置場所指定*/
	padding: 0px 0px;		/*上下、左右への余白*/
	width: 45px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 45px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background-image: url("../images/btn_icon/menu_btn_open.png");
	background-repeat: no-repeat;
	background-size: contain;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: none;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background-image: url("../images/btn_icon/menu_btn_close.png");
	background-repeat: no-repeat;
	background-size: contain;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 0px;						/*バーの幅*/
	border-color: rgba(0,0,0,0.00);					/*線の色だけ上書き*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	display: none;
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	display: none;
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}
/*-----------------MAIN------------------*/

.main_inner{
	width: 100%;
	margin: 0;
	padding: 0 5%;
	max-width: 2000px;
	position: relative;
	z-index: 1;
}
.main_1{
	width: 100%;
	background-image: url("../images/bg/bg_1.jpg");
	margin: 0;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top;
	background-color: rgba(255,246,220,1.00);
	padding-bottom: 0;

}
.main_2{
	width: 100%;
	background-image: url("../images/bg/bg_3.jpg");
	margin: -40px 0 0 0;;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top;
	background-color: #fff;
	padding: 40px 0 0 0;

}
.main_3{
	width: 100%;
	background-image: url("../images/bg/bg_1.jpg"),url("../images/bg/bg_3.jpg");
	background-repeat: no-repeat,no-repeat;
	background-size: 100%,100%;
	background-position: top,bottom;
	background-color: rgba(255,246,220,1.00);
	padding-bottom: 20vw;
}
@media screen and (max-width: 900px){
	
}
@media screen and (max-width: 480px){
.main_inner{
	width: 100%;
	margin: 0;
	padding: 0 5%;
	max-width: 480px;
	position: relative;
	z-index: 1;
}
.main_1{
	width: 100%;
	background-image: url("../images/bg/bg_1s.jpg");
	margin: 0;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top;
	background-color: rgba(255,246,220,1.00);
	padding-bottom: 0;

}
.main_2{
	width: 100%;
	background-image: url("../images/bg/bg_3s.jpg");
	margin: -40px 0 0 0;;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	background-color: rgba(255,246,220,1.00);
	padding: 40px 0 0 0;

}
.main_3{
	width: 100%;
	background-image: url("../images/bg/bg_3s.jpg"), url("../images/bg/bg_1s.jpg");
	background-repeat: no-repeat,no-repeat;
	background-size: 100%,100%;
	background-position: bottom,top;
	background-color: rgba(255,246,220,1.00);
	padding-bottom: 20vw;
}	
}

/*--------------------各ページ--------------------------------*/
/*各ページ*/
#top_img {
	width: 100%;
	position: relative;
	margin-bottom: 6vw;
}

.top_img_cover1{
	width: 30%;
	position: absolute;
	bottom:3.5vw;
	left:35%;
	font-size: 2.5vw;
	font-weight: 700;
	text-align: center;
	color: #88705F;
	background-color: rgba(255,255,255,0.80);

}
.top_img_cover2{
	width: 20%;
	position: absolute;
	bottom:-8vw;
	left:40%;
	text-align: center;
}

@media screen and (max-width:480px){
#top_img {
	width: 100%;
	position: relative;
	margin-bottom: 8vw;
}
.top_img_cover1{
	width: 50%;
	bottom:6vw;
	left:25%;
	font-size: 4vw;
}
.top_img_cover2{
	width: 40%;
	bottom:-16vw;
	left:30%;
}
}

/*--------------------各ページエリア-----------------------------*/

.area_1{
	width: 90%;
	margin: 50px auto 0;
	background-color: rgba(255,255,255,0.90);
	padding: 3% 4%;
	border: 4px solid #ff9c00;
	border-radius: 30px;
	max-width: 1260px;
}
.area_2{
	width: 90%;
	margin: 50px auto 0;
	background-color: rgba(255,255,255,0.90);
	padding: 3% 4%;
	border: 4px solid rgba(157,219,58,1.00);
	border-radius: 30px;
	max-width: 1260px;

}
.area_3{
	width: 90%;
	margin: 50px auto;
	background-color: rgba(255,255,255,0.90);
	padding: 3% 4%;
	border: 4px solid #94e7ea;
	border-radius: 30px;
	max-width: 1260px;
}
.area_4{
	width: 90%;
	margin: 50px auto;
	background-color: rgba(255,255,255,0.90);
	padding: 40px;
	border: 4px solid #fff;
	border-radius: 30px;
	max-width: 1260px;

}
.part_ttl{
	width: 40%;
	text-align: center;
	font-weight: 700;
	color: #86705F;
	font-size: 2rem;
	margin: 0 auto;
	background-image: url("../images/policy/policy_ttl_bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	padding: 10px 0;
	background-position: center;
}

@media screen and (max-width: 900px){
/*--------------------各ページエリア-----------------------------*/

.area_1{
	width: 96%;
	margin: 40px auto 0;
	background-color: rgba(255,255,255,0.90);
	padding: 3% 4%;
	border: 2px solid #ff9c00;
	border-radius: 12px;
	max-width: 900px;
}
.area_2{
	width: 96%;
	margin: 40px auto 0;
	background-color: rgba(255,255,255,0.90);
	padding: 3% 4%;
	border: 2px solid rgba(157,219,58,1.00);
	border-radius: 12px;
	max-width: 900px;

}
.area_3{
	width: 96%;
	margin: 40px auto;
	background-color: rgba(255,255,255,0.90);
	padding: 3% 4%;
	border: 2px solid #94e7ea;
	border-radius: 12px;
	max-width: 900px;
}
.area_4{
	width: 90%;
	margin: 50px auto;
	background-color: rgba(255,255,255,0.90);
	padding: 40px;
	border: 2px solid #fff;
	border-radius: 12px;
	max-width: 1260px;

}
.part_ttl{
	width: 50%;
	text-align: center;
	font-weight: 700;
	color: #86705F;
	font-size: 1.7rem;
	margin: 0 auto;
	background-image: url("../images/policy/policy_ttl_bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	padding: 10px 0;
	background-position: center;
}
}
@media screen and (max-width: 480px){
.part_ttl{
	width: 80%;
	text-align: center;
	font-weight: 700;
	color: #86705F;
	font-size: 1.4rem;
	margin: 0 auto;
	background-image: url("../images/policy/policy_ttl_bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	padding: 10px 0;
	background-position: center;
}	
}

/*--------------------FOOTER_AREA-------------------------------------*/

#footer_area{
	width: 100%;
	padding-top: 130px;
	background-color: #fff;
}
.footer_base{
	background-color: rgba(181,168,158,1.00);
	width: 100%;
	position: relative;
	padding: 40px 0 0;
}
.footer_base_est{
	width: 250px;
	top:-140px;
	left:41%;
	position: absolute;
}
.footer_child_1{
	width: 150px;
	position: absolute;
	top:-90px;
	left:15%;
	
}
.footer_child_2{
	width: 77px;
	position: absolute;
	top:-80px;
	right:18%;
	
}
.footer_logo{
	width: 200px;
	margin: -20px auto 0;
	
}
.footer_add{
	text-align: center;
	color: #fff;
	margin-bottom: 10px;
}
.footer_add a{
	color: #fff;	
}
.footer_add a:hover{
	color: #725d4c;
	
}
.footer_add span{
	font-size: 1.3rem;
}
.footer_tel{
	width: 180px;
	margin: -10px auto 10px;
	
}
.footer_tel img:hover{
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
}
@media screen and (max-width: 480px){
#footer_area{
	width: 100%;
	padding-top: 100px;
	background-color: #fff;
}
.footer_base{
	width: 100%;
	padding: 40px 0 0;
}
.footer_base_est{
	width: 150px;
	top:-80px;
	left:35%;
	position: absolute;
}
.footer_child_1{
	width: 100px;
	position: absolute;
	top:-60px;
	left:10%;
	
}
.footer_child_2{
	width: 48px;
	position: absolute;
	top:-51px;
	right:15%;
	
}
.footer_logo{
	width: 200px;
	margin: -20px auto 0;
	
}
.footer_add{
	text-align: center;
	color: #fff;
	margin-bottom: 10px;
}
.footer_add a{
	color: #fff;
}
.footer_add a:hover{
	color: #725d4c;
	
}
.footer_add span{
	font-size: 1.3rem;
}
.footer_tel{
	width: 180px;
	margin: -10px auto 10px;
	
}
}
/*フッターメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#footermenu {
	margin: 0 !important;
	padding: 20px;		/*ブロック内の余白*/
	text-align: center;	/*テキストを中央に*/
}
@media screen and (max-width: 480px){
#footermenu {
	display: none;
}
}
/*メニュー１個あたり*/
#footermenu li {
	display: inline-block;	/*簡易的に横並びにする*/
	padding: 0 10px;		/*上下、左右への余白*/
}
#footermenu li a{
	color: #725d4c;
	text-decoration: none;
}
#footermenu li a:hover{
	color: #fff;
}
/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;		/*内容をセンタリング*/
	padding: 10px;			/*ボックス内の余白*/
}

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}


.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.05s linear both;
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.dn {display: none !important;}
.block {display: block !important;}
.pc { display:block; }
.tb { display:none; } 
.sp { display:none; }

@media screen and (max-width: 1050px){   
  .pc { display:block; }
  .tb { display:block; } 
  .sp { display:none; }
}

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


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

/*ボタンの設定*/
.pagetop a {
	display: block;
	z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	width: 70px;		/*幅*/
}
.pagetop img:hover{
	opacity: 0.8;

}