@charset "utf-8";

/*----------------------------------------
	全体
----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

html {
	font-size: 62.5%;
	color: #000;
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
	font-weight: 500;
}

body {
	font-size: 1.4rem;
	font-size: 1.4em;
}



article {
	overflow: hidden;
}

img {
    vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
}

.yumin {
	font-family: '游明朝体', "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
}

.hiragino {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif;
}

.noto {
	font-family: "Noto Sans JP", sans-serif;
}

article {
	color: #1b1b1b;
}


a {
	color: #f08044;
	transition: all 0.4s;
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
	transition: all 0.4s;
}

a img:hover {
	opacity: 0.7;
	transition: all 0.4s;
}

.max_respon {
	max-width: 100%;
}


.bg_beige {
	background: #E5DDCB
}

.bg_black {
	background-color: #000;
}

.bg_gray {
	background: #f1f1f0;
}

/*----------------------------------------
	text
----------------------------------------*/
p {
	line-height: 2;
}

.text_bold {
	font-weight: bold;
}

.text_normal {
	font-weight: normal;
}

.bold500 {
	font-weight: 500;
}

.bold600 {
	font-weight: 600;
}

.text_gray {
	color: #4a5d50;
}

.text_red {
	color: #e60012;
}

.text_d_red {
	color: #b81c22;
}

.text_orange {
	color: #f45000;
}

.text_white {
	color: #fff;
}

.palt {
	font-feature-settings: "palt";
}

:root {
	--text12: clamp(1.2rem, 1.1vw, 1.2rem);
	--text13: clamp(1.3rem, 1.25vw, 1.3rem);
	--text14: clamp(1.4rem, 1.34vw, 1.4rem);
	--text15: clamp(1.4rem, 1.4vw, 1.5rem);
	--text16: clamp(1.4rem, 1.5vw, 1.6rem);
	--text18: clamp(1.5rem, 1.7vw, 1.8rem);
	--text20: clamp(1.6rem, 1.9vw, 2rem);
	--text21: clamp(1.8rem, 2vw, 2.1rem);
	--text22: clamp(1.8rem, 2.1vw, 2.2rem);
	--text24: clamp(2rem, 2.3vw, 2.4rem);
	--text26: clamp(2rem, 2.5vw, 2.6rem);
	--text28: clamp(2.2rem, 2.6vw, 2.8rem);
	--text30: clamp(2.2rem, 2.8vw, 3rem);
	--text32: clamp(2.4rem, 3vw, 3.2rem);
	--text34: clamp(2.4rem, 3.2vw, 3.4rem);
	--text36: clamp(2.5rem, 3.3vw, 3.6rem);
	--text38: clamp(2.5rem, 3.4vw, 3.8rem);
	--text40: clamp(2.6rem, 3.8vw, 4rem);
}

.text_12 {
	font-size: var(--text12);
}

.text_13 {
	font-size: var(--text13);
}

.text_14 {
	font-size: var(--text14);
}

.text_15 {
	font-size: var(--text15);
}

.text_16 {
	font-size: var(--text16);
}

.text_18 {
	font-size: var(--text18);
}

.text_20 {
	font-size: var(--text20);
}

.text_21 {
	font-size: var(--text21);
}

.text_22 {
	font-size: var(--text22);
}

.text_24 {
	font-size: var(--text24);
}

.text_26 {
	font-size: var(--text26);
}

.text_28 {
	font-size: var(--text28);
}

.text_30 {
	font-size: var(--text30);
}

.text_32 {
	font-size: var(--text32);
}

.text_34 {
	font-size: var(--text34);
}

.text_36 {
	font-size: var(--text36);
}

.text_38 {
	font-size: var(--text38);
}

.text_40 {
	font-size: var(--text40);
}


/*line-height*/
.lh_06 {
	line-height: 0.6;
}

.lh_11 {
	line-height: 1.1;
}

.lh_12 {
	line-height: 1.2;
}

.lh_13 {
	line-height: 1.3;
}

.lh_14 {
	line-height: 1.4;
}

.lh_15 {
	line-height: 1.5;
}

.lh_16 {
	line-height: 1.6;
}

.lh_17 {
	line-height: 1.7;
}

.lh_18 {
	line-height: 1.8;
}

/*letter-spacing*/
.ls_-2 {
	letter-spacing: -2px;
}

.ls_-1 {
	letter-spacing: -1px;
}

.ls_1 {
	letter-spacing: 1px;
}

.ls_2 {
	letter-spacing: 2px;
}

.ls_3 {
	letter-spacing: 3px;
}

.text_r {
	text-align: right;
}

a.link_tex {
	color: #0199cc;
}

a.link_tex:hover {
	opacity: 0.7;
}



