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

/* PC時からハンバーガーメニューの場合は#sp_boxのみ削除  */
#open_menu,#sp_box {
	display:none;
}

/*****************************************************************

	色の設定

******************************************************************/
/* ハンバーガーメニューの線 */
#spicon span{
	border-bottom:2px solid #000;
}
/* ハンバーガーメニュー【MENU】のテキスト色（いらない場合はdisplay:none;） */
#spicon:before{
    color: #000;
}
/* 開閉後、ハンバーガーメニューの色を変更する場合 */
#spicon.m_active span:nth-child(1) {
    border-color: #FFF;
}
#spicon.m_active span:nth-child(3) {
    border-color: #FFF;
}
#spicon.m_active:before {
    /*color: #FFF;*/
}
/* 開閉後の背景の色 */
#center_box {
    background-color: #FFF;
}

/**************************************
	ハンバーガーアイコン
***************************************/

#spicon {
	position:fixed;
	right:20px;
	top:20px;
	background-position:50% 0;
	background-repeat:no-repeat;
	background-size:cover;
	width:50px;
	height:50px;
    border: 1px solid #000;
    
    padding: 15px 10px;
    
	z-index:9999;
	cursor:pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
#spicon:before {
    content: "MENU";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
	transition: all .4s;
}
#spicon span {
	width:100%;
	transition: all .4s;
}

/* ボタンを押した後のボタンのスタイル */
#spicon.m_active span:nth-child(1) {
    transform: translateY(8px) rotate(-45deg);
}

#spicon.m_active span:nth-child(2) {
	opacity:0;
}

#spicon.m_active span:nth-child(3) {
    transform: translateY(-8px) rotate(-135deg);
}
#spicon.m_active:before {
    content: "CLOSE";
}

/**************************************
	メニューオープン
***************************************/
#open_menu {
	background-position:50% 0;
	background-repeat:no-repeat;
	background-size:cover;
	position:fixed;
	z-index:9990;
	top:0;
	left:0;
	width:100%;
}
/***********/
#center_box {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	margin:0;
	height:100%;
	display:block;
	overflow-y:scroll;
	padding:180px 0;
}
/**************************************
	MENUの中身
***************************************/



@media only screen and (max-width: 1024px){
	#sp_box {
		display:block;
	}

}

@media only screen and (max-width: 768px){
/**************************************
	ハンバーガーアイコン
***************************************/

#center_box {
	padding:80px 0;
}
    
}

/********************************************************

	doctor page

********************************************************/


