/*
Theme Name: Twenty Twenty-One Child
Template: twentytwentyone
Author: Child Theme Configurator
Version: 2.4.1733906211
Updated: 2024-12-11 17:36:51

*/

/*定型文*/
a,
a::before,
a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	text-decoration: none!important;
}
/* other-style
----------------------------------------------- */
.MT0 { margin-top: 0px !important; }
.MT10 { margin-top: 10px !important; }
.MT20 { margin-top: 20px !important; }
.MT30 { margin-top: 30px !important; }
.MT40 { margin-top: 40px !important; }
.MT50 { margin-top: 50px !important; }
.MT100 { margin-top: 100px !important; }

.MB0 { margin-bottom: 0px !important; }
.MB5 { margin-bottom: 5px !important; }
.MB10 { margin-bottom: 10px !important; }
.MB20 { margin-bottom: 20px !important; }
.MB30 { margin-bottom: 30px !important; }
.MB40 { margin-bottom: 40px !important; }
.MB50 { margin-bottom: 50px !important; }

.MR0 { margin-right: 0 !important; }
.MR10 { margin-right: 10px !important; }
.MR20 { margin-right: 20px !important; }
.MR30 { margin-right: 30px !important; }
.MR40 { margin-right: 40px !important; }
.MR50 { margin-right: 50px !important; }

.ML10 { margin-left: 0 !important; }
.ML10 { margin-left: 10px !important; }
.ML20 { margin-left: 20px !important; }
.ML30 { margin-left: 30px !important; }
.ML100 { margin-left: 100px !important; }

.PT0 { padding-top: 0px !important; }
.PT10 { padding-top: 10px !important; }
.PT20 { padding-top: 20px !important; }
.PT30 { padding-top: 30px !important; }
.PB0 { padding-bottom: 0px !important; }
.PB10 { padding-bottom: 10px !important; }
.PB20 { padding-bottom: 20px !important; }
.PB30 { padding-bottom: 30px !important; }
.PR10 { padding-right: 10px !important; }
.PR20 { padding-right: 20px !important; }
.PR30 { padding-right: 30px !important; }
.PL10 { padding-left: 10px !important; }
.PL20 { padding-left: 20px !important; }
.PL30 { padding-left: 30px !important; }
.PR10 { padding-right: 10px !important; }
.PR20 { padding-right: 20px !important; }
.PR30 { padding-right: 30px !important; }
.P80 { padding: 80px 0; }
.P50 { padding: 50px 0; }

.w10 { width:10%; }
.w20 { width:20%; }
.w30 { width:30%; }
.w40 { width:40%; }
.w45 { width:45%; }
.w50 { width:50%; }
.w55 { width:55%; }
.w60 { width:60%; }
.w70 { width:70%; }
.w80 { width:80%; }
.w90 { width:90%; }
.w100 { width:100%; }

.col-r { float:right!important; }
.col-l { float:left!important; }
a.text-none { text-indent: -9999px; }
.clear { clear:both; }
div, img { box-sizing: border-box; }

/* フォントサイズ変更 */
.fs10 { font-size: 10px !important;}
.fs12 { font-size: 12px !important;}
.fs13 { font-size: 13px !important;}
.fs18 { font-size: 18px !important;}
.fs30 { font-size: 30px !important;}
.fs120{ font-size: 120% !important;}
.fs140{ font-size: 140% !important;}


/* 文字位置 */
.center { text-align: center;}
.right { text-align: right;}
.left { text-align: left;}
.pc { display: block; }
.mb{ display: none; }

@media only screen and (max-width:1020px){
	.w40 { width:100%; }
	.w45 { width:100%; }
	.w50 { width:100%; }
	.w55 { width:100%; }
	.w60 { width:100%; }
	.w70 { width:100%; }
	.w80 { width:100%; }
	.w90 { width:100%; }
	.col-r { float:none!important; }
	.col-l { float:none!important; }
	.PL10 { padding-left: 0 !important; }
	.PL20 { padding-left: 0 !important; }
	.PL30 { padding-left: 0 !important; }
	.PR10 { padding-right: 0 !important; }
	.PR20 { padding-right: 0 !important; }
	.PR30 { padding-right: 0 !important; }
	.pc { display: none; }
	.mb{ display: block; }
}