@media print,
screen and (min-width: 821px) {

	/*line-height*/
	.lh_19 {
		line-height: 1.9;
	}

	.lh_20 {
		line-height: 2;
	}

	.lh_21 {
		line-height: 2.1;
	}

	.lh_22 {
		line-height: 2.2;
	}

	.lh_23 {
		line-height: 2.3;
	}

	.lh_24 {
		line-height: 2.4;
	}

	.lh_25 {
		line-height: 2.5;
	}

	.lh_26 {
		line-height: 2.6;
	}

	.lh_28 {
		line-height: 2.8;
	}

	.lh_30 {
		line-height: 3;
	}

	.lh_36 {
		line-height: 3.6;
	}

	/*letter-spacing*/
	.ls_4 {
		letter-spacing: 4px;
	}

	.ls_5 {
		letter-spacing: 5px;
	}

	.ls_6 {
		letter-spacing: 6px;
	}

	.ls_7 {
		letter-spacing: 7px;
	}

	.ls_8 {
		letter-spacing: 8px;
	}

}

/*END*/


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

	/*letter-spacing*/
	.ls_4 {
		letter-spacing: 3px;
	}

	.ls_5 {
		letter-spacing: 4px;
	}

	.ls_6 {
		letter-spacing: 4px;
	}

	.ls_7 {
		letter-spacing: 4px;
	}

	.ls_8 {
		letter-spacing: 4px;
	}

	/*line-height*/
	.lh_19,
	.lh_20,
	.lh_21,
	.lh_22,
	.lh_23,
	.lh_24,
	.lh_25 {
		line-height: 1.8;
	}

	.lh_26 {
		line-height: 2;
	}

	.lh_28 {
		line-height: 2.2;
	}

	.lh_30 {
		line-height: 2.4;
	}

	.lh_36 {
		line-height: 2.6;
	}






}

/*END*/

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

	/*letter-spacing*/
	.ls_4 {
		letter-spacing: 2px;
	}

	.ls_5 {
		letter-spacing: 2px;
	}

	.ls_6 {
		letter-spacing: 2px;
	}

	.ls_7 {
		letter-spacing: 2px;
	}

	.ls_8 {
		letter-spacing: 2px;
	}

}

/*END*/


li {
	list-style: none;
}

.center {
	text-align: center;
}

.text_left {
	text-align: left;
}

.text_right {
	text-align: right;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.m_center {
	margin-inline: auto;
}

.op:hover {
	filter: alpha(opacity=60);
	-moz-opacity: 060;
	opacity: 0.60;
}

@media screen and (max-width: 599px) {
	.sp_text_left {
		text-align: left;
	}

	.sp_text_right {
		text-align: right;
	}

	.sp_center {
		text-align: center;
	}
}

/*END*/





/*----------------------------------------
  layout
----------------------------------------*/
.max_respon {
	max-width: 100%;
}

.pc_block {
	display: block;
}

.sp_block {
	display: none;
}

.tb_block {
	display: none;
}


.inner_frame {
	max-width: 1080px;
	width: 100%;
	position: relative;
	box-sizing: border-box;
	margin-inline: auto;
	padding-right: 20px;
	padding-left: 20px;
}

.inner_frame1200 {
	max-width: 1200px;
	width: 100%;
	position: relative;
	box-sizing: border-box;
	margin-inline: auto;
	padding-right: 20px;
	padding-left: 20px;
}


.content_fl_box {
	display: flex;
	gap: 3.5%;
}

.content_fl_box.between {
	justify-content: space-between;
}

.content_fl_box.around {
	justify-content: space-around;
}

.content_fl_box.j_center {
	justify-content: center;
}

.content_fl_box.reverse {
	flex-direction: row-reverse;
}

.content_fl_box.end {
	justify-content: flex-end;
}

.j_end {
	justify-content: flex-end;
}

.i_center {
	align-items: center;
}

.c_end {
	align-content: flex-end;
}

.c_center {
	align-content: center;
}

.nogap {
	gap: 0;
}

.content_fl_box50 {
	display: flex;
}

.box25 {
	width: 25%;
}

.box30 {
	width: 30%;
}

.box35 {
	width: 35%;
}

.box40 {
	width: 40%;
}

.box45 {
	width: 45%;
}

.box47 {
	width: 48.1%;
}

.box50 {
	width: 50%;
}

.box55 {
	width: 55%;
}

.box60 {
	width: 60%;
}

.box65 {
	width: 65%;
}

.box70 {
	width: 70%;
}

.box75 {
	width: 75%;
}

@media screen and (min-width: 600px) {
	.order00 {
		order: 0;
	}

	.order01 {
		order: 1;
	}

	.order02 {
		order: 2;
	}

	.order03 {
		order: 3;
	}

	.order04 {
		order: 4;
	}

	.order05 {
		order: 5;
	}
}

/*END*/


@media screen and (max-width: 960px) {
	.inner_frame {
		padding-right: 4%;
		padding-left: 4%;
	}

	.inner_frame,
	.inner_frame1200 {
		padding-right: 3.5%;
		padding-left: 3.5%;
	}
}

/*END*/

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

	.inner_frame {
		padding-right: 6%;
		padding-left: 6%;
	}

	.inner_frame1200 {
		padding-right: 4.3%;
		padding-left: 4.3%;
	}

	.pc_block {
		display: none;
	}

	.sp_block {
		display: block;
	}

	.sp_order00 {
		order: 0;
	}

	.sp_order01 {
		order: 1;
	}

	.sp_order02 {
		order: 2;
	}

	.sp_order03 {
		order: 3;
	}

	.sp_order04 {
		order: 4;
	}

	.sp_order05 {
		order: 5;
	}

	.content_fl_box {
		flex-wrap: wrap;
	}

	.box70,
	.box65,
	.box60,
	.box40,
	.box50,
	.box55,
	.box25,
	.box75,
	.box47,
	.box45,
	.box35,
	.box30 {
		width: 100%;
		margin-bottom: 30px;
	}

	.content_fl_box>div:last-child {
		margin-bottom: 0;
	}

	.nogap>div {
		margin-bottom: 0;
	}


	.content_fl_box50 {
		flex-wrap: wrap;
	}

	.content_fl_box.nowrap {
		flex-wrap: nowrap;
	}

	.sp_content_fl_box {
		display: flex;
		gap: 2%;
	}

	.content_fl_box.nowrap .box70 {
		width: 70%;
	}

	.content_fl_box.nowrap .box60 {
		width: 60%;
	}

	.content_fl_box.nowrap .box40 {
		width: 40%;
	}

	.content_fl_box.nowrap .box30 {
		width: 30%;
	}

	.sp_palt {
		font-feature-settings: "palt";
	}




}

