@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/


@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap);


body,header,main,footer {
	font-family: "Roboto","Noto Sans JP", sans-serif;
	color:#323232;
}

.pc{display:none;}

#header{
  padding: 10px 3vw;
  text-align: left;
  position: fixed;/*fixedを設定して固定*/
  z-index: 999;/*最前面へ*/
  top:0;/*位置指定*/
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#header img{
    width: 30svw;
    height: auto;
    /*margin: 0.5svh auto;*/
}
ul {
  display: flex;
  list-style: none;
  align-items: center;
}

.nav-box {
    border: 1.8px solid #000;
    border-radius: 15px;
    font-size: 0.7vw;
    background:#fff;
}
.dli-chevron-down {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 0.7em;
    height: 0.7em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
    margin: 0 0 0.3em 0.7em
}
main{
  padding: 0 12vw;
}

.box{
  color: #323232;
}


#box1{
  font-size: clamp(0.1rem, 7vw, 10rem);
  font-weight: 300;
  letter-spacing: .05rem;
  padding-bottom: 7vw;
  text-align:justify;
}
#box2,#box3,#box4,#box5,#box6{
  font-size: clamp(0.1rem, 9vw, 10rem);
  font-weight: 300;
  letter-spacing: .05rem;
  padding-bottom: 7vw;
  text-align:justify;
}

#box1{
    text-align: center;
    margin-top: 12svh;
}
#box1 p.sp{
    line-height: 1.5;
}
#box1 span{
    display: block;
    line-height: 1.6;
    margin-top: 2.5vh;
}
#box2,#box3,#box4,#box5,#box6{
    padding-top: 8svh;
    line-height: 1.5;
}
#box2-1,#box3-1,#box4-1,#box5-1{
    font-size:7.5vw;
    letter-spacing: 0.1rem;
    font-feature-settings: "palt";
    display: block;
    line-height: 1.6;
    margin: 2.5vh auto;
}

#box2-2,#box3-2,#box4-2,#box5-2{
    font-size:4.3vw;
    letter-spacing: 0rem;
    font-feature-settings: "palt";
    display: block;
    line-height: 1.6;
    margin: 2.5vh auto;
}

#box1,#box2{
    height: 100vh;
}
#box6{
    height: 170vh;
}
#box2 hr{
    width: 32vw;
    margin: 2vw 0;
}
#box3 hr{
    width: 47vw;
    margin: 2vw 0;
}
#box4 hr{
    width: 41vw;
    margin: 2vw 0;
}
#box5 hr{
    width: 50vw;
    margin: 2vw 0;
}

#viewmore{
    width: 2em;
}
#viewmore2{
    width: 6em;
}
#scroll{
    width: 10vw;
    margin: 0 auto;
    padding-top: 20px;
}
#arrow{
    width: 0.5em;
}
#movie{
    width: 80%;
    position: absolute;
    bottom: 20vh;
    left: 10%;
}

#footer{
    background: rgba(0, 0, 0, 0);
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index:10;
}

#footer a{
  color: #fff;
}
#footer_img{
    position: fixed;
    padding: 0 13vw;
    bottom: 0px;
    left: 0px;
}
#sp_tag{
    display: flex;
    justify-content: space-between;
}
.tag{
    width: 30.5%;
    z-index: 1;

}

.table_design03 th,span.table-th {
  font-weight: 300;
  text-align: center;
  min-width: 3em;
  font-size:3vw;
  padding: 2em 0;
}
.table_design03 td,span.table-td1,span.table-td2 {
  font-size: 3vw;
  padding:0;
}

a,a:link, a:visited, a:hover, a:active {text-decoration: none;color:#323232;}

#footer_sp{
    background: rgba(25, 72, 151, 0.9);
    padding: 0;
    line-height:2.5;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    font-size: 4.2vw;
}
#footer_sp a{
  margin-bottom: 10px;
}

