@charset "utf-8";
/* CSS Document */

/******************   ルートのフォントサイズ   ******************/

html {
	font-size: 62.5%;
	/* 16px x 0.625 = 10px(=1rem) */
	
	@media screen and ( max-width:600px ) {
		font-size: 50%;
	}

}


/******************   書体  ******************/


@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');


/* ゴシック体指定 */
body {
	font-size: 2.1rem;
	line-height: 1.75;
	color: #000000;
	font-family: 'Oswald', sans-serif;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	text-underline-offset: 1.0rem;

}

/* リンク */
a:hover {
	text-decoration: underline #000 1px;
}


.mincho {
	font-family: 
		'EB Garamond', 
		Georgia, 
		"游明朝体", 
		"YuMincho", 
		"游明朝", 
		"Yu Mincho", 
		"ヒラギノ明朝 ProN W3", 
		"Hiragino Mincho ProN W3", 
		HiraMinProN-W3, 
		"ヒラギノ明朝 ProN", 
		"Hiragino Mincho ProN", 
		"ヒラギノ明朝 Pro", 
		"Hiragino Mincho Pro", 
		"HGS明朝E", 
		serif;
}


.sans {
	font-family: 
		'Lato', sans-serif,
		sans-serif;
}

.serif {
	font-family:
		'EB Garamond',
		serif;
}

.strong {
	font-weight: bold;
}



/******************   カラー  ******************/

.color_lightgray { color:#f4f4f0; }
.color_red { color:#9a3a2f; }
.color_pink { color:#c5717b; }
.color_green { color:#a1b23d; }
.color_bright_green { color:#d3cf72; }
.color_blue { color:#9bc5cb; }
.color_navy { color:#232846; }
.color_purple { color:#7f729e; }

.background_color_yellow { background-color:#fdf8e2; }
.background_color_green { background-color:#dae6d9; }
.background_color_red { background-color:#f1d9df; }




/******************   レスポンシブ　ヘッダー切り替え  ******************/



.メニューの切り替え-----------{}

/* パソコン時　表示 */
@media screen and ( min-width:601px )
{
	
	#pc_head, .pc_display {display: block;}
	#sp_head, .sp_display {display: none;}

}


/* スマホ時　表示 */
@media screen and ( max-width:600px )
{

	#pc_head, .pc_display {display: none;}
	#sp_head, .sp_display {display: block;}

}





.パソコン用ヘッダー----------{}

#pc_head {
	position: relative;
	width: 100%;
	min-width: 1000px;
	height: 130px;
}
#pc_head #logo{
	position: absolute;
	top: 30px;
	left: 30px;
}
#pc_head #instagram{
	position: absolute;
	top: 100px;
	right: 55px;
}


.パソコン用ナビ----------{}
nav.pc_navi {
	position: absolute;
	top: 45px;
	right: 40px;
}
nav.pc_navi ul li{
	font-size: 1.9rem;
	color: #232846;
	float: left;
	font-weight: bold;
	margin-left: 30px;
}

.button_inq {
	font-size: 1.8rem;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 0.1rem;
	background-color: #232846;
	
	width: 9em;
	height: 2.2em;
	border-radius: 1.1em;
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 0.1em;	/*文字の位置を上に微調整*/
}




.スマホ用ヘッダー----------{}
#sp_head {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 1;
}
#logo_sp {
	width: 60%;
	margin-left: 2.0rem;
	margin-top: 2.6rem;
}



.スマホ用ナビ----------{}
nav.sp_navi {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	
	width: 100%;
	height: 100%;
	
	font-size: 3rem;


	background-color: #fdf8e2;
	color: #000;
	text-align: center;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 6rem;
	
	transform: translateY(-100%);	/*ナビを上に隠す*/
	transition: all 0.6s;	/*アニメーションの時間を指定*/
}

	@media screen and ( max-width:600px ) {
	.sp_navi a {
			width:100%;
			text-align: center;
			display: flex;
			justify-content: center;
		}
	.sp_navi .button_inq { font-size: 3rem; }
	.sp_navi #instagram {
			padding-top: 7rem;
			width: 24rem;
		}
	}


/*ハンバーガーメニューが押されたときに付与するクラス*/
nav.sp_navi.active{
	transform: translateY(0%);		/*ナビを表示する*/
}



/*ハンバーガーメニュー*/
.Toggle {
	position: fixed;
	right: 2rem;
	top: 2rem;
	z-index: 3;
	
	width: 7rem;
	height: 7rem;
	border-radius: 3.5rem;	
	background-color: #232846;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	cursor: pointer;
}

/*ラインを囲む　フレックスボックス用*/
.line_wrap {
	position: relative;
	width: 3rem;
	height: 1.8rem;
}

/* ライン */
.Toggle span {
    display: block;
    position: absolute;
    width: 3rem;
    border-bottom: solid 0.2rem #fff;
    transition: .35s ease-in-out;	/*変化の速度を指定*/
}
 
.Toggle span:nth-child(1) {
    top: 0px;
}
 
.Toggle span:nth-child(2) {
    top: 0.9rem;
}
 
.Toggle span:nth-child(3) {
    top: 1.8rem;
}
 
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 0.9rem;
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 0.9rem;
    transform: rotate(45deg);
}








/******************   body  ******************/

.外部リンクアイコン----------{}

.exLink{
	position: relative;
}
.exLink::before{
	content: "";
	position: absolute;
	top: 0.8rem;
	right: -2.4rem;
	display: block;
	width: 1.2rem;
	height: 1.0rem;
	border-top: 0.1rem solid #000;
    border-left: 0.1rem solid #000;
}
.exLink::after{
	content: "";
	position: absolute;
	top: 1.2rem;
	right: -3.0rem;
	display: block;
	width: 1.4rem;
	height: 1.2rem;
	border: 0.1rem solid #000;
}


.ボックス----------{}
.box_940 {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	
	@media screen and ( max-width:600px ) {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

.box_780 {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	
	@media screen and ( max-width:600px ) {
		width: 86%;
		margin-left: auto;
		margin-right: auto;
	}
}


.ボタン----------{}



.テーブル----------{}

/*フォーマット 01*/
.table_01 {
	width: 100%;
	font-size: 2.0rem;
	line-height: 1.6;
	text-align: left;
}


.table_01 .table_row {
	width: 100%;
	display: flex;
	
	padding: 1.2em 0;	/*上下・左右*/
	border-bottom: 1px dotted #000000;
	
	@media screen and ( max-width:600px ) {
		flex-direction: column;
	}
}

.table_01 .table_row:last-of-type {
	border-style: none;
}


.table_01 .table_head {
	width: 220px;
	font-weight: bold;
	
	@media screen and ( max-width:600px ) {
		width: 100%;
		margin-bottom: 1rem;
	}
}

.table_01 .table_data {
	width: calc(100% - 220px);
	
	@media screen and ( max-width:600px ) {
		width: 100%;
	}
}




.フッター----------{}
footer {
	width: 100%;
	height: 26rem;
	position: relative;
 	background-color: #232846;
	color: #fff;
}
#logo_footer {
	margin: 4rem 4rem;
	
	@media screen and ( max-width:600px ) {
		width: 30rem;
		margin: 3rem 2rem;
	}

}
small {
	position: absolute;
	font-size: 1.2rem;
	line-height: 1;
	right: 2rem;
	bottom: 2rem;
}



.トップに戻るボタン----------{}
#page_top {
    position: fixed;
    bottom: -10rem;
    right: 3rem;
}

#page_top img { width: 9rem; }