/*END*/






/*----------------------------------------
ヘッダーCSS
----------------------------------------*/
header {
	width: 100%;
	position: absolute;
	z-index: 2;
}

.head_inner {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--text16);
	font-weight: 600;
	transition: background-color 0.3s ease;
	background-color: transparent;
}

.header_l {
	width: 25%;
}

.header_r {
	width: 75%;
}



h1.read {
	font-size: 1.1rem;
	font-weight: normal;
	color: #e3e3e3;
}

.logo {
	padding: 15px;
}



@media screen and (max-width: 960px) {
	.head_logo img {
		width: 65px;
	}

}

/*END*/

@media screen and (max-width: 599px) {
	.header_l {
		width: 50%;
	}

	.header_r {
		width: 50%;
	}

	.head_inner {
		position: relative;
	}

	.logo {
		padding: 8px;
	}

	.head_logo img {
		width: 50px;
	}


}

/*END*/




/*----------------------------------------
	ドロワー
----------------------------------------*/
/*
.drawer li a{
	position: relative;
	display: block;
	transition: all 0.4s;
}
.drawer li a:hover{
	opacity: 0.7;
}
*/

.menu_btn {
	width: 50px;
	height: 45px;
	position: fixed;
	top: 15px;
	right: 15px;
	cursor: pointer;
	z-index: 9999;
	background: #000;
}

.menu_btn span {
	display: inline-block;
	width: 70%;
	height: 1px;
	background: #fff;
	position: absolute;
	left: 15%;
	transition: all 0.5s;
}

.menu_btn span:nth-child(1) {
	top: 25%;
}

.menu_btn span:nth-child(2) {
	top: 50%;
}

.menu_btn span:nth-child(3) {
	bottom: 22%;
}

.open .menu_btn span {
	background: #fff;
}

.menu_btn:hover span {
	background: #ccc;
	opacity: 0.9;
}

.open .menu_btn span:nth-child(1) {
	transform: rotate(-45deg);
	margin-top: 14px;
}

.open .menu_btn span:nth-child(2) {
	opacity: 0;
}

.open .menu_btn span:nth-child(3) {
	transform: rotate(45deg);
	margin-bottom: 10px;
}

.drawer {
	position: fixed;
	background: rgba(0, 0, 0, 0.9);
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	color: #fff;
	/*display: flex;*/
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
	transition: 0.5s ease-in-out;
	z-index: 99;
}

.drawer ul {
	float: none;
	text-align: center;
	padding-top: 80px;
}

.drawer ul li {
	float: none;
	position: relative;
	transform: translateX(-200px);
	transition: transform 0.5s ease;
	margin-left: 0;
	margin-bottom: 10px;
	width: 100%;
}

.drawer ul li:nth-child(2) {
	transition-delay: 0.1s;
}

.drawer ul li:nth-child(3) {
	transition-delay: 0.15s;
}

.drawer ul li:nth-child(4) {
	transition-delay: 0.2s;
}

.drawer ul li:nth-child(5) {
	transition-delay: 0.25s;
}