@media only screen and (max-width: 1024px){
	#sp_box {
		display: block;
	}

	#spicon {
		align-items: center;
		background: rgba(255, 255, 255, 0.96);
		border: 0;
		border-radius: 22px;
		box-shadow: 0 20px 40px rgba(104, 138, 87, 0.2);
		display: flex;
		flex-direction: column;
		gap: 8px;
		height: 76px;
		justify-content: flex-start;
		padding: 22px 17px 0;
		right: 24px;
		top: 20px;
		width: 76px;
	}

	#spicon:before {
		bottom: 12px;
		color: #76c761;
		content: "MENU";
		font-family: "M PLUS 1p", sans-serif;
		font-size: 10px;
		left: 50%;
		letter-spacing: 1.2px;
		line-height: 1;
		transform: translateX(-50%);
		width: auto;
	}

	#spicon span {
		background: #76c761;
		border: 0;
		border-radius: 999px;
		display: block;
		height: 2px;
		width: 100%;
	}

	#spicon.m_active {
		background: #76c761;
	}

	#spicon.m_active:before {
		color: #fff;
		content: "CLOSE";
	}

	#spicon.m_active span:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
		background-color: #FFF;
	}

	#spicon.m_active span:nth-child(2) {
		opacity: 0;
	}

	#spicon.m_active span:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
		background-color: #FFF;
	}

	#open_menu {
		background: rgba(88, 113, 73, 0.2);
		backdrop-filter: blur(12px);
		height: 100%;
	}

	#center_box {
		background: transparent;
		height: 100%;
		padding: 108px 24px 36px;
	}

	#center_box:before,
	#center_box:after {
		background: linear-gradient(135deg, rgba(228, 245, 196, 0.88) 0%, rgba(255, 240, 198, 0.74) 100%);
		border-radius: 52% 48% 43% 57% / 57% 46% 54% 43%;
		content: "";
		pointer-events: none;
		position: fixed;
	}

	#center_box:before {
		height: 280px;
		left: -86px;
		top: 110px;
		width: 280px;
	}

	#center_box:after {
		height: 240px;
		right: -78px;
		top: 24px;
		width: 240px;
	}

	.spmenu_inner {
		background: rgba(255, 255, 255, 0.97);
		border: 1px solid rgba(176, 214, 153, 0.5);
		border-radius: 32px;
		box-shadow: 0 28px 56px rgba(120, 154, 100, 0.18);
		margin: 0 auto;
		max-width: 760px;
		padding: 34px 32px 32px;
		position: relative;
		z-index: 1;
	}

	.spmenu_head {
		display: block;
	}

	.spmenu_logo {
		max-width: 312px;
		width: 100%;
	}

	.spmenu_logo a,
	.spmenu_logo img {
		display: block;
	}

	.spmenu_logo img {
		height: auto;
		width: 100%;
	}

	.spmenu_grid {
		display: block;
		margin-top: 28px;
	}

	.spmenu_block {
		width: 100%;
	}

	.spmenu_block + .spmenu_block {
		margin-top: 20px;
	}

	.spmenu_main li + li {
		margin-top: 12px;
	}

	.spmenu_main a {
		align-items: center;
		background: #fbfbf3;
		border: 1px solid #e4eadb;
		border-radius: 18px;
		color: #3f3f3f;
		display: flex;
		font-size: 20px;
		justify-content: space-between;
		letter-spacing: 1.2px;
		line-height: 1.5;
		min-height: 70px;
		padding: 18px 22px;
		transition: 0.3s ease-in-out;
	}

	.spmenu_main a:after {
		background: url("../images/arrow_g.webp") 50% 50% / 6px 10px no-repeat;
		content: "";
		height: 13px;
		margin-left: 14px;
		width: 15px;
	}

	.spmenu_block_en {
		color: #76c761;
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 1.4;
	}

	.spmenu_block_title {
		color: #3f3f3f;
		font-size: 24px;
		letter-spacing: 1.6px;
		line-height: 1.4;
		margin-top: 6px;
	}

	.spmenu_sub {
		display: grid;
		gap: 12px;
		margin-top: 18px;
	}

	.spmenu_sub a {
		align-items: center;
		background: #fff;
		border: 1px solid #dfe8d8;
		border-radius: 16px;
		color: #5c5c5c;
		display: flex;
		font-size: 16px;
		letter-spacing: 0.9px;
		line-height: 1.7;
		min-height: 64px;
		padding: 14px 18px;
		font-weight: 500;
		transition: 0.3s ease-in-out;
	}

	.spmenu_info {
		background: linear-gradient(135deg, #76c761 0%, #99d36a 100%);
		border-radius: 28px;
		color: #fff;
		margin-top: 28px;
		padding: 26px 28px 28px;
	}

	.spmenu_info_en {
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 1.4;
		opacity: 0.95;
	}

	.spmenu_tel {
		margin-top: 10px;
	}

	.spmenu_tel a {
		color: inherit;
		font-size: 32px;
		letter-spacing: 1.3px;
		line-height: 1;
	}

	.spmenu_address {
		font-size: 15px;
		letter-spacing: 1px;
		line-height: 1.9;
		margin-top: 16px;
	}

	.spmenu_info_btn {
		margin-top: 18px;
	}

	.spmenu_info_btn a {
		align-items: center;
		background: #fff;
		border-radius: 999px;
		color: #76c761;
		display: inline-flex;
		font-size: 16px;
		height: 48px;
		justify-content: center;
		letter-spacing: 1px;
		padding: 0 26px;
	}
}

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

	#spicon {
		border-radius: 18px;
		height: 64px;
		padding: 19px 14px 0;
		right: 20px;
		top: 16px;
		width: 64px;
	}

	#spicon:before {
		bottom: 10px;
		font-size: 9px;
	}

	#center_box {
		padding: 92px 20px 24px;
	}

	#center_box:before {
		height: 210px;
		left: -96px;
		top: 132px;
		width: 210px;
	}

	#center_box:after {
		height: 190px;
		right: -94px;
		top: 18px;
		width: 190px;
	}

	.spmenu_inner {
		border-radius: 28px;
		padding: 24px 20px;
	}

	.spmenu_head {
		display: block;
	}

	.spmenu_logo {
		max-width: 240px;
	}

	.spmenu_page {
		margin-top: 16px;
		text-align: left;
	}

	.spmenu_page_en {
		font-size: 11px;
	}

	.spmenu_page_title {
		font-size: 22px;
	}

	.spmenu_grid {
		margin-top: 24px;
	}

	.spmenu_block {
		width: 100%;
	}

	.spmenu_block + .spmenu_block {
		margin-top: 20px;
	}

	.spmenu_main a {
		font-size: 17px;
		min-height: 62px;
		padding: 16px 18px;
	}

	.spmenu_block_title {
		font-size: 22px;
	}

	.spmenu_sub a {
		font-size: 17px;
		min-height: 58px;
	}

	.spmenu_info {
		border-radius: 24px;
		margin-top: 24px;
		padding: 22px 20px 24px;
	}

	.spmenu_info_en {
		font-size: 11px;
	}

	.spmenu_tel a {
		font-size: 28px;
	}

	.spmenu_address {
		font-size: 17px;
	}

	.spmenu_info_btn a {
		font-size: 17px;
		height: 46px;
		padding: 0 22px;
	}
}