@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* CSS Document */
html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	text-align: center;
}
p {
	margin:0;
	padding: 0;
	overflow-wrap: break-word;
}
a {
	color: #000;
	text-decoration: none;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
ul,ol {
	list-style-type: none;
	padding:0;
	margin:0;
}
/* Common */
.cont {
	width:94%;
	max-width:1070px;
	margin:0 auto;
}
.center {
	display: block;
	margin: 0 auto 2rem;
}
.br30 {
	border-radius: 3rem;
}
h2 {
	font-size: 1.4rem;
	line-height: 1.2;
	margin-bottom: 3rem;
	position: relative;
	text-align: left;
	padding-left: 2rem;
	font-family: "Josefin Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
h2:before {
	content: "●";
	font-size: 1.2rem;
	position: absolute;
	top: calc(50% - 0.6em);
	left: 0;
	line-height: 1.2;
	pointer-events: none;
	background: linear-gradient(90deg, #b8d88e, #84cabf 60%, #9bd5e5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pc_none {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1200ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
.zoomin {
    transform: scale(0.75);
    opacity: 0;
}
.zoomin.scrollzoom {
  animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes zoomIn {
  20% {
    transform: scale(0.75);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (max-width: 1070px) {
	html {
		font-size: 48.5%;
	}
}
@media screen and (max-width: 640px) {
	.pc_none {
		display: inline;
	}
}
@media screen and (max-width: 480px) {
	html {
		font-size: 54.5%;
	}
	.cont h2 {
		font-size: 2rem;
	}
}

/* ----------------------------- */
/* メインビジュアル
/* ----------------------------- */
#mv {
	background-image: url(../img/wao/mv_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	aspect-ratio: 16 / 10;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#mv img {
	position: absolute;
	display: block;
}
#mv_title {
	width: 50%;
	left: calc(50% - 25%);
	top: 5%;
	z-index: 11;
	animation: poyopoyo 1.5s ease-out forwards;
	animation-delay: 2s;
}
#mv p {
	position: absolute;
	writing-mode: vertical-rl;
	font-size: 2vw;
	letter-spacing: 0.05em;
	font-weight: 500;
	line-height: 1;
	z-index: 10;
	top: 13%;
	right: 11%;
	opacity: 0;
	animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
	animation-delay: 2s;
}
#mv p span {
	display: inline-block;
	background: #fff;
	color: #4e4b4a;
	padding: 8px;
	margin-right: 8px;
}
#mv_w {
	width: 38%;
	left: -3.5%;
	top: -29%;
	z-index: 7;
	animation: slide-skew1 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 1s;
	opacity: 0;
}
#mv_a {
	width: 21.5%;
	left: 15%;
	bottom: 11%;
	z-index: 6;
	animation: slide-skew2 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 1.25s;
	opacity: 0;
}
#mv_o {
	width: 28%;
	right: -6.5%;
	top: 25%;
	animation: slide-skew3 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 1.5s;
	opacity: 0;
}
#mv_img01 {
	width: 15%;
	right: 19.5%;
	top: 0;
    animation-name: fadeIn;
    animation-delay: 750ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
#mv_img02 {
	width: 9%;
	left: 17%;
	top: 10%;
	z-index: 8;
    animation-name: fadeIn;
    animation-delay: 1250ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
#mv_img03 {
	width: 21.5%;
	left: 3%;
	top: 34%;
	z-index: 5;
    animation-name: fadeIn;
    animation-delay: 250ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
#mv_img04 {
	width: 24.5%;
	left: 35%;
	bottom: 9%;
    animation-name: fadeIn;
    animation-delay: 1000ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
#mv_img05 {
	width: 18.5%;
	right: 21%;
	bottom: 11%;
    animation-name: fadeIn;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
#mv_img06{
	width: 13%;
	right: 5.5%;
	bottom: 12%;
    animation-name: fadeIn;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(1.05);
  }
}
@keyframes poyoyon {
  0% {
    transform: translateY(140px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
  20%,100% {
    opacity: 1;
  }
}
@keyframes slide-skew1 {
  0% {
    transform: translate(-80px,-80px) scale(0.7) rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: translate(0,0) scale(1.0) rotate(0deg);
  }
  20%,100% {
    opacity: 1;
  }
}
@keyframes slide-skew2 {
  0% {
    transform: translate(-80px,80px) scale(0.7) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: translate(0,0) scale(1.0) rotate(0deg);
  }
  20%,100% {
    opacity: 1;
  }
}
@keyframes slide-skew3 {
  0% {
    transform: translate(120px,0) scale(0.7) rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: translate(0,0) scale(1.0) rotate(0deg);
  }
  20%,100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
    }
}
@media screen and (max-width: 480px) {
	#mv {
		aspect-ratio: inherit;
		height: 100vh;
	}
	#mv_title {
		width: 80%;
		left: calc(50% - 40%);
		top: 18%;
	}	
	#mv_w {
		width: 48%;
		left: -3.5%;
		top: -5%;
	}
	#mv_a {
		width: 29%;
		left: 12%;
		bottom: 28%;
	}
	#mv_o {
		width: 38%;
		right: -6.5%;
		top: 45%;
	}
	#mv p {
		font-size: 4.5vw;
		top: 48%;
		left: calc(50% - 10%);
		right: inherit;
	}
	#mv_img01 {
		width: 25%;
		right: 14.5%;
		top: 6%;
	}
	#mv_img02 {
		width: 14%;
		left: 8%;
		top: 12%;
	}
	#mv_img03 {
		width: 31.5%;
		left: -5%;
		top: 44%;
	}
	#mv_img04 {
		width: 34.5%;
		left: 5%;
		bottom: 4%;
	}
	#mv_img05 {
		width: 25%;
		right: 11%;
		bottom: 13%;
	}
	#mv_img06{
		width: 20%;
		right: 7%;
		bottom: 1%;
	}	
	
}

