@charset "UTF-8";
/* CSS Document */

html{font-size: 6.25%; scroll-behavior: smooth;}
body{ font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"}
body{ background: #cafeff url("../img/bg-dot.png") center center / auto auto repeat;}
br.show-pc {display: inline}
br.show-sp {display: none}
img.show-pc {display: block!important}
img.show-sp {display: none!important}
@media screen and (max-width: 960px) {
	body{ background-size: 15px 15px;}
	br.show-pc {display: none}
	br.show-sp {display: inline}
	img.show-pc {display: none!important}
	img.show-sp {display: block!important}
}

/* 初期透過　*/
.fadeUpMain h2, .fadeUpMain h3, fadeUpTrigger {opacity: 0}

/* HEADER　*/
header { display: block; height: 60px; width: 100%; position: fixed; background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%); z-index: 999}
header h1 { height: 100%;}
header h1 a { display: flex; justify-content: flex-start; align-items: center; height: 100%; max-width: 54%; margin-left: 2%; transition: 0.5s;}
header h1 a:hover { opacity: 0.5}
header h1 a img { display: block; max-height: 80%; height: auto; max-width: 90%; width: auto;}

#container{ width: 100%; height: 100%; box-sizing: border-box; background: url("../img/main-bg.png") center top / 100% auto no-repeat; }
#container a{text-decoration: none; transition: 0.5s;}
#container a:hover{opacity: 0.5;}
.box_inner{ width: 100%; max-width: 1260px; margin: 0 auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.box_inner img{ max-width: 100%; height: auto;}

@media screen and (max-width: 960px) {
	header { height: 48px;}
	#container{ background: url("../img/main-bg.png") center top / 150% auto no-repeat;}
}

h1{}
p{ font-size: 15rem;}
small {display: block; font-weight: normal; font-size: 12px; color: #333; line-height: 1.4;}
hr { display: block; border: none; background-color: #ccc; height: 1px; margin: 10px 15px;}
sup {font-size: 50%; vertical-align: text-top}
@media screen and (max-width: 960px) {
	p{ font-size: 14rem;}
}

/* MAIN　*/
#main-title { width: 100%; }

#main-title article.box_inner { display: flex; justify-content: center; flex-wrap: wrap; padding: 50px 0 0 0; box-sizing: border-box; max-width: 100%}
#main-title h2 { display: block; width: 45vw; max-height: 100%}
#main-title h2 img { display: block; width: 98%; max-width: 38vw; height: auto;margin: 11vw 0 2vw auto}
#main-title h3 { display: block; width: 44vw;}
#main-title h3 a { }
#main-title h3 a img { display: block; transition: 0.5s}
#main-title h3 a:hover {opacity: 0.8;}
#main-title h3 a:hover img { transform: scale(98%)}

#main-title aside {position: relative; z-index: 1; display: block; width: 100%; max-width: 1260px; height: 10px; margin: 0 auto;}
#main-title aside img {position: absolute; display: block; height: calc(620px - 17.5vw); max-height: 400px; bottom: 0; left: 2vw;}

@media screen and (max-width: 960px) {
	#main-title article.box_inner { justify-content: space-between}
	#main-title h2 { width: 53vw; position: relative; z-index: 2}
	#main-title h2 img { width: 120%; max-width: 1000px; margin: 5vw 0 2vw 0}
	#main-title h3 { display: block; width: 42vw; position: relative; z-index: 1; margin-top: 14vw}
	#main-title h3 img { display: block;}
	
	#main-title aside { height: 60px;}
	#main-title aside img {height: 48vw; left: 3vw;}
}

/* content　*/
#content1 { position: relative; z-index: 2}

#content1 .box_inner { width: 98%; }
#content1 .box-white { background-color: #fff; padding: 60px 40px 40px 40px; border-radius: 2vw; box-shadow: 0 10px 30px rgba(0,0,0,0.25); margin: 0 auto 5vw auto;}
#content1 h3 { display: block; height: 60px; margin-bottom: 20px;}
#content1 h3 img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto;}
#content1 p.content-read {display: block; text-align: center; margin-bottom: 40px; line-height: 1.8}

.box-2clumn { display: flex; justify-content: space-around; flex-direction: row-reverse; flex-wrap: wrap; padding: 20px; box-sizing: border-box; border: 3px dotted #1fb8df; margin-bottom: 30px;}
.box-2clumn dt { width: 42%;}
.box-2clumn dt img { width: 100%;}
.box-2clumn dd { width: 50%}
.box-2clumn dd h4 { font-size: 32rem; font-weight: bold; line-height: 1.2; margin: 20px 0;}
.box-2clumn dd p { line-height: 1.8; margin-bottom: 20px}

.linkbtn { display: block; margin: 10px auto; font-size: 14rem}
.linkbtn a {display: inline-block; border-bottom: 1px solid #1fb8df; padding-right: 15px; color: #333}
.linkbtn a:hover {padding-right: 0; padding-left: 15px; border-color: #ff579d;}
.linkbtn a::before { content: ''; display: inline-block; width: 8px; height: 10px; margin-right: 5px; background-color: #1fb8df; clip-path: polygon(0 0, 0% 100%, 100% 50%); transition: 0.5s}
.linkbtn a:hover::before { background-color: #ff579d}
.linkbtn a img {max-width: 90%; transition: transform 0.3s ease;}
.linkbtn a:hover img {transform: scale(1.05);}

.rubi {position: relative; display: inline-block}
.rubi::before {content: 'ウーパールーパー'; display: block; width: 100%; font-size: 10rem; font-weight: bold; text-align: center; position: absolute; bottom: 100%; left: 0;}

#content1 p.img-map img {display: block; max-width: 1100px; margin: 0 auto; width: 100%; height: auto}

.access-2clumn {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 40px }
.access-2clumn dt { width: 53%}
.access-2clumn dt iframe { width: 100%; height: 40vw; border-radius: 10px;}
.access-2clumn dd { width: 42%}
.access-2clumn dd h5 { font-size: 20rem; font-weight: bold; line-height: 1.2; margin: 20px 0 10px 0;}
.access-2clumn dd p { line-height: 1.8; margin-bottom: 20px}

@media screen and (max-width: 960px) {
	#content1 .box_inner {width: 96% }
	#content1 .box-white { padding: 40px 15px 20px 15px; border-radius: 3vw; }
	#content1 h3 {height: 30px; margin-bottom: 20px;}
	
	.box-2clumn { display: block; padding: 15px; }
	.box-2clumn dt { width: 100%;}
	.box-2clumn dd { width: 100%}
	.box-2clumn dd h4 { font-size: 22rem; margin-bottom: 10px}
	.box-2clumn dd p { line-height: 1.6; margin-bottom: 10px}
	
	.rubi::before {font-size: 8rem; }
	
	.access-2clumn {display: block; }
	.access-2clumn dt { width: 100%}
	.access-2clumn dt iframe { width: 100%; height: 50vh; }
	.access-2clumn dd { width: 100%}
	.access-2clumn dd h5 { font-size: 16rem; }
	.access-2clumn dd p { font-size: 14rem}
}



/* Footer */
#footer{display: block; width: 100%; text-align: center; background-color: #fff; padding: 20px 0; box-sizing: border-box;}
.foot-rogo{ text-align: center; margin: 20px auto;}
.foot-rogo a{display: inline-block; height: 40px; width: auto; max-width: 100%;}
.foot-rogo a img{ display: block; height: 100%; max-height: 100%; width: auto; max-width: 100%}
#copy { color: #333; font-size: 11rem; display: block; text-align: center;}

@media screen and (max-width: 960px) {
	.footer h6 img{height: auto; width: 60%; margin: 0 auto }
	footer{padding: 60px 10px 40px 10px;}
	p.foot_access {font-size: 12rem;}
	.link_2clum a {width: 100%;margin-bottom: 10px}
}

/* アニメーション　*/
/* Main用　*/
.fadeUpMain {}
.mainAnime h2{ transform: scale(0); transform-origin: center center; animation: mainAnime 0.8s ease 0.2s forwards; opacity: 0}
.mainAnime h3{ transform: scale(0); transform-origin: center center; animation: mainAnime 0.8s ease 0.4s forwards; opacity: 0}

@keyframes mainAnime{
  
0% {
    opacity: 0;
    transform: scale(0);
  }

  60% {
    opacity: 1;
    transform: scale(1.10);
  }

  80% {
    transform: scale(0.97);
  }

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

/* スクロールfadeUp */
.fadeUp{animation: fadeUpAnime 1.2s ease 0.8s forwards; opacity: 0}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}