.drawer ul li:nth-child(6) {
	transition-delay: 0.3s;
}

.drawer ul li:nth-child(7) {
	transition-delay: 0.35s;
}

.drawer ul li:nth-child(8) {
	transition-delay: 0.4s;
}

.drawer ul li:nth-child(9) {
	transition-delay: 0.45s;
}

.drawer ul li a {
	position: relative;
	transition: all 1.4s;
	display: inline-block;
	font-size: var(--text18);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	font-weight: normal;
	padding: 15px 0;
	line-height: 1.5;
}

.drawer li:first-child a {
	background: none;
	padding: 15px 0;
}

.drawer li:first-child a:hover {
	background: none;
}

.open .drawer {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}

.open .drawer ul li {
	transform: translateX(0);
}


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

	.menu_btn {
		left: auto;
		right: 2.5%;
		width: 45px;
		height: 40px;
		margin-left: auto;
		top: 8px;
	}

	.open .menu_btn span:nth-child(1) {
		margin-top: 9px;
	}

	.open .menu_btn span:nth-child(3) {
		margin-bottom: 12px;
	}

	.drawer ul {
		padding-top: 65px;
	}

	.drawer ul li {
		transform: translateX(-70px);
	}



}

/*END*/



/*----------------------------------------
	map
----------------------------------------*/

.map {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding: 50% 0 0;
	text-align: center;
}

.map iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

.map iframe:not(:target) {
	left: 0\9;
	top: 0\9;
}

.map iframe {
	left: 0\9;
	top: 0\9;
}

@media all and (-ms-high-contrast: none) {
	.map iframe {
		left: 50%\9;
		top: 50%\9;
	}
}

.map {
	z-index: 2;
}

/*chrome対策*/

@media screen and (max-width: 599px) {
	.map {
		padding: 75% 0 0;
	}

}

/*END*/

/*----------------------------------------
	contact
----------------------------------------*/
.hope_head {
	display: none;
}

.label_block {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}

.label_h {
	width: 20%;
	max-width: 120px;
	color: #000;
}

.contact {
	width: 100%;
	line-height: 1.8;
	box-sizing: border-box;
	color: #000;
}

.contact label,
.contact label span {
	color: #000;
}

.contact th,
.contact td {
	text-align: left;
	box-sizing: border-box;
	font-size: var(--text16);
}

.contact th {
	display: block;
	background: #f1f2f2;
	padding: 12px 20px;
	margin-bottom: 15px;
	box-sizing: border-box;
	font-size: var(--text16);
}

.contact td {
	box-sizing: border-box;
	padding: 0 20px 40px 20px;
}

.kind label {
	box-sizing: border-box;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 40px;
}


.r_kind label {
	box-sizing: border-box;
	padding-left: 45px;
	margin-bottom: 20px;
}

.schedule_form input {
	float: left;
	width: 40%;
}

.schedule_form select {
	float: left;
	width: 28%;
	margin-left: 2%;
}

.schedule_form input,
.schedule_form select {
	border: 1px solid #dcdcdc;
	background: #fff;
}

.hissu:after,
.nini:after {
	display: inline-block;
	padding: 6px 6px;
	line-height: 1;
	margin-left: 10px;
	border-radius: 4px;
	font-size: var(--text16);
	font-weight: bold;
}

.hissu:after {
	content: "必須";
	display: inline-block;
	background: #b81c22;
	color: #fff;
}

.nini:after {
	content: "任意";
	display: inline-block;
	background: #fff;
	color: #c2c2c2;
}


/*error*/
td .error {
	color: #e60012;
	padding-top: 3px;
}

.privacy .error {
	display: block;
	margin-top: 10px;
	color: #e60012;
	padding: 5px 14px;
	background: #ffcdd3;
}

td.error {
	background: #ffcdd3;
	padding: 12px 20px 5px 20px;
	display: block;
	margin-bottom: 15px;
}




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

	.contact th {
		font-size: 1.5rem;
	}

	.contact td {
		font-size: 1.4rem;
		padding: 0 10px 25px 10px;

	}

	.privacy .error,
	td .error {
		font-size: 1.4rem;
	}

	.privacy .hissu:after,
	th.hissu:after,
	th.nini:after {
		padding: 3px 6px;
		font-size: 1.2rem;
		vertical-align: 1px;
		margin-left: 6px;
	}

	.kind label {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.privacy {
		font-size: 1.4rem;
	}

}

/*END*/

/*form 追加*/
.form_none {
	display: none;
}

.form_block {
	display: block;
}

.bg_form {
	background: #f1f7f4;
	margin: 0 auto 0 auto;
	padding-bottom: 100px;
	box-sizing: border-box;
}

/*----------------------------------------
	フォーム
----------------------------------------*/

