/*
Theme Name: mj-wave
Author: Yuichi Haraguchi
Version: 1.0.0
Text Domain: mj-wave
*/

.navbar-brand{
	width: 187px;
	height: auto;
}
#mv{
	position: relative;
}
#mv .mv_text{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateY(-50%);
}


#mv .mv_text p{
	background: #fff;
	font-weight: bold;
	display: inline-block;
}

#mv .mv_text p span.color_blue{
	color: #1D76C4;
}

#mv .mv_text p:first-child{
	font-size: min(2.3443223443223444vw,32px);
}
#mv .mv_text p:last-child{
	font-size: min(4.102564102564102vw,56px);
	margin-bottom: 0;
}
.mv_bottom{
	width: 95.67765567765568vw;
	aspect-ratio:1306/112;
	background: #EFEFEF;
	position: relative;
}

.mv_bottom::after{
	content: '';
  position: absolute;
  width: 70.62271062271063vw;
	aspect-ratio:964/186;
  background: #F4F4F4; /* お好みの色 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
	bottom: -5.4945054945054945vw;
	left: 0;
}
.intro_wrap {
  position: relative;
	padding: 100px 0px 80px;
}

.intro_wrap::before {
  width: 100vw;
	aspect-ratio:1365/1066;
  content: '';
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
  z-index: -1;
  background: #F8F8F8;
  clip-path: polygon(
    0 22.41758241758242vw,       /* ① 左上（下にずれている） */
    100% 0,                       /* ② 右上（右端の上） */
    100% calc(100% - 22.41758241758242vw),  /* ③ 右下（上にずれている） */
    0 100% );
}
.intro_flex{
	display: flex;
	gap:70px;
}
.intro_flex img{
	border: solid 8px #EFEFEF;
}
.intro_wrap h2{
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 2rem;
}
.intro_wrap h2 span{
	color: #1D76C4;
}
.intro_flex .left,
.intro_flex .right{
	align-self: center;
}
.intro_flex p{
	margin-bottom: 2.25em;
	line-height: 1.75em;
}
.intro_flex a{
	color: #00BAFF;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	padding: 1em 3em;
	border-radius: 100px;
	border: 2px solid #00BAFF;
	background: #fff;
	position: relative;
	font-weight: bold;
}

.intro_flex a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%2300baff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;
}
.intro_wrap section:not(:last-child){
	margin-bottom: 80px;
}
#attempt{
	padding: 80px 0;
	background-color: #F8F8F8;
background-image: repeating-linear-gradient(
  -45deg,
  transparent,
  transparent 5px,
  #fff 5px,
  #fff 6px
);
}

#attempt h2{
	text-align: center;
	font-size: 32px;
	color: #1D76C4;
	font-weight: bold;
	margin-bottom: 1em;
}

#attempt h2 + p{
	text-align: center;
	margin-bottom: 2.5em;
}
.attempt_flex{
	display: flex;
	justify-content: space-around;
}

.attempt_flex .item{
	width: 262px;
}
.attempt_flex .item img{
	margin-bottom: 1em;
}

.attempt_flex .item h3{
	text-align: center;
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 0;
}
.attempt_flex .item h3 span{
	font-size: 20px;
	color: #1D76C4;
	font-weight: bold;
}
/*.attempt_flex{
	margin-bottom: 2em;
}*/
#attempt .attempt_btn{
	text-align: center;
}
#attempt a{
	color: #00BAFF;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	padding: 1em 0;
	width: 320px;
	border-radius: 100px;
	border: 2px solid #00BAFF;
	background: #fff;
	position: relative;
	font-weight: bold;
}

#attempt a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%2300baff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;

}
#price_flow{
	padding: 80px 0;
}
#price_flow .price_flow_flex{
	display: flex;
	justify-content: space-around;
}
#price_flow .price_flow_flex .item{
	width: 480px;
	border-radius: 12px;
	position: relative;
	
}
#price_flow .price_flow_flex .item::before{
	width: 100%;
	height: 100%;
	border-radius: 12px;
	position: absolute;
	content: "";
	background: rgba(0,0,0,.2);
	z-index: -1;
	bottom:-1px;
	right: -1px;
	filter: blur(3px);
}