div, img, a { box-sizing: border-box; }
a:hover { opacity: 0.8; }
a:focus { outline: none; }
li { list-style : none; }
ul { padding:0; margin: 0; }

/*****************************リンク無効**************************/
a.none { pointer-events: none; }

/****************PCのみflex*************/
.flex { display: flex;}
.flex.center { align-items: center;}
.flex.wrap { flex-wrap: wrap; }
.flex.between { justify-content: space-between; }
.flex.around { justify-content: space-around; }
.flex.reverse { flex-direction: row-reverse; }
.flex.start { align-items: flex-start; }
.flex.justify_center { justify-content: center; }

.flex.set2 > * { width: calc(100% / 2 - 15px) !important; }
.flex.set3 > * { width: calc(100% / 3 - 10px) !important; }
.flex.set4 > * { width: calc(100% / 4 - 10px) !important; }
@media only screen and (max-width: 415px) {
	.flex { display: block; }
	.flex.set2 > * { width: 100%!important; }
	.flex.set3 > * { width: 100%!important; }
	.flex.set4 > * { width: 50%!important; }
}
/* spでflex 解除なし */
.flex_sp { display: flex; }
.flex_sp.center { align-items: center;}
.flex_sp.wrap { flex-wrap: wrap; }
.flex_sp.between { justify-content: space-between; }
.flex_sp.around { justify-content: space-around; }
.flex_sp.reverse { flex-direction: row-reverse; }
.flex_sp.start { align-items: flex-start; }
.flex_sp.justify_center { justify-content: center; }

.flex_sp.set2 > * { width: calc(100% / 2 - 15px) !important; }
.flex_sp.set3 > * { width: calc(100% / 3 - 10px) !important; }
.flex_sp.set4 > * { width: calc(100% / 4 - 10px) !important; }

/* top */

body {
	background: #fff;
	font-family:"Zen Kaku Gothic New", sans-serif !important;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	margin: 0;
	/*overflow-x: hidden;*/
	/*scroll-behavior: smooth;*/
}

header {
	background-color: #fff;
	position: relative;
	padding: 30px;
}
header img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	height: 120px;
	top: 0;
	z-index: 100;
}
/* btn-reservation */
.btn-reservation {
	width: 180px;
	height: 142px;
	position: fixed;
	right: 1%;
	bottom: 65px;
	z-index: 1100;
	cursor: pointer;
	transition: transform .3s cubic-bezier(.65,.05,0,1.04),opacity .3s cubic-bezier(.91,0,0,1);
}
.btn-reservation:hover .reservation__svg {
	fill: #000;
}
.btn-reservation .reservation__svg {
	fill: #0046aa;
	transition: fill .6s cubic-bezier(.28,.11,.32,1);
}
.reservation__path {
	fill-rule: evenodd;
	clip-rule: evenodd;
}
.btn-reservation:hover .label {
	color: #0046aa;
}
.btn-reservation .label {
	font-size: 1.125rem;
	line-height: 2.3333333333;
	letter-spacing: .075em;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-50%);
	transition: color .6s cubic-bezier(.28,.11,.32,1);
}
.btn-reservation .label a:hover {
	opacity: 0.8;
}
.btn-reservation .label a {
	color: #fff;
	font-size: 15px;
	font-weight: bold;
}
.btn-reservation .label a {
	color: #fff;
	font-size: 15px;
	font-weight: bold;
}