/* ----------------------------- */
/* コンセプト
/* ----------------------------- */
.concept {
	background: #f8f8ec;
	padding: 6rem 0 10rem;
}
.concept_wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 940px;
	margin:0 auto;
}
.concept_wrap div {
	width: 43.5%;	
}
.concept_wrap div b {
	display: block;
	font-size: 3rem;
	letter-spacing: 0.15em;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 3rem;
}
.concept_wrap div img {
	width: 100%;	
}
.concept_wrap p {
	width: 50%;
	font-size: 1.6rem;
	line-height: 2.5;
}
@media screen and (max-width: 640px) {
	.concept_wrap {
		display: block;
	}
	.concept_wrap div {
		width: 100%;
		margin-bottom: 2rem;
	}
	.concept_wrap p {
		width: 100%;
	}
}
@media screen and (max-width: 480px) {
	.concept {
		padding-bottom: 6rem;	
	}
	.concept_wrap p {
		text-align: justify;
	}
	.concept_wrap p br {
		display: none;
	}
}

/* ----------------------------- */
/* トピックス
/* ----------------------------- */
.topics {
	padding: 6rem 0;
}
.topics b {
	display: block;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	margin-bottom: 5rem;
}
.topics ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1000px;
	margin:0 auto 7rem;
}
.topics ul li {
	width: 30.5%;	
}
.topics ul li div {
	margin-bottom: 1.5rem;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 16 / 9;
}
.topics ul li div img {
	width: 100%;
	transition-duration: 500ms;
}
.topics ul li a:hover div img {
	width: 110%;
}
.topics ul li span {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: #6bcaba;
	margin-bottom: 0.5rem;
}
.topics ul li p {
	font-size: 1.6rem;
	line-height: 1.4;
	letter-spacing: 0.05em;
}
.topics .link {
	text-align: center;
}
.topics .link a {
	display: inline-block;
	font-size: 1.7rem;
	line-height: 28px;
	letter-spacing: 0.1em;
	text-decoration: underline;
	font-weight: 600;
	padding-right: 3.6rem;
}
.topics .link a:after {
	content: "→";
	position: absolute;
	top: calc(50% - 1.3em);
	right: 0;
	background: #4d4d4d;
	font-size: 1rem;
	font-weight: 400;
	color: #fff;
	text-align: center;
	width: 28px;
	line-height: 28px;
	border-radius: 3rem;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.topics .link a:hover:after {
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateX(5px);
}
@media screen and (max-width: 1070px) {
	.topics .link a {
		padding-right: 4.5rem;
	}	
	.topics .link a:after {
		top: calc(50% - 1.6em);
	}
}
@media screen and (max-width: 480px) {
	.topics ul {
		display: block;
	}
	.topics ul li {
		width: 90%;
		margin: 0 auto 3rem;
	}	
}

/* ----------------------------- */
/* マーケット
/* ----------------------------- */
.market {
	padding: 7rem 0 12rem;
	background-image: url(../img/wao/market_bg.png), linear-gradient(90deg, #d6e9bf, #b9e1db 60%, #c6e7ef);
	background-repeat: no-repeat, repeat-y;
	background-size: 100%, auto;
	background-position: bottom, top;
	overflow: hidden;
}
.market_label, .gallery_label {
	overflow: hidden;
	display: flex;
	margin-bottom: 10rem;
}
.market_label {
	transform:rotate(-6deg);
}
.market_label ul, .gallery_label ul {
	display: flex;
	list-style: none;
	padding: 0;
	animation: infinity-scroll-left 30s infinite linear 0.5s both;
}
.market_label ul li, .gallery_label ul li {
	width: calc(100vw / 2.5);
}
.market_label ul li>img, .gallery_label ul li>img {
	width: 98%;
}
@keyframes infinity-scroll-left {
	from {
	  transform: translateX(-100%);
	}
	  to {
	  transform: translateX(0%);
	}
}
.market_frame_top {
	background-image: url(../img/wao/market_frame01.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	display: flex;
	justify-content: center;
	
}
.market_frame_top img {
	width: 65%;
	max-width: 670px;
	margin-bottom: -3.5rem;
}
.market_frame_middle {
	background-image: url(../img/wao/market_frame02.png);
	background-repeat: repeat-y;
	background-size: 100%;
	padding: 7rem 5rem 3rem;
	margin-top: -1px;
}
.market_outline {
	text-align: center;
	font-weight: 700;
	margin-bottom: 3rem;
}
.market_outline p:nth-child(1) {
	font-size: 2.6rem;
	line-height: 1.4;
	margin-bottom: 0.7rem;
	
}
.market_outline p:nth-child(2) {
	font-size: 3.4rem;
	margin-bottom: 2rem;
}
.market_outline p:nth-child(3) {
	font-size: 2.6rem;
	
}

.market_outline p:nth-child(3) span {
	display: inline-block;
	font-size: 2rem;
	letter-spacing: 0.2em;
	line-height: 1;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	margin-right: 1.5rem;
}
.market_about, .market_point {
	display: flex;
	justify-content: space-between;
	max-width: 860px;
}
.market_about {
	align-items: flex-start;
	margin: 0 auto 3rem;
}
.market_about div, .market_point div {
	width: 47.5%;
}
.market_about div b {
	display: block;
	font-size: 2.4rem;
	line-height: 1.8;
	margin-bottom: 2rem;
}
.market_about div p {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 2.4;
	text-align: justify;
}
.market_about img, .market_point img {
	width: 50%;	
}
.market_point {
	align-items: flex-end;
	margin: 0 auto;
}
.market_point div h3 {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1;
	color: #66cc99;
	padding: 0.75rem 1rem;
	text-align: left;
	border: solid 1px #66cc99;
	margin-bottom: 2rem;
}
.market_point div ul li {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 2rem;
	border-left: solid 7px #66cc99;
	padding-left: 2rem;
}
.market_frame_middle small {
	text-align: right;
	font-size: 1rem;
	display: block;
	margin-top: 3rem;
}
.market_frame_bottom img {
	width: 100%;
}
@media screen and (max-width: 640px) {
	.market_outline {
		margin-bottom: 2rem;
		padding: 0 0 2rem;	
	}
	.market_about, .market_point {
		display: block;
	}
	.market_about div, .market_point div {
		width: 100%;
	}	
	.market_point div {
		margin-bottom: 2rem;
	}
	.market_about img, .market_point img {
		width: 100%;
	}	
}
@media screen and (max-width: 480px) {
	.market {
		padding: 3rem 0 6rem;	
	}
	.market_frame_top img {
		margin-bottom: -2rem;
	    padding-top: 5rem;
	}
	.market_frame_middle {
		padding: 3rem 3rem 1.5rem;	
	}	
	.market_label, .gallery_label {
		margin-bottom: 0;
	}
	.market_label ul li, .gallery_label ul li {
		width: calc(100vw / 1.5);
	}
	.market_outline p:nth-child(2) {
		font-size: 2.8rem;
	}
	.market_outline p:nth-child(3) {
		font-size: 2.2rem;
	}
	.market_about div b {
		font-size: 2.2rem;
	}
}

/* ----------------------------- */
/* ギャラリー
/* ----------------------------- */
.gallery {
	padding: 12rem 0 12rem;
	background-image: url(../img/wao/gallery_bg.png), linear-gradient(90deg, #ffc4cf, #ffb9b1 50%, #ff9966);
	background-repeat: no-repeat, repeat-y;
	background-size: 100%, auto;
	background-position: top, bottom;
	overflow: hidden;
	margin-top: -1px;
}
.gallery_label {
	transform:rotate(6deg);
}
.gallery_frame {
	margin-bottom: 7rem;
}
.gallery_frame_top {
	background-image: url(../img/wao/gallery_frame01.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	display: flex;
	justify-content: center;
}
.gallery_frame_top img {
	width: 65%;
	max-width: 670px;
	margin-bottom: -3.5rem;
}
.gallery_frame_middle {
	background-image: url(../img/wao/gallery_frame02.png);
	background-repeat: repeat-y;
	background-size: 100%;
	padding: 7rem 0 0;
	margin-top: -1px;
}
.gallery_outline {
	text-align: center;
	font-weight: 700;
	margin-bottom: 3rem;
	padding: 0 5rem 3rem;
	border-bottom: solid 1px #f48800;
}
.gallery_outline p:nth-child(1) {
	font-size: 3.4rem;
	margin-bottom: 3rem;	
}
.gallery_outline p:nth-child(1) span {
	display: block;
	font-size: 2rem;
} 
.gallery_outline b:nth-child(2) {
	display: block;
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: 700;
	margin-bottom: 2rem;
}
.gallery_outline p:nth-child(3) {
	font-size: 1.4rem;
	line-height: 2;
	text-align: justify;
	max-width: 620px;
	margin: 0 auto 2.5rem;
	font-weight: 500;
}
.gallery_outline ul {
	display: flex;
	justify-content: space-between;
	max-width: 850px;
	margin: 0 auto;
}
.gallery_outline ul li {
	width: 31.5%;	
}
.gallery_outline ul li img {
	width: 100%;	
}
.gallery_frame_middle small {
	text-align: right;
	font-size: 1rem;
	display: block;
	max-width: 850px;
	margin: 1.5rem auto 0;
	font-weight: 400;
}
.gallery_frame_bottom img {
	width: 100%;
}
.gallery_list {
	padding: 3rem 5rem;
}
.gallery_list h3 {
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	font-weight: 500;
	margin-bottom: 3rem;
}
.gallery_list ul {
	max-width: 850px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 700;
}
.gallery_list ul li {
	width: 24%;
	margin-bottom: 2rem;
}
.gallery_list ul li span {
	font-size: 1.6rem;
	display: block;
	line-height: 2rem;
	text-align: center;
	border-radius: 3rem;
	padding: 0.7rem;
}
.gallery_list ul.oita li span {
	color: #f48800;
	border: solid 2px #f48800;
}
.gallery_list ul.beppu li span {
	color: #ff97ab;
	border: solid 2px #ff97ab;
}
.gallery_list ul li a {
	font-size: 1.4rem;
	display: block;
	line-height: 2rem;
	border-radius: 3rem;
	padding: 0.7rem;
	padding-left: 1.5rem;
	color: #fff;
	position: relative;
}
.gallery_list ul li a:after {
	content: "→";
	position: absolute;
	top: calc(50% - 0.7em);
	right: 1rem;
	font-size: 1.6rem;
	font-weight: 400;
	color: #fff;
	line-height: 2rem;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.gallery_list ul li a:hover:after {
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateX(5px);
}
.gallery_list ul.oita li a {
	background: #f48800;
	border: solid 2px #f48800;
}
.gallery_list ul.beppu li a {
	background: #ff97ab;
	border: solid 2px #ff97ab;
}
.gallery h4 {
	font-size: 2rem;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 1.5rem 0;
	color: #fff;
	font-weight: 600;
	max-width: 1070px;
	margin: 0 auto 3rem;
	border-radius: 3rem;
}
.gallery h4.oita {
	background: #f48800;	
}
.gallery h4.beppu {
	background: #ff97ab;
	margin-top: 10rem;
}
.gallery_list_box {
	background: #fff;
	padding: 7rem;
	position: relative;
	border-radius: 5rem;
	max-width: 1070px;
	margin: 0 auto;
	box-sizing: border-box;
}
.gallery_list_box .num {
	position: absolute;
	width: 120px;
	top: 16px;
	left: 16px;
	z-index: 1;
}
.photo {
	display: flex;
	align-items: flex-start;
	margin-bottom: 3rem;
}
.photo div:first-child {
	width: 65.3%;
}
.photo div img {
	width: 100%;
	display: block;
}
.photo div:last-child {
	width: 34.7%;
}
.shop {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.shop div {
	width: 47.5%;
}
.shop div:first-child b {
	display: block;
	font-size: 3rem;
	font-weight: 600;
}
.shop div:first-child span {
	display: block;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 2rem;
}
.shop div:first-child p {
	font-size: 1.4rem;
	line-height: 1.8;
	text-align: justify;
}
.shop div:last-child ul {
	margin-bottom: 2rem;
}
.shop div:last-child ul li {
	padding: 0.75rem 0;
	border-bottom: solid 1px #000;
	font-size: 1.4rem;
	font-weight: 500;
}
.shop div:last-child ul li span {
	font-size: 1.2rem;
	display: inline-block;
	width: 65px;	
}
.shop .button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100% !important;
}
.shop .button a {
	width: 47.5%;
	display: block;
	background: #000;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	position: relative;
	border-radius: 3rem;
	padding: 1.2rem;
	padding-left: 2rem;
	box-sizing: border-box;
}
.shop .button a:after {
	content: "→";
	position: absolute;
	top: calc(50% - 0.7em);
	right: 1.5rem;
	font-size: 1.6rem;
	font-weight: 400;
	color: #fff;
	line-height: 2rem;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.shop .button a:hover:after {
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateX(5px);
}
@media screen and (max-width: 1070px) {
	.gallery h4 {
		margin: 0 2rem 3rem;
	}
	.gallery_list_box {
		margin: 0 2rem;
	}
}
@media screen and (max-width: 850px) {
	.gallery_list_box .num {
		width: 15%;
		min-width: 70px;
	}	
	.shop {
		display: block;
	}
	.shop div {
		width: 100%;
		margin-bottom: 1.5rem;
	}	
}
@media screen and (max-width: 640px) {
	.gallery_outline {
		margin-bottom: 2rem;
		padding: 0 3rem 2rem;	
	}
	
	.gallery_list {
		padding: 1rem 2.5rem;
	}	
	.gallery_list ul li {
		width: 48%;
		margin-bottom: 1.5rem;
	}
	.gallery_list_box {
		padding: 2.5rem;
		border-radius: 3rem;
	}
	.photo {
		display: block;
	}
	.photo div:first-child {
		width: 100%;
	}
	.photo div:last-child {
		width: 100%;
		display: flex;
		margin-top: -1px;
	}
	.photo div:last-child img {
		width: 50%;
	}	
	.shop .button a {
		width: 48.5%;
		padding-left: 1.5rem;
	}
}
@media screen and (max-width: 480px) {
	.gallery {
		padding: 6rem 0;	
	}
	.gallery_frame_top img {
		margin-bottom: -2rem;
	    padding-top: 5rem;
	}
	.gallery_outline p:nth-child(1) {
		font-size: 2.8rem;
		margin-bottom: 1.5rem;
	}	
	.gallery_frame_middle {
		padding-top: 3rem;	
	}
	.gallery_outline ul {
		display: block;
	}
	.gallery_outline ul li {
	    width: 75%;
		margin: 1rem auto;
	}
}

/* ----------------------------- */
/* 問い合わせ
/* ----------------------------- */
footer {
	padding: 10rem 0 0;
	background-image: url(../img/wao/foot_bg.png), linear-gradient(90deg, #d6e9bf, #b9e1db 60%, #c6e7ef);;
	background-repeat: no-repeat, repeat-y;
	background-size: 100%, auto;
	background-position: bottom, top;	
}
.soudan {
	margin-bottom: 8rem;
}
.soudan b, .toi b {
	display: block;
	text-align: center;
	font-size: 3.6rem;
	line-height: 1.4;
	margin-bottom: 3rem;
}
.soudan p {
	font-size: 1.6rem;
	line-height: 1.8;
	text-align: justify;
	max-width: 540px;
	margin: 0 auto 3rem;
}
.soudan a, .soudan span {
	display: block;
	font-size: 2rem;
	line-height: 1;
	padding: 2rem 3.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	background: #000;
	color: #fff;
	max-width: 380px;
	margin: 0 auto;
	border-radius: 1.5rem;
	box-sizing: border-box;
	position: relative;
}
.soudan span {
	text-align: center;
}
.soudan a:after {
	content: "→";
	position: absolute;
	top: calc(50% - 0.8em);
	right: 2rem;
	background: #fff;
	font-size: 2rem;
	font-weight: 400;
	color: #000;
	text-align: center;
	width: 3.4rem;
	line-height: 3.4rem;
	box-sizing: border-box;
	border-radius: 3rem;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.soudan a:hover:after {
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateX(5px);
}

.toi ul {
	display: flex;
	justify-content: space-between;
	max-width: 910px;
	margin: 4rem auto 12rem;
}
.toi ul li {
	width: 28%;
	text-align: center;
}
.toi ul li div {
	border-radius: 50%;
	background: #fff;
	position: relative;
	padding-top: 100%;
	height: 0;
}
.toi ul li div a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	width: 100%;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.toi ul li:first-child div a:before {
	content: url(../img/wao/toi_tel.svg);
	position: absolute;
	top: 18%;
	left: calc(50% - 6%);
	width: 12%;
}
.toi ul li:nth-child(2) div a:before {
	content: url(../img/wao/toi_mail.svg);
	position: absolute;
	top: 20%;
	left: calc(50% - 7.5%);
	width: 15%;
}
.toi ul li:last-child div a:before {
	content: url(../img/wao/toi_sns.svg);
	position: absolute;
	top: 14%;
	left: calc(50% - 6.5%);
	width: 15%;
}
.toi ul li div a:after {
	content: "→";
	position: absolute;
	bottom: 20%;
	left: calc(50% - 0.5em);
	font-size: 2.2rem;
	font-weight: 400;
	color: #000;
	line-height: 2rem;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.toi ul li div a:hover:after {
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateX(5px);
}
.toi ul li div a span {
	display: block;
}
.credit {
	font-size: 2.4rem;
	text-align: center;
	padding-bottom: 5rem;
}
.credit b {
	font-weight: 700;	
}
.credit b:first-child {
	margin-right: 5rem;
}
.credit img {
	width: 140px;
	margin: 0 1.5rem;
}
.credit b span {
	font-size: 1.6rem;
	font-weight: 500;
}
footer small {
	display: block;
	text-align: center;
	background: #fff;
	font-size: 1.2rem;
	padding: 2rem 0;
}

.pagetop {
	position: fixed;
	bottom: 25px;
	right: 15px;
	width:1rem;
	height: 1rem;
	opacity: 0;
	z-index:-1;
	transition: 0.2s;
}
.pagetop a{
	display: block;
	position: relative;
}
.pagetop a:after {
	content: "↑";
	position: absolute;
	top: calc(50% - 0.7em);
	right: 0;
	line-height: 1;
	background: #000;
	font-size: 2rem;
	font-weight: 400;
	color: #fff;
	padding: 0.75rem;
	border-radius: 50%;
	transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.pagetop a:hover:after {
	transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateY(-5px);
}

@media screen and (max-width: 960px) {
	footer {
		background-size: 1200px, auto;
	}

	
	.toi ul {
		margin: 4rem 3rem 12rem;
	}
	.toi ul li {
		width: 30.5%;
	}	
}
@media screen and (max-width: 768px) {
	.credit b {
		display: block;
		margin-bottom: 2rem;
	}	
	.credit b:first-child {
		margin-right: 0;
	}
}
@media screen and (max-width: 640px) {
	footer {
		padding-top: 5rem;	
	}
	.soudan {
		padding: 0 2rem;
	}
	.toi ul {
		margin-bottom: 5rem;
	}	
	.credit {
		padding-bottom: 3rem;
	}
	
	.credit b span {
		display: block;
	}
	
	
}
@media screen and (max-width: 480px) {
	.toi ul {
		margin: 4rem 1rem 5rem;
	}
	.toi ul li {
		width: 31.5%;
	}
	.toi ul li div a {
		font-size: 1.3rem;
		line-height: 1.3;
		padding-top: 1rem;
	}
	.toi ul li:first-child div a:before {
		top: 12%;
		left: calc(50% - 8%);
		width: 16%;
	}
	.toi ul li:nth-child(2) div a:before {
		top: 15%;
		left: calc(50% - 10%);
		width: 20%;
	}
	.toi ul li:last-child div a:before {
		top: 8%;
		left: calc(50% - 8%);
		width: 20%;
	}
	.toi ul li div a:after {
		bottom: 15%;
		left: calc(50% - 0.5em);
		font-size: 2rem;
	}
	
}