body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color:white;}
.smp{display:none;}
.en-title{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#E6E6E6;
    margin:0;
    position:absolute;
    transform:translateX(-50%);
    z-index:0;
    text-transform: uppercase;}
@media screen and (max-width:700px){.smp{display:block;}.pc{display:none;}}
@media screen and (min-width:701px){.smp{display:none;}.pc{display:block;}}


/*ヘッダー・グローバルメニュー*/
.header {
    display: flex;
    position:absolute;
    width:100%;
    height:7.6vw;
    justify-content: space-between;
    align-items: center;
    background-color:transparent;
    border-bottom:1px solid #fff;
    z-index:10;
    padding: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;}
#navi-content {width: 70%;}
.header nav {
    display: flex;
    list-style: none;}
.header nav a.nav__link {
    text-decoration: none;
    color: white;
    font-size:1.5vw;
    margin: 2.6vw 1.5vw;;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.header nav .link span{
    color: white;
    font-size:1.5vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.header nav .link{
    position: relative;
    margin: 0 1.5vw;
    padding:2.6vw 0;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color 1s;}
.header nav .link span::after {
    content: '▼';
    display:inline-block;
    margin-left:0.5vw;
    font-size: 1.2vw;}
.header nav .dropDown {
    position: absolute;
    display: none;
    bottom: 0;
    left: -6vw;
    padding: 0;
    border: 1px #fff solid;
    border-top: 0;
    width: 35vw;
    color: #fff;
    transform: translate(0, 100%);
    background-color: rgba(0, 0, 0, 1);}
.header nav .dropDown ul{
    list-style:none;
    margin:0;   padding:0;}
.header nav .link .dropDown__list {
    display: flex;
    flex-direction: column;}
.header nav .link .dropDown__item a.dropDown__link {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0.75vw 0.5vw;
    border-bottom:1px solid #fff;}
.header nav .link .dropDown__item:last-child a.dropDown__link{
    border-bottom:none;}
.header nav .link .dropDown__item a.dropDown__link:hover{
    background-color:rgba(255,255,255,0.5);
    color:#000;}
.logo {
    width: 17vw;
    margin-left: 7vw;}
.header-top{
    position:absolute;
    top:0;  right:0;
    width:20vw;
    height:6.4vw;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    padding:0.6vw;
    padding-right:0;
    border-left:1px solid #fff;}
.header-top a{
    color:white;
    text-decoration:none;
    position:relative;
    width:100%;
    padding:0 4vw;
    margin:0;
    font-size:1.5vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;}
.menu-bar{display:none;}
@media screen and (max-width:700px){
.header{
    background: none;
    /*position: fixed;*/
    background-color: #fff;
    height: 10vw;}
#navi-content{
    position:absolute;
    right: 0;  left: auto;  top: 0;
    width: 95vw;  height: auto;
    opacity:0;  display:none;
    padding:10vw 0 20vw;
    background-color: rgba(0,0,0,1);
    transition: ease .2s;}
#navi-content nav{
    opacity:1;
    flex-direction:column;
    color:#fff;
    margin-top:0;   margin-right:0;}
#navi-content nav a,#navi-content nav .link span{
    display: block;
    color: #fff;
    width: 100%;
    padding: 4vw 0;
    text-align: center;
    font-size: 5vw;
    border-bottom:1px solid #fff;}
#navi-content nav .link{
    margin:0;   padding:0;
    position:relative;
    display:block;}
#navi-content nav .link span::after {
    content: '＋';
    display: block;
    position: absolute;
    top: 7vw;
    right: 5vw;
    transform: translateY(-50%);
    font-size: 7vw;
    font-weight: lighter;}
#navi-content nav .dropDown {
    display: block; 
    max-height:0;
    transition: 250ms max-height ease;
    overflow:hidden;
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    border: 0;
    background:none;}
#navi-content nav .link .dropDown__list{
    display:block;
    position:relative;
    top:-120%;}
#navi-content nav .link .dropDown__list a.dropDown__link {
    background-image: linear-gradient(to right, #fff, #FFD 6px, transparent 6px);
    background-size: 3.5vw 0.1vw;
    background-position: left bottom;
    background-repeat: repeat-x;
    border: 0;
    text-align: left;
    font-size: 3.5vw;
    padding: 1.5vw 10vw;}
#navi-content nav .link .dropDown__item:last-child a.dropDown__link{
    background:none;
    border-bottom:1px #fff solid;}
#navi-content .header-top{
    opacity:1;
    position:relative;
    background:none;
    width: 100%;
    margin-top:5vw;
    gap: 5%;}
#navi-content .header-top a{
    color: #000;
    background-color: rgba(255, 255, 255, 0.5);
    width: 90%;
    border: none;
    margin:5vw auto;
    padding: 2vw 0;
    font-size: 5vw;
    text-align: center;}
.header-menu-bar {
    display:block;
    width: 13vw;
    height: 100%;}
.menu-bar {
    background-color: transparent;
    border-color: transparent;
    z-index: 9999;
    margin-right:5vw;}
.menu-bar span {
    width: 100%;
    height: 1px;
    background-color: #000;
    position: relative;
    transition: ease .4s;
    display: block;}
.menu-bar span:nth-child(1) {top: 0;}
.menu-bar span:nth-child(2) {margin: 7px 0;}
.menu-bar span:nth-child(3) {top: 0;}
#navi-content.active {
    opacity:1;  display:block;}
.menu-bar.active span:nth-child(1) {
    top: 5px;
    transform: rotate(25deg);
    background-color:#fff;}
.menu-bar.active span:nth-child(2) {opacity: 0;}
.menu-bar.active span:nth-child(3) {
    top: -11px;
    transform: rotate(-25deg);
    background-color:#fff;}
#navi-content nav a.nav__link{
    margin:0;}
#navi-content .toggle {display: none;}
#navi-content .toggle:checked + .link .dropDown{max-height:100vw;}
#navi-content .toggle:checked + .link span {
    background-image: linear-gradient(to right, #fff, #FFD 6px, transparent 6px);
    background-size: 3.5vw 0.1vw;
    background-position: left bottom;
    background-repeat: repeat-x;
    border: 0;}
#navi-content .toggle:checked + .link span::after{content:"ー";}
}
@media screen and (min-width:701px) {
.header nav .link:hover > .dropDown,.header nav .link.active > .dropDown {
    display: block;}    
}


/*無料職業紹介所エントリーフォームボタン（右下固定）*/
.works-form-button{
    display:block;
    position:fixed;
    width: 10vw;    height: 3.5vw;
    bottom:14.9vw;   right:0;
    text-decoration:none;
    color:#fff;
    text-align:center;
    background-color:#B24246;
    border-top-left-radius:1.5vw;
    border-bottom-left-radius: 1.5vw;
    padding:1vw;
    z-index:50;}
.works-form-button .jp{
    font-size: 1.1vw;
    display: block;
    margin: 0.2vw 0;
    font-weight: bold;}
@media screen and (max-width:700px){
.works-form-button{
    display: flex;
    justify-content: center;
    flex-direction: column;
    left: 0;    bottom: 14vw;
    width: 100%;    height: 12vw;
    background-color: #fff;
    border:2px solid #B24246;
    border-radius: 0;
    color: #B24246;
    align-items: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;}
.works-form-button .jp{
    font-size: 5vw;
    margin: -0.5vw 0;}
}

/*カタログダウンロードボタン（右下固定）*/
.catalog-download-button{
    display:block;
    position:fixed;
    width: 10vw;    height: 3.5vw;
    bottom:9.1vw;   right:0;
    text-decoration:none;
    color:#B24246;
    text-align:center;
    background-color:#fff;
    border:1px solid #B24246;
    border-top-left-radius:1.5vw;
    border-bottom-left-radius: 1.5vw;
    padding:1vw;
    z-index:50;}
.catalog-download-button .jp{
    font-size:1.2vw;
    display:block;
    margin:0.2vw 0;}
