@charset "UTF-8";
/* sp */
@media screen and (max-width: 768px) {
    h2 {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;
        padding: 0 4vw;
    }
    .programTtl {
        border-bottom: 1px solid #1c1c1c;
        margin-top: 8px;
        margin-bottom: 50px;
        padding-bottom: 50px;
    }
    .programTtl h1 {
        font-size: 18px;
        line-height: 18px;
        margin: 0;
        padding: 0 4vw;
    }
    .programArea {
        position: relative;
        width: 100%;
        max-width: 520px;
        border-bottom: 1px solid #555;
        margin: 0 auto;
        margin-bottom: 8%;
        padding-bottom: 56%;
    }
    #triallesson {
        padding-bottom: 70px;
        margin-bottom: 48px;
    }
    #karate .programCnt-img h2:after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #555;
        width: 41px;
        top: 16px;
        margin-left: 10px;
    }
    #kickboxing .programCnt-img h2:after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #555;
        width: 41px;
        top: 16px;
        margin-left: 10px;
    }
    #triallesson .programCnt-txt h2:after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #555;
        width: 41px;
        top: 16px;
        margin-left: 10px;
    }
    .programSub {
        padding: 0 2vw;
    }
    #karate .programSub {
        content: "";
        position: absolute;
        width: 100%;
        max-width: 268px;
        background-color: #fff;
        border: 1px solid #555;
        overflow-wrap: anywhere;
        margin-top: -40px;
    }
    #kickboxing .programSub {
        content: "";
        position: absolute;
        width: 100%;
        max-width: 268px;
        background-color: #fff;
        border: 1px solid #555;
        overflow-wrap: anywhere;
        margin-top: -40px;
    }
    #triallesson .programSub {
        width: 100%;
        max-width: 307px;
        background-color: #fff;
        border: 1px solid #555;
        overflow-wrap: anywhere;
    }
    .programSub p {
        margin: 36px 0 0 0;
    }
    .programSub ul {
        margin: 42px 0 40px 0;
    }
    .programSub ul li  {
        letter-spacing: .14rem;
    }
    .programSub ul li small {
        font-size: 14px;
    }
    /* .tpi-fst,
    .tpi-lst {
        margin-bottom: 35px;
    }
    .tpi-fst h4,
    .tpi-lst h4 {
        text-align: center;
        margin: 0;
        margin-bottom: 30px;
    }
    .programBox {
        border-bottom: 1px solid #1c1c1c;
        margin-bottom: 50px;
    }
    .programBox p {
        margin: 0;
        padding-bottom: 60px;
    } */
    .programCnt-txt {
        overflow-wrap: anywhere;
    }
}
/* pc */
@media screen and (min-width: 769px) {
    main {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    #page-link{
    	display: flex;
    	justify-content: flex-end;
        max-width: 1100px;
        margin: 0 auto;
    }
    #page-link li{
    	border-right: 1px solid #555;
        border-bottom: 1px solid #555;
        text-align: center;
    }
    #page-link .link-l {
        background-color: #555;
    }
    #page-link .link-l a {
        color: #fff;
    }

    #page-link li a{
        display: block;
    	width: 226px;
        padding: 22px 0 23px 0;
    	color: #333;
    	text-decoration: none;
        letter-spacing: .16vw;
    }
    .programTtl {
        max-width: 1100px;
        margin: 0 auto;
        padding-left: 50px;
        padding-bottom: 18px;
        border-bottom: 1px #000 solid;
    }
    .programTtl .sub_ttl {
        font-size: 15px;
        line-height: 14px;
        margin: 0;
        padding-top: 15px;
    }
    .programArea {
        position: relative;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding-top: 134px;
        padding-bottom: 150px;
    }
    #triallesson.programArea {
        padding-top: 25px;
        padding-bottom: 0;
    }
    .programCnt {
        display: flex;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }
    .programCnt-img {
        width: 100%;
        max-width: 486px;
        min-width: 431px;
        height: auto;
    }
    .programCnt-txt {
        position: relative;
    }
    .programCnt-txt h2 {
        font-size: 20px;
        line-height: 28.14px;
        margin: 0;
        padding-bottom: 35px;
    }
    #kickboxing .programCnt-txt h2 {
        padding-right: 52px;
    }
    #kickboxing .programCnt-txt h2:after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #555;
        width: 41px;
        top: 3%;
        transform: translateY(-3%);
        margin-left: 10px;
    }
    #karate .programCnt-txt h2:after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #555;
        width: 41px;
        top: 3%;
        transform: translateY(-3%);
        margin-left: 10px;
    }
    #triallesson .programCnt-txt h2:after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #555;
        width: 41px;
        top: 20%;
        transform: translateY(-20%);
        margin-left: 10px;
    }
    .programCnt-txt p {
        margin: 0;
        padding-top: 5px;
    }
    #karate .programCnt-txt {
        padding-right: 45px;
        width: 100%;
        max-width: 514px;
        overflow-wrap: anywhere;
    }
    #kickboxing .programCnt-txt {
        padding-left: 45px;
        width: 100%;
        max-width: 514px;
        text-align: right;
        overflow-wrap: anywhere;
    }
    #karate .programCnt {
        flex-direction: row-reverse;
        margin-top: -140px;
        padding-top: 140px;
    }
    .programSub {
        width: 554px;
        border: 1px solid #555;
        background-color: #fff;
    }
    #triallesson .programSub {
        width: 400px;
    }
    #karate .programSub {
        content: "";
        position: absolute;
        top: 350px;
        left: 0;
    }
    #kickboxing .programSub {
        content: "";
        position: absolute;
        top: 350px;
        right: 0;
    }
    .programSub ul {
        margin: 0;
        padding: 40px;
    }
    .programSub ul li {
        font-size: 18px;
        line-height: 2.4rem;
        letter-spacing: .14rem;
    }
    .programSub small {
        font-size: 14px;
        letter-spacing: 0.087rem;
    }
    .programSub ul li a {
        border-bottom: 1px solid #555;
    }

    #header{
    	background:#333;
    	color:#fff;
    	text-align: center;
    	padding: 20px;
    }

    #main-vidual img{
    	width: 100%;
    }

    #footer{
    	position: relative;
    	z-index: 2;
    }
}
/* 崩れ調整用 */
@media screen and ( max-width:457px) {
    .programArea {
        padding-bottom: calc((400 / 310) * 100%);
    }
}
@media screen and (min-width:769px) and ( max-width:923px) {
    #triallesson.programArea {
        padding-top: 100px;
    }
}