select,
textarea,
input[type="tel"],
input[type="email"],
input[type="text"] {
	padding: 10px;
	background: #fff;
	border: none;
	box-sizing: border-box;
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
	-webkit-appearance: none;
	font-size: 1.6rem;
	color: #000;
	border: 1px solid #959595;
	border-radius: 5px;
}

select:focus {
	outline: none;
}

textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus {
	outline: none;
	border: 1px solid #ccc;
}

select {
	display: block;
	width: 100%;
	max-width: 250px;
}


.form1 {
	width: 250px;
}

.form2 {
	width: 350px;
}

.form_all {
	width: 100%;
}

.form60 {
	width: 60%;
	max-width: 400px;
}

:focus {
	outline: none;
}


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

.box_heaf {
	width: auto;
	float: left;
	display: flex;
}

.m_r10 {
	margin-right: 4%;
}

.telbox {
	width: 28%;
}

.telbox_sen {
	width: 10%;
	text-align: center;
	padding-top: 13px;

}

.select_ttl {
	width: 100%;
	padding: 20px 10px 10px 0;
	font-size: 2.2rem;
}

.media_pb {
	padding-bottom: 15px;
}


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

	select,
	textarea,
	input[type="tel"],
	input[type="email"],
	input[type="text"] {
		padding: 10px 10px;
		font-size: var(--text16);
	}

	select:focus {
		outline: none;
	}

	textarea:focus,
	input[type="tel"]:focus,
	input[type="email"]:focus,
	input[type="text"]:focus {
		border: 1px solid #867b5b;
	}

	.form1 {
		width: 150px;
	}

	.form2 {
		width: 100%;
	}

	.form60 {
		width: 100%;
	}

}

/*END*/

@media screen and (max-width: 599px) {
	.form_submit img {
		width: 94%;
	}

}

/*END*/



/*----------------------------------------
	radio checkbox
----------------------------------------*/

.radio input[type="radio"],
.check input[type="checkbox"] {
	position: absolute;
	height: 1px;
	width: 1px;
	clip: rect(0, 0, 0, 0);
}

.radio label,
.check label {
	display: block;
	position: relative;
	cursor: pointer;
	padding-left: 40px;
	line-height: 2;
	margin-right: 35px;
	/*
	margin-bottom: 10px;
	*/
}

.radio label:before,
.check label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	margin-top: -14px;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 50%;
}




.check label:before {
	border-radius: 0;
}

.radio label:before {
	border-radius: 50%;
}

.radio label,
.check label {
	margin-left: 0\9;
	padding: 11px\9;
}

.radio label:not(:target),
.check label:not(:target) {
	margin-left: 10px\9;
	padding: 11px 0 11px 25px\9;
}

.radio label:before,
.check label:before {
	display: none\9;
}

.radio label:not(:target):before,
.check label:not(:target):before {
	display: inline-block\9;
}

.radio input[type="radio"]:checked+label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: 4px;
	width: 18px;
	height: 18px;
	margin-top: -10px;
	border-radius: 50%;
	background: #b81c22;
}

.check input[type="checkbox"]:checked+label:after {
	content: "";
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	display: block;
	left: 2px;
	width: 22px;
	height: 12px;
	margin-top: -9px;
	border-left: 4px solid #eb6877;
	border-bottom: 4px solid #eb6877;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check input[type="checkbox"]:checked+label:before {
	background: #fff;
}

/*--
.radio input[type="radio"]:focus + label:before,
.check input[type="checkbox"]:focus + label:before{
	border-color: #aec47f;
	box-shadow: 0 0 5px #aec47f;
}
--*/
.radio_style label {
	padding-bottom: 5px;
}



.medhia_check label {
	padding-left: 40px;
	margin-right: 30px;
}

.contact label,
.contact label span {
	font-feature-settings: "palt";
}





/*----------------------------------------
	footer
----------------------------------------*/
.foot_content {
	display: flex;
	justify-content: space-between;
}

.foot_box {
	width: 35%;
}