.catalog-download-button .en{
    font-size:1.5vw;
    display:block;
    margin:-2vw 0 0;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
@media screen and (max-width:700px){
.catalog-download-button{
    display: flex;
    justify-content: center;
    flex-direction: column;
    left: 50%;  bottom:0;
    width: 50%;
    height: 15vw;
    background-color: #fff;
    border:2px solid #B24246;
    border-radius: 0;
    color: #B24246;
    align-items: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;}
.catalog-download-button .jp,.catalog-download-button .en{
    font-size: 5vw;
    margin: -0.5vw 0;}
}

/*オンラインショップボタン（右下固定）*/
.online-shopping-button{
    display:block;
    position:fixed;
    width: 10vw;    height: 7vw;
    bottom:0;   right:0;
    text-decoration:none;
    color:#fff;
    text-align:center;
    background-color:#B24246;
    border-top-left-radius:1.5vw;
    border-bottom-left-radius: 1.5vw;
    padding:1vw;
    z-index:50;}
.online-shopping-button .jp{
    font-size:1.2vw;
    display:block;
    margin:0.5vw 0;}
.online-shopping-button .en{
    font-size:1.5vw;
    display:block;
    margin:-2vw 0 0;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.online-shopping-button i{
    font-size: 2.5vw;
    display: block;
    margin: -1vw 0;}
@media screen and (max-width:700px){
.online-shopping-button .pc{display:none;}
.online-shopping-button{
    display: flex;
    justify-content: center;
    flex-direction: column;
    left: 0;
    width: 50%;
    height: 15vw;
    background-color: #B24246;
    border-radius: 0;
    color: #fff;
    align-items: center;
    padding-left: 10vw;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;}
.online-shopping-button .jp,.online-shopping-button .en{
    font-size: 5vw;
    margin: -0.5vw 0;}
.online-shopping-button i{
    position:absolute;
    left: 7vw;
    font-size: 7vw;}
}
@media screen and (min-width:701px){
.online-shopping-button .smp{display:none;}
}


/*メインビジュアル*/
.main-visual{
    position:relative;
    background-color:#fff;
    height:50vw;}
.background-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 95%;
    height: 50vw;
    z-index: 0;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    padding-bottom: 53.25%; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */}
.background-video iframe{
    width: 100%;
    height: 50vw;
    object-fit: cover;
    border-bottom-left-radius: 5vw;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;}
.background-video::after {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 2;
    border-bottom-left-radius: 5vw;
    width: 100%;}
.scrolldown{
	position:absolute;
	bottom:1%;
	right:5vw;
	animation: arrowmove 1.5s ease-in-out infinite;}
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}}
.scrolldown span{
	position: absolute;
    left: 3px;
    bottom: 7vw;
	color: #fff;
	font-size: 1.05vw;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;}
.scrolldown:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);}
.scrolldown:after{
	content:"";
	position: absolute;
	bottom:0;
	right:0;
	width:1px;
	height: 10vw;
	background:#fff;}
.mv-text{
    position:absolute;
    font-size:1.8vw;
    top:50%;    left:2.4vw;
    margin:0;
    transform:translate(-50%,-50%);
    writing-mode: vertical-rl;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.content {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:500;
    position:absolute;
    font-size:3vw;
    font-weight:bold;
    bottom:-20px;   left:20px;
    color: white;
    padding: 3vw;}
.link-images {
    display: flex;
    position: absolute;
    top: 150px;
    right: 3vw;
    flex-direction: column;}
.link-images a {
    border:1px solid white;
    width: 4vw;
    height: 4vw;
    margin-bottom: 1.5vw;
    font-size:2.1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    border-radius: 4vw;}
.link-images a:last-child {
    margin-bottom: 0;}
@media screen and (max-width:700px){
.background-video{margin-top:10vw;}
.link-images,.scrolldown{display: none;}
.mv-text {
    top: 65%;
    left: 3vw;
    font-size: 4.5vw;
    font-weight: 700;
    height: 40vw;
    text-align: center;}
}


/*ミッション*/
.mission-box {
    position:relative;
    width:100%;
    height:60vw;
    overflow: hidden;}
.mission-section {
    position: relative;}
.mission-section .en-title{
    top:-2vw;  left:32%;
    font-size: 20vw;}
.mission-section .overlay {
    position: absolute;
    width:50%;  height: 30vw;
    top:23vw;   right:-5vw;
    overflow:hidden;
    z-index: 1;}
.mission-section .overlay::after{
    display:block;
    content:"";
    position:absolute;
    background-color:rgba(0,0,0,0.3);
    border-radius: 3vw;
    top:0;  left:0; right:0;    bottom:0;
    z-index:2;} 
.mission-section .overlay .image {
    width:100%;
    height: 30vw;
    border-radius: 3vw;
    object-fit: cover;
    z-index: 0;}
.mission-section .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    z-index:5;}
.mission-section .play a {
    border:1px solid white;
    width: 8vw;
    height: 8vw;
    margin-bottom: 1.5vw;
    font-size:3.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    border-radius: 8vw;}
.mission-section .overlay-text{
    position: absolute;
    margin: 0;
    font-size: 1.5vw;
    bottom: 0;
    left: 18%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 3;}
.mission-content {
    position: absolute;
    padding:0;  margin:0;
    text-align:center;
    width:45%;
    top:27vw;   left:3%;
    font-size: 1.2vw;
    line-height: 2.4vw;}
.mission-content .big-1 {
    display:inline-block;
    color:#666666;
    font-size: 3vw;
    font-weight:600;
    margin-bottom: 3vw;}
.mission-content .big-2 {
    display:inline-block;
    font-size: 1.5vw;
    margin-bottom:3vw;}
@media screen and (max-width:700px){
.mission-box{
    height:160vw;}
.mission-section .en-title {
    top: 10vw;
    font-size: 30vw;
    left: 45%;}
.mission-content {
    width: 90%;
    top: 128vw;    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    font-size: 3vw;
    line-height: 5vw;}
.mission-content .big-1 {
    position: absolute;
    top: -78vw;
    left: 0;
    color: #333;
    font-size: 8vw;
    line-height: 8vw;
    width: 100%;
    text-align: center;}
.mission-content .big-2 {
    position: absolute;
    top: -66vw;
    left: 0;
    font-size: 4vw;
    line-height: 6vw;
    width: 100%;}
.mission-section .overlay {
    width: 90%;
    height: 45vw;
    top: 78vw;
    left: 50%;
    transform: translateX(-50%);}
.mission-section .overlay::after{height:45vw;}
.mission-section .overlay .image{height:45vw;}
.mission-section .play{top:45%;}
.mission-section .play a {
    width: 12vw;
    height: 12vw;
    font-size: 6vw;}
.mission-section .overlay-text{font-size:3vw;}
}

/*オーキッドガーデン*/
.orchid-box {
    position:relative;
    width:100%;
    height:60vw;
    overflow: hidden;}
.orchid-section {
    position: relative;}
.orchid-section .en-title{
    top:-2vw;  left:55%;
    width:100%;
    font-size: 15vw;}
.orchid-section .overlay {
    position: absolute;
    width:50%;  height: 30vw;
    top:18vw;   left:-2vw;
    overflow:hidden;
    z-index: 1;}
.orchid-section .overlay::after{
    display:block;
    content:"";
    position:absolute;
    background-color:rgba(0,0,0,0.3);
    border-radius: 3vw;
    top:0;  left:0; right:0;    bottom:0;
    z-index:2;} 
.orchid-section .overlay .image {
    width:100%;
    height: 30vw;
    border-radius: 3vw;
    object-fit: cover;
    z-index: 0;}
.orchid-section .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    z-index:5;}
.orchid-section .play a {
    border:1px solid white;
    width: 8vw;
    height: 8vw;
    margin-bottom: 1.5vw;
    font-size:3.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    border-radius: 8vw;}
.orchid-section .overlay-text{
    position: absolute;
    margin: 0;
    font-size: 1.5vw;
    bottom: 0;
    left: 33%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 3;}
.orchid-content {
    position: absolute;
    padding:0;  margin:0;
    text-align:center;
    width:47%;
    top:21vw;   right:3%;
    font-size: 1.1vw;
    line-height: 2.4vw;}
.orchid-content .big-1 {
    display:inline-block;
    color:#666666;
    font-size: 3vw;
    font-weight:600;
    margin-bottom: 3vw;}
.orchid-content .big-2 {
    display:block;
    font-size: 1.5vw;
    margin-bottom:3vw;}
.orchid-section a.visit-entry{
    position:absolute;
    top: 55vw;
    right: 5vw;
    text-decoration: none;}
.orchid-section a.visit-entry .arrow-movie{
	position: absolute;
    width: 22vw;
    top: -7vw;
    left: -25vw;
    font-size: 1.2vw;
    color: #000;
    display: inline-block;
    text-decoration: none;
    outline: none;
    z-index:5;}
.orchid-section a.visit-entry .arrow-movie::before{
    content: '';
    position: absolute;
    top: 2.5vw;    left: -1vw;
    width: 24vw;    height: 1px;
    background: #707070;
    z-index:5;}
.orchid-section a.visit-entry .arrow-movie::after{
    content: '';
    position: absolute;
    top: 2vw;   right: -5%;
    width: 1.5vw;    height: 1px;
    background: #707070;
    transform: rotate(35deg);
    z-index:5;}
.orchid-section a.visit-entry .link-circle{
    position:absolute;
    right: -5%;
    bottom: 20%;
    width: 4vw;
    height: 4vw;
    background-color:#F2F2F2;
    border-radius: 50%;
    z-index:4;}