.container {
	width: 80%;
	margin: 0 auto;
	padding: 120px 0;
}
section h2 {
	font-size: 35px;
	margin: 0 0 50px;
	font-weight: bold;
	text-align: center;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
section h3 {
	font-size: 25px;
	margin: 10px 0;
	font-weight: bold;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
section h2 span {
	display: block;
	font-size: 15px;
	letter-spacing: 5px;
	padding-top: 5px;
}
section p {
	font-size: 16px;
	line-height: 2;
}

.main {
	background: #fff;
}
.about {
	background: url(images/bg_miyakojima.png)no-repeat right #fff;
	/* background-size: 50%; */
	background-attachment: fixed;
	background-position-x: 125%;
}
.about p {
	line-height: 2.5;
}
.features {
	background: #effaff;
}
.features img { width: 100%; }
#facility {
	background: #fff !important;
}
.facility_R {
	padding-left: 20px;
}
header .reservation-button {
	background-color: #0046aa;
	color: #fff;
	padding: 10px 30px;
	text-decoration: none;
	font-size: 16px;
	display: block;
	text-align: center;
}
.reservation a {
	color: #fff;
}
.reservation-button {
	display: block;
	width: 300px;
	height: 58px;
	background-color: #fff;
	border: 1px solid #0046aa;
	border-radius: 30px;
	padding: 0 30px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	margin: 0 auto;
	line-height: 58px;
	text-align: center;
}
.reservation-button::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: 5px;
	height: 9px;
	top: 18px;
	right: 30px;
	background-size: contain;
	background-repeat: no-repeat;
}
.reservation-button_text {
	position: relative;
	z-index: 1;
	color: #0046aa;
	font-size: 17px;
	line-height: 44px;
	font-weight: bold;
}
.reservation-button_text {
	-webkit-transition: color .6s cubic-bezier(0, 0.55, 0.45, 1);
	transition: color .6s cubic-bezier(0, 0.55, 0.45, 1);
}
.reservation-button:hover .reservation-button_text {
	color: #fff;
}
.reservation-button:hover::after {
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
.reservation-button::after {
	-webkit-transition: -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
	transition: -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
	transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1);
	transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1), -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
}
.reservation-button::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #0046aa;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
}
.reservation-button {
	cursor: pointer;
}

.access {
	background: url(images/bg_access.jpg);
}
.access_R {
	padding: 120px 20px 120px 10%;
	width: 50%;
}
.reservation {
	background: url(images/bg_reservation.jpg);
	color: #fff !important;
	text-align: center;
	background-size: cover;
	background-attachment: fixed;
}
#facility td {
	font-size: 16px;
}

footer {
	background: #4996b8;
}
footer, footer a {
	color: #fff;
}
footer .container {
	padding: 50px 0 30px;
}
.footer-bottom {
	background: #0046aa;
	color: #fff;
	margin: 0 !important;
	text-align: center;
	font-size: 12px;
	padding: 5px;
}
.footer_logo {
	display: block;
	margin: 0 auto 30px;
	width: 100px;
}
.footer-social {
	display: block;
	margin: 30px auto 0;
	text-align: center;
}
.footer-social a {
	padding: 0 10px;
	color: #fff;
}
.footer-info, .footer-company {
	padding: 0 20px;
}

/*タブレット横*/
@media only screen and (min-width: 768px) and (max-width: 1124px) {
}

/*タブレット縦とスマホ横*/
@media only screen and (min-width: 624px) and (max-width: 1020px) {
}