.foot_r {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.foot_list {}

.foot_list li {
	width: 100%;
	font-size: var(--text16);
	margin-bottom: 18px;
	text-align: right;
}

.foot_list li a {
	color: #000;
}



.copyright {
	background: #fff;
	color: #000;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	line-height: 1.4;
}


.sp_menu {
	width: 100%;
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 100;
	background: fff;
}

.sp_menu a {
	display: block;
}

.fixed_tel {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.sp_menu ul {
	width: 100%;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
}

.sp_menu ul li {
	float: left;
	width: calc(100% / 1);
	box-sizing: border-box;
	text-align: center;
}

.sp_menu ul li img {
	max-width: 100%;
}

.sp_menu ul li:last-of-type {
	border-right: none;
}


@media screen and (max-width: 599px) {
	.foot_content {
		flex-wrap: wrap;
	}

	.foot_box {
		width: 100%;
	}

	.f_order1 {
		order: 1;
	}

	.f_order2 {
		order: 2;
	}

	.foot_list li {
		text-align: center;
		font-size: 1.6rem;
		margin-bottom: 22px;
	}

	.foot_r {
		justify-content: flex-start;
	}

	.foot_list {
		width: 100%;
		margin-bottom: 30px;
	}


}

/*END*/



/*----------------------------------------
	contents　コンテンツ
----------------------------------------*/
.bg_white {
	background: #fff;
}

.mv {
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	padding: 20px 20px 0 20px;
}

.mv_h {
	position: relative;
}

.mv_frame {
	width: 100%;
	overflow: hidden;
}

.mv_copy {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 40%;
	left: 50%;

	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
	font-weight: 600;

	/* ★1. 縦書きにする設定（右から左へ流れる） */
	writing-mode: vertical-rl;

	/* ★2. Flexboxを使って、縦書きの世界での中央寄せを指定 */
	display: flex;
	flex-direction: column;
	/* 縦書きの行の並び順を正しく保つ */
	justify-content: center;
	/* 【上下の中央寄せ】（文字が流れる方向） */

	/* 基準となるサイズ（必要に応じて調整してください） */
	width: 85%;
	/* 横幅いっぱいに広げてその中の中央にする */

	letter-spacing: 8px;
	/* 縦書きは文字間を少し空けると美しくなります */
	line-height: 1.85;
	/* 行間（改行したときの隙間）の調整 */
}

.mv_copy span {
	display: block;
}

.mv_note {
	width: 20%;
	max-width: 218px;
	position: absolute;
	bottom: 2%;
	left: 3%;
}


.mv_zoom_out {
	transform: scale(1.2);
	transition: transform 10.0s ease-out;
}

.mv_zoom_out.show {
	transform: scale(1.0);
}

.mv_copy span {
	display: block;
	opacity: 0;
	/* 最初は消しておく */
	/* クリップパス：上から下に表示するため、最初は「下辺が0（上が隠れた状態）」にする */
	clip-path: inset(0 0 100% 0);
}

/* 表示領域に入ったら（showがついたら）順番にアニメーションを実行 */
.mv_copy.show span {
	animation: clipFadeIn 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 順番に出現させるための時間差（ディレイ）設定 */
.mv_copy.show .delay_1 {
	animation-delay: 1.0s;
}

/* まず0.4秒後に1行目 */
.mv_copy.show .delay_2 {
	animation-delay: 2.2s;
}

/* さらに1.2秒後に2行目 */
.mv_copy.show .delay_3 {
	animation-delay: 3.4s;
}

/* さらに1.2秒後に3行目 */

/* クリップパスとフェードのアニメーション中身 */
@keyframes clipFadeIn {
	0% {
		opacity: 0;
		clip-path: inset(0 0 100% 0);
		/* 上が隠れている */
	}

	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		/* 全開（完全に表示） */
	}
}


@media screen and (max-width: 599px) {
	.mv {
		padding: 0;
	}
}

.mv_frame>img {
	flex-shrink: 0;
}

.mv_copy {
	top: 37%;
}

.mv_note {
	width: 30%;
	bottom: 2%;
	left: 3%;
}

}

/*END*/






/* --- Btn --- */
.common_btn {
	background: #fff;
	color: #000;
	max-width: 260px;
	padding: 20px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #000;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.common_btn .arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin-right: 5px;
}

/* ボタン自体をホバーしたとき、中の矢印（.arrow）を動かす */
.common_btn:hover .arrow {
	transform: translateX(5px) rotate(45deg);
}

.common_btn:hover {
	background: #000;
	color: #fff;
}

.common_btn:hover .arrow {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}





.rela {
	position: relative;
}

.title span {
	display: block;
}


.in_img_box {
	aspect-ratio: 460/650;
}

.in_img_box_2 {
	aspect-ratio: 450/470;
}



.c_img_deco00 {
	width: calc(124 / 1040 * 100%);
	position: absolute;
	top: -130px;
	left: 31%;
}

.c_img01 {
	width: 78.26%;
	max-width: 360px;
	position: absolute;
	top: 0;
	left: -10%;
}

.c_img02 {
	width: 34.78%;
	max-width: 160px;
	position: absolute;
	top: 43%;
	left: 8%;
}

.c_img03 {
	width: 46.74%;
	max-width: 215px;
	position: absolute;
	top: 56%;
	right: 1%;
}

.c_img_deco01 {
	width: 27.17%;
	max-width: 125px;
	position: absolute;
	top: 28%;
	right: 1%;
}

.c_img04 {
	width: calc(190 / 490 * 100%);
	/*画像サイズ / 要素サイズ*/
	position: absolute;
	top: 11%;
	left: 0;
}

.c_img05 {
	width: calc(230 / 490 * 100%);
	position: absolute;
	top: 0;
	left: 43%;
}

.c_img_deco02 {
	width: calc(141 / 490 * 100%);
	position: absolute;
	top: -22%;
	right: -25%;
}

.c_img_deco03 {
	width: calc(122 / 490 * 100%);
	position: absolute;
	bottom: -30%;
	left: -30%;
}


.slider_frame {
	overflow: hidden;
	position: relative;
}

.slider_frame .slick-slide img {
	width: 100%;
	height: auto;
	transform: scale(1.1);
}

.slider_frame .slick-slide img.add-animation {
	animation: slickZoomOut 8.5s linear 0s normal both;
}

@keyframes slickZoomOut {
	0% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1.0);
	}
}