@media screen and (max-width:700px){
.orchid-box{
    height:155vw;}
.orchid-section .en-title{
    left:51%;}
.orchid-content {
    width: 90%;
    top: 100vw;    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    font-size: 3vw;
    line-height: 5vw;}
.orchid-content .big-1 {
    position: absolute;
    top: -78vw;
    left: 0;
    color: #333;
    font-size: 8vw;
    line-height: 8vw;
    width: 100%;
    text-align: center;}
.orchid-content .big-2 {
    position: absolute;
    top: -60vw;
    left: 0;
    font-size: 4vw;
    line-height: 6vw;
    width: 100%;
    text-align: center;}
.orchid-section .overlay {
    width: 90%;
    height: 45vw;
    top: 50vw;
    left: 50%;
    transform: translateX(-50%);}
.orchid-section .overlay::after{height:45vw;}
.orchid-section .overlay .image{height:45vw;}
.orchid-section .play{top:45%;}
.orchid-section .play a {
    width: 12vw;
    height: 12vw;
    font-size: 6vw;}
.orchid-section .overlay-text{font-size:3vw;}
.orchid-section a.visit-entry {
    top: 145vw;
    right: 10vw;}
.orchid-section a.visit-entry .link-circle {
    width: 10vw;
    height: 10vw;
    bottom: -5vw;
    right: -3vw;}
.orchid-section a.visit-entry .arrow-movie {
    width: 55vw;
    top: -11vw;
    left: -61vw;
    font-size: 3vw;}
.orchid-section a.visit-entry .arrow-movie::before {
    top: 5vw;
    width: 60vw;}
.orchid-section a.visit-entry .arrow-movie::after {
    width: 3vw;
    top: 4vw;
    right: -8%;}
}


/*サポーター*/
.supporter-box {
    position:relative;
    width:100%;
    height:100vw;
    overflow: hidden;}
.supporter-section {
    position: relative;}
.supporter-section .en-title{
    top:0;  left:50%;
    width:100%;
    text-align:center;
    font-size: 15vw;}
.supporter-section .overlay {
    position: relative;
    padding-top:18vw;
    width:100%;     height: 85vw;
    overflow:hidden;
    z-index: 1;}