#price_flow .price_flow_flex .item img{
	border-radius: 12px;
}
#price_flow .price_flow_flex .item a{
position: relative;
	display: block;
	color: #000;
}
#price_flow .price_flow_flex .item a span.price_flow_text{
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
}

#price_flow .price_flow_flex .item a span.price_flow_text span{
	display: inline-block;
	position: relative;
	background: #fff;
	width: 292px;
	text-align: center;
	padding: 1em 0;
	border-radius: 0 0 0 12px ;
}

#price_flow .price_flow_flex .item a span.price_flow_text span::after{
	content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%2300baff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;
}
#shop_list{
	padding: 80px 0;
	background: #F8F8F8;
}
#shop_list h2{
	font-size: 32px;
	text-align: center;
	margin-bottom: 1.5em;
	color: #1D76C4;
	font-weight: bold;
}

#shop_list .shop_list_flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#shop_list .shop_list_flex .item{
	width: calc(100% / 3 - 20px);
	
}
#shop_list .shop_list_flex .item a{
	text-decoration: none;
}
#shop_list .ofi{
	border-radius: 12px 12px 0 0;
	width: 100%;
  height: 200px;
  object-fit: cover; /* 最新のブラウザ向け */
  font-family: 'object-fit: cover;'; /* ofi.js ポリフィル向け */
}

#shop_list .shop_list_flex .item .price_flow_text{
	background: #fff;
	border-radius: 0 0 12px 12px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	padding: 1.25em 0;
	text-decoration: none;
	color: #000;
	margin-bottom: 0;
}
#shop_list .shop_list_flex .item .price_flow_text::after{
	content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%2300baff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;
}

#news_list{
	padding: 80px 0;
	background: #fff;
}
#news_list h2{
	font-size: 32px;
	text-align: center;
	margin-bottom: 1.5em;
	color: #1D76C4;
	font-weight: bold;
}
#news_list .news_list_wrap{
	max-width: 720px;
	margin: 0 auto 4em;
}
#news_list .news_list_wrap .item{
	border-bottom:1px solid #DDDDDD;
}
#news_list .news_list_wrap a{
	display: flex;
	padding: 20px 0;
	text-decoration: none;
	color: #000;
	
}
#news_list .news_list_wrap a .news_date{
	padding: 0 40px;
	margin-bottom: 0;
}

#news_list .news_list_wrap a .news_ttl{
	font-size: 16px;
	margin-bottom: 0;
	line-height: 1.5;
}

#news_list .news_list_btn{
	text-align: center;
}
#news_list .news_list_btn a{
	color: #00BAFF;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	padding: 1em 0;
	width: 320px;
	border-radius: 100px;
	border: 2px solid #00BAFF;
	background: #fff;
	position: relative;
	font-weight: bold;
}

#news_list .news_list_btn a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%2300baff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;

}
#footer_nav{
	padding: 80px 0;
  background: linear-gradient(to bottom, #ffffff 50%, #F8F8F8 50%);
}
#footer_nav .footer_nav_wrap{
	display: flex;
	column-gap: 80px;
	justify-content: center;
}
#footer_nav .footer_nav_wrap .item{
	width: 440px;
border-radius: 12px;
	padding: 40px;
}

#footer_nav .footer_nav_wrap .item a{
	color: #fff;
	text-decoration: none;
	text-align: center;
}
#footer_nav .footer_nav_wrap .item a h2{
	font-size: 28px;
	margin-bottom: 1em;
	padding-top: 40px;
	position: relative;
}
#footer_nav .footer_nav_wrap .item a h2::before{
content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 16px);
	width: 32px;
	height: 32px;
	background-image: url("./assets/images/top/emvelope.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#footer_nav .footer_nav_wrap .item:last-child a h2::before{
	background-image: url("./assets/images/top/building.svg");
}
#footer_nav .footer_nav_wrap .item:first-child{
	background: #1D76C4;
	
}
#footer_nav .footer_nav_wrap .item:last-child{
	background: #2ABAFF;
}

