@charset "utf-8";


@font-face{
 font-family: "Noto Sans JP";
 font-display: swap;
 src: url("./font/NotoSansJP.woff2") format("woff2"),
 url("./font/NotoSansJP.woff") format("woff");
}

html, body{
 width: 100%;
 height: auto;
 max-width: 100vw;
 min-height: 100dvh;
 background-color: #ffffff;
 margin: 0px;
 padding: 0px;
 font-family: "Noto Sans JP", "メイリオ";
 overflow-y: auto;
}

#wrapper{
 
}

.top_section{
 position: sticky;
 top: 78px;
}

.top_wrap1{
 width: 100%;
 min-height: 100dvh;
 display: table;
 background: linear-gradient(45deg, #9B0077, #00269B);
 background-size: 400% 400%;
 animation: gradientBg 10s ease infinite;
}

.top_wrap2{
 width: 100%;
 min-height: 100dvh;
 background: #eeeff5;
 padding: 0 6px 0 6px;
 box-sizing: border-box;
}

.top_wrap3{
 width: 100%;
 min-height: 100dvh;
 background: #384650;
 padding: 0 6px 0 6px;
 box-sizing: border-box;
}

.top_message{
 display: table-cell;
 vertical-align: middle;
 font-size: 1.8rem;
 font-weight: bold;
 color: #ffffff;
 text-align: center;
}

.top_message2{
 opacity: 0;
 width: 100%;
 font-size: 1.3rem;
 font-weight: bold;
 text-align: center;
 padding: 2.5rem 0px 2rem 0px;
 transform: translate(0, 90px);
 transition: all 1400ms;
}

.top_message3{
 opacity: 0;
 width: 100%;
 font-size: 1.3rem;
 font-weight: bold;
 text-align: center;
 color: #ffffff;
 padding: 2.5rem 0px 2rem 0px;
 transform: translate(0, 90px);
 transition: all 1400ms;
}

.top_comment{
 text-align: center;
}

.scene_wrap{
 opacity: 0;
 transform: translate(0, 90px);
 transition: all 1400ms;
}

.scene_grid{
 width: 100%;
 max-width: 850px;
 margin: 0 auto;
}



.scenes>img{
 max-width: 100%;
 max-height: 180px;
}

.template_wrap{
 opacity: 0;
 transform: translate(0, 90px);
 transition: all 1400ms;
}

.template_grid{
 display: grid;
 grid-template-columns: 1fr 0.3fr 1fr 0.3fr 1fr;
 width: 100%;
 max-width: 850px;
 margin: 0 auto;
}

.template_content, .template_space{
 text-align: center;
}

.template_content > p{
 margin: 0.8rem 0px 1rem 0px;
 color: #757575;
}

.template_space{
 display: flex;
 justify-content: center;
 align-items: center;
}

.template_arrow{
 width: 80%;
 max-width: 70px;
 height: atuo;
 aspect-ratio: 1 / 1;
 margin: 0 auto;
 border-radius: 50%;
 background-color: #125f7d;
 background-image: url("../img/template_arrow.png");
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}

.template1{
 margin: 0 auto;
 padding: 5px;
 max-width: 150px;
 width: 85%;
 height: auto;
 aspect-ratio: 1 / 1;
 border-radius: 50%;
 background: linear-gradient(135deg, #bee3ff, #debfff);
 box-sizing: border-box;
}

.template2{
 margin: 0 auto;
 padding: 5px;
 max-width: 150px;
 width: 85%;
 height: auto;
 aspect-ratio: 1 / 1;
 border-radius: 50%;
 background: linear-gradient(135deg, #bee3ff, #debfff);
 box-sizing: border-box;
}

.template3{
 margin: 0 auto;
 padding: 5px;
 max-width: 150px;
 width: 85%;
 height: auto;
 aspect-ratio: 1 / 1;
 border-radius: 50%;
 background: linear-gradient(135deg, #bee3ff, #debfff);
 box-sizing: border-box;
}

.template_image{
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, #ffffff 0%, #ffffff 65%, #eeeff5 65%, #eeeff5 100%);
 border-radius: 50%;
 aspect-ratio: 1 / 1;
 display: flex;
 justify-content: center;
 align-items: center;
}

.template_image > img{
 max-width: 77px;
 width: 68%;
}

.security_wrap{
 opacity: 0;
 transform: translate(0, 90px);
 transition: all 1400ms;
 margin: 1rem 0 1rem 0;
}

.security_image{
 width: 100%;
 text-align: center;
 font-size: 1.1em;
 font-weight: bold;
 color: #ffffff;
}

.security_image > img{
 max-width: 80px;
 height: auto;
}

.security_comment{
 width: 90%;
 max-width: 600px;
 margin: 0 auto;
 text-align: left;
 color: #ffffff;
}


.effect-scroll {
 opacity: 1;
 transform: translate(0, 0);
}

/* SP表示 */
@media screen and (max-width: 767px){
 #wrapper{
  width: 100%;
  margin: 0 auto;
 }
 
 #menu{
  width: 100%;
  height: 78px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  margin: 0 auto;
  z-index: 100;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.6));
 }
 
 .menu_bar{
  width: 100%;
  height: 100%;
  padding: 2px 8px 2px 8px;
  box-sizing: border-box;
  background: #ffffff;
 }
 
 .top_message{
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
 }
 
 .scene_grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
 }
 
 .scenes{
  width: 98%;
  box-sizing: border-box;
  padding: 8px 8px 8px 8px;
  background-color: #ffffff;
  border-radius: 15px;
  text-align: center;
  font-size: 0.9rem;
 }
}

