@charset "utf-8";

/*基本設定*/
body {
    color: #333333;
    font-family: 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 1.7;
    font-weight: 300;
    width: 100vw;
    overflow-x: hidden;}
img {
    width: 100%;
    height: auto;}
a {
    text-decoration: none;
    color: inherit;}
a:hover {
    opacity: 0.7;
    cursor: pointer;}
.br-sp {display: none;}
h3 {
    font-size: calc(60/1920*100vw);
    color: #29B770;
    text-align: center;
    font-weight: 300;
    line-height: 1;}
.btn {
    color: #fff;
    background-color: #29B770;
    width: calc(446/1920*100vw);
    font-size: calc(37/1920*100vw);
    padding: calc(33/1920*100vw) calc(47/1920*100vw) calc(32/1920*100vw) calc(112/1920*100vw);
    display: flex;
    justify-content: space-between;
    margin: auto;
    line-height: 1;}
.btn.premium{
    width:40%;}
.btn.library-btn {
    width: 40vw;
    margin: 5vw auto;
    padding-left: 7vw;}
@media screen and (max-width: 700px) {
.container {
    width: calc(1008/1122*100vw);
    margin: auto;}
.br-sp {display: block;}
h3 {
    font-size: calc(60/1122*100vw);}
.btn {
    font-size: calc(37/1122*100vw);
    width: calc(446/1122*100vw);
    padding: calc(33/1122*100vw) calc(47/1122*100vw) calc(32/1122*100vw) calc(112/1122*100vw);
    margin: auto;}
.btn.premium{
    width:75%;}
.btn.library-btn {
    width:75%;
    margin-bottom:20vw;
    padding-left: 15vw;}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
メインビジュアル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.mv {
    position: relative;
    overflow: hidden;}
.video-area {   
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
    height: calc(1080/1920*100vw);
    filter: brightness(50%);}
.video-area video{
    position:absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;}
.video-area iframe{
    position:absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;}
h2 {
    color: #fff;
    position: absolute;
    top: calc(45/1920*100vw);
    left: calc(41/1920*100vw);
    flex-wrap: nowrap;
    font-weight: 300;
    font-size: calc(40/1920*100vw);
    line-height: 1;}
h1 {
    color: #fff;
    position: absolute;
    top: calc(209/1920*100vw);
    font-weight: 300;
    font-size: calc(77/1920*100vw);
    left: 50vw;
    width: 100vw;
    text-align: center;
    transform: translateX(-50%);
    line-height: 1;}
.mv-logo {
    position: absolute;
    top: calc(370/1920*100vw);
    left: 50vw;
    transform: translate(-50%);
    width: calc(427/1920*100vw);}
.mv-txt {
    color: #fff;
    position: absolute;
    bottom: calc(135/1920*100vw);
    font-size: calc(40/1920*100vw);
    padding: calc(48.5/1920*100vw) 0;
    border-top: calc(4/1920*100vw) solid #fff;
    width: 100%;
    text-align: center;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;}
.event-calendar {
    display: inline-block;
    margin-left: 3vw;
    border: 1px solid;
    padding: 1vw;
    border-radius: 1vw;
    font-size: 1.4vw;}
.drawer-btn,.drawer-menu {
    display: none;}
.menu {
    width: 100%;
    background-color: #fff;
    background-color: #29B770;
    display: flex;
    justify-content: space-between;}
.menu-logo-outer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}
.menu-logo {
    width: calc(345/1920*100vw);
    height: calc(106/1920*100vw);}
.menu-txt {
    color: #fff;
    font-size: calc(35/1920*100vw);
    line-height: calc(50/35);
    width: calc(1418.5/4/1920*100vw);
    border-left: calc(3/1920*100vw) solid #fff;
    text-align: center;
    height: calc(135/1920*100vw);
    display: flex;
    align-items: center;
    justify-content: center;}
.menu.top-fixed{
    position:fixed;
    top:0;  left:0;
    z-index:99;}