.btn a {
    display: flex;
    padding: 1rem 0rem 1rem 0.5rem;
    text-decoration: none;
    color: #323232;
    position: relative;
    transition: .3s;
    width: 100%;
    font-size: 4vw;
}
.btn a::after {
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    border: 1.5px solid #3c96ff;
    border-top: transparent;
    border-left: transparent;
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    bottom: -8vw;
    right: 2rem;
    margin: auto;
    transition: .3s;
}
.table_design03 th{
    padding: 0 0 6vw;
}
.table_design03 th:last-child{
    padding: 8vw 0;
}
nav{
    background: #00348c;
    /*position: absolute;
    top: 0;
    left: 0;
    width: 100%;*/
    padding: 0 13vw;
  font-size:4vw;
}
.spnav,.spnav span {
    color:#fff;
    margin-top: 6svh;
}

.spnav a,.spnav a:link, .spnav a:visited, .spnav a:hover, .spnav a:active {
    text-decoration: none;
    color:#fff;

}
.spnav div{
   margin-top:2.4svh;
}

#header .spnav img{
    width: 100%;
    margin: 0 auto;
}

#m1{
   margin-top:0;
   margin-bottom:1svh;
   letter-spacing: .05rem;
}
#m2{
   margin-top:2svh;
}

#m9{
   margin-top:6svh;
   font-size: 3.6vw;
   letter-spacing: .05rem;
}
#m2,#m4{
  margin-bottom:0;
}
#m2,#m3,#m4,#m5,#m6,#m7,#m8{
  font-size:4.8vw;
  letter-spacing: .15rem;
}
nav ul li a {
padding: 0.5vw 6vw 0.5vw 0;
}
nav{
overflow-y: scroll;
}

/*== 線の上を別の線が伸びる */

.btn{
    /*線の基点とするためrelativeを指定*/
	position:relative;
}

/*線の設定*/
.btn::before,
.btn::after{
	content:'';
	position:absolute;
	z-index:1;
	bottom:0px;
	left:0;
	width:100%;
	transition:all 0.8s ease-in-out;
	background: #c1c7c6;
	height: 1.5px;
	/*border-bottom: 2px solid #c1c7c6;*/
}

 /*hover時に伸びる線の形状*/   
.btn::after{
	width:16vw;
	background: #3c96ff;
	/*border-bottom: 2px solid #3c96ff;*/
}

 /*hover時に100%に伸びる*/   
.btn:hover::after {
	width:100%;
}

span.date{
    font-size: 3vw;
    padding-right: 2vw;
    padding-top: 0.3vh;
}

.circles li {
    bottom: -300px;
}

.circles0 li,.circles2 li,.circles3 li,.circles4 li,.circles5 li {
    bottom: -200px;
}

.circles li:nth-child(5),.circles li:nth-child(8) {
    left: 5%;
}

.circles li:nth-child(9) {
    left: 95%;
}

.circles3,.circles4,.circles5,.circles6,.circles13{
    height:680vh;
}
.circles2{
    height:580vh;
}

span#box1-2{
    font-size: 5vw
}
img.fadeUpTrigger_scroll{
    margin: 0 auto;
    display: block;
    width: 100%;
}

/*線の設定*/
#movie::before,
#movie::after{
	content:'';
	position:absolute;
	z-index:1;
	bottom:51%;
	left:56%;
	width:37%;
	transition:all 0.8s ease-in-out;
	background: #fff;
	height: 1px;
	/*border-bottom: 2px solid #c1c7c6;*/
}

 /*hover時に伸びる線の形状*/   
#movie::after{
	width:5%;
	background: #32c8ff;
	/*border-bottom: 2px solid #3c96ff;*/
}

 /*hover時に100%に伸びる*/   
#movie:hover::after {
	width:37%;
}

#banner1{
    margin:0 auto 20vw;
    width:100%;
    display: block;
}
#banner2{
    margin:20vw auto;
    width:100%;
    display: block;
}

#banner1.#banner2,#movie{
    /*線の基点とするためrelativeを指定*/
	position:relative;
}

/*線の設定*/
#banner1::before,
#banner1::after{
	content:'';
	position:absolute;
	z-index:1;
	bottom:62%;
	left:0;
	width:100%;
	transition:all 0.8s ease-in-out;
	background: #fff;
	height: 1px;
	/*border-bottom: 2px solid #c1c7c6;*/
}