#footer_nav .footer_nav_wrap .item a .footer_nav_btn{
	background: #fff;
	border-radius: 30px;
	padding: 1em 0;
	display: block;
	position: relative;
	font-weight: bold;
}
#footer_nav .footer_nav_wrap .item:first-child a .footer_nav_btn{
	color: #1D76C4;
}
#footer_nav .footer_nav_wrap .item:last-child a .footer_nav_btn{
	color: #2ABAFF;
}
#footer_nav .footer_nav_wrap .item:first-child a .footer_nav_btn::after{
	content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%231d76c4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;
}
#footer_nav .footer_nav_wrap .item:last-child a .footer_nav_btn::after{
	content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.375,11.375a8,8,0,1,0,8-8A8,8,0,0,0,3.375,11.375ZM14.494,9.706a.745.745,0,0,1,1.05,0,.733.733,0,0,1,.215.523.746.746,0,0,1-.219.527l-3.627,3.615a.741.741,0,0,1-1.023-.023L7.21,10.679a.742.742,0,1,1,1.05-1.05l3.119,3.15Z' transform='translate(-3.375 19.375) rotate(-90)' fill='%2300baff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: 15px;
}
footer{
	padding: 80px 0 0;
	background: #F8F8F8;
}

footer .container{
	padding-bottom: 50px;
}
footer .footer_flex{
	display: flex;
}
footer .footer_flex .left{
	width: 45%;
}

footer .footer_flex .left .logo{
	width: 240px;
}
footer .footer_flex .right{
	width: 55%;
}
footer .footer_inner{
	display: flex;
	gap:20px;
}

footer .footer_inner .footer_inner_item ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

footer .footer_inner .footer_inner_item ul li:not(:last-child){margin-bottom: 1em;
}