/*スマホ縦*/
@media only screen and (max-width: 415px) {
#about { background-color: #fff; background: url(https://miyakojima-hanasaki.com/wp-content/themes/hanasaki-child/images/bg_miyakojima.png)no-repeat #fff; }
section h3, footer h3 { font-size: 20px; margin: 10px 0; font-weight: bold; } 
.container {  width: 90%;  margin: 0 auto;  padding: 50px 5px; z-index: 1; position: relative; } 
section h2 {  font-size: 30px;  margin: 0 0 20px; }
.facility_R {  padding-left: 0; } 
.access_R {  padding: 50px 5px;  width: 90%;  margin: 0 auto; }
.access iframe {  width: 100% !important;  height: 300px !important; }
#reservation { background: url(https://miyakojima-hanasaki.com/wp-content/themes/hanasaki-child/images/sp_bg_reservation.jpg)no-repeat; background-size: 100%; }
.btn-reservation.js-reservation { display: none; }
section p { line-height: 1.5; margin: 0 0 20px; }
.about p br {  display: none; } 
#menu-icon { top: 20px; left: 10px; } 
.sp_yoyaku { position: fixed; bottom: 0; padding: 13px 0; text-align: center; width: 100%; background: #0046aa; font-size: 20px; font-weight: bold; z-index: 1000; } 
footer p { font-size: 15px; } 
table td, table th, .wp-block-table td, .wp-block-table th { font-size: 15px; }
.footer-bottom { margin-bottom: 50px !important; background: #001b42; }
.sp_yoyaku i { padding-right: 10px; }
}



header {
	position: relative;
}
.menu-icon {
	width: 30px;
	height: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	z-index: 100000000;
	position: fixed;
}
.bar {
	width: 100%;
	height: 4px;
	background-color: #333;
	transition: all 0.3s ease;
}
.menu-icon.open .bar:nth-child(1) {
	transform: rotate(45deg);
	transform-origin: 10% 10%;
	background: #fff;
}
.menu-icon.open .bar:nth-child(3) {
	transform: rotate(-45deg);
	transform-origin: 10% 90%;
	background: #fff;
}
.menu {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100vh;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 1000;
}
.menu ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	transition: color 0.3s;
}
.menu.open {
	transform: translateX(0);
}
.menu ul {
	padding: 30px 20px;
	text-align: center;
}
.menu ul li {
	margin: 20px 0;
}
.menu ul li a:hover {
	opacity: 0.5;
}
.menu.open {
	transform: translateX(0);
}

.menu-icon.open .bar:nth-child(2) {
	opacity: 0;
}

/* footer */
footer h3 {
	font-size: 20px;
	font-weight: bold;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
footer p {
	font-size: 16px;
}


/*slick*/
.home-catch {
	min-width: 1200px;
	width: 100%;
	position: relative;
	transition: height .3s;
	height: 550px;
}
.home-catch .slider {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
}
.home-catch .slider .slick-list, .home-catch .slider .slick-track {
	height: 100%;
}
.home-catch .slider .slick-list, .home-catch .slider .slick-track {
	height: 100%;
}
.home-catch .slider .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1.2, 1.2);
	transition: opacity 3s ease, transform 7s linear !important;
}
.slick-slide img {
	display: block;
}
.home-catch .slider .inner .sp-disp, .home-catch .slider .inner .tb-disp {
	display: none;
}
.home-catch .slider .inner img {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
}
/*タブレット縦横レスポンシブ*/
@media screen and (min-width:640px) and ( max-width:1200px) {
	#home-catch {
		min-width: 100% !important;
		height: 500px !important;
	}
	.home-catch .slider .inner .tb-disp { display: block; }
	.home-catch .slider .inner .pc-disp, .home-catch .slider .inner .sp-disp { display: none; }
}
@media only screen and (max-width:640px){
	#home-catch {
		height: 500px !important;
		min-width: 100% !important;
	}
	.home-catch .slider .inner .sp-disp { display: block; }
	.home-catch .slider .inner .pc-disp, .home-catch .slider .inner .tb-disp { display: none; }
}
/*side_contact*/
.side_contact {
	position: fixed;
	right: 0;
	background: #ccc;
	top: 20%;
	z-index: 100;
}
.side_contact ul li:nth-child(1) {
	background: #1a3300;
}
.side_contact ul li:nth-child(2) {
	background: #615540;
}
.side_contact li {
	padding: 20px 0;
	box-sizing: border-box;
	display: block;
	margin: 0;
}
.side_contact li:hover{
	opacity: 0.8;
}
.side_contact li img {
	width: 40%;
	display: block;
	margin: 0 auto;
}

/*sp_contact*/
.sp_contact { display: none; }
@media only screen and (max-width:1200px){
	.side_contact{ display: none; }
	.sp_contact {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: block;
		z-index: 100;
	}
	.sp_contact ul {
		display: flex;
		flex-wrap: wrap;
	}
	.sp_contact ul li {
		width: 25%;
		padding: 15px 10px;
		box-sizing: border-box;
		margin: 0;
	}
	.sp_contact ul li img {
		display: block;
		margin: 0 auto;
		height: 50px;
	}
	.sp_contact ul li:nth-child(1) {
		background: #1a3300;
	}
	.sp_contact ul li:nth-child(2) {
		background: #615540;
	}
	.sp_contact ul li:nth-child(3) {
		background: #375b12;
	}
	.sp_contact ul li:nth-child(4) {
		background: #44371f;
	}	
}