@charset "utf-8";
/*入口のcss*/
.topFV{
    height: 100vh;
    justify-content: space-between;
    flex-wrap: wrap;
}
.topFV.pconly{
    display: flex;
}
.topFV.sponly{
    display: none;
}
.topFV li{
    width: 33.2%;
}
@media screen and (max-width: 768px) {
    .topFV.pconly{
        display: none;
    }
    .topFV.sponly{
        display: flex;
    }
    .topFV li{
        width: 100%;
    }
}
/*きらっと光る*/
.topFV li{
    position: relative;
    overflow: hidden;
}
/*キラッと光る*/
.topFV li::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
    z-index: 1;
}
/*hoverした際の移動のアニメーション*/
.topFV li:hover::before {
	animation: shine 0.7s;
    cursor: pointer;
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
.topFV li a{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.topFV li a:hover{
    opacity: 1;
}
.topFV li a img{
    object-fit: cover;
}
.topFV li:nth-child(1) a img,
.topFV li:nth-child(3) a img{
    animation: fv01 8s infinite;
}
@keyframes fv01 {
    0% {
		height: 100vh;
	}
    50% {
		height: 105vh;
	}
	100% {
		height: 100vh;
	}
}
@media screen and (max-width: 768px) {
    @keyframes fv01 {
        0% {
            height: 34vh;
        }
        50% {
            height: 36vh;
        }
        100% {
            height: 34vh;
        }
    }
}
.topFV li:nth-child(2) a img{
    animation: fv02 8s infinite;
}
@keyframes fv02 {
    0% {
		height: 105vh;
	}
    50% {
		height: 100vh;
	}
	100% {
		height: 105vh;
	}
}
@media screen and (max-width: 768px) {
    @keyframes fv02 {
        0% {
            height: 36vh;
        }
        50% {
            height: 34vh;
        }
        100% {
            height: 36vh;
        }
    }
}
.topFV li a img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
    opacity: 1;
}
.topFV li a:hover img:nth-child(2){
    opacity: 0;
}
.topFV li a::before,
.topFV li:nth-child(2) a::after{
    display: block;
    content: "";
    width: 190px;
    height: 44px;
    background: center / contain no-repeat url("../img/logo-swag-white.svg");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
    opacity: 1;
    z-index: 1;
}
.topFV li:nth-child(2) a::before{
    width: 150px;
    height: 150px;
    background: center / contain no-repeat url("../img/logo-gorira-mono.png");
}
.topFV li:nth-child(2) a::after{
    width: 150px;
    height: 150px;
    background: center / contain no-repeat url("../img/logo-gorira.jpg");
    opacity: 0;
    z-index: 10;
}
.topFV li:nth-child(2) a:hover::before{
    opacity: 0;
}
.topFV li:nth-child(2) a:hover::after{
    opacity: 1;
}
.topFV li:nth-child(3) a::before{
    width: 160px;
    height: 100px;
    background: center / contain no-repeat url("../img/logo-add-white.svg");
}
/*swag・gorira・add共通コンテンツcss*/
section{
    width: 100%;
    padding: 100px 0;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.inner{
	width: 90%;
    max-width: 1160px;
	margin: 0 auto;
	position: relative;
}
h1,h2,h3,h4,h5{
    font-weight: normal;
	line-height: 1.4;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 820px) {
    section{
        padding: 60px 0;
    }
}
@media screen and (max-width: 768px) {
    section{
        padding: 40px 0;
    }
    .inner{
        max-width: 500px;
    }
}
/*==================================================================================================*/
/*btn各種*/
.btnSns{
    display: flex;
    align-items: center;
    width: 200px;
    height: 40px;
    font-family: var(--main-font);
    font-size: 14px;
    color: #FFF;
    border-radius: 20px;
    position: relative;
    transition: .5s;
    opacity: 1;
}
.btnSns:hover{
    opacity: .5;
}
/*line*/
.btnSns.btnLine{
    height: 46px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 0 10px;
    background: #35bb29;
    border-radius: 5px;
    margin: 15px 0 0;
}
.btnSns.btnLine::before{
    display: block;
    content: "";
    width: 37px;
    height: 37px;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-line.svg");
    margin: 0 5px 0 0;
}
@media screen and (max-width: 820px) {
    .btnSns.btnLine{
        margin: 15px auto 0;
    }
}
@media screen and (max-width: 768px) {
    .btnSns.btnLine{
        width: 100%;
        justify-content: center;
        margin: 10px auto 0;
    }
}
/*instagram*/
.btnSns.btnInstagram{
    width: 210px;
    height: 35px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;;
    padding: 0 15px;
    background: #3a3a3a;
}
.btnSns.btnInstagram::before{
    display: block;
    content: "";
    width: 14px;
    height: 14px;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-instagram.svg");
    margin: 0 10px 0 0;
}
.btnSns.btnInstagram::after{
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-arrow.svg");
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
@media screen and (max-width: 1000px) {
    .btnSns.btnInstagram::after{
        right: 20px;
    }
}
@media screen and (max-width: 768px) {
    .btnSns.btnInstagram{
        width: 100%;
        height: 50px;
        font-size: 16px;
        border-radius: 50px;
        padding: 0 30px;
        margin: 10px auto 0;
    }
}
@media screen and (max-width: 520px) {
    .btnSns.btnInstagram{
        margin: 0;
    }
}
/*==================================================================================================*/
/*ハンバーガーメニュースマホから作成*/
.openbtn1{
    display: block;
    cursor: pointer;
    width: 65px;
    height: 65px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
}
.openbtn1 span{
    display: block;
    transition: all .4s;
    position: relative;
    top: 24px;
    width: 40px;
    height: 2px;
    background: #000;
    margin: 0 auto;
}
.openbtn1 span:nth-of-type(2) { top: 29px;}
.openbtn1::after{
    width: 100%;
    display: block;
    content: "MENU";
    font-family: "Oswald";
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.4em;
    text-align: center;
    position: relative;
    bottom: -33px;
    right: -1px;
}
.openbtn1.active span:nth-of-type(1) {
    top: 19px;
    transform: translateY(6px) rotate(-20deg);
}
.openbtn1.active span:nth-of-type(2){
    bottom: 5px;
    transform: translateY(-6px) rotate(20deg);
}
.openbtn1.active{
    border-left: none;
    background: none;
}
.openbtn1.active span{
    background: #FFF;
}
.openbtn1.active::after{
    content: "CLOSE";
    color: #FFF;
    right: -2px;
}
@media screen and (min-width: 769px) {

}
nav{
    width: 100%;
    height: 100vh;
    padding: 120px 0 0;
    background: rgba(0,0,0,0.90);
    position: fixed;
    top: -100vh;
    left: 0;
    z-index: 1;
    transition: 1s;
}
.pcNav nav{
    top: 0;
}
nav .inner{
    max-width: 320px;
}
nav ul li{
    margin: 0 0 30px;
}
nav ul li a{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #FFF;
}
nav ul li a::before{
    display: block;
    content: "›";
    font-size: 16px;
    color: #FFF;
    margin: 0 15px 0 0;
}
/**/
nav .navLine{
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: 60px 0 0;
}
/**/
nav .navInstagram{
    height: 250px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: #FFF;
    position: absolute;
    top: 170px;
    right: 25px;
}
nav .navInstagram::before{
    display: inline-block;
    content: "";
    width: 35px;
    height: 35px;
    border: solid 1px #FFF;
    border-radius: 50%;
    margin: 0 0 15px 0;
}
nav .navInstagram::after{
    display: inline-block;
    content: "";
    width: 14.6px;
    height: 14.6px;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-instagram.svg");
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
    nav{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
    nav .inner{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: calc( 100% - 200px );
        max-width: 760px;
    }
    nav ul{
        width: fit-content;
        min-width: 240px;
    }
    nav ul li a{
        font-size: 24px;
    }
    nav .navInstagram {
        top: 50%;
        transform: translateY(-50%);
        right: 30px;
    }
}
/*==================================================================================================*/
/*reserve*/
.reserve a{
    display: block;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    transition: 1s;
    opacity: 0;
    border-radius: 10px;
    overflow: hidden;
    transform: rotateY(270deg);
}
.reserve a.run{
    opacity: 1;
    transform: rotateY(0deg);
}
.reserve a:hover{
    opacity: .8;
}
@media screen and (max-width: 820px) {
    .reserve{
        padding: 17px 0 60px;
    }
}
@media screen and (max-width: 768px) {
    .reserve{
        padding: 0 0 50px;
    }
}
@media screen and (max-width: 520px) {
    .reserve a{
        width: 100%;
    }
}
/*==================================================================================================*/
/*floor*/
.facility .inner{
    max-width: 940px;
}
.facility h2{
    justify-content: flex-start;
    align-items: center;
    font-family: var(--main-font);
    font-size: 70px;
    font-weight: normal;
    line-height: 1;
    color: #FFF;
    margin: 0 auto 10px;
}
.facility h2 span{
    width: fit-content;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 20px;
    color: #FFF;
    margin: 0 0 0 10px;
}
.facility h2 + p{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
    color: #FFF;
    margin: 0 0 30px;
}
.floor{
    width: 937px;
    position: relative;
}
.floor img:nth-child(1){
    position: relative;
}
.floor a{
    display: block;
    position: absolute;
    top: 6px;
    transition: .5s;
    opacity: 1;
}
.floor a:hover{
    cursor: pointer;
    opacity: .5;
}
.floor01 a:nth-child(2) {
    width: 501px;
    right: 7px;
}
.floor01 a:nth-child(3){
    width: 296px;
    left: 7px;
}
.floor02 a:nth-child(2){
    width: 271px;
    right: 7px;
}
.floor02 a:nth-child(3){
    width: 143px;
    top: 227px;
    right: 290px;
}
@media screen and (max-width: 1200px) {
    .facility .inner{
        max-width: 768px;
    }
    .floor01 a:nth-child(2) {
        width: 408px;
    }
    .floor01 a:nth-child(3) {
        width: 238px;
    }
    .floor02 a:nth-child(2){
        width: 220px;
    }
    .floor02 a:nth-child(3){
        width: 118px;
        top: 185px;
        right: 236px;
    }
    .facility h2 {
        font-size: 45px;
        letter-spacing: 0.05em;
    }
    .facility h2 span{
        font-size: 13px;
    }
    .facility h2 + p {
        font-size: 14px;
    }
}
@media screen and (max-width: 1000px) {
    .facility{
        padding: 40px 0 80px;
    }
    .facility .inner{
        max-width: 500px;
    }
    .floor01 a:nth-child(2) {
        width: 262px;
    }
    .floor01 a:nth-child(3) {
        width: 150px;
    }
    .floor02 a:nth-child(2){
        width: 142px;
        right: 5px;
    }
    .floor02 a:nth-child(3){
        width: 74px;
        top: 122px;
        right: 155px;
    }
}
@media screen and (max-width: 570px) {
    .facility .inner{
        max-width: 340px;
    }
    
    .floor{
        width: 337px;
    }
    .floor a{
        top: 2.5px;
    }
    .floor01 a:nth-child(2) {
        width: 180px;
        right: 2px;
    }
    .floor01 a:nth-child(3){
        width: 106px;
        left: 2px;
    }
    .floor02 a:nth-child(2){
        width: 98px;
        right: 2px;
    }
    .floor02 a:nth-child(3){
        width: 50px;
        top: 83px;
        right: 105px;
    }
}
/*------------------------------------------------------------------*/
/*floorスライダー*/
.floorSlider01 li, .floorSlider02 li{
    padding: 3px;
}
.floorSlider02{
    margin: 0 0 20px;
}
.floorSlider02 .img{
    padding-top: 30%;
}
.floorSlider02 .img:hover{
    cursor: pointer;
}
.popInner h2.title{
    margin: 0 auto 10px;
}
.popInner h2.title span{
    margin: 0;
}
/*==================================================================================================*/
/*faq*/
.faq{
    padding: 100px 0 60px;
    background: #f6f6f6;
}
.faq .inner{
    max-width: 860px;
}
/*ベース*/
.toggle {
	display: none;
}
.Label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(43,27,20,0.20);
    background: #FFF;
}
.Label:hover{
    cursor: pointer;
}
.Label::before{
    display: inline-block;
	content:"";
	width: 36px;
	height: 36px;
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}
.Label::after{
    display: block;
	content:"";
    width: 8px;
    height: 4px;
    position: relative;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-arrow02.svg");
    transform: rotate(0deg);
    transition: .5s;
}
.Label,
.accordion .box {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
    font-size: 15px;
    padding: 15px 30px 15px 80px;
    margin: 0 0 15px;
}
.Label{
    font-weight: bold;
}
.accordion .box{
	height: 0;
	padding: 0 30px 0 80px;
	overflow: hidden;
}
.toggle:checked + .Label + .box {
	height: auto;
    padding: 15px 30px 15px 80px;
	transition: all .3s;
}
.toggle:checked + .Label::after {
	transform: rotate(180deg) !important;
}
/*1つ目の記述*/
.accordion .box01 {
	height: auto;
    padding: 15px 30px 15px 80px;
	transition: all .3s;
}
/*answer*/
.accordion .box p{
	line-height: 1.6;
}
.accordion .box p span{
    font-weight: bold;
}
.accordion .box::before{
    display: inline-block;
	content:"";
	width: 36px;
	height: 36px;
    position: absolute;
    top: 10px;
    left: 30px;
}
/*1つ目の記述*/
.Label.label01::after {
	transform: rotate(180deg) !important;
}
.toggle:checked + .Label + .box01 {
	height: 0;
	margin: 0 0 10px;
	padding: 0 30px 0 80px;
	overflow: hidden;
}
.Label.label01::after {
	transform: rotate(180deg) !important;
}
.toggle:checked + .label01::after {
	transform: rotate(0deg) !important;
}
@media screen and (max-width: 820px) {
    .faq{
        padding: 60px 0 40px;
    }
}
@media screen and (max-width: 768px) {
    .faq{
        padding: 40px 0 0;
    }
    .faq .inner{
        max-width: 600px;
    }
    .Label::before{
        width: 25px;
        height: 25px;
        left: 15px;
    }
    .accordion .box::before{
        width: 25px;
        height: 25px;
        top: 9px;
        left: 15px;
    }
    .Label{
        font-size: 14px;
        padding: 10px 30px 10px 50px;
    }
    .accordion .box {
        justify-content: flex-start;
        font-size: 13px;
        padding: 0 30px 0 50px;
    }
    .toggle:checked + .Label + .box {
        padding: 10px 30px 10px 50px;
    }
    /*1つ目の記述*/
    .accordion .box01 {
        padding: 10px 30px 10px 50px;
    }
    .toggle:checked + .Label + .box01 {
        padding: 0 30px 0 50px;
    }
}
/*==================================================================================================*/
/*footer*/
footer{
    display: flex;
    flex-wrap: wrap;
}
/*access*/
.access{
    padding: 160px 0 100px;
}
.access .inner{
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
}
.access .leftBox{
    width: 55%;
    max-width: 600px;
    height: 100px;
    background: #eee;
    position: relative;
}
/*
.access .leftBox::before{
    display: block;
	content:"";
	width: 186px;
	height: 42px;
    position: absolute;
    top: -18px;
    left: 0;
    z-index: 1;
}
/*スライダー*/
.accessSlider01 li,
.accessSlider02 li{
    padding: 3px;
}
.accessSlider02 li:hover{
    cursor: pointer;
}
.accessSlider01 li .img{
    padding-top: 75%;
}
/**/
.access .rightBox{
    width: 42%;
    max-width: 460px;
}
.access .rightBox .ftLine{
    display: block;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 40px;
    opacity: 1;
    transition: .5s;
}
.access .rightBox .ftLine:hover{
    opacity: .8;
}
.access .rightBox dl{
    display: flex;
    flex-wrap: wrap;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    margin: 0 0 20px;
}
.access .rightBox dl:nth-child(6){
    align-items: center;
}
.access .rightBox dl dt{
    width: 94px;
    font-size: 14px;
    font-weight: bold;
}
.access .rightBox dl dd{
    width: calc( 100% - 94px );
    font-size: 16px;
    line-height: 1.4;
}
.access .rightBox dl dd p{
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 3px 0 0;
}
.access .rightBox dl dd p span{
    font-weight: bold;
}
.access .rightBox dl dd a.tel{
    display: block;
    text-decoration: underline;
    opacity: 1;
    transition: .5s;
}
.access .rightBox dl dd a.tel:hover{
    opacity: .5;
}
.access .rightBox iframe{
    margin: 10px 0 0;
}
@media screen and (max-width: 1000px) {
    .access .inner{
        flex-wrap: wrap;
    }
    .access .leftBox{
        width: 100%;
        height: auto;
        margin: 0 auto 20px;
    }
    .access .rightBox{
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    .access .rightBox .ftLine{
        margin: 0 0 30px;
    }
    .access .rightBox dl{
        margin: 0 0 15px;
    }
    .access .rightBox dl dt{
        width: 100%;
        font-size: 14px;
    }
    .access .rightBox dl dd{
        width: 100%;
        font-size: 15px;
    }
    .access .rightBox dl dd a.tel{
        font-size: 20px;
        margin: 0 0 10px;
    }
}
@media screen and (max-width: 820px) {
    .access{
        padding: 100px 0 60px;
    }
}
@media screen and (max-width: 520px) {
    .access{
        padding: 60px 0 60px;
    }
    .access .leftBox::before{
        width: 92px;
    }
    .access .rightBox dl dd a.tel{
        margin: 0 0 5px;
    }
    .access .rightBox iframe{
        margin: 30px 0 0;
    }
}
/*link*/
.ftLink{
    display: block;
    width: 50%;
    height: 270px;
    border-top: solid 1px #ebebeb;
    position: relative;
}
.ftLink::before{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: .8s;
    opacity: 0;
}
.ftLink:hover::before{
    opacity: 1;
}
.ftLink01::before{
    background: center / cover no-repeat url("https://swag-fitness.jp/parts/img/footer-swag.jpg");
}
.ftLink02::before{
    background: center / cover no-repeat url("https://swag-fitness.jp/parts/img/footer-gorira.jpg");
}
.ftLink03::before{
    background: center / cover no-repeat url("https://swag-fitness.jp/parts/img/footer-add.jpg");
}
.ftLink img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ftLink img:nth-child(1){
    opacity: 1;
}
.ftLink:hover img:nth-child(1){
    opacity: 0;
}
.ftLink img:nth-child(2){
    opacity: 0;
}
.ftLink:hover img:nth-child(2){
    opacity: 1;
}
.ftLink01 img{
    width: 113px;
}
.ftLink02 img{
    width: 235px;
}
.ftLink03 img{
    width: 113px;
}
.ftLink::after{
    display: flex;
    content: "";
    width: 160px;
    height: 4px;
    background: var(--main-color);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: .5s;
}
.ftLink:hover::after{
    width: 100%;
}
small{
    width: 100%;
    font-size: 13px;
    text-align: center;
    color: #FFF;
    padding: 20px 0;
    background: #3a3a3a;
}
@media screen and (max-width: 768px) {
    .ftLink{
        height: 200px;
    }
    .ftLink02 img{
        width: 107px;
    }
    .ftLink02 img{
        width: 145px;
    }
    .ftLink03 img{
        width: 56px;
    }
}
@media screen and (max-width: 500px) {
    .ftLink{
        width: 100%;
        height: 150px;
    }
    small{
        font-family: Verdana, "Droid Sans" !important;
        font-size: 10px;
        padding: 5px 0;
    }
}
/*==================================================================================================*/
/*ポップアップ共通css*/
.modaal-container{
    width: 860px !important;
    min-width: 700px;
    border-radius: 15px !important;
}
.modaal-content-container{
    max-height: 70vh;
    overflow: scroll;
    padding: 0 !important;
}
.popInner{
    max-width: 860px;
    padding: 70px 90px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.popInner h2{
    margin: 0 auto 30px;
}
.popInner h2 span {
    margin: 0;
}
.modaal-close{
    border: solid 1px #FFF !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: -60px !important;
    right: 0 !important;
}
.modaal-close:after, .modaal-close:before{
    height: 30px !important;
    top: 10px !important;
    left: 22px !important;
}
@media screen and (max-width: 1000px) {
    .modaal-container{
        width: 500px !important;
        min-width: 500px;
    }
    .popInner{
        max-width: 500px;
        padding: 30px 50px;
    }
}
@media screen and (max-width: 768px) {
    /*
    .modaal-container{
        min-height: 70vh !important;
    }*/
    .modaal-close{
        width: 40px !important;
        height: 40px !important;
        top: -50px !important;
    }
    .modaal-close:after, .modaal-close:before{
        width: 2px !important;
        height: 25px !important;
        top: 8px !important;
        left: 18.5px !important;
    }
}
@media screen and (max-width: 520px) {
    .modaal-container{
        width: 335px !important;
        min-width: 320px;
    }
    .popInner{
        max-width: 320px;
        padding: 30px 20px;
        margin: 0 auto;
    }
    .popInner h2{
        margin: 0 auto 15px;
    }
}
/*閉じるボタン*/
.modaal-wrapper .modaal-close.btnClose {
    width: 230px !important;
    height: 50px !important;
    position: relative !important;
    border: solid 1px #c6c6c6 !important;
    border-radius: 30px !important;
    top: 0 !important;
    right: 0 !important;
    margin: 30px auto 0;
}
.modaal-close.btnClose:after, .modaal-close.btnClose:before{
    display: none;
}
.modaal-close.btnClose span{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #000 !important;
    position: relative !important;
}
/*------------------------------------------------------------------*/
/*LINEポップアップ*/
.linePopInner{
    display: flex;
    justify-content: space-between;
    justify-content: flex-end;
}
.linePopInner .textBox{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 444px;
    padding: 30px 40px 30px 70px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.linePopInner .imgBox{
    width: auto;
    max-height: 520px;
    object-fit: contain;
}
.linePopInner .textBox h4{
    display: flex;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0 0 15px;
}
.linePopInner .textBox h4::before{
    display: inline-block;
    content: "";
    width: 5px;
    height: 10px;
    background: center / contain no-repeat url("https://swaggym.swag-fitness.jp/parts/img/icon-arrow03.svg");
    margin: 0 15px 0 0;
}
.linePopInner .textBox h5{
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}
.linePopInner .textBox h5 span{
    display: flex;
    align-items: center;
    font-family: "Mplus 1p";
    font-size: 24px;
    color: #00b900;
}
.linePopInner .textBox h5 span::before{
    display: inline-block;
    content: "";
    width: 23px;
    height: 23px;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-line.svg");
    margin: 0 5px 0 0;
}
.linePopInner .textBox h5 + p{
    width: 100%;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding: 2px;
    border-radius: 15px;
    background: #2b2b2b;
    margin: 0 0 20px;
}
.linePopInner .textBox p{
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 15px;
}
.qrBox{
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qrBox img{
    width: 102px;
}
.qrBox div{
    width: 179px;
}
.qrBox div .btnSns{
    width: 100%;
}
.qrBox div .btnSns.btnQr{
    height: 30px;
    color: #000;
    padding: 0 10px;
    background: #e5e5e5;
    border-radius: 5px;
}
.qrBox div .btnSns.btnQr::before{
    display: block;
    content: "";
    width: 11px;
    height: 11px;
    background: center / contain no-repeat url("https://swag-fitness.jp/parts/img/icon-search.svg");
    margin: 0 5px 0 0;
}
.qrBox div .btnSns.btnLine{
    height: 45px;
}
.qrBox div .btnSns.btnLine::before{
    width: 27px;
    height: 27px;
}
@media screen and (max-width: 1000px) {
    .linePopInner{
        position: relative;
        min-height: 450px;
    }
    .linePopInner .textBox{
        width: 100%;
        padding: 30px;
    }
    .linePopInner .imgBox{
        width: 220px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .linePopInner .textBox h4{
        justify-content: center;
        margin: 0 ;
    }
    .linePopInner .textBox h5{
        justify-content: center;
    }
    .qrBox {
        max-width: 300px;
        margin: 0 0 30px;
    }
}
@media screen and (max-width: 520px) {
    .linePopInner .imgBox{
        width: 171px;
    }
    .linePopInner .textBox{
        align-content: baseline;
    }
    .qrBox img{
        display: none;
    }
    .linePopInner .textBox h4{
        font-size: 20px;
        margin: 0 0 7px;
    }
    .linePopInner .textBox h5{
        font-size: 18px;
    }
    .linePopInner .textBox h5 span{
        font-size: 20px;
    }
    .qrBox div .btnSns.btnLine {
        height: 45px;
    }
}
/*------------------------------------------------------------------*/
/*faility日焼けマシーンポップアップ*/
/*左側*/
.morePopInner .leftBox{
    width: 265px;
}
.morePopInner .rightBox{
    width: 375px;
    padding: 0;
}
.morePopInner .leftBox img{
    display: block;
    height: 300px;
    padding: 50px;
    background: #f3f3f3;
    border-radius: 10px;
    margin: 0 0 20px;
    object-fit: contain;
}
.morePopInner .leftBox p{
    font-size: 13px;
}
.morePopInner .leftBox p span{
    font-size: 14px;
    font-weight: bold;
}
@media screen and (max-width: 1000px) {
    .morePopInner .leftBox{
        width: 100%;
        max-width: 335px;
        margin: 0 auto 20px;
    }
    .morePopInner .rightBox{
        width: 100%;
    }
    .morePopInner .leftBox img{
        margin: 0 auto 20px;
    }
}
/*------------------------------------------------------------------*/
/*swagのprice*/
.price .box{
    width: 48%;
    max-width: 375px;
}
.price .box dt{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #FFF;
    border-radius: 5px 5px 0 0;
    background: #3a3a3a;
}
.price .box dl dd{
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.price .box dl dd + dd{
    border-top: solid 1px #ebebeb;
}
.price .box .moneyName{
    width: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    border-radius: 5px;
    background: #eae7e8;
    margin: 0 10px 0 0;
}
.price .box .moneyName + div{
    width: 230px;
}
.price .box .money{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.8;
    padding: 0 0 10px;
    margin: 0 auto;
}
.price .box .money + .money{
    border-top: solid 1px #ebebeb;
    padding: 10px 0 0;
}
.price .box p.money span.min{
    font-size: 14px;
    font-weight: normal;
    margin: 0 20px 0 0;
}
.price .box p.money span.en{
    font-size: 15px;
}
.price .box p.money span.en + span{
    font-size: 11px;
    font-weight: normal;
    margin: 0 0 0 10px;
}
.price .box p.money span.sale{
    display: block;
    width: 185px;
    font-size: 13px;
    text-align: center;
    line-height: 1;
    color: #FFF;
    background: var(--main-color);
    border-radius: 10px;
    padding: 2px 0 3px;
}
@media screen and (max-width: 820px) {
    .price .box{
        width: 100%;
        max-width: 320px;
    }
    .price .box dl dd{
        padding: 20px;
    }
}
@media screen and (max-width: 819px) {
    .price .box{
        width: 333px;
        max-width: 333px;
    }
}
@media screen and (max-width: 520px) {
    .price .box{
        width: 100%;
        max-width: 100%
    }
}
/*------------------------------------------------------------------*/
/*日陰マシーンの料金css-swagのprice応用*/
/*右側*/
.morePopInner .price .box{
    width: 100%;
}
.morePopInner dl{
    border: solid 1px #ebebeb;
    border-radius: 10px;
    margin: 0 0 20px;
}
.morePopInner .price .box .money + .money{
    padding: 10px 0;
}
.morePopInner .price .box .money + .money + .money{
    padding: 10px 0 0;
}
.morePopInner .price .box dl dd + dd .moneyName + div .money{
    padding: 0;
}
@media screen and (max-width: 1000px) {
    .morePopInner .price .box{
        margin: 0 auto 20px;
    }
}
@media screen and (max-width: 520px) {
    .morePopInner .price .box dl dd{
        flex-wrap: wrap;
    }
    .morePopInner .price .box dl dd:nth-child(2){
        padding: 20px 20px 0 20px;
    }
    .morePopInner .price .box .moneyName,
    .morePopInner .price .box .moneyName + div{
        width: 100%;
        padding: 10px 0;
    }
}