@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
background-repeat: no-repeat;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-display: swap;
  src: url('../fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
}

html {
  font-size: 16px;
  scroll-behavior: smooth;/* スクロールスムーズ */
}
body {
  font-feature-settings: 'palt';
  margin: 0;
  font-family:var(--font-basic);
}

/* 【ゴシック系初期フォント】font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif' */
/* 【明朝系初期フォント】font-family:YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif' */

/* テクスト選択反転カラー */
::selection {
  background: #0095B7;
color: var(--color-white);
}
/*Firefox*/
::-moz-selection {
  background: #0095B7;
color: var(--color-white);
}

table,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* テキストリンク */
a {
  text-decoration: none;
  color: #000;
  outline: none;
}
a:hover {
  opacity: 0.6;
}

/* 本文 */
p {
  padding: 0;
  margin: 0;
  line-height: 1.3rem;
  word-wrap: break-word;
}


/* 画像 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  max-width: 100%;
  height: auto;
  border-style: none;
  image-rendering: -webkit-optimize-contrast;
}

/* clear */
.cle:before,
.cle:after {
  content: ' ';
  display: table;
}
.cle:after {
  clear: both;
}
.cle {
  zoom: 1;
}

hr {
  height: 1px;
  background-color:var(--color-white);
  border: none;
  color: #4d4d4d;
  margin: 5px 0;
opacity: 0.5;
}




/*----------------------------------*/
/*----------------変数------------------*/
/*------------------------------------*/

:root {

/*フォント*/
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Barlow", sans-serif;
--font-basic: "Barlow", "Noto Sans JP", sans-serif;


/*カラー*/
  --color-black: #000;
  --color-gray: #80888a;
  --color-gray-dark: #575d5e;
  --color-gray-light: #f5f5f5;
  --color-white: #fff;
  --color-blue-light:#DEEEF3;
  --color-blue:#0095B7;
  --color-blue-highlight:#03D8C8;
  --color-blue-dark:#064370;
  --color-yellow:#F2F700;

/*フォントサイズ*/
  --s10: calc(10 / 16 * 1rem);
  --s12: calc(12 / 16 * 1rem);
  --s14: calc(14 / 16 * 1rem);
  --s15: calc(15 / 16 * 1rem);
  --s16: calc(16 / 16 * 1rem);
  --s17: calc(17 / 16 * 1rem);
  --s18: calc(18 / 16 * 1rem);
  --s19: calc(19 / 16 * 1rem);
  --s20: calc(20 / 16 * 1rem);
  --s21: calc(21 / 16 * 1rem);
  --s22: calc(22 / 16 * 1rem);
  --s23: calc(23 / 16 * 1rem);
  --s24: calc(24 / 16 * 1rem);
  --s25: calc(25 / 16 * 1rem);
  --s26: calc(26 / 16 * 1rem);
  --s27: calc(27 / 16 * 1rem);
  --s28: calc(28 / 16 * 1rem);
  --s29: calc(29 / 16 * 1rem);
  --s30: calc(30 / 16 * 1rem);
  --s31: calc(31 / 16 * 1rem);
  --s32: calc(32 / 16 * 1rem);
  --s33: calc(33 / 16 * 1rem);
  --s34: calc(34 / 16 * 1rem);
  --s35: calc(35 / 16 * 1rem);
  --s36: calc(36 / 16 * 1rem);
  --s37: calc(37 / 16 * 1rem);
  --s38: calc(38 / 16 * 1rem);
  --s39: calc(39 / 16 * 1rem);
  --s40: calc(40 / 16 * 1rem);
  --s41: calc(41 / 16 * 1rem);
  --s42: calc(42 / 16 * 1rem);
  --s43: calc(43 / 16 * 1rem);
  --s44: calc(44 / 16 * 1rem);
  --s45: calc(45 / 16 * 1rem);
  --s46: calc(46 / 16 * 1rem);
  --s47: calc(47 / 16 * 1rem);
  --s48: calc(48 / 16 * 1rem);
  --s49: calc(49 / 16 * 1rem);
  --s50: calc(50 / 16 * 1rem);
  --s51: calc(51 / 16 * 1rem);
  --s52: calc(52 / 16 * 1rem);
  --s53: calc(53 / 16 * 1rem);
  --s54: calc(54 / 16 * 1rem);
  --s55: calc(55 / 16 * 1rem);
  --s56: calc(56 / 16 * 1rem);
  --s57: calc(57 / 16 * 1rem);
  --s58: calc(58 / 16 * 1rem);
  --s59: calc(59 / 16 * 1rem);
  --s60: calc(60 / 16 * 1rem);
  --s64: calc(64 / 16 * 1rem);
  --s70: calc(70 / 16 * 1rem);
  --s80: calc(80 / 16 * 1rem);
  --s90: calc(90 / 16 * 1rem);
  --s100: calc(100 / 16 * 1rem);
  --s110: calc(110 / 16 * 1rem);
  --s120: calc(120 / 16 * 1rem);
  --s132: calc(132 / 16 * 1rem);
}