#banner2::before,
#banner2::after{
	content:'';
	position:absolute;
	z-index:1;
	bottom:73%;
	left:0;
	width:100%;
	transition:all 0.8s ease-in-out;
	background: #fff;
	height: 1px;
	/*border-bottom: 2px solid #c1c7c6;*/
}

#banner2 span::before,
#banner2 span::after{
	content:'';
	position:absolute;
	z-index:1;
	bottom:44%;
	left:0;
	width:100%;
	transition:all 0.8s ease-in-out;
	background: #fff;
	height: 1px;
	/*border-bottom: 2px solid #c1c7c6;*/
}

 /*hover時に伸びる線の形状*/   
#banner1::after,#banner2::after,#banner2 span::after{
	width:13%;
	background: #32c8ff;
	/*border-bottom: 2px solid #3c96ff;*/
}

 /*hover時に100%に伸びる*/   
#banner1:hover::after,#banner2:hover::after,#banner2 span:hover::after {
	width:100%;
}

	#movie img:hover,#banner1 img:hover,#banner2 img:hover{
	       opacity: 1;
	}


@media (orientation: landscape){
#header img {
    width: 20vw;
}
#footer,#movie{position: static;}
#movie{width: 100%;
    display: block;
}
#box1, #box2 {
    height: 200vh;
}
#box6 {
    height: 400vh;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
    font-size: clamp(8px, 7vw, 28px);
}
span #box1-2{
    font-size: 1em;
}
#box2-2, #box3-2, #box4-2, #box5-2,.table_design03 th, .table_design03 td {
    font-size: 2.5vw;
}
#movie::before,
#movie::after{
	bottom:50%;
}
#banner1::before,
#banner1::after{
	bottom:58%;
}
#banner2::before,
#banner2::after{
	bottom:70%;
}
#banner2 span::before,
#banner2 span::after{
	bottom:38%;
}
}

@media screen and ( min-width:540px) {

	#box1,#box2,#box3,#box4,#box5,#box6,#footer_sp{
	    transition: transform 0.3s;
	    transform: scale(0.7);
	}
	#box1{
	    transform-origin: top;
	}
	#footer_sp{
	    width: calc(100% / 0.7);
	    transform-origin: left bottom;
	}
	#header img{
	    transition: transform 0.3s;
	    transform: scale(0.7);
	}
	.spnav{
	    transition: transform 0.3s;
	    transform: scale(0.7);
	    transform-origin: top;
	}
	img.fadeUpTrigger_scroll{
	    width: 70%;
	}
	#banner1,#banner2{
	    /*width: 70%;*/
	}
	#m2, #m3, #m4, #m5, #m6, #m7, #m8 {
	    font-size: 3.36vw;
	}
	#m9 {
	    margin-top: 8svh;
	    font-size: 3.2vw;
	    letter-spacing: .05rem;
	}
	#header .spnav img {
	    margin: -30px auto;
	    width: 140%;
	    transform-origin: left top;
	}
	#movie img{
	    transform: scale(1.2);
	}
	#scroll {
	    padding-top: 50px;
	}
	.circles3,.circles4,.circles5,.circles6,.circles13{
	    height:780vh;
	}
	.circles1,.circles2,.circles7{
	    height:780vh;
	}
	.spnav div{
	   margin-top:4.8svh;
	}
}


@media (orientation: landscape) {

	#header .spnav img {
	    margin: -10px auto;
	    width: 140%;
	    transform-origin: left top;
	}
	#movie img{
	    transform: none;
	    padding-top: 50px;
	}
	#scroll {
	    padding-top: 50px;
	}
	.circles3,.circles4,.circles5,.circles6,.circles13{

	}
	.circles1,.circles2,.circles7{

	}
}

@media screen and ( max-width:279px) {
	#box1 {
	    margin-top: 100px;
	}
	#box1,#box2{height:200vw}
	#box6{height:400vw}
	#movie {
	    top:180vw;
	}
	.circles0,.circles1,.circles2,.circles3,.circles4,.circles5,.circles6,.circles7,.circles10,.circles11,.circles12,.circles13{
	    height:1800vw;
	}
}