.supporter-section .overlay .image {
    object-position: 0 -30vw;
    background-color: #F7F7F7;}
.supporter-section .overlay .text-1 {
    position:absolute;
    margin:0;   padding:0;
    top:23vw;  left:78%;
    transform:translateX(-50%);
    font-size:2.5vw;
    font-weight:bold;
    writing-mode: vertical-rl;}
.supporter-section .overlay .text-1 span{
    display:block;
    margin:0;   padding:0;
    height:30vw;}
.supporter-section .overlay .text-1 span:last-child{
    text-align:right;}
.supporter-section .overlay .text-2 {
    position:absolute;
    margin:0;   padding:0;
    top: 25vw;    left: 45%;
    transform: translateX(-50%);
    font-size: 1.8vw;
    line-height: 4.2vw;
    height:30vw;
    writing-mode: vertical-rl;}
.supporter-section .overlay .text-2 span {
    text-combine-upright: all;}
.supporter-section .overlay .text-2 .title {
    display:block;
    font-size: 2.2vw;
    font-weight:bold;
    margin-left: 2.5vw;
    text-combine-upright:unset;}
.supporter-section .overlay .text-3 {
    position:absolute;
    margin:0;   padding:0;
    top: 64vw;  left: 44%;
    transform: translateX(-50%);
    font-size: 1.2vw;}
.supporter-section .overlay .thumnail-link{
    position: absolute;
    top: 55vw;
    left: 50%;
    transform: translateX(-50%);
    width: 30vw;
    height: 15vw;}
.supporter-section .overlay .arrow-movie{
	position: absolute;
    width:45%;
    top: 35%;
    left: 3vw;
    font-size:1.5vw;
    color:#000;
    display: inline-block;
	padding: 0 20px;
    text-decoration: none;
    outline: none;
    z-index:2;}
.supporter-section .overlay .arrow-movie::before{
    content: '';
	position: absolute;
    top:1vw;
    left:64%;
    width: 50%;
    height: 1px;
	background:#000;
    z-index:2;}
.supporter-section .overlay .arrow-movie::after{
    content: '';
	position: absolute;
    top:0.5vw;
    right:-15%;
    width: 2vw;
    height:1px;
	background:#000;
    transform: rotate(35deg);
    z-index:2;}
.supporter-section .overlay .link-circle{
    position:absolute;
    right:15%;    bottom:10%;
    width: 8vw;
    height: 8vw;
    border:2px red solid;
    border-radius: 50%;
    z-index:1;
    transition: .5s;}
.supporter-section .overlay .thumnail-link:hover .link-circle{
    background-color:red;}
.supporter-entry{
    display: block;
    position: absolute;
    bottom: 10vw;
    right: 5vw;
    padding: 1vw 7vw;
    color: #000;
    text-decoration: none;
    font-size:1.8vw;
    background-color: rgba(255, 255, 255, 0.8);}
.supporter-entry:hover{
    opacity:0.8;}
.supporter-entry .arrow-link{
	position: absolute;
    width: 1vw;
    top:50%;    left:78%;
    display: inline-block;
	padding: 0 20px;
    text-decoration: none;
    outline: none;
    z-index:2;}
.supporter-entry .arrow-link::before{
    content: '';
	position: absolute;
    top:0;    right:-5px;
    width: 100%;
    height: 1px;
	background:#000;
    z-index:2;}
.supporter-entry .arrow-link::after{
    content: '';
	position: absolute;
    top:-0.3vw;    right:-5px;    
    width: 10px;
    height:1px;
	background:#000;
    transform: rotate(35deg);
    z-index:2;}
@media screen and (max-width:700px){
.supporter-box{
    height:170vw;}
.supporter-section .en-title {
    font-size:22vw;}
.supporter-section .overlay {
    width: 100%;
    height:120vw;
    top: 10vw;}
.supporter-section .overlay::after{height:100vw;}
.supporter-section .overlay .image{
    display:block;
    height:120vw;
    object-fit: cover;
    padding-top:20vw;
    object-position: 0 -20vw;}
.supporter-content {
    width: 90%;
    top: 100vw;
    left: 5%;}
.supporter-section .overlay .text-1 {
    writing-mode: horizontal-tb;
    display: flex;
    width: 100%;
    justify-content: center;
    top: 20vw;
    left: 50%;
    font-size: 5vw;
    font-weight: 400;}
.supporter-section .overlay .text-2 {
    top: 37vw;
    left: 50%;
    font-size: 3.5vw;
    line-height: 6.5vw;
    height: 45vw;}
.supporter-section .overlay .text-2 .title {
    position: absolute;
    writing-mode: horizontal-tb;
    top: -10vw;
    font-size: 3.5vw;
    text-align: center;
    width: 100%;
    font-weight: 400;}
.supporter-section .overlay .thumnail-link {
    top: 78vw;}
.supporter-section .overlay .arrow-movie {
    font-size: 3vw;
    width: 70%;
    top: 6%;
    left: -14vw;}
.supporter-section .overlay .arrow-movie::before {
    width: 40%;
    left: 75%;}
.supporter-section .overlay .text-3 {
    top: 86vw;
    left: 35%;
    font-size: 2vw;}
.supporter-entry {
    width: 85%;
    font-size: 4vw;
    padding: 2vw;
    bottom: 5vw;
    text-align: center;}

}


/*HAPPINESS*/
.happiness {
    position:relative;
    width:100%;
    height:140vw;
    overflow: hidden;}
.happiness .en-title{
    top:0;  left:34%;
    font-size: 16vw;}
.happiness .jp-title{
    margin: 0;
    font-size: 3vw;
    font-weight:600;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 20vw;}
.happiness-wrap{
    display:flex;
    position:relative;
    margin-top:5vw;}
.happiness-company {
    position: absolute;
    top: 24vw;
    left: 51%;      /*left: 20%;*/
    font-size: 1vw;
    line-height: 1.8vw;}
.happiness-company ul{
    list-style:none;
    margin:1vw;   padding:0;}
.happiness-company li {
    border-bottom: 1px solid #aaa;
    padding:1vw;
    width:25.5vw;}
.happiness-company li a{
    position:relative;
    text-decoration: none;
    display: block;
    padding-left: 1vw;}
.happiness-company li a::before{
    font-family:"Font Awesome 5 Free";
    content:'\f054';
    font-weight:900;
    display:block;
    position:absolute;
    top:50%;    left:0;
    transform:translate(-50%,-50%);
    color:#aaa;}
.happiness-company li a:active{
    pointer-events: none;}
.happiness-company li a p {
    margin: 0;}
.happiness-company li a p.en {
    font-size: 3vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 1vw 0;
    color:#eee;}
.happiness-company li a p.jp{
    font-size:1.2vw;
    color:#000;}
.happiness-company li:hover{
    background-color:#eee;
    padding-left: 2vw;}
.happiness-company li:hover p.en{
    color:#aaa;}
.happiness-section {
    position: relative;
    width:100%;}
.happiness-section .overlay {
    position: absolute;
    width:55vw;  height: 45vw;
    top:23vw;   left:-5vw;  right:auto;
    overflow:hidden;
    z-index: 5;}
.happiness-section .overlay .image-box{
    opacity:0;    height:45vw;}
.happiness-section .overlay .image-box::after {
    display:block;
    position:absolute;
    content:"";
    width:100%;
    height: 22.5vw;
    top:0;  left:0; right:0;    bottom:0;
    border-top-right-radius: 3vw;
    border-top-left-radius:3vw;
    z-index: 0;
    background-color:rgba(0,0,0,0.5);}
.happiness-section .overlay .image {
    width:100%;
    height: 22.5vw;
    border-top-right-radius: 3vw;
    object-fit: cover;
    z-index: 0;}
.happiness-section .overlay .image-2 {
    width:100%;
    height:22.5vw;
    border-bottom-right-radius: 3vw;
    border-bottom-left-radius: 3vw;
    object-fit: cover;
    object-position: 2vw center;
    margin-top: -0.3vw;}
.happiness-section .overlay.active .image-box{opacity:1;}
.happiness-section .overlay p {
    position: absolute;
    transform:translate(-50%,-50%);
    margin:0;   width:80%;
    color:#fff;
    z-index:10;
    opacity:0;}
.happiness-section .overlay.active p{opacity:1;}
.happiness-section .overlay-text-1{
    top:10%; left:53%;
    font-size:4vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.happiness-section .overlay-text-1 span{font-size:6vw;}
.happiness-section .overlay-text-2{
    top:22%; left:55%;
    font-size:2vw;}
.happiness-section .overlay-text-3{
    top:34%; left:55%;
    font-size:1vw;}
.happiness-company .toggle {display: none;}

/*left*/
.happiness .jp-title.left{
    top:78vw;}
.happiness-wrap.left{
    flex-direction:row-reverse;}
.happiness-company.left {
    position: absolute;
    top: 67vw;
    left: 20%;  /*left: 51%;*/
    font-size: 1vw;
    line-height: 1.8vw;}
.happiness-company.left ul{
    list-style:none;
    margin:1vw;   padding:0;}
.happiness-company.left li {
    border-bottom: 1px solid #aaa;
    padding:1vw;
    width:26vw;}
.happiness-company.left li a{
    position:relative;
    text-decoration: none;
    display: block;
    padding-left: 1vw;}
.happiness-company.left li a::before{
    font-family:"Font Awesome 5 Free";
    content:'\f054';
    font-weight:900;
    display:block;
    position:absolute;
    top:50%;    left:0;
    transform:translate(-50%,-50%);
    color:#aaa;}
.happiness-company.left li a:active{
    pointer-events: none;}
.happiness-company.left li a p {
    margin: 0;}
.happiness-company.left li a p.en {
    font-size: 3vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 1vw 0;
    color:#eee;}
.happiness-company.left li a p.jp{
    font-size:1.2vw;
    color:#000;}
.happiness-company.left li:hover{
    background-color:#eee;
    padding-left: 2vw;}
.happiness-company.left li:hover p.en{
    color:#aaa;}
.happiness-company.left .movie-thumnail{
    position: relative;
    width:25vw;  height: auto;
    overflow:hidden;
    margin:2vw;
    z-index: 1;}
.happiness-company.left .movie-thumnail::after{
    display:block;
    content:"";
    position:absolute;
    background-color:rgba(0,0,0,0.3);
    top:0;  left:0; right:0;    bottom:0;
    z-index:2;} 
.happiness-company.left .movie-thumnail .image {
    width:100%;    height: auto;
    object-fit: cover;
    transform: scale(1.25);
    z-index: 0;}
.happiness-company.left .movie-thumnail .play {
    position: absolute;
    top: 50%;    left: 50%;
    transform:translate(-50%,-50%);
    z-index:5;}
.happiness-company.left .movie-thumnail .play a {
    border:1px solid white;
    width: 4vw;    height: 4vw;
    margin-bottom: 1.5vw;
    font-size:2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    border-radius: 8vw;}
.happiness-company.left .movie-thumnail .overlay-text {
    position: absolute;
    top: 12%;    left: 24%;
    font-size: 1vw;
    line-height: 1.5vw;
    color: #fff;
    transform:translate(-50%,-50%);
    z-index:5;}
.happiness-company.left .movie-thumnail  .overlay-text-2{
    position: absolute;
    margin: 0;
    font-size: 1.1vw;
    bottom: 0;
    left: 24%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 3;}
.happiness-section.left {
    position: relative;
    width:100%;}
.happiness-section.left .overlay {
    position: absolute;
    width:55vw;  height: 45vw;
    top:67vw;   right:-5vw;   left:auto;
    overflow:hidden;
    z-index: 5;}
.happiness-section.left .overlay .image {
    width:100%;
    height: 22.5vw;
    opacity:0;
    border-top-left-radius: 3vw;
    object-fit: cover;
    z-index: 0;}
.happiness-section.left .overlay .image-2{
    object-position: -2vw center;}
.happiness-section.left .overlay.active .image{opacity:1;}
.happiness-section.left .overlay p {
    position: absolute;
    transform:translate(-50%,-50%);
    margin:0;   width:80%;
    color:#fff;
    text-shadow:0.5px 0.5px #000;
    z-index:10;
    opacity:0;}
.happiness-section.left .overlay.active p{opacity:1;}
.happiness-section.left .overlay-text-1{
    top:10%; left:45%;
    font-size:4vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.happiness-section.left .overlay-text-1 span{font-size:6vw;}
.happiness-section.left .overlay-text-2{
    top:22%; left:47%;
    font-size:2vw;}
.happiness-section.left .overlay-text-3{
    top:34%; left:47%;
    font-size:1vw;}
@media screen and (max-width:700px){
.happiness{height:330vw;}
.happiness .jp-title{
    top:35vw;
    font-size:8vw;}
.happiness .jp-title.left{
    top:160vw;}
.happiness .en-title {
    left: 50%;
    font-size: 22vw;}
.happiness-section.right.pc{display:none;}
.happiness-company li{
    position:relative;
    border-bottom: none;
    width:100vw;
    height: 20vw;
    overflow: hidden;}
.happiness-company li a{
    padding: 2vw 5vw;
    margin-right:12vw;
    margin-bottom: 5vw;
    border-bottom: 1px solid #aaa;}
.happiness-company li a p.en{
    font-size: 10vw;
    font-weight: 500;
    margin: 3vw 0 8vw;}
.happiness-company li:hover p.en{color:#eee;}
.happiness-company li a p.jp{
    font-size: 3vw;}
.happiness-company li a::before{
    font-size: 3vw;
    top: 35%;    left: 3%;}
.happiness-company.right {
    top: 55vw;    left: 5vw;}
.happiness-company.right li .overlay.smp{
    position: absolute;
    width: 105vw;    max-height: 0;
    top:23vw;   right:-5vw;
    overflow:hidden;
    z-index: 5;}
.happiness-company.right li .overlay.smp .image-box{opacity:1;}
.happiness-company.right li .overlay.smp .image-box::after {
    display:block;
    position:absolute;
    content:"";
    width:100%;
    height: 75vw;
    top:0;  left:0; right:0;    bottom:0;
    border-radius: 3vw;
    z-index: 0;
    background-color:rgba(0,0,0,0.5);}
.happiness-company.right li .overlay.smp .image {
    width:100%;
    height: 75vw;
    border-radius: 3vw;
    object-fit: cover;
    z-index: 0;}
.happiness-company.right li .overlay.smp.active .image-box{opacity:1;}
.happiness-company.right li .overlay.smp p {
    position: absolute;
    transform:translate(-50%,-50%);
    margin:0;   width:80%;
    color:#fff;
    z-index:10;
    opacity:1;}
.happiness-company.right li .overlay.smp.active p{opacity:1;}
.happiness-company.right li .overlay.smp .overlay-text-1{
    position:absolute;
    top:15%; left:45%;
    font-size:8vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;}
.happiness-company.right li .overlay.smp .overlay-text-1 span{font-size:12vw;}
.happiness-company.right li .overlay.smp .overlay-text-2{
    position:absolute;
    top:30%; left:45%;
    font-size:5vw;}
.happiness-company.right li .overlay.smp .overlay-text-3{
    position:absolute;
    top: 65%;    left: 45%;
    font-size: 3.2vw;
    line-height: 5vw;}
.happiness-company li:hover{background:none;}
.happiness-company.right .toggle#happiness-1:checked + li,.happiness-company.right .toggle#happiness-3:checked + li,.happiness-company.right .toggle#happiness-4:checked + li{
    height:100vw;}
.happiness-company.right .toggle#happiness-2:checked + li{
    height:150vw;}
.happiness-company.right .toggle#happiness-1:checked + li .overlay.smp,.happiness-company.right .toggle#happiness-2:checked + li .overlay.smp,.happiness-company.right .toggle#happiness-3:checked + li .overlay.smp,.happiness-company.right .toggle#happiness-4:checked + li .overlay.smp {
    max-height:75vw;}

.happiness-section.left.pc{display:none;}
.happiness-company.left li {
    position:relative;
    border-bottom: none;
    width:100vw;
    height: 20vw;
    overflow: hidden;}
.happiness-company.left li a{
    padding: 2vw 5vw;
    margin-left:12vw;
    margin-right:0;
    margin-bottom: 5vw;
    border-bottom: 1px solid #aaa;}
.happiness-company.left li a p.en {
    font-size: 10vw;
    font-weight: 500;
    margin: 3vw 0 8vw;}
.happiness-company.left li:hover p.en {color:#eee;}
.happiness-company.left li a p.jp {
    font-size: 3vw;}
.happiness-company.left li a::before{
    font-size: 3vw;
    top: 35%;    left: 3%;}
.happiness-company.left {
    top: 150vw;     right: 5vw;
    left: auto;}
.happiness-company.left li .overlay.smp{
    position: absolute;
    width: 105vw;    max-height: 0;
    top:23vw;   left:-5vw;
    z-index: 5;}
.happiness-company.left li .overlay.smp.h80{overflow:hidden;}
.happiness-company.left li .overlay.smp.h130r{overflow:hidden;}
.happiness-company.left li .overlay.smp.h130l{overflow:hidden;}
.happiness-company.left li .overlay.smp .image-box{opacity:1;}
.happiness-company.left li .overlay.smp .image-box::after {
    display:block;
    position:absolute;
    content:"";
    width:100%;
    height: 75vw;
    top:0;  left:0; right:0;    bottom:0;
    border-radius: 3vw;
    z-index: 0;
    background-color:rgba(0,0,0,0.5);}
.happiness-company.left li .overlay.smp .image {
    width:100%;
    height: 75vw;
    border-radius: 3vw;
    object-fit: cover;
    z-index: 0;}
.happiness-company.left li .overlay.smp.active .image-box{opacity:1;}
.happiness-company.left li .overlay.smp p {
    position: absolute;
    transform:translate(-50%,-50%);
    margin:0;   width:80%;
    color:#fff;
    z-index:10;
    opacity:1;}
.happiness-company.left li .overlay.smp.active p{opacity:1;}
.happiness-company.left li .overlay.smp .overlay-text-1{
    position:absolute;
    top:15%; left:57%;
    font-size:8vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;}
.happiness-company.left li .overlay.smp .overlay-text-1 span{font-size:12vw;}
.happiness-company.left li .overlay.smp .overlay-text-2{
    position:absolute;
    top:35%; left:57%;
    font-size:5vw;
    line-height:6vw;}
.happiness-company.left li .overlay.smp .overlay-text-3{
    position:absolute;
    top: 65%;    left: 57%;
    font-size: 3.2vw;
    line-height: 5vw;}
.happiness-company.left li:hover{background:none;}
.happiness-company.left .toggle#happiness-5:checked + li,.happiness-company.left .toggle#happiness-6:checked + li{
    height:100vw;}
.happiness-company.left .toggle#happiness-7:checked + li{
    height:150vw;}
.happiness-company.left .toggle#happiness-5:checked + li .overlay.smp,.happiness-company.left .toggle#happiness-6:checked + li .overlay.smp,.happiness-company.left .toggle#happiness-7:checked + li .overlay.smp{
    max-height:75vw;}
.happiness-company.left .movie-thumnail {
    width: 90%;
    height: 50vw;
    margin-left: 13vw;}
.happiness-company.left .movie-thumnail .overlay-text {
    font-size: 4vw;
    line-height: 5vw;}
.happiness-company.left .movie-thumnail .overlay-text-2 {
    font-size: 4vw;
    bottom: 3vw;
    left: 23%;}
.happiness-company.left .movie-thumnail .play a {
    font-size: 8vw;
    width: 12vw;
    height: 12vw;}
.happiness-smp-image {position: absolute;}
.overlay.smp.h130r .happiness-smp-image{
    width: 85%;
    right: 10vw;
    bottom: -40vw;}
.overlay.smp.h130l .happiness-smp-image{
    width: 75%;
    left: 25vw;
    bottom: -40vw;}
}
@media screen and (min-width:701px){
.happiness-company.right li .overlay.smp{display:none;}
.happiness-company.left li .overlay.smp{display:none;}
}
@media screen and (min-width:1800px){
.happiness .jp-title.left{top:76vw;}
}


.future{
    position:relative;
    padding-top:15vw;
    overflow: hidden;}
.future .en-title{
    top: -5vw;
    right: -35%;
    font-size: 16vw;}
.future-wrap {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: row;
    margin: 0 calc(50% - 50vw);
    padding:0;}
.future__item {
    width: 100%;
    height: 65vw;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;}
.future__item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;}
.future__item a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;    left: 0;
    right: 0;    bottom: 0;
    background-color:rgba(0,0,0,0.4);}
.future__item::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;}
.future__item:hover:after {
    opacity:1;
    transform: scale(1.1);}
.future__item:hover a::after{
    background-color:rgba(0,0,0,0);}
.future__item:nth-child(1):after {background: no-repeat center/cover url(img/top_future_1_cover.jpg);}
.future__item:nth-child(2):after {background: no-repeat center/cover url(img/top_future_2.jpg?ver=2);}
.future__item:nth-child(3):after {background: no-repeat center/cover url(img/top_future_3.jpg);background-position-x: -50vw;}
.future__item:nth-child(4):after {background: no-repeat center/cover url(img/top_future_4.jpg);}
.future__item:nth-child(5):after {background: no-repeat center/cover url(img/top_future_5_cover.jpg?ver=3);}
  
.future__item span.arrow img {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    margin: auto;
    width: 29px;
    height: 8px;}  
.futureItems__text {
    position: relative;
    z-index: 1;
    opacity: 1;}
.futureItems__text .en {
    position:absolute;
    top:8vw;    left:50%;
    transform:translate(-50%,-50%);
    color: #fff;
    text-align: center;
    font-size: 3vw;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
    margin: 0;}
.futureItems__text .en span{
    display: block;
    margin-top: -2vw;
    font-size:6vw;}
.futureItems__text .jp {
    writing-mode: vertical-rl;
    align-items: center;
    position:absolute;
    top:35vw;   left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    text-decoration:none;
    height:40vw;
    font-size:1.5vw;
    margin:0;}
.inner-en{text-orientation: upright;}
.arrow{
    position: absolute;
    bottom: 2vw;
    left: 50%;
    transform: translateX(-50%);
    width:10vw; height:10vw;
    border:1px solid #fff;
    border-radius: 10vw;
    opacity:0;
    z-index:5;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;}
.arrow-mark{
	position: absolute;
    top: 50%;
    left: 50%;
    color:#fff;
    display: inline-block;
    outline: none;
    z-index:5;}
.arrow-mark::before{
    content: '';
	position: absolute;
    top: -0.9vw;
    left: -3.1vw;
    width: 6vw;
    height: 1px;
	background:#fff;
    z-index:5;}
.arrow-mark::after{
    content: '';
	position: absolute;
    top: -1.5vw;
    right: -3vw;
    width: 2vw;
    height:1px;
	background:#fff;
    transform: rotate(35deg);
    z-index:5;}
.future__item:hover .arrow {opacity: 1;}

@media screen and (max-width:700px){
.future-wrap {
    flex-direction: column;}
.future {
    padding-top: 18vw;}
.future .en-title {
    font-size: 20vw;
    right: -43vw;
    top: -7vw;}
.future__item{
    height:30vw;}
.future__item a{
    height:30vw;}
.futureItems__text .en {
    left: 10%;
    top: 15vw;
    font-size: 3.5vw;}
.futureItems__text .en span {
    font-size: 10vw;
    font-weight: 700;}
.futureItems__text .jp {
    writing-mode: horizontal-tb;
    top: 15vw;
    left: 20vw;
    transform: translateX(0);
    font-size: 3vw;}
.future__item:nth-child(3):after {
    background-position-x: 0;}
.arrow {
    left: 88%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    border: 0;}
}


/*お知らせ*/
.news{
    position:relative;}
.news .en-title{
    top: -25vw;
    left: 22%;
    font-size: 20vw;}
.news-wrap {
    display: flex;
    margin: 25vw auto 0;
    padding: 0;
    border-top: 1px solid #aaa;
    width: 75vw;}
.news-sidebar{
    padding:5vw 1vw;}
.news-sidebar-title{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#000;
    text-decoration:none;
    position:relative;
    font-size:2.5vw;}
.news-sidebar-arrow::before{
    content: '';
	position: absolute;
    top: 1.8vw;
    left: 7vw;
    width: 4vw;
    height: 1px;
	background:#000;
    z-index:5;}
.news-sidebar-arrow::after{
    content: '';
	position: absolute;
    top: 1.5vw;
    left: 10.1vw;
    width: 1vw;
    height:1px;
	background:#000;
    transform: rotate(35deg);
    z-index:5;}
.news-sidebar ul{
    list-style: none;
    margin: 5vw 0;
    padding: 2vw 0;
    line-height: 3vw;
    font-size: 1.2vw;
    border-top: 1px #aaa solid;}
.news-sidebar li a{
    text-decoration:none;
    color:#000;}
.news-list{
    margin-left:5vw;}
.news-list ul{
    list-style:none;
    margin:0;   padding:0;}
.news-list li a{
    display:flex;
    text-decoration:none;
    padding:1vw 0;
    color:#000;
    gap:1.5vw;
    align-items:center;
    justify-content: space-between;
    width: 53vw;
    border-bottom: 1px #aaa solid;}
.news-list p{
    margin:0;   padding:0;}
.news-list .date{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size:1.2vw;
    text-align:center;}
.news-list .date span{
    display:block;
    font-size:1.8vw;}
.news-list .category{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size:1vw;}
.news-list .news-title{
    font-size:1.3vw;
    width:50%;}
.news-list .thumnail{
    width:10vw; height:10vw;}
.news-list .thumnail img{
    width:10vw; height:10vw;
    object-fit: cover;}
@media screen and (max-width:700px){
.news{
    margin-bottom:15vw;}
.news-wrap {
    margin: 35vw auto 0;
    width: 100%;
    flex-direction: column;}
.news .en-title {
    left: 50%;}
.news-sidebar-title {
    font-size: 7vw;
    padding-left: 10vw;}
.news-sidebar-arrow::before {
    width: 12vw;
    top: 6vw;
    left: 28vw;}
.news-sidebar-arrow::after {
    width: 3vw;
    left: 37vw;
    top: 5vw;}
.news-sidebar ul {
    border-top: 0;
    margin: 0;
    padding: 5vw 10vw;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 7vw;
    justify-content: space-around;}
.news-sidebar li a {
    font-size: 3.5vw;}
.news-list li a {
    width: 90%;
    height:12vw;
    margin: 0 auto;
    display: block;
    position: relative;}
.news-list .date {
    display: inline-block;
    position: absolute;
    font-size: 4vw;
    top: 1vw;
    left: 1vw;}
.news-list .date span {
    display: inline;
    font-size: 4vw;}
.news-list .category {
    position: absolute;
    top: 2vw;
    left: 25vw;
    font-size: 3vw;}
.news-list .news-title {
    font-size: 3vw;
    width: 75%;
    position: absolute;
    top: 8vw;
    left: 1vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
.news-list .thumnail {
    position: absolute;
    right: 0;
    top: 2vw;
    width: 12vw;
    height: 12vw;}
}


/*グループ*/
.group{
    position:relative;
    background-color:#fff;
    height:20vw;
    padding-top:20vw;
    overflow: hidden;}
.group .en-title{
    top: -6vw;
    right: -18%;
    font-size: 16vw;}
.group-image {
    position: absolute;
    top: 14vw;
    right: 0;
    width: 85%;
    height: 20vw;
    z-index: 0;}
.group-image img{
    width: 100%;
    height: 20vw;
    object-fit: cover;
    object-position:0 -18vw;}
.group-image::after {
    position: absolute;
    content: "";
    display: block;
    top: 0;    bottom: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 2;
    width: 100%;}
.group-title{
    position:absolute;
    width:40vw; height:10vw;
    align-items:center;
    text-align:center;
    top:50%;    left: 15%;
    margin: 0;
    transform:translate(-50%,-50%);
    background-color:#fff;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.group-title span{
    display: block;
    position: absolute;
    top: 50%;    left: 55%;
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    width: 20vw;    color:#3E3E3E;
    border-bottom: 1px solid #aaa;
    padding:0.5vw;}
.group-description{
    position:absolute;
    top: 24vw;    left: 60%;
    line-height: 3vw;
    color:#fff;
    transform:translate(-50%,-50%);}
.group-description span{font-size:1.5vw;}
.group-wrap{
    display:flex;
    width: 95%;
    justify-content: center;
    margin: 5vw auto 20vw;}
.group-wrap .branch{
    position:relative;
    width:19%;
    box-sizing:border-box;}
.group-wrap .branch .branch-image{
    width:95%;
    position:relative;}
.group-wrap .branch .branch-image::after{
    display:block;
    content:"";
    position:absolute;
    width: 100%;
    height: 22vw;
    border-radius: 2vw;
    top:0;  left:0;  right:0;   bottom:0;
    background-color:rgba(0,0,0,0.3);
    z-index:1;}
.group-wrap .branch .branch-image img{
    width:100%;
    height:22vw;
    object-fit: cover;
    border-radius: 2vw;}
.group-wrap .branch .branch-image .thumnail-link{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15vw;
    height: 10vw;
    z-index:5;}
.group-wrap .branch .branch-image .arrow-movie{
	position: absolute;
    width: 45%;
    top: 30%;
    left: 5vw;
    font-size: 1vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    outline: none;
    z-index:5;}
.group-wrap .branch .branch-image .arrow-movie::before{
    content: '';
    position: absolute;
    top: 1.3vw;    left: 0;
    width: 9vw;    height: 1px;
    background: #fff;
    z-index:5;}
.group-wrap .branch .branch-image .arrow-movie::after{
    content: '';
    position: absolute;
    top: 0.9vw;    right: -36%;
    width: 1.5vw;    height: 1px;
    background: #fff;
    transform: rotate(35deg);
    z-index:5;}
.group-wrap .branch .branch-image .link-circle{
    position:absolute;
    right: -5%;
    bottom: 20%;
    width: 4vw;
    height: 4vw;
    border:2px red solid;
    border-radius: 50%;
    z-index:4;
    transition: .5s;}
.group-wrap .branch .branch-image .thumnail-link:hover .link-circle{
    background-color:red;}
.group-wrap .branch .branch-image .overlay-text{
    position: absolute;
    margin: 0;
    font-size: 1.2vw;
    bottom: -5%;
    left: 10%;
    width: 15vw;
    transform: translateY(-50%);
    color: #fff;
    z-index: 3;}
.group-wrap .branch .branch-title {
    width: 85%;
    margin: 0.5vw auto;
    height: 5vw;
    color: #646464;
    text-align:center;
    font-size: 1.3vw;}
.group-wrap .more-info{
    position:absolute;
    margin:0;
    top: 28vw;    left: 5vw;
    text-decoration: none;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#646464;
    padding:1vw 4vw 0.5vw 1vw;
    border-bottom:1px solid #646464;}
.group-wrap .more-info-arrow::before{
    content: '';
	position: absolute;
    top: 2vw;    left: 7vw;
    width: 2.5vw;    height: 1px;
	background:#000;
    z-index:5;}
.group-wrap .more-info-arrow::after{
    content: '';
	position: absolute;
    top: 1.7vw;    left: 8.5vw;
    width: 1vw;    height:1px;
	background:#000;
    transform: rotate(35deg);
    z-index:5;}
.group-wrap .more-info.nolink{
    padding-right:1vw;}
.group-wrap .more-info.nolink .more-info-arrow::before{display:none;}
.group-wrap .more-info.nolink .more-info-arrow::after{display:none;}
@media screen and (max-width:700px){
.group .en-title {
    top: -2vw;
    right: 5%;
    font-size: 17vw;
    z-index: 1;}
.group{
    height:55vw;}
.group-image {
    width: 100%;
    height: 50vw;
    top:20vw;}
.group-image img{
    height:50vw;
    object-position:0;}
.group-title {
    width: 90vw;
    height: 20vw;
    top: 35vw;}
.group-title span {
    font-size: 5vw;
    width: 60%;
    left: 64%;
    font-weight: 700;}
.group-description {
    top: 55vw;
    left: 65%;
    width: 90%;
    font-size: 4vw;
    line-height: 4vw;}
.group-description span {
    display: none;}
.group-wrap{
    flex-direction:column;}
.group-wrap .branch {
    width: 100%;}
.group-wrap .branch .branch-image {
    width: 100%;}
.group-wrap .branch .branch-image img,.group-wrap .branch .branch-image::after{
    height:30vw;
    border-radius: 5vw;}
.group-wrap .branch .branch-title {
    height: 15vw;
    font-size: 4vw;}
.group-wrap .more-info {
    top: 37vw;
    left: auto;
    right: 5vw;
    font-size:3.6vw;
    padding-right: 10vw;
    padding-left: 3vw;}
.group-wrap .more-info-arrow::before {
    width: 6vw;
    left: 18vw;
    top: 3.5vw;}
.group-wrap .more-info-arrow::after {
    top: 2.8vw;
    left: 21.5vw;
    width: 2.5vw;}
.group-wrap .more-info.nolink {
    padding-right: 3vw;}
.group-wrap .branch .branch-image .thumnail-link {
    left: auto;
    right: -10vw;
    width: 30vw;}
.group-wrap .branch .branch-image .arrow-movie {
    font-size: 4vw;
    width: 20vw;
    top: -3vw;
    left: auto;}
.group-wrap .branch .branch-image .arrow-movie::before {
    top: 7vw;
    width: 28vw;}
.group-wrap .branch .branch-image .arrow-movie::after {
    top: 5.5vw;
    right: -42%;
    width: 5vw;}
.group-wrap .branch .branch-image .link-circle {
    width: 10vw;
    height: 10vw;
    border-width: 1px;
    bottom: -50%;}
.group-wrap .branch .branch-image .overlay-text {
    font-size: 3vw;
    left: 10%;
    width: 40vw;
    bottom: -5%;}
}

/*マップ*/
.top-map{
    position:relative;
    margin-top:3vw;}
.top-map .en-title{
    top: -12vw;
    left: 15%;
    font-size: 16vw;}
.top-map iframe{
    width:100%;
    margin: 9vw auto;}



.footer-before{
    width:100%; height:6.5vw;
    overflow: hidden;
    position:relative;}
.footer-before img{
    width:100%;
    position:absolute;
    top:0;
    left:0; right:0;}
#footer-bg-1{z-index:5;    top: 15px;}
#footer-bg-2{z-index:3;}
@media screen and (max-width:700px){
.footer-before {
    padding-top: 5vw;}
}


/*フッター*/
.footer {
    position:relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:300;
    margin:0;    padding: 5vw 8vw;
    background-color: #EFEFEF;
    color: #000;}
.footer-wrap{
    display: flex;
    justify-content: space-around;}
.footer-column {
    display: flex;
    flex-direction: column;}
.footer-column:not(:last-child) {
    width:30%;}
.footer-column p{
    margin:0;
    font-size:12px;
    width:100%;}
.footer-logo {
    width: 80%;    height: auto;
    margin-bottom:15px;}
.footer-menu-headline{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.footer-menu {
    display: flex;
    width:66%;
    gap:3%;}
.footer-menu-column {
    display: flex;
    flex-direction: column;
    width:24%;}
.footer-smp-acodion {
    display: flex;
    flex-direction: column;}
/*.footer-menu-column:not(:last-child) {
    margin-right: 5vw;}*/
.footer-menu-item {
    margin-bottom: 5px;}
.footer-menu-column .footer-menu-item{
    color: #000;
    text-decoration:none;
    line-height: 20px;
    width:100%;
    font-size:1vw;
    position:relative;}
.footer-menu-item .arrow-link{
	position: absolute;
    width: 1vw;
    top:50%;    left:60%;
    display: inline-block;
	padding: 0 20px;
    text-decoration: none;
    outline: none;
    z-index:2;}
.footer-menu-item .arrow-link::before{
    content: '';
	position: absolute;
    top:0;    right:0;
    width: 50%;
    height: 0.5px;
	background:black;
    z-index:2;}
.footer-menu-item .arrow-link::after{
    content: '';
	position: absolute;
    top:-0.3vw;    right:0;    
    width: 10px;
    height:0.5px;
	background:black;
    transform: rotate(35deg);
    z-index:2;}
.footer-link{
    margin-top:2.5vw;}
.footer-link ul{
    list-style:none;
    display:flex;
    justify-content: center;
    gap:3vw;}
.footer-link li a{
    color:#000;
    font-size:1.2vw;
    text-decoration: none;}
.footer-link-images {
    display: flex;
    flex-direction: row;
    gap: 3vw;
    margin-top: 2vw;}
.footer-link-images a {
    border:1px solid #000;
    width: 4vw;
    height: 4vw;
    margin-bottom: 1.5vw;
    font-size:2.1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none;
    border-radius: 4vw;}
.footer-link-images a:last-child {
    margin-bottom: 0;}
.footer-icon-rows{
    display:flex;
    gap:1vw;
    margin-top:1.5vw;}
.footer-icon-rows img{height:4vw;}
.footer-bottom{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:300;
    background-color: #a7a7a7;
    color: black;
    text-align: center;}
.footer-bottom-text {
    width:100%;
    margin:0 auto;
    padding: 20px;
    font-size: 12px;
    background-color: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;}
@media screen and (max-width:700px){
.footer {
    flex-direction: column;}
.footer-column.pc{
    display:none;}
.footer-logo {
    width: 100%;
    height: 18vw;
    padding-bottom: 4vw;
    margin: 0;
    border-bottom: 1px solid #000;
    text-align: center;}
.footer-logo img{
    width:auto; height:15vw;
    object-fit: cover;}
.footer-menu {
    flex-direction: column;
    width: 95%;}
.footer-menu-column{
    width: 100%;
    border-bottom: 1px solid #000;}
.footer-menu-column .footer-menu-item {
    width: 80%;
    font-size: 3.5vw;
    margin: 0 7.5% 5vw 7.5%;
    border-bottom: 0;}
.footer-menu-column label{
    display: block;
    width:100%;
    position:absolute;
    top: -5vw;    left: 7vw;
    z-index:5;}
.footer-smp-acodion {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: 500ms max-height ease;}
.footer-menu-column .footer-menu-item::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content:"\f054";
    display:inline-block;
    font-size:3.5vw;
    margin-right:2vw;}
.footer-menu-headline{
    position:relative;
    font-weight: 500;
    font-size: 7vw;
    padding: 0vw 10vw;}
.footer-menu-headline::after {
    content: '＋';
    display: block;
    position: absolute;
    top: 0;    right: 7vw;
    transform: translateY(-50%);
    font-size: 7vw;
    font-weight: lighter;}
.footer-menu-column .toggle {display: none;}
.footer-menu-column .toggle-1:checked + .footer-menu-headline + .footer-smp-acodion{max-height:100vw;}
.footer-menu-column .toggle-1:checked + .footer-menu-headline::after{content:"ー";}
.footer-menu-column .toggle-2:checked + .footer-menu-headline + .footer-smp-acodion{max-height:100vw;}
.footer-menu-column .toggle-2:checked + .footer-menu-headline::after{content:"ー";}
.footer-menu-column .toggle-3:checked + .footer-menu-headline + .footer-smp-acodion{max-height:100vw;}
.footer-menu-column .toggle-3:checked + .footer-menu-headline::after{content:"ー";}
.footer-menu-column .toggle-4:checked + .footer-menu-headline + .footer-smp-acodion{max-height:100vw;}
.footer-menu-column .toggle-4:checked + .footer-menu-headline::after{content:"ー";}
.footer-link{margin:10vw 0;}
.footer-link ul{
    flex-direction:column;
    margin: 0;
    padding: 0;
    gap:0;}
.footer-link li{
    width:60%;
    margin:0 auto;}
.footer-link li a{font-size:3vw;}
.footer-link li a::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content:"\f054";
    display:inline-block;
    font-size:3.5vw;
    margin-right:2vw;}
.footer-link-images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 7vw;
    margin-top: 0;}
.footer-link-images a {
    width: 18vw;
    height: 18vw;
    font-size: 9vw;
    border-radius: 18vw;}
.footer-column p {
    margin: 0 auto;}
.footer-column p:first-of-type{
    margin: 5vw 9vw;
    font-size: 7vw;}
.footer-column p span{
    font-size:4vw;}
.footer-icon-rows {
    width: 96%;
    margin: 0 auto;
    gap:2vw;
    padding-top: 5vw;
    padding-bottom: 5vw;}
.footer-icon-rows img {
    height: 13vw;}
.footer-bottom-text{height:27vw;}
}
@media screen and (min-width:701px){
.footer-column.smp{display:none;}
}


/*ページトップに戻るボタン*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 20vw;
    right: 2vw;
    z-index:20;}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 1.5vw;
    border-radius: 20vw;
    text-decoration: none;
    padding: 0.7vw 1vw;
    opacity: 0.5;
    cursor: pointer;}
.pagetop a:hover {
    opacity: 1;}
@media screen and (max-width:700px){
.pagetop{
    right:5vw;
    bottom:25vw;}
.pagetop a {
    font-size: 4vw;
    padding: 2vw 3vw;}
}

/* jQueryで追加、削除 */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime; /*アニメーションの名前*/
  -webkit-animation-duration: 1s;
          animation-duration: 1s; /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0); /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0); /*元の位置*/
  }
}
.fadeUpTrigger {opacity: 0; /*非表示*/}


/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container-1-1{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-container-1-1:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-1-1.active{
    opacity: 1;
    visibility: visible;}
.modal-container-1-1 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-1-1 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-container-1-1 .modal-content{
    text-align: left;}

.modal-container-1-2{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-container-1-2:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-1-2.active{
    opacity: 1;
    visibility: visible;}
.modal-container-1-2 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-1-2 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-container-1-2 .modal-content{
    text-align: left;}
@media screen and (max-width:700px){
.modal-container-1-2{
    width: 95vw;
    height: 60vw;}
}

.modal-container-2{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-container-2:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-2.active{
    opacity: 1;
    visibility: visible;}
.modal-container-2 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-2 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-container-2 .modal-content{
    text-align: left;}
@media screen and (max-width:700px){
.modal-container-2{
    width: 95vw;
    height: 60vw;}
}

.modal-container-4{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-container-4:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-4.active{
    opacity: 1;
    visibility: visible;}
.modal-container-4 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-4 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-container-4 .modal-content{
    text-align: left;}
@media screen and (max-width:700px){
.modal-container-4{
    width: 95vw;
    height: 60vw;}
}


.modal-container-3-3-1{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-container-3-3-1:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-3-3-1.active{
    opacity: 1;
    visibility: visible;}
.modal-container-3-3-1 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-3-3-1 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-container-3-3-1 .modal-content{
    text-align: left;}
@media screen and (max-width:700px){
.modal-container-3-3-1{
    width: 95vw;
    height: 60vw;}
}

.modal-container-3-1,.modal-container-3-2,.modal-container-3-3,.modal-container-3-4,.modal-container-3-5{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 95vw;
    height: 50vw;
    background-repeat: none;
    background-size: cover;
    z-index:100;}
.modal-container-3-1::after,.modal-container-3-2::after,.modal-container-3-3::after,.modal-container-3-4::after,.modal-container-3-5::after{
    display:block;
    position:absolute;
    top:0;  left:0; right:0;    bottom:0;
    content:"";
    background-color:rgba(0,0,0,10%);}
.modal-container-3-1{background-image:url(img/top_future_1.jpg?ver=2);}
.modal-container-3-2{background-image:url(img/top_future_2.jpg?ver=2);}
.modal-container-3-3{background-image:url(img/top_future_3.jpg);}
.modal-container-3-4{background-image:url(img/top_future_4.jpg);}
.modal-container-3-5{background-image:url(img/top_future_5.jpg?ver=3);}
.modal-container-3-1:before,.modal-container-3-2:before,.modal-container-3-3:before,.modal-container-3-4:before,.modal-container-3-5:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-3-1.active,.modal-container-3-2.active,.modal-container-3-3.active,.modal-container-3-4.active,.modal-container-3-5.active{
    opacity: 1;
    visibility: visible;}
.modal-container-3-1 .modal-body,.modal-container-3-2 .modal-body,.modal-container-3-3 .modal-body,.modal-container-3-4 .modal-body,.modal-container-3-5 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-3-1 .modal-body::after,.modal-container-3-2 .modal-body::after,.modal-container-3-3 .modal-body::after,.modal-container-3-4 .modal-body::after,.modal-container-3-5 .modal-body::after{
    content: "";
    display: inline-block;
    position: absolute;
    width: 96vw;
    height: 22vw;
    background-color: rgba(0, 0, 0, 0.5);
    top: -25vw;
    left: -7vw;}
.modal-container-3-1 .modal-close,.modal-container-3-2 .modal-close,.modal-container-3-3 .modal-close,.modal-container-3-4 .modal-close,.modal-container-3-5 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -23vw;
    right: -4vw;
    width: 5vw;
    height: 3vw;
    color: #fff;
    cursor: pointer;
    z-index: 100;}
.modal-container-3-1 .modal-close span::before, .modal-container-3-1 .modal-close span::after,.modal-container-3-2 .modal-close span::before, .modal-container-3-2 .modal-close span::after,.modal-container-3-3 .modal-close span::before, .modal-container-3-3 .modal-close span::after,.modal-container-3-4 .modal-close span::before, .modal-container-3-4 .modal-close span::after,.modal-container-3-5 .modal-close span::before, .modal-container-3-5 .modal-close span::after{
    content: "";
    display: block;
    width: 100%;/*バツ線の長さ*/
    height: 1px;/*バツ線の太さ*/
    background: #fff;
    transform: rotate(30deg);
    transform-origin:0% 50%;
    position: absolute;
    top: calc(14% - 5px);
    left: 0%;}
.modal-container-3-1 .modal-close span::after,.modal-container-3-2 .modal-close span::after,.modal-container-3-3 .modal-close span::after,.modal-container-3-4 .modal-close span::after,.modal-container-3-5 .modal-close span::after{
    transform: rotate(-30deg);
    transform-origin:100% 50%;
    left: auto;
    right: 14%;}
.modal-container-3-1 .modal-body .overlay-text-1,.modal-container-3-2 .modal-body .overlay-text-1,.modal-container-3-3 .modal-body .overlay-text-1,.modal-container-3-4 .modal-body .overlay-text-1,.modal-container-3-5 .modal-body .overlay-text-1{
    position:absolute;
    top: -15vw;    left: 2vw;
    transform:translate(-50%,-50%);
    color: #fff;
    text-align: center;
    font-size: 3vw;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
    margin: 0;
    z-index: 100;}
.modal-container-3-1 .modal-body .overlay-text-1 span,.modal-container-3-2 .modal-body .overlay-text-1 span,.modal-container-3-3 .modal-body .overlay-text-1 span,.modal-container-3-4 .modal-body .overlay-text-1 span,.modal-container-3-5 .modal-body .overlay-text-1 span{
    display: block;
    margin-top: -2vw;
    font-size:6vw;}
.modal-container-3-1 .modal-body .overlay-text-2,.modal-container-3-2 .modal-body .overlay-text-2,.modal-container-3-3 .modal-body .overlay-text-2,.modal-container-3-4 .modal-body .overlay-text-2,.modal-container-3-5 .modal-body .overlay-text-2{
    position: absolute;
    top: -20vw;
    left: 12vw;
    color: #fff;
    text-align:left;
    font-size: 2vw;
    margin: 0;
    z-index: 100;}
.modal-container-3-1 .modal-body .overlay-text-3,.modal-container-3-2 .modal-body .overlay-text-3,.modal-container-3-3 .modal-body .overlay-text-3,.modal-container-3-4 .modal-body .overlay-text-3,.modal-container-3-5 .modal-body .overlay-text-3{
    position: absolute;
    top: -10vw;
    left: 50vw;
    width: 75vw;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.2vw;
    line-height: 2.3vw;
    z-index: 100;
    margin: 0;
    text-align:left;
    padding: 1vw;}
.modal-container-3-3 .modal-body .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,0%);
    z-index:5;}
.modal-container-3-3 .modal-body a {
    border:1px solid white;
    width: 8vw;
    height: 8vw;
    margin-bottom: 1.5vw;
    font-size:3.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    border-radius: 8vw;}
.modal-container-3-3 .modal-body  .overlay-text{
    position: absolute;
    margin: 0;
    font-size: 1.5vw;
    width: 30vw;
    top: 5vw;
    left: 75%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 3;}
@media screen and (max-width:700px){
.modal-container-3-1,.modal-container-3-2,.modal-container-3-3,.modal-container-3-4,.modal-container-3-5{
    width: 95vw;
    height: 120vw;}
.modal-container-3-1 .modal-close, .modal-container-3-2 .modal-close, .modal-container-3-3 .modal-close, .modal-container-3-4 .modal-close, .modal-container-3-5 .modal-close {
    top: -52vw;}
.modal-container-3-1::after,.modal-container-3-2::after,.modal-container-3-3::after,.modal-container-3-4::after,.modal-container-3-5::after{
    background-color:rgba(0,0,0,0.5);}
.modal-container-3-1 .modal-body::after, .modal-container-3-2 .modal-body::after, .modal-container-3-3 .modal-body::after, .modal-container-3-4 .modal-body::after, .modal-container-3-5 .modal-body::after{
    display:none;}
.modal-container-3-1 .modal-body .overlay-text-1, .modal-container-3-2 .modal-body .overlay-text-1, .modal-container-3-3 .modal-body .overlay-text-1, .modal-container-3-4 .modal-body .overlay-text-1, .modal-container-3-5 .modal-body .overlay-text-1 {
    top: -45vw;
    font-size: 5vw;}
.modal-container-3-1 .modal-body .overlay-text-1 span, .modal-container-3-2 .modal-body .overlay-text-1 span, .modal-container-3-3 .modal-body .overlay-text-1 span, .modal-container-3-4 .modal-body .overlay-text-1 span, .modal-container-3-5 .modal-body .overlay-text-1 span {
    font-size: 8vw;}
.modal-container-3-1 .modal-body .overlay-text-2, .modal-container-3-2 .modal-body .overlay-text-2, .modal-container-3-3 .modal-body .overlay-text-2, .modal-container-3-4 .modal-body .overlay-text-2, .modal-container-3-5 .modal-body .overlay-text-2 {
    top: -28vw;
    left: -4vw;
    transform: translateX(0);
    font-size: 4vw;}
.modal-container-3-1 .modal-body .overlay-text-3, .modal-container-3-2 .modal-body .overlay-text-3, .modal-container-3-3 .modal-body .overlay-text-3, .modal-container-3-4 .modal-body .overlay-text-3, .modal-container-3-5 .modal-body .overlay-text-3 {
    top: 10vw;
    left: -4vw;
    transform: translateX(0);
    width: 100%;
    font-size: 3vw;
    line-height: 4.5vw;}
.modal-container-3-3 .modal-body a {
    width: 10vw;
    height: 10vw;
    font-size: 5vw;}
.modal-container-3-3 .modal-body .play {
    top: -12vw;}
.modal-container-3-3 .modal-body .overlay-text {
    width: 25vw;
    font-size: 2.5vw;
    top: -2vw;
    left: 80%;}
.modal-container-3-3 .modal-body .overlay-text-2 {
    top: -33vw;}
.modal-container-3-5{background-position: center;}
}

.modal-container-5-1,.modal-container-5-2,.modal-container-5-3,.modal-container-5-4,.modal-container-5-5{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-container-5-1:before,.modal-container-5-2:before,.modal-container-5-3:before,.modal-container-5-4:before,.modal-container-5-5:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container-5-1.active,.modal-container-5-2.active,.modal-container-5-3.active,.modal-container-5-4.active,.modal-container-5-5.active{
    opacity: 1;
    visibility: visible;}
.modal-container-5-1 .modal-body,.modal-container-5-2 .modal-body,.modal-container-5-3 .modal-body,.modal-container-5-4 .modal-body,.modal-container-5-5 .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container-5-1 .modal-close,.modal-container-5-2 .modal-close,.modal-container-5-3 .modal-close,.modal-container-5-4 .modal-close,.modal-container-5-5 .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-container-5-1 .modal-content,.modal-container-5-2 .modal-content,.modal-container-5-3 .modal-content,.modal-container-5-4 .modal-content,.modal-container-5-5 .modal-content{
    text-align: left;}
@media screen and (max-width:700px){
.modal-container-5-1,.modal-container-5-2,.modal-container-5-3,.modal-container-5-4,.modal-container-5-5{
    width: 95vw;
    height: 60vw;}
}