/*----------------------------------*/
/*----------------共通テキスト------------------*/
/*------------------------------------*/
.ja_txt{font-family: var(--font-ja);}
.en_txt{font-family: var(--font-en);}
.p-txt{
font-family: var(--font-basic);
font-size: var(--s16);
line-height: var(--s26);
}




/*----------------------------------*/
/*----------------ボタン------------------*/
/*------------------------------------*/
.bt01{
position: relative;
display: inline-block;
color: var(--color-white);
background-color: var(--color-blue-dark);
padding: 10px 50px 10px 30px;
border-radius: 50px;
}
.bt01::after{
transition: 0.3s;
position: absolute;
top:42%;
right: 18px;
display: block;
content: "";
background-image: url(../img/icon_bt.svg);
background-repeat: no-repeat;
background-size:contain;
width: 10px;
height: 10px;
}
.bt01:hover{
opacity: 1;
}

.bt01:hover::after{
right: 10px;
}





/*----------------------------------*/
/*----------------タイトル------------------*/
/*------------------------------------*/

/* -------項目タイトル--------- */
.title01{
width: 100cqw;
margin-inline: calc(50% - 50cqw);
margin-bottom: 35px;
display: grid;
grid-template-columns: 1fr min(80% ,1000px) 1fr;
}
.title01::before{
content: "";
display: block;
width: 0px;
height: 2px;
margin-top: 50px;
margin-right: 10px;
background-color: var(--color-blue);
opacity: 0;
}
.title01.on::before{
animation-name: title01-line;
animation-duration: 0.3s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-fill-mode: forwards;
}
.title01::after{
content: "";
display: block;
}
@keyframes title01-line {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

/*◎768px以下*/
@media screen and (max-width: 768px) {
.title01{
grid-template-columns: 1fr 85% 1fr;
margin-bottom: 25px;
}
.title01::before{ margin-top: 30px;}
}

.title01 .en_txt{
    position: relative;
font-size: var(--s90);
color: #DADADA;
font-weight: 600;
line-height: var(--s80);
}
.title01 .en_txt.on::after{
    content: attr(data-txt);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
line-height: var(--s80);
    color: var(--color-blue);
    clip: rect(0,0,100px,0);
    transition: clip 1.5s linear;
/*アニメ*/
animation-name: title01-en_txt;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes title01-en_txt {
    0% {
clip: rect(0,0,100px,0);
    }
    100% {
clip: rect(0,95vw,100px,0);
    }
}
/* foxだけ */
@-moz-document url-prefix() {
.title01 .en_txt.on::after{
    top:14.5px;
}
}


.title01 .ja_txt{
font-size: var(--s18);
display: block;
margin-top: 10px;
}

/*◎768px以下*/
@media screen and (max-width: 768px) {
.title01 .en_txt{
font-size: var(--s50);
line-height: var(--s50);
}
.title01 .en_txt.on::after{
line-height: var(--s50);
}
.title01 .ja_txt{
font-size: var(--s16);
margin-top: 0px;
}
}










/* -----------小見出し------------- */
.title02{
font-size: var(--s30);
line-height: var(--s46);
font-weight: 600;
margin-bottom: 20px;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.title02{
font-size: var(--s26);
line-height: var(--s38);
font-weight: 600;
margin-bottom: 20px;
}
.title02 br{display: none;}
}





/*--------------------*/
/*----header----*/
/*-------------------*/
.header{
position: absolute;
width: 100%;
z-index: 9;
}

.header .header__inner{
margin: 20px 30px;
display: grid;
grid-template-columns: 12vw 1fr 75px;
/* ハンバーガーアイコン75px*/
/*アニメ*/
opacity: 0;
animation-name:header-anime;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-fill-mode: forwards;
overflow: hidden;/*横に隙間対策*/
}
@keyframes header-anime {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@media screen and (max-width: 870px) {
.header .header__inner{
margin: 10px 20px;
display: block;
}
}



/* logo */
.header .header__inner .header__logo{
}
.header .header__inner .header__logo a{transition: 0.3s;}

@media screen and (max-width: 870px) {
.header .header__inner .header__logo{
width: min(35%, 130px);
margin-top: 7px;
}
}



/* PC nav */
.header .header__inner .header_nav_pc{
}
@media screen and (max-width: 870px) {
/* PC nav 非表示 */
.header .header__inner .header_nav_pc{
display: none;
}
}

.header .header__inner .header_nav_pc .header_nav_pc_group{
display: flex;
justify-content: center;
}
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item{
margin:0 20px;
}
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item .en_txt{
font-weight: 600;
font-size: var(--s18);
position: relative;
mix-blend-mode: exclusion;
}
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item .ja_txt{
font-size: var(--s12);
}
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item a{
display: block;
color: var(--color-white);
opacity: 1;
}
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item span{
display: block;
text-align: center;
}



/* -------------------------- */
/* --------ハンバーガー-------- */
/* -------------------------- */
/*ハンバーガーメニュー*/
.header_global_nav{
z-index:50;
/*アニメ*/
opacity: 0;
animation-name:global_nav-anime;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 4s;
animation-fill-mode: forwards;
overflow: hidden;/*横に隙間対策*/
}
@keyframes global_nav-anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/*ハンバーガーメニューアイコン*/
.header_global_nav_btn{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
}
.header_global_nav_btn .btn {
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
background-color:transparent;/* 透明色 */
}
/*◎768px以下*/
@media screen and (max-width: 870px) {
.header_global_nav_btn .btn {
  width: 70px;
  height: 50px;
}
}

.header_global_nav_btn .btn .line {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.header_global_nav_btn .btn .line span,
.header_global_nav_btn .btn .line span::before,
.header_global_nav_btn .btn .line span::after {
  content: '';
  position: absolute;
  transition-duration: 0.3s;
  display: block;
  width: 31px;
  height: 1px;
  background-color: var(--color-gray-light);
}
.header_global_nav_btn .btn .line span::before {
  top: 5px;
}
.header_global_nav_btn .btn .line span::after {
  bottom: 5px;
}
.header_global_nav_btn .btn.active .line span::before {
  top: 0;
  transform: rotate(30deg);
}
.header_global_nav_btn .btn.active .line span {
  background: rgba(0, 0, 0, 0);
}
.header_global_nav_btn .btn.active .line span::after {
  bottom: 0;
  transform: rotate(-30deg);
}


/*ハンバーガーメニュー内展開 */
.header_global_nav_content{
  position: fixed;
z-index: 1000;
  width: 100%;
  max-width: 500px;
  height: 100svh;/*スマホメニュー回避*/
  top: 0;
  background-color:var(--color-blue);
  transition: all 0.5s ease;
  overflow: auto;
  right: -100%;
  opacity: 0;
  visibility: hidden;
/*要素を中心に*/
  display: grid;
  place-content: center;
  place-items: center;
}
/*表示*/
.header_global_nav_content.active {
  right: 0%;
  opacity: 1;
  visibility: visible;
}

/*ハンバーガーメニュー内メニュー*/
.header .header_global_nav_group{
}
.header .header_global_nav_group .header_global_nav_item{
margin: 30px 0;
}
.header .header_global_nav_group .header_global_nav_item a{
color: var(--color-white);
display: block;
opacity: 1;
}
.header .header_global_nav_group .header_global_nav_item span{
display: block;
text-align: center;
}
.header .header_global_nav_group .header_global_nav_item .en_txt{
font-weight: 600;
font-size: var(--s18);
position: relative;
}
.header .header_global_nav_group .header_global_nav_item .ja_txt{
font-size: var(--s12);
}



/* 共通ボタンアニメ */
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item a:hover .en_txt::before,
.header .header_global_nav_group .header_global_nav_item a:hover .en_txt::before{
  transform: scaleX(1);
  transform-origin: right;
mix-blend-mode: exclusion;
}
.header .header__inner .header_nav_pc .header_nav_pc_group .header_nav_pc_item a .en_txt::before,
.header .header_global_nav_group .header_global_nav_item a .en_txt::before {
  position: absolute;
mix-blend-mode: exclusion;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-blue-highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.5s ease;
  transition-property: transform;
z-index: -1;
}







/*------------------------------------*\
    BORDERS
\*------------------------------------*/
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
content:"";
position:fixed;
display:block;
z-index:5;
}
/* ...and position them! */
html:before{/*上*/
height:7px;
left:0;
right:0;
top:0;
background: -moz-linear-gradient(to left,#064370,#0095B7,#064370,#0095B7);
background: -webkit-linear-gradient(to left,#064370,#0095B7,#064370,#0095B7);
background: linear-gradient(to left,#064370,#0095B7,#064370,#0095B7);
/*アニメ*/
width: 0;
animation-name:line-top;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes line-top {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}


body:after{/*左*/
width:7px;
top:0;
bottom:0;
left:0;
background: -moz-linear-gradient(to bottom,#0095B7,#064370,#0095B7);
background: -webkit-linear-gradient(to bottom,#0095B7,#064370,#0095B7);
background: linear-gradient(to bottom,#0095B7,#064370,#0095B7);
/*アニメ*/
height: 0;
animation-name:line-left;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
@keyframes line-left {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}



html:after{/*ポイントライン*/
background-color: var(--color-blue-highlight);
width:7px;
height: 60px;
top:0;
bottom:0;
left:0;
position:absolute;
/*アニメ*/
opacity: 0;
animation-name:line-point;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes line-point {
    0% {
       opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*◎768px以下*/
@media screen and (max-width: 768px) {
html:before{height:5px;}
body:after{width:5px;}
html:after{
width:5px;
height: 60px;
}
}




/* --------------------- */
/* -----スクロール------- */
/* --------------------- */
/* スクロールダウンの位置 */
.scroll {
  position: absolute;
z-index: 2;
  right: 50%;
  bottom: 8%;
  writing-mode: vertical-rl;
color: var(--color-white);
font-size: var(--s12);
/* opのアニメ */
opacity: 0;
animation-name: scroll-op;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 4s;
animation-fill-mode: forwards;
}
@keyframes scroll-op {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color:  var(--color-white);
  bottom: -50px;
  content: "";
  height: 80px;
  left: 0;
  margin: 0 20px auto auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.scroll {
  right: 7%;
  bottom: 15%;
}
}




/*-----------------------------------------------------*/
/*---------------------- マージン ----------------------*/
/*-----------------------------------------------------*/
/*上*/
.ma-t-10{margin-top: 10px;}
.ma-t-20{margin-top: 20px;}
.ma-t-30{margin-top: 30px;}
.ma-t-40{margin-top: 40px;}
.ma-t-50{margin-top: 50px;}
.ma-t-80{margin-top: 80px;}
.ma-t-100{margin-top: 100px;}



.vr-wrap {
  width: 100%;
  max-width: 800px;
  height: 450px; /* 16:9とか */
  margin: 0 auto;
}

.vr-wrap a-scene {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
}