.v_img_deco01 {
	width: calc(124 / 1040 * 100%);
	position: absolute;
	top: 0;
	right: 7.5%;
}

.v_img_deco02 {
	width: calc(144 / 1040 * 100%);
	position: absolute;
	top: 55%;
	left: 2%;
}

.oc_block {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 40px 3.5%;
}

.oc_inner {
	width: 90%;
	max-width: 420px;
}



.appeal {
	display: inline-block;
}



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

/*END*/

@media screen and (max-width: 599px) {
	.c_img_deco00 {
		top: -120px;
		left: 55%;
		width: 31%;
		max-width: 124px;
	}

	.c_img_deco03 {
		bottom: -500px;
		left: 3%;
	}

	.c_img_deco02 {
		top: auto;
		right: 0;
		bottom: -20px;
	}

	.v_img_deco02 {
		top: 2%;
		left: 2%;
	}


	.in_img_box_2 {
		aspect-ratio: auto;
		height: 320px;
	}

	.sp_m_b75 {
		margin-bottom: 75px;
	}

	.oc_block {
		padding: 30px 1%;
	}


}

/*END*/














/*----------------------------------------
	アニメーション
----------------------------------------*/
.hidden {
	overflow: hidden;
}

.fade_up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade_up.show {
	opacity: 1;
	transform: translateY(0);
}

.zoom_in {
	opacity: 0;
	transform: scale(1.4);
	transition: opacity 1.5s ease, transform 2.2s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform, opacity;
	/* 動作を滑らかにする */
}

.zoom_in.show {
	opacity: 1;
	transform: scale(1);
}

.zoom_in_s {
	opacity: 0;
	transform: scale(1.15);
	transition: transform 3s ease, opacity 1s ease-in-out;
	will-change: transform, opacity;
}

.zoom_in_s.show {
	opacity: 1;
	transform: scale(1);
}



.blur_zoom_up {
	opacity: 0;
	transform: scale(1.15) translateY(0px);
	filter: blur(10px);
	transition:
		opacity 1.5s ease,
		transform 2.2s cubic-bezier(0.25, 1, 0.5, 1),
		filter 1.8s ease;

	will-change: transform, opacity, filter;
}

.blur_zoom_up.show {
	opacity: 1;
	transform: scale(1) translateY(0);
	filter: blur(0);
}