/* PC用 */
@media screen and (min-width: 767px) {
 #wrapper{
  width: 100%;
  margin: 0 auto;
 }
 
 #menu{
  width: 100%;
  height: 78px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  margin: 0 auto;
  z-index: 100;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.6));
 }
 
 .menu_bar{
  width: 100%;
  height: 100%;
  padding: 2px 8px 2px 12px;
  box-sizing: border-box;
  background: #ffffff;
 }
 
 .scene_grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 1rem;
 }
 
 .scenes{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 8px 8px;
  background-color: #ffffff;
  border-radius: 15px;
  text-align: center;
  font-size: 0.9rem;
 }
 
 .security_comment{
  text-align: center;
 }
}

.scenes:nth-child(1){
 box-shadow: 5px 5px #89e368;
}

.scenes:nth-child(2){
 box-shadow: 5px 5px #65a1ff;
}

.scenes:nth-child(3){
 box-shadow: 5px 5px #b162ff;
}

.scenes:nth-child(4){
 box-shadow: 5px 5px #ff6798;
}

.scenes>p{
 margin: 5px 0px 5px 0px;
 color: #757575;
}

/* ▼メニュー▼ */
/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn{
  position: absolute;
  top: calc(50% - 21px);
  right: 2rem;
  z-index: 11000;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0);
  font-size: 1.3em;
  border: 0px;
  transition: 0.5s;
}

.menu-btn span{
 display: block;
 height: 3px;
 margin: 5px 0;
 background: #0077ff;
 border-radius: 2px;
 transition: 0.5s;
}

.color2{
 color: #ffffff !important;
 transition: 0.3s;
}

.color2 span{
 background: #ffffff;
 transition: 0.5s;
}

/* ハンバーガー→× */
.color2 span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.color2 span:nth-child(2) {
  opacity: 0;
}
.color2 span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*----------------------------
* エフェクト
*----------------------------*/
.scroll_block {
  opacity: 0;
  transform: translate(0, 90px); /* フェードインで動く高さを指定 */
  transition: all 1400ms; /* フェードインにかかる時間を指定 */
}

.scroll_block2 {
  opacity: 0;
  transform: translate(0, 0px); /* フェードインで動く高さを指定 */
  transition: all 1100ms; /* フェードインにかかる時間を指定 */
}

.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

/*----------------------------
* メニュー本体
*----------------------------*/
.menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(1, 230, 203, 0.9), rgba(27, 158, 255, 0.9));
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
  visibility: hidden;
}
.menu_item{
  width: 100%;
  height: auto;
  padding: 0em 1em 0em 1em;
  margin: 0.2em 0em 1.4em 0em;
  font-size: 1.1em;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid white;
}

.menu_inner{
 width: 80%;
 max-width: 800px;
 margin: 0 auto;
}

.menu_item a{
  color: #fff;
  text-decoration: none;
  display: block;
}

.menu_item a:hover{
  color: #fff;
  text-decoration: none;
}

.menu_item a:visited{
  color: #fff;
  text-decoration: none;
}

/*----------------------------
* アニメーション部分
*----------------------------*/


/* アニメーション後のメニューの状態 */
.menu.is-active{
 visibility: visible;
 opacity: 1;
 transition: 0.5s;
}
/* ▲メニュー▲ */