footer .footer_inner .footer_inner_item ul li a{
	text-decoration: none;
	color: #000;
}
footer #copyright{
	padding: 20px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	background: #1D76C4;
}
@media screen and (max-width:768px) {
	#mv .mv_text{
		top: 32px;
		left: 15px;
		transform: translateY(0);
	}
	#mv .mv_text p{
		display: block;
		background: inherit;
	}
	#mv .mv_text p:first-child {
    font-size: 18px;
}
	#mv .mv_text p:last-child {
    font-size: 36px;
}
	#mv .mv_text p span.for_sp{
		display: inline-block;
		background: #fff;
		padding:  0 .5rem;
	}
	
	#mv .mv_text p span.for_sp.end{
		margin-top: 1rem;
	}
	.mv_bottom{
		width: 100%;
		aspect-ratio:inherit;
		padding:10px 0 10px;
	}
	.mv_bottom::after{
		content: none;
	}
	.mv_bottom .top_cta .top_cta_wrap{
		padding-top: 10px;
		position: relative;
	}
	
	.mv_bottom .top_cta .top_cta_wrap::before{
		content: 'ご予約は各店舗から';
		background: #fff;
		border:2px solid #00BAFF;
		border-radius: 16px;
		padding: 5px 1.5em;
		font-size: 14px;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50% , -20%);
		z-index: 1;
	}
	.mv_bottom .top_cta .top_cta_wrap a{
		background: #00BAFF;
		text-align: center;
		border-radius: 30px;
		display: block;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		padding: 20px 0px;
		position: relative;
	}
	.mv_bottom .top_cta .top_cta_wrap a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3.375,13.375a10,10,0,1,0,10-10A10,10,0,0,0,3.375,13.375Zm13.9-2.087a.931.931,0,0,1,1.312,0,.917.917,0,0,1,.269.654.933.933,0,0,1-.274.659L14.048,17.12a.927.927,0,0,1-1.279-.029L8.168,12.5a.928.928,0,0,1,1.312-1.312l3.9,3.937Z' transform='translate(-3.375 23.375) rotate(-90)' fill='%23fff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
		position: absolute;
		right: 15px;
		top: calc(50% - 10px);
}
	.intro_wrap {
		padding: 50px 0;
	}
	.intro_wrap h2 {
		font-size: 26px;
		line-height: 1.5;
	}
	.intro_flex{
		flex-wrap: wrap;
		gap:0;
	}
	.intro_flex .left{
		width: 100%;
	}
	#intro1 .intro_flex .left,
	#intro2 .intro_flex .right,
	#intro3 .intro_flex .left{
		margin-bottom: 1em;
	}
	
	.intro_flex .right{
		width: 100%;
	}
	.intro_flex a{
		display: block;
	}
	#intro2 .intro_flex .left{
		order: 2;
	}
	#intro2 .intro_flex .right{
		order: 1;
	}
	.intro_wrap::before{
		aspect-ratio:375/872;
	}
	#attempt{
		padding: 50px 0;
	}
	#attempt h2{
		font-size: 26px;
	}
	.attempt_flex{
		flex-wrap: wrap;
		gap:10px; 
	}
	/*.attempt_flex .item:not(:last-child){
		margin-bottom: 1em;
	}*/
	.attempt_flex .item{
		width: calc(50% - 5px);
	}
	
	.attempt_flex .item h3 span{
		font-size: 18px;
		}
	#shop_list .shop_list_flex .item{
		width:100%;
	}
	#shop_list .shop_list_flex .item:not(:last-child){
		margin-bottom: 1em;
	}
	#shop_list{
		padding: 50px 0;
	}
	
	#shop_list h2{
		font-size: 26px;
	}
	#news_list h2{
		font-size: 26px;
	}
	#news_list{
		padding: 50px 0;
	}
	#news_list .news_list_wrap a .news_date{
		padding: 0 10px;
	}
	#news_list .news_list_wrap a{
		padding: 10px 0;
	}
	#news_list .news_list_wrap{
		margin-bottom: 2em;
	}
	#footer_nav{
		padding: 50px 0;
	}
	#footer_nav .footer_nav_wrap {
    column-gap: 10px;
	}
	#footer_nav .footer_nav_wrap .item{
		padding: 10px;
	}
	#footer_nav .footer_nav_wrap .item a h2{
		font-size: 20px;
	}
	#footer_nav .footer_nav_wrap .item a .footer_nav_btn{
		padding: .5em 0;
	}
	#footer_nav .footer_nav_wrap .item a .footer_nav_btn::after{
		content: none!important;
}
	footer{
		padding: 0 0;
	}
	footer .footer_flex{
		flex-wrap: wrap;
	}
	footer .footer_flex .left{
		width: 100%;
		margin-bottom: 1em;
	}
	footer .footer_flex .left .logo{
		margin: 0 auto;
	}
	footer .footer_flex .right{
	width: 100%;
	}
	#pc_cta{
		display: none;
	}
	.navbar-nav{
		padding: 1em 0;
	}
	.nav-link{
		text-align: center;
	}
}
@media screen and (min-width:768px) {
	.top_cta{
		display: none;
	}
	#pc_cta{
		position: fixed;
		bottom:60px;
		right: 10px;
		z-index: 999;
	}
	
	#pc_cta .top_cta_wrap{
		padding-top: 10px;
		position: relative;
	}
	
	#pc_cta .top_cta_wrap::before{
		width: 210px;
		content: 'ご予約は各店舗から';
		background: #fff;
		border:2px solid #00BAFF;
		border-radius: 16px;
		padding: 5px 0;
		font-size: 14px;
		text-align: center;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50% , -20%);
		z-index: 1;
	}
	#pc_cta .top_cta_wrap a{
		width: 340px;
		background: #00BAFF;
		text-align: center;
		border-radius: 30px;
		display: block;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		padding: 20px 0px;
		position: relative;
	}
	#pc_cta .top_cta_wrap a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3.375,13.375a10,10,0,1,0,10-10A10,10,0,0,0,3.375,13.375Zm13.9-2.087a.931.931,0,0,1,1.312,0,.917.917,0,0,1,.269.654.933.933,0,0,1-.274.659L14.048,17.12a.927.927,0,0,1-1.279-.029L8.168,12.5a.928.928,0,0,1,1.312-1.312l3.9,3.937Z' transform='translate(-3.375 23.375) rotate(-90)' fill='%23fff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
		position: absolute;
		right: 15px;
		top: calc(50% - 10px);
}
}