.slide_right {
	opacity: 0;
	transform: translateX(100px);
	/* 右にずらしておく */
	transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

.slide_left {
	opacity: 0;
	transform: translateX(-100px);
	/* 左にずらしておく */
	transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

.slide_right.show,
.slide_left.show {
	opacity: 1;
	transform: translateX(0);
}

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

	.slide_right,
	.slide_left {
		transform: translateY(30px);
		/* 横ではなく下からの動きに上書き */
	}
}




/* ぼかしから通常に戻る初期設定 */
.blur_in {
	opacity: 0;
	filter: blur(20px);
	/* ぼかしの強さ */
	transition: opacity 2.5s ease, filter 2.5s ease;
	/* 1.5秒かけて変化 */
}

/* 表示された時（JSでshowが付与された時） */
.blur_in.show {
	opacity: 1;
	filter: blur(0);
}



/* --------------------------------------------------
   シャボン玉が下からふわふわ湧き上がるアニメーション
-------------------------------------------------- */
.bubbles {
	opacity: 0;
	transform: translateY(120px);
	will-change: transform, opacity;
}

.bubbles.show {
	animation:
		floatUp 4s cubic-bezier(0.25, 1, 0.5, 1) forwards,
		/* 横揺れのイージングを「ease-in-out（滑らかな加減速）」 */
		bubbleSwaySingle 4s ease-in-out forwards;
	animation-delay: inherit;
}

/* アニメーション1：下から上に湧き上がる */
@keyframes floatUp {
	0% {
		opacity: 0;
		transform: translateY(120px) scale(0.6);
	}

	30% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* なめらかに揺れる専用のタイムライン */
@keyframes bubbleSwaySingle {
	0% {
		margin-left: 0;
	}

	15% {
		margin-left: -15px;
	}

	/* 最初は勢いよく左にゆらり */
	40% {
		margin-left: 13px;
	}

	/* 次は右にふわっと切り返し */
	70% {
		margin-left: -6px;
	}

	/* 上に登るにつれて、だんだん揺れを小さく */
	100% {
		margin-left: 0;
	}

	/* 最後は失速しながら中央にピタッと着地 */
}


.bubbles_2 {
	opacity: 0;
	transform: translateY(120px);
	will-change: transform, opacity;
}

.bubbles_2.show {
	animation:
		floatUp_2 4s cubic-bezier(0.25, 1, 0.5, 1) forwards,
		bubbleSwaySingle_2 4s ease-in-out forwards;
	animation-delay: inherit;
}

@keyframes floatUp_2 {
	0% {
		opacity: 0;
		transform: translateY(120px) scale(0.6);
	}

	30% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes bubbleSwaySingle_2 {
	0% {
		margin-right: 0;
	}

	15% {
		margin-right: -15px;
	}

	/* 最初は勢いよく左にゆらり */
	40% {
		margin-right: 13px;
	}

	/* 次は右にふわっと切り返し */
	70% {
		margin-right: -6px;
	}

	/* 上に登るにつれて、だんだん揺れを小さく */
	100% {
		margin-right: 0;
	}

	/* 最後は失速しながら中央にピタッと着地 */
}









/* 遅延用（リストアイテムなどを順番に出したい場合） */
.delay-1 {
	transition-delay: 0.3s;
}

.delay-2 {
	transition-delay: 0.6s;
}

.delay-3 {
	transition-delay: 0.9s;
}

.delay-4 {
	transition-delay: 1.2s;
}

.delay-5 {
	transition-delay: 1.5s;
}


/* アニメーション用のディレイクラス（animation-delay を使います） */
.anime_delay1 {
	animation-delay: 0.3s !important;
}

.anime_delay2 {
	animation-delay: 0.6s !important;
}

.anime_delay3 {
	animation-delay: 0.9s !important;
}

.anime_delay4 {
	animation-delay: 1.2s !important;
}

.anime_delay5 {
	animation-delay: 1.5s !important;
}



/* 一つになるアニメーション */
.assemble-container.fragments {
	position: relative;
	width: 100%;
	/* 画像の縦横比に合わせて調整（16:9なら56.25%、4:3なら75%） */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.piece {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;

	/* 1.8秒かけて集まる */
	transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1),
		opacity 1.5s ease-out,
		filter 1.5s ease-out;

	/* 切り抜き計算 */
	--top: calc(var(--r) * 25%);
	--right: calc((var(--c) + 1) * 25%);
	--bottom: calc((var(--r) + 1) * 25%);
	--left: calc(var(--c) * 25%);
	clip-path: inset(var(--top) calc(100% - var(--right)) calc(100% - var(--bottom)) var(--left));

	/* 初期位置：画面外に散らす */
	--move-x: calc((var(--c) - 1.5) * 300px);
	--move-y: calc((var(--r) - 1.5) * 300px);
	--rotate: calc((var(--r) - var(--c)) * 90deg);
	transform: translate(var(--move-x), var(--move-y)) rotate(var(--rotate)) scale(1.5);
	filter: blur(10px);
}

/* クラスが付与されたら元に戻る */
/* body.is-loaded または 直接要素に .active が付いたら動くように */
.is-loaded .piece,
.assemble-container.active .piece {
	opacity: 1;
	transform: translate(0, 0) rotate(0) scale(1);
	filter: blur(0);
}








/* オープニングエリア（画面全体を覆う固定要素に） */
.op_bubbles_wrap {
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/*background: linear-gradient(to bottom, #1c82e4, #4eabe1);*/
	background: #fff;
	overflow: hidden;
	z-index: 9999;
	/* 一番手前に */
	pointer-events: none;
	/* 通常時のクリックを邪魔しない */
}

/* シャボン玉を配置するエリア */
.op_bubbles {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 共通のシャボン玉スタイル */
.op_bubble {
	position: absolute;
	bottom: -100px;
	/* 画面外の初期位置 */

	/*
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.3);
  */

	background-image: url('/assets/img/hirakata_brand/syabondama.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	animation: op_floatUp ease-in-out forwards;
	will-change: transform, opacity;
}

/* シャボン玉が上へ浮くアニメーション */
@keyframes op_floatUp {
	0% {
		transform: translateY(0) scale(1);
		opacity: 0;
	}

	15% {
		opacity: 1;
		/* スッと現れる */
	}

	85% {
		opacity: 1;
	}

	100% {
		/* 確実に画面上部へ突き抜けさせる */
		transform: translateY(-130vh) scale(0.8);
		opacity: 0;
	}
}

/*
  background: url(/assets/img/hirakata_brand/syabondama.png);
*/