@media screen and (max-width: 700px) {
.video-area {   
    height: calc(1307/1120*100vw);
    background-size: calc(1920/1122*100vw);}
h2 {
    top: calc(45/1122*100vw);
    left: calc(41/1122*100vw);
    font-size: calc(40/1122*100vw);}
h1 {
    top: calc(334/1122*100vw);
    font-size: calc(77/1122*100vw);}
.mv-logo {
    width: calc(427/1122*100vw);
    top: calc(515/1122*100vw);}
.mv-txt {
    border-top: calc(4/1122*100vw) solid #fff;
    font-size: calc(40/1122*100vw);
    padding: calc(36/1122*100vw) 0;
    bottom: 0;
    line-height: calc(68/40);
    flex-direction: column;}
.event-calendar {
    display: block;
    margin-left: 0;
    margin-top: 1vw;
    font-size: 3vw;
    border-radius: 5vw;
    padding: 1vw 4vw;}
.mv-txt>span.pc {
    display: none;}
.drawer-btn,.drawer-menu {
    display: block;}
.pc{display: none;}

/* spドロワーメニューのボタン  */
.drawer-btn1 {
    position: fixed;
    width: calc(71/1122*100vw);
    height: calc(3/1122*100vw);
    z-index: 2;
    background: #fff;
    top: calc(56/1122*100vw);
    right: calc(37.5/1122*100vw);}
.drawer-btn2 {
    position: fixed;
    width: calc(71/1122*100vw);
    height: calc(3/1122*100vw);
    z-index: 2;
    background: #fff;
    top: calc(73/1122*100vw);
    right: calc(37.5/1122*100vw);}
.drawer-btn3 {
    position: fixed;
    width: calc(71/1122*100vw);
    height: calc(3/1122*100vw);
    z-index: 2;
    background: #fff;
    top: calc(90/1122*100vw);
    right: calc(37.5/1122*100vw);}

/* spドロワーメニューのボタン open時 */
.drawer-btn.open>.drawer-btn1 {
    transform: rotate(-30deg);
    top: calc(73/1122*100vw);}
.drawer-btn.open>.drawer-btn2 {
    display: none;}
.drawer-btn.open>.drawer-btn3 {
    transform: rotate(30deg);
    top: calc(73/1122*100vw);}

.mv.lower .drawer-btn1,.mv.lower .drawer-btn2,.mv.lower .drawer-btn3{
    background-color:#29B770;}
.mv.lower .drawer-btn.open>.drawer-btn1,.mv.lower .drawer-btn.open>.drawer-btn2,.mv.lower .drawer-btn.open>.drawer-btn3{
    background-color:#fff;}
    
/* spドロワーメニュー*/
.drawer-menu {
    transform:translateX(100%);
    background-color: rgba(59, 186, 116, 0.9);
    width: 100vw;
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 1;
    transition: all 0.5s;}
.drawer-logo {
    width: calc(345/1122*100vw);
    margin: calc(120/1122*100vw) 0 calc(67.5/1122*100vw) calc(56/1122*100vw);}
.drawer-txt {
    color: #fff;
    font-size: calc(33/1122*100vw);
    padding: calc(42.5/1122*100vw) 0 calc(44.5/1122*100vw) calc(56.5/1122*100vw);
    width: 100vw;
    line-height: 1;
    border-top: calc(2/1122*100vw) solid #fff;}
.drawer-txt.bdb {
    border-bottom: calc(2/1122*100vw) solid #fff;}

/* spドロワーメニュー open時 */
.drawer-menu.open {transform:translateX(0);}
.menu {display: none;}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
活動カレンダー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.calendar {
    margin: calc(104/1920*100vw) 0 calc(268/1920*100vw);}
.fc-toolbar-title{
    display:none;}
@media screen and (max-width:700px){
.calendar{
    margin-top:calc(300/1920*100vw);}
.fc-toolbar-chunk{
    display: none;}
#calendar-content{
    max-height: 100vw;}
}
@media screen and (min-width:701px){
#calendar-content{
    max-height: 50vw;
    width: 80%;
    margin: 0 auto;}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
みんなのASOBIとは
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.overview {
    margin: calc(127/1920*100vw) auto;}
.overview-txt {
    margin: calc(59/1920*100vw) auto calc(70/1920*100vw);
    width: calc(1500 / 1920* 100vw);
    font-size: calc(30/1920*100vw);
    text-align: center;}
.overview-txt span {
    font-weight: bold;
    font-size: 1.8vw;}
.overview-box {
    width: calc(1550/1920*100vw);
    margin: 0 auto calc(70/1920*100vw);
    border-top: calc(3/1920*100vw) solid #dddd;}
.overview-box-txt {
    display: flex;
    justify-content: space-between;
    padding: calc(30/1920*100vw) calc(60/1920*100vw);
    border: calc(3/1920*100vw) solid #dddd;
    font-size: calc(28/1920*100vw);
    border-top: none;}
.overview-box-price {
    font-weight: bold;
    color: #29B770;}
.overview-img {
    margin-top: calc(140/1920*100vw);}
.overview-img-inner {
    display: flex;
    max-width: 100vw;
    justify-content: space-between;}
.overview-img-inner img {
    width: calc(480/1920*100vw);
    height: calc(480/1920*100vw);
    object-fit: cover;}
.overview-3 {
    width: 100vw;
    height: calc(480/1920*100vw);
    position: relative;
    background: url(../images/modal_banner.png) center 65% /cover;}
.online-3-btn {
    width: calc(222/1920*100vw);
    height: calc(222/1920*100vw);
    position: absolute;
    top: calc(128/1920*100vw);
    left: calc(849/1920*100vw);}
.movie-description{
    position: absolute;
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5vw;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 5vw;}

@media screen and (max-width: 700px) {
.overview {
    margin-bottom: calc(107/1122*100vw);}
.overview-txt {
    font-size: calc(35/1122*100vw);
    margin: calc(59/1122*100vw) auto calc(59/1122*100vw);
    width: calc(1008/1122*100vw);
    text-align: left;}
.overview-txt span {
    font-size: 4vw;
    line-height: 1.2;}
.overview-box {
    width: calc(800/1122*100vw);
    margin: 0 auto calc(63/1122*100vw);
    border-top: calc(3/1122*100vw) solid #dddd;}
.overview-box-txt {
    flex-direction: column;
    text-align: center;
    padding: calc(30/1122*100vw) 0;
    border: calc(3/1122*100vw) solid #dddd;
    border-top: none;
    font-size: calc(40/1122*100vw);}
.overview-img {
    margin-top: calc(136/1122*100vw);}
.overview-3 {
        height: calc(280/1122*100vw);}
.online-3-btn {
        width: calc(130/1122*100vw);
        height: calc(130/1122*100vw);
        top: calc(74/1122*100vw);
        left: calc(496/1122*100vw);}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
会員プラン（料金）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.sports-plans {
    margin: 5vw auto;
    width: 80%;
    border: calc(3/1920*100vw) solid #ddd;}
.sports-plans .desktop-view {
    display: flex;}
.sports-plans .plan-list {
    width: 30%;
    border-right: 1px solid #ddd;}
.sports-plans .plan-item {
    padding: 15px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #eee;}
.sports-plans .plan-item.active{
    padding-left:1vw;}
.sports-plans .plan-item.active::before{
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    display: inline-block;
    margin-right: 1vw;}
.sports-plans .plan-detail-container {
    width: 100%;
    padding: 2vw;}
.sports-plans .plan-detail {
    display: none;} 
.sports-plans .plan-detail.active {
    display: block;}
.sports-plans .plan-detail .plan-detail_title{
    margin: 0;
    margin-bottom: 1.5vw;
    font-size: 2.5vw;
    font-weight: bold;
    text-align: center;}
.sports-plans .plan-detail .service-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    padding: 0;}
.sports-plans .plan-detail .service-item {
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;}
.sports-plans .plan-detail .service-item p {
    color: #000;
    margin: 0;
    padding: 1vw;
    font-size: 1.2vw;}
.sports-plans .plan-detail .service-item p.service-item_title  {
    margin: 0;
    padding-top: .5vw;
    font-size: 1.6vw;
    text-align: center;
    background-color: #888;
    color: #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;}
.sports-plans .plan-detail .service-item p.center{
    text-align: center;}

/*プランごとの色分け*/
.sports-plans .plan-item:nth-child(1){background-color: rgb(0, 0, 0);}
.sports-plans .plan-detail:nth-child(1) .service-item p.service-item_title{background-color: rgba(0, 0, 0, .5);}
.sports-plans .plan-item:nth-child(2){background-color: rgb(255, 0, 0);}
.sports-plans .plan-detail:nth-child(2) .service-item p.service-item_title{background-color: rgba(255, 0, 0, .5);}
.sports-plans .plan-item:nth-child(3){background-color: rgb(0, 0, 255);}
.sports-plans .plan-detail:nth-child(3) .service-item p.service-item_title{background-color: rgba(0, 0, 255, .5);}
.sports-plans .plan-item:nth-child(4){background-color: rgb(128, 0, 128);}
.sports-plans .plan-detail:nth-child(4) .service-item p.service-item_title{background-color: rgba(128, 0, 128, .5);}
.sports-plans .plan-item:nth-child(5){background-color: rgb(0, 128, 0);}
.sports-plans .plan-detail:nth-child(5) .service-item p.service-item_title{background-color: rgba(0, 128, 0, .5);}
.sports-plans .plan-item:nth-child(6){background-color: rgb(252, 136, 2);}
.sports-plans .plan-detail:nth-child(6) .service-item p.service-item_title{background-color: rgba(252, 136, 2, .5);}
.sports-plans .plan-item:nth-child(7){background-color: rgb(238, 9, 170);}
.sports-plans .plan-detail:nth-child(7) .service-item p.service-item_title{background-color: rgba(238, 9, 170, .5);}
.sports-plans .plan-detail:nth-child(1) .plan-detail_title{color:rgb(0, 0, 0);}
.sports-plans .plan-detail:nth-child(2) .plan-detail_title{color:rgb(255, 0, 0);}
.sports-plans .plan-detail:nth-child(3) .plan-detail_title{color:rgb(0, 0, 255);}
.sports-plans .plan-detail:nth-child(4) .plan-detail_title{color:rgb(128, 0, 128);}
.sports-plans .plan-detail:nth-child(5) .plan-detail_title{color:rgb(0, 128, 0);}
.sports-plans .plan-detail:nth-child(6) .plan-detail_title{color:rgb(252, 136, 2);}
.sports-plans .plan-detail:nth-child(7) .plan-detail_title{color:rgb(238, 9, 170);}

@media (max-width: 767px) {
.sports-plans {
    width: 90%;
    border: none;}
.sports-plans .plan-detail .service-grid{
    gap:3vw;}
.sports-plans .plan-list {
    display: none;}
.sports-plans .plan-detail-container{
    display: flex;
    overflow-x: scroll;
    gap: 5vw;}
.sports-plans .plan-detail,.sports-plans .plan-detail.active{
    display: block;
    min-width: 85%;
    border: calc(3/1122*100vw) solid #dddd;
    border-radius: 0;
    padding: 3vw;
    margin-bottom: 5vw;}
.sports-plans .plan-detail .plan-detail_title {
    font-size: 5vw;}
.sports-plans .plan-detail .service-item p {
    font-size: 2.5vw;}
.sports-plans .plan-detail .service-item p.service-item_title{
    font-size: 3vw;}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
メディア出演
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.media-ppearance{
    width: 80%;
    margin: 5vw auto;}
.media-logo{
    display:flex;
    gap:1%;}
.media-logo a{
    width: 32%;}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
活動報告
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.report {
    margin: calc(166/1920*100vw) auto;}
.report-lists {
    width: calc(1550/1920*100vw);
    margin: auto;
    margin-top: calc(70/1920*100vw);
    border-top: calc(2/1920*100vw) solid #cccc;
    margin-bottom: calc(80/1920*100vw);}
.report-list {
    display: block;
    display: flex;
    justify-content: start;
    gap: calc(40/1920*100vw);
    padding: calc(33/1920*100vw) 0;
    border-bottom: calc(2/1920*100vw) solid #cccc;}
.report-txt {
    width:100%;
    display: flex;
    justify-content: space-between;}
.report-txt p {
    display: block;
    width: 70%;
    font-size: calc(35/1920*100vw);
    text-overflow: ellipsis;
    overflow: hidden;}
.report-txt img {
    width: 20vw;
    height: 20vw;
    object-fit: cover;}
.blog-category{
    display: block;
    width: 15vw;
    padding: 0.5vw 1vw;
    text-align: center;
    font-size: calc(25/1920*100vw);
    font-weight:bold;
    background-color:#29B770;
    color:#fff;
    margin-top:1vw;}
.report-day {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top:1vw;
    gap: calc(10/1920*100vw);
    font-size: calc(25/1920*100vw);
    color: #CCCCCC;}
.report-day .img-clock {
    width: calc(30/1920*100vw);
    height: calc(30/1920*100vw);}

@media screen and (max-width: 700px) {
.report {
    margin-bottom: calc(178/1122*100vw);}
.report-lists {
    width: 100vw;
    margin-top: calc(40/1122*100vw);
    border-top: calc(2/1122*100vw) solid #cccc;
    margin-bottom: calc(60/1122*100vw);}
.report-list {
    flex-direction: column;
    gap: calc(10/1122*100vw);
    padding: calc(40/1122*100vw) calc(50/1122*100vw);
    border-bottom: calc(2/1122*100vw) solid #cccc;}
.report-day {
    gap: calc(10/1122*100vw);
    font-size: calc(25/1122*100vw);
    color: #CCCCCC;}
.img-clock {
    width: calc(27/1122*100vw);
    height: calc(27/1122*100vw);}
.report-txt {
    font-size: calc(33/1122*100vw);
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;}
.report-txt p {
    font-size: calc(33 / 1122* 100vw);}
.blog-category {
    width: 25vw;
    font-size: calc(35 / 1920* 100vw);}
.report-day {
    font-size: calc(30 / 1122* 100vw);}
.report-day .img-clock {
    width: calc(40/1920*100vw);
    height: calc(40/1920*100vw);}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
映像ライブラリ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.movie{
    width: 90%;
    margin: 5vw auto;}
.scroll-note {
    margin: calc(80 / 1920 * 100vw) 5vw 1vw;
    text-align: right;
    font-size: 1vw;}
.video-items {
    gap: calc(58/1920*100vw);
    display: flex;
    overflow-x: scroll;
    flex-wrap: nowrap;}
.video-item {
    width: 33vw;}
.video-img {
    width: 100%;
    position: relative;}
.video-img::after {
    position: absolute;
    top: 50%;    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/video-btn.png) center center/cover;
    width: calc(174/1920*100vw);
    height: calc(174/1920*100vw);
    content: "";}
.video-img.top::after{
    background:none;}
.video-ttl {
    font-size: calc(30/1920*100vw);}
.video-time {
    margin-top: calc(30/1920*100vw);
    line-height: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-left: calc(20/1920*100vw);}
.movie h4 {
    font-size: 2vw;
    font-weight: normal;
    padding: 1vw 2vw;
    color: #000;
    background: #d2f8e5;
    border-bottom: solid 3px #29b770;}
@media screen and (max-width: 700px) {
.movie{
    width: 95%;
    margin: 10vw auto;}
.scroll-note {
    margin: calc(49 / 1122 * 100vw) 5vw 1vw;
    text-align: right;
    font-size: 2.5vw;}
.video-items {
    gap: calc(58/1122*100vw);
    margin: 0;
    padding: 0 calc(44/1122*100vw) 3vw;}
.video-item {
    width: 55vw;}
.video-img::after {
    width: calc(174/1122*100vw);
    height: calc(174/1122*100vw);}
.video-ttl {
    font-size: calc(30/1122*100vw);}
.video-time {
    margin: calc(30/1122*100vw) 0 calc(20/1122*100vw);
    margin-left: calc(20/1122*100vw);}
.movie h4 {
    font-size: 4vw;
    padding: 2vw 4vw;
    text-align: center;
    border-width: 2px;}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
オンラインコンテンツ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.online {
    margin-bottom: calc(382/1920*100vw);}
.online-boxes {
    display: flex;
    gap: calc(50/1920*100vw);
    margin: calc(71/1920*100vw) auto;
    width:90%;
    flex-wrap: wrap;}
.online-box {
    position: relative;
    border: 1px solid #707070;
    width: calc(529/1920*100vw);
    display: flex;
    flex-direction: column;}
.online-img {
    height: calc(295/1920*100vw);
    object-fit: cover;
    object-position: 50% center;
    border-bottom: 1px solid #707070;}
.online-box::after {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(163/1920*100vw);
    height: calc(57/1920*100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(30/1920*100vw);}
.personal::after {
    content: "性格診断";
    background-color: #9CC716;}
.game::after {
    content: "ゲーム";
    background-color: #6D6DFD;}
.online-box-ttl {
    height: calc(138/1920*100vw);
    font-size: calc(40/1920*100vw);
    margin: calc(20/1920*100vw) calc(43/1920*100vw);}
.online-box-day {
    margin: 0 calc(43/1920*100vw) calc(41/1920*100vw) calc(43/1920*100vw);
    padding-left: calc(45/1920*100vw);
    line-height: 1;
    color: #CCCCCC;
    font-size: calc(30/1920*100vw);
    position: relative;}
.online-box-day::after {
    content: "";
    width: calc(30/1920*100vw);
    height: calc(30/1920*100vw);
    top: 0;
    left: 0;
    position: absolute;
    background: url(../images/clock.jpg)center center/contain;}

@media screen and (max-width: 700px) {
.online {
    margin-bottom: calc(342/1122*100vw);}
.online-boxes {
    margin: calc(104/1122*100vw) auto calc(91/1122*100vw);
    gap: calc(44/1122*100vw);}
.online-box {
    width: 47%;}
.online-img {
    height: calc(240 / 1122* 100vw);}
.online-box::after {
    font-size: calc(30 / 1122* 100vw);
    width: calc(170 / 1122* 100vw);
    height: calc(60 / 1122* 100vw);}
.online-box-ttl {
    height: calc(124/1122*100vw);
    font-size: calc(35/1122*100vw);
    margin: calc(15/1122*100vw) calc(41/1122*100vw);}
.online-box-day {
    font-size: calc(26/1122*100vw);
    padding-left: calc(38/1122*100vw);
    margin: 0 calc(41/1122*100vw) calc(37/1122*100vw);}
.online-box-day::after {
    width: calc(26.69/1122*100vw);
    height: calc(26.69/1122*100vw);}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
地域クラブ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.community-club {
    margin: 5vw auto;}
.section-lead {
    text-align: center;
    margin-bottom: 3vw;
    font-weight: bold;
    line-height: 1.8;}
.club-features {
    display: flex;
    justify-content: space-between;
    width: 85vw;
    gap: 1.5vw;
    margin: 5vw auto;
    flex-wrap: wrap;}
.feature-box {
    flex: 1;
    width: 30%;
    background: #fff;
    padding: 3vw 2vw;
    border-radius: 1vw;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
.feature-icon {
    display: inline-block;
    background: #e6f4ff;
    color: #007bff;
    padding: 1vw;
    border-radius: 50%;
    width: 5vw;
    height: 5vw;
    line-height: 3vw;
    font-weight: bold;
    margin-bottom: 1vw;}
.feature-box h4 {
    margin-bottom: 1vw;
    color: #333;
    font-size: 1.4vw;}
.feature-box p {
    font-size: 1.1vw;
    line-height: 1.6;
    text-align: left;}
@media screen and (max-width:700px){
.club-features {
    width:100%;
    justify-content: center;
    gap:5vw;}
.feature-box {
    flex: unset;
    width: 45%;}
.feature-icon {
    padding: 3vw;
    width: 15vw;
    height: 15vw;
    line-height: 3vw;
    margin-bottom: 0;
    font-size: 7vw;
    padding-top: 4vw;}
.feature-box h4 {
    margin: 5vw 0 0;
    font-size: 3vw;}
.feature-box p {
    font-size: 3vw;
    padding: 1vw;}

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
支援受付（support）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.support {
    margin: 5vw auto;
    padding: 5vw 0;}
.support-action-area {
    max-width: 600px;
    margin: 40px auto;}
.support-card {
    border: 3px solid #ff8c00;
    border-radius: 15px;
    padding: 40px;
    background: #fff;}
.support-card .price {
    font-size: 24px;
    font-weight: bold;
    color: #ff8c00;
    margin: 15px 0;}
.support-btn {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;}
.support .note {
    font-size: 1vw;
    color: #888;
    width: 25%;
    margin: 0 auto 2vw;}
.transparency-link a {
    color: #666;
    text-decoration: underline;
    font-size: 14px;}
@media screen and (max-width: 700px) {
.support {
    margin: 10vw auto;
    padding: 10vw 0;}
.support .note {
    font-size: 2.4vw;
    width: 70%;
    margin-bottom: 5vw;}
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
footer
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

footer {
    width: 100vw;
    padding-top: calc(300/1920*100vw);
    margin-top: calc(-300/1920*100vw);
    overflow-x: hidden;}
.footer-inner {
    background-color: #29B770;
    display: flex;
    position: relative;
    justify-content: space-between;
    color: #fff;
    gap: calc(154/1920*100vw);
    padding: 0 calc(88/1920*100vw) 0 calc(153/1920*100vw);}
.footer-inner::after {
    content: "";
    width: calc(2237/1920*100vw);
    height: calc(406.9/1920*100vw);
    position: absolute;
    top: calc(-303/1920*100vw);
    left: 50vw;
    background-color: #29B770;
    transform: rotate(-8deg) translateX(-50%);
    z-index: -1;}
.footer-logo {
    width: calc(345/1920*100vw);
    height: calc(106/1920*100vw);
    margin-top: calc(40/1920*100vw);}
.footer-lists {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(63.5/1920*100vw);}
.navi {
    margin-right: calc(95/1920*100vw);}
.media {
    margin-right: calc(129/1920*100vw);}
.footer-ttl {
    font-weight: 600;
    font-size: calc(40/1920*100vw);
    line-height: 1;
    margin-bottom: calc(24/1920*100vw);}
.footer-link {
    font-size: 1.4vw;}
.footer-copy {
    background-color: #29B770;
    border-top: calc(3/1920*100vw) solid #fff;
    color: #fff;
    text-align: center;
    padding: calc(50.5/1920*100vw) 0 calc(43/1920*100vw);}

@media screen and (max-width: 700px) {
footer {
    margin-bottom: calc(245/1122*100vw);
    padding-top: calc(200/1122*100vw);
    margin-top: calc(-200/1122*100vw);}
.footer-inner {
    flex-direction: column;
    align-items: end;
    gap: calc(88/1122*100vw);
    padding: 0 calc(82.5/1122*100vw) 0 calc(115/1122*100vw);}
.footer-logo {
    width: calc(345/1122*100vw);
    height: calc(106/1122*100vw);
    margin-top: 0;}
.footer-lists {
    width: 100%;
    flex-wrap: wrap;
    justify-content: start;
    margin-bottom: calc(75.5/1122*100vw);}
.footer-ttl {
    font-size: calc(40/1122*100vw);
    margin-bottom: calc(24/1122*100vw);}
.footer-link {
    font-size: calc(3vw);
    text-wrap: nowrap;}
.navi {
    margin-right: calc(216/1122*100vw);
    margin-bottom: calc(75.5/1122*100vw);}
.footer-copy {
    padding: calc(58.5/1122*100vw) 0 calc(55/1122*100vw);
    font-size: calc(30/1122*100vw);}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
sns
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.sns {
    width: calc(145/1920*100vw);
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;}
.sns-box {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;}
.instagram {
    padding: calc(22/1920*100vw);
    background: #fff;}
.line {
    background: #03C755;}

@media screen and (max-width: 700px) {
.sns {
    width: 100vw;
    height: calc(245/1122*100vw);
    flex-direction: row-reverse;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: translateY(0);}
.sns-box {
    width: calc(100vw/3);
    height: 100%;}
.peatix img,.line img {
    height: calc(197/1122*100vw);
    width: calc(197/1122*100vw);}
.instagram img {
    height: calc(142/1122*100vw);
    width: calc(142/1122*100vw);}
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
    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:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-container.active{
    opacity: 1;
    visibility: visible;}
.modal-container .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-container .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 .modal-content{
    text-align: left;}


.info-text {
    margin-bottom: calc(127/1920*100vw);}
.info-text-content {
    margin: calc(59/1920*100vw) auto calc(70/1920*100vw);
    width: calc(1500 / 1920* 100vw);
    font-size: calc(30/1920*100vw);}
.info-text-content a{
    color:blue;}
.info-text-content .headline{
    display: block;
    margin: 5vw 0 4vw 0;
    padding: 1vw 0 1vw 2vw;
    font-size: 3vw;
    font-weight:bold;
    border-left: 1vw solid #29B770;}
.info-text-content .smp{
    display:none;}
@media screen and (max-width:700px){
.info-text {
    margin-bottom: calc(107/1122*100vw);}
.info-text-content {
    font-size: calc(35/1122*100vw);
    margin: calc(59/1122*100vw) auto calc(59/1122*100vw);
    width: calc(1008/1122*100vw);}
.info-text-content .headline{
    margin: 10vw 0 8vw 0;
    font-size: 4.5vw;
    border-left: 3vw solid #29B770;}
.info-text-content .smp{
    display:inline;}

}