@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap');
body {
	font-family: 'Roboto', 'Zen Kaku Gothic Antique', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	margin: 0;
	padding: 0;	
	font-size: 16px;
	letter-spacing: 0.125em;
	line-height: 1.75em;
}
p {
}
.hero {
	height: 100vh; /* 全画面表示 */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url("../img/mv.jpg");
	position: relative;
}
.text-box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 100;
}
.text-box h1 {
	text-align: center;
}
.text-box h1 img {
	width: 15vw;
}
.text-box .copy {
	text-align: center;
    margin-top: -2vw;
}
.text-box .copy svg {
	width: 32.5vw;
}
/* --- テキスト --- */
path {
    fill: none; /* 1,塗りの色 */
    stroke: #283c05; /* 2,線の色 */
    stroke-dasharray: 1000; /* 3,破線の間隔 */
    stroke-dashoffset: 1000; /* 4,破線の開始位置 */
    stroke-width: 0.5; /* 5,線の太さ */
    animation: handwriting 2s ease-in forwards; /* 6,名前 時間 タイミング 終了後の状態 */
}

/* --- アニメーション --- */
@keyframes handwriting {
    0% {
        fill: transparent; /* 1,塗りの色 */
        stroke-dashoffset: 1000; /* 4,破線の開始位置 */
    }
    50% {
        fill: transparent; /* 1,塗りの色 */
    }
    100% {
        fill: #283c05; /* 1,塗りの色 */
        stroke-dashoffset: 0; /* 4,破線の開始位置 */
    }
}
.conceptWrap {
	display: flex;
    justify-content: space-between;
	margin-top: 10vw;
}
.conceptTxt {
    width: 50vw;
    padding: 0 15vw;
	position: relative;
	z-index: 999;
}
.conceptTxt h2 {
	font-size: 1.5em;
    letter-spacing: 0.1em;
    line-height: 1.75em;
    margin-bottom: 1.5em;
    margin-right: -50vw;
}
.conceptTxt p {
    margin-right: -50vw;	
}
.conceptImg {
    width: 50vw;
    margin-top: 5vw;
}
.conceptImg img {
    width: 100%;	
}
.informationWrap {
	text-align: center;
	position: relative;
}
.informationWrap h2 {
	font-size: 5em;
	letter-spacing: 0.25em;
	margin-bottom: 0.5em;
}
.instagramWrap img {
	width: 10vw;
	margin-top: 2em;
}
.instagramWrap a {
	margin-top: 1em;
	display: block;
	text-decoration: underline;
}
footer {
	margin-top: 5em;
	padding-bottom: 2em;
}
.copyRight {
	text-align: center;
	font-size: 0.8em;
	
}
.fade {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
}
@media screen and (max-width: 1000px) {
body {
	font-size: 14px;
}
.text-box h1 img {
    width: 20vw;
}
.text-box .copy svg {
    width: 37.5vw;
}
.conceptTxt h2 {
    font-size: 1.25em;
}
.conceptTxt {
	width: 55vw;
}
.conceptImg {
    width: 55vw;
}
.conceptImg img {
    margin-bottom: -20vw;
}
.informationWrap h2 {
    font-size: 4em;
}
.conceptWrap {
    align-items: center;
}
.informationWrap {
    margin-top: 8vw;
}
.instagramWrap img {
    width: 20vw;
}
}
@media screen and (max-width: 1000px) and (min-width: 821px){
.conceptImg img {
    margin-bottom: -10vw;
}
}
@media screen and (max-width: 820px) {
	.text-box h1 img {
    width: 30vw;
}
.text-box .copy svg {
    width: 50vw;
}
}
@media screen and (max-width: 599px) {
body {
	font-size: 16px;
}
.text-box h1 img {
    width: 45vw;
}
.text-box .copy svg {
    width: 75vw;
}
.conceptWrap {
    flex-wrap: wrap;
}
.conceptTxt {
    width: 100vw;
    padding: 0 10vw;
}
.conceptTxt h2 {
    margin-right: 0;
}
.conceptTxt p {
    margin-right: 0;
}
.conceptImg {
    width: 85vw;
}
.conceptImg img {
    margin-bottom: 0;
    margin-left: 15vw;
    margin-top: -15vw;
}
.informationWrap h2 {
    font-size: 2.5em;
}
.informationWrap {
    margin-top: -3vw;
    z-index: 999;
}
.instagramWrap img {
    width: 35vw;
}
.copyRight {
    font-size: 0.5em;
}
}
@media screen and (min-width: 1001px) {
.tab {
	display: none;
}
.sp {
	display: none;
}
.brSp {
	display: none;
}
}
@media screen and (max-width: 1000px) and (min-width: 600px){
.pc {
	display: none;
}
.sp {
	display: none;
}
.brSp {
	display: none;
}
.onlineBtnWrap img {
    width: 17.5vw !important;
}
}
@media screen and (max-width: 599px) {
.pc {
	display: none;
}
.tab {
	display: none;
}
.pctab {
	display: none;
}
.onlineBtnWrap img {
    width: 20vw !important;
    bottom: 15px !important;
    right: 15px !important;
}
}
.accessWrap {
    margin-top: 12.5vw;
	text-align: center;
}
.accessWrap h2 {
    font-size: 5em;
    letter-spacing: 0.25em;
    margin-bottom: 1em;
}
.mapWrap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.mapWrap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
@media screen and (max-width: 1000px){
.accessWrap h2 {
    font-size: 4em;
}
}
@media screen and (max-width: 599px){
.accessWrap h2 {
    font-size: 2.5em;
}
.accessWrap {
    margin-top: 15vw;
}
}
.onlineBtnWrap img {
    width: 10vw;
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.onlineBtnWrap a:hover {
    opacity: 0.7;
}
.onlineBtnWrap img {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}