@charset "utf-8";
/*==================================================
layout
===================================*/
.wrapper{
	overflow: hidden;
}

body{
	font-family:"游ゴシック体","Yu Gothic",YuGothic,sans-serif,Roboto,YakuHanJPs,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo;
}
@media screen and (max-width:768px) {
    body{
        margin-top:0px;
        margin-bottom:0px;
    }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: #000; }
a:active { color: #000; }

/*==================================================
imghero
===================================*/

.imghero {
    width: 100%;
    position: relative;
    display: block;
}

/*==================================================
info_text
===================================*/

.info_text {
    text-align: center;
    padding: 70px 0 180px;
}
@media only screen and (max-width: 749px) {
    .info_text {
        padding: 30px 0 50px;
    }
}

.info_text dl {
    margin: 0;
    padding: 0;
}

.info_text dt {
    font-size: 27px;
    font-weight: bold;
}

@media only screen and (max-width: 749px) {
    .info_text dt {
        font-size: 20px;
    }
}

.info_text dd {
    font-size: 18px;
    margin-top: 50px;
    line-height: 1.9em;
    letter-spacing: 0.05em
}


@media only screen and (max-width: 749px) {
    .info_text dd {
        font-size: 13px;
        margin-top: 40px;
        line-height: 1.6em;
    }
}


/*==================================================
profile_box 
===================================*/

.profile_box {
    width: 100%;
    padding: 100px 0;
    background-color: #DBDCD3;
}

@media only screen and (max-width: 749px) {
    .profile_box {
        padding: 30px 0;
        background-color: #fff;
    }
}

.kawabata {
    margin: 0 auto 50px;
    width:45%;
    background-color: #fff;
    border: 2px solid #000;
    padding: 25px 25px 20px;
    display: flex;
}

@media only screen and (max-width: 749px) {
    .kawabata {
        margin: 0 auto 0px;
        width:100%;
        background-color: #fff;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: none;
        border-right: none;
        padding: 15px 10px;
        display: flex;
    }
}

.staffpic,.staffpic {
    margin: 0;
    padding: 0;
}

.kawabata .staffpic img {
    width:217px
}



@media only screen and (max-width: 749px) {
    .kawabata .staffpic {
        width:40%;
    }

    .kawabata .staffpic img {
        width:100%;
    }
}

.kawabata dl {
    width:100%;
    padding-left: 25px;
}

@media only screen and (max-width: 749px) {
    .kawabata dl {
        width: 60%;
        padding-left: 10px;
    }
}

.kawabata dt {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 20px 0;
}

.kawabata dt p {
    font-size: 23px;
}

@media only screen and (max-width: 749px) {
    .kawabata dt {
        padding: 0 0 10px;
        font-size: 13px;
        letter-spacing: 0;
        font-weight: normal;
    }
    .kawabata dt p {
        font-size: 16px;
    }
}

.kawabata dd {
    width: 100%;
    text-align:justify;
}

@media only screen and (max-width: 749px) {
    .kawabata dd {
        font-size: 13px;
    }
}

.konishi {
    margin: 0 auto;
    width:60%;
    background-color: #fff;
    border: 2px solid #000;
    padding: 25px 25px 20px;
    display: flex;
}

@media only screen and (max-width: 749px) {
    .konishi {
        margin: 0;
        width:100%;
        background-color: #fff;
        border: none;
        padding: 25px 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.konishi .staffpic img {
    width:337px
}

@media only screen and (max-width: 749px) {
    .konishi .staffpic {
        width:50%;
    }

    .konishi .staffpic img {
        width:100%;
    }
}

.konishi dl {
    width:100%;
    padding-right: 20px;
}

@media only screen and (max-width: 749px) {
    .konishi dl {
        width:50%;
        padding-right: 10px;
    }
    
}

.konishi dt {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 20px 0;
}

.konishi dt p {
    font-size: 23px;
}

@media only screen and (max-width: 749px) {
    .konishi dt {
        padding: 0 0 10px;
        font-size: 13px;
        letter-spacing: 0;
        font-weight: normal;
    }
    .konishi dt p {
        font-size: 16px;
        letter-spacing: -0.09em;
    }
}
.konishi dd {
    width: 100%;
    text-align:justify;
}
.proinfo {
    width: 100%;
    word-break: break-all;
    padding: 0 10px 25px;
    font-size: 13px;
    border-bottom: 1px solid #000;
}

/*==================================================
basic
===================================*/

.basic {
    width: 100%;
    padding: 150px 0 75px;
}

@media only screen and (max-width: 749px) {
    .basic {
        padding: 30px 0;
    }
}

.basic .ttl {
    width: 100%;
    text-align: center;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    letter-spacing: 0.05em;
    font-size: 36px;
    margin-bottom: 50px;
}

@media only screen and (max-width: 749px) {
    .basic .ttl {
        font-size: 22px;
        margin-bottom: 30px;
    }
}


.b_box1 {
    display: flex;
    width: 55%;
    margin: 0 auto 140px;
}

@media only screen and (max-width: 749px) {
    .b_box1 {
        width: 100%;
        margin: 0;
    }
}

.b_box1 p {
    width: 10%;
    padding-top: 30px;
    text-align: center;
}

.b_box1 p img {
    width: 40%;
}

@media only screen and (max-width: 749px) {
    .b_box1 p {
        width: 15%;
    }
}

.b_box1 dl {
    margin: 0;
    padding: 0 0 0 10px;
    width: 90%;
}

@media only screen and (max-width: 749px) {
    .b_box1 dl {
        width: 85%;
        padding: 0;
    }
}

.b_box1 dl .bpic {
    width: 100%;
}

.b_box1 dl .bpic img {
    width: 100%;
    margin-bottom: 30px;
}

.b_box1 dt {
    text-align: center;
    font-size: 32px;
    margin: 5px 0;
    letter-spacing: 0.075em;
}

.b_box1 dd {
    font-size: 18px;
    margin: 30px 0 0;
    letter-spacing: 0.05em;
}

.bsp {
    width: 85%;
    margin: 0 auto;
    padding: 0 0 30px;
    display: block;
}

.bsp small {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 9px;
    line-height: 1.2    rem;
}

.spttl {
    text-align: center;
    font-size: 19px;
    margin: 5px 0;
    letter-spacing: 0em;
}

.spinb {
    font-size: 13px;
    line-height: 1.6rem;
    margin-top: 15px;
    letter-spacing: 0em;
} 

.b_box2 {
    display: flex;
    width: 55%;
    margin: 0 auto 140px;
}

@media only screen and (max-width: 749px) {
    .b_box2 {
        width: 100%;
        margin: 0;
    }
}

.b_box2 p {
    width: 10%;
    padding-top: 30px;
    text-align: center;
}

.b_box2 p img {
    width: 40%;
}

@media only screen and (max-width: 749px) {
    .b_box2 p {
        width: 15%;
    }
}

.b_box2 dl {
    margin: 0;
    padding: 0 0 0 10px;
    width: 90%;
}
@media only screen and (max-width: 749px) {
    .b_box2 dl {
        width: 85%;
        padding: 0;
    }
}

.b_box2 dl .bpic {
    width: 100%;
}

.b_box2 dl .bpic img {
    width: 100%;
    margin-bottom: 30px;
}

.b_box2 dt {
    text-align: center;
    font-size: 32px;
    margin: 5px 0;
    letter-spacing: 0.075em;
}

.b_box2 dd {
    font-size: 18px;
    margin: 30px 0 0;
    letter-spacing: 0.05em;
}

.b_box3 {
    display: flex;
    width: 55%;
    margin: 0 auto;
}

@media only screen and (max-width: 749px) {
    .b_box3 {
        width: 100%;
        margin: 0;
    }
}

.b_box3 p {
    width: 10%;
    padding-top: 30px;
    text-align: center;
}

.b_box3 p img {
    width: 40%;
}
@media only screen and (max-width: 749px) {
    .b_box3 p {
        width: 15%;
    }
}

.b_box3 dl {
    margin: 0;
    padding: 0 0 0 10px;
    width: 90%;
}
@media only screen and (max-width: 749px) {
    .b_box3 dl {
        width: 85%;
        padding: 0;
    }
}

.b_box3 dl .bpic {
    width: 100%;
}

.b_box3 dl .bpic img {
    width: 100%;
    margin-bottom: 30px;
}

.b_box3 dt {
    text-align: center;
    font-size: 32px;
    margin: 5px 0;
    letter-spacing: 0.075em;
}

.b_box3 dd {
    font-size: 18px;
    margin: 30px 0 0;
    letter-spacing: 0.05em;
}

.b_box3 dd small {
    display: block;
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

/*==================================================
lesson_box
===================================*/

.lesson_box {
    width: 100%;
    padding: 100px 0;
    background-color: #DBDCD3;
}

@media only screen and (max-width: 749px) {
    .lesson_box {
        padding: 30px 0;
    }
}

.l_ttl {
    text-align: center;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    letter-spacing: 0.05em;
    font-size: 36px;
    margin-bottom: 15px;
}

.l_info {
    border-top: 1px solid #000;
    padding-top: 15px;
    width: 60%;
    margin: 0 auto 75px;
    font-size: 18px;
}

@media only screen and (max-width: 749px) {
    .l_ttl {
        font-size: 24px;
    }

    .l_info {
        font-size: 13px;
        width: 90%;
        margin: 0 auto 40px;
    }
}


.lesson01 {
    width: 60%;
    margin: 0 auto 75px;
}

@media only screen and (max-width: 749px) {
    .lesson01 {
        width: 100%;
        margin: 0 0 50px;
    }
}

.lesson01 .lttl {
    font-size: 24px;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    margin-bottom: 20px;
}

@media only screen and (max-width: 749px) {
    .lesson01 .lttl {
        margin-left: 15px;
        font-size: 18px;
        margin-bottom: 15px;
    }
}


.lesson01 p {
    margin-bottom: 25px;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2rem;
    text-align: justify;
}

@media only screen and (max-width: 749px) {
    .lesson01 p {
        padding: 0 15px;
        font-size: 13px;
        line-height: 1.6rem;
    }

    .lesson01 img  {
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 749px) {
}

.lesson01 dl {
    display: flex;
    width: 100%;
}

@media only screen and (max-width: 749px) {
    .lesson01 dl {
        display: block;
    }
}

.lesson01 dt {
    width: 50%;
}

.lesson01 dt img  {
    width: 100%;
}

@media only screen and (max-width: 749px) {
    .lesson01 dt {
        width: 100%;
    }

    .lesson01 dt img  {
        margin-bottom: 15px;
    }
}

.lesson01 dd {
    width: 50%;
    padding-left: 5%;
    align-items: flex-end;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2rem;
    text-align: justify;
    margin-top: auto;
}

@media only screen and (max-width: 749px) {
    .lesson01 dd {
        font-size: 13px;
        width: 100%;
        padding: 0 15px;
        line-height: 1.6rem;
    }
}

.lesson02 {
    width: 60%;
    margin: 0 auto 75px;
}

@media only screen and (max-width: 749px) {
    .lesson02 {
        width: 100%;
        margin: 0 0 50px;
    }
}

.lesson02 .lttl {
    font-size: 24px;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    margin-bottom: 20px;
}

@media only screen and (max-width: 749px) {
    .lesson02 .lttl {
        margin-left: 15px;
        margin-bottom: 15px;
        font-size: 18px;
    }
}

.lesson02 dl {
    display: flex;
    width: 100%;
}

@media only screen and (max-width: 749px) {
    .lesson02 dl {
        display: block;
    }
}

.lesson02 dt {
    width: 45%;
    padding-right: 5%;
    font-size: 23px;
}

@media only screen and (max-width: 749px) {
    .lesson02 dt {
        width: auto;
        margin-left: 15px;
        margin-bottom: 25px;
    }
}

.lesson02 dt p {
    font-size: 30px;
}

@media only screen and (max-width: 749px) {
    .lesson02 dt p {
        font-size: 16px;
    }
}

.lesson02 dd {
    width: 55%;
}

@media only screen and (max-width: 749px) {
    .lesson02 dd {
        width: 100%;
    }
}

.lesson02 dd video {
    width: 100%;
}

.lcontents {
    display: flex;
    margin-top: 50px;
}

@media only screen and (max-width: 749px) {
    .lcontents {
        display: block;
        margin-top: 30px;
    }
}

.lcontents .in {
    width: 30%;
}

@media only screen and (max-width: 749px) {
    .lcontents .in {
        width: 100%;
    }
}

.lcontents .in img {
    width: 100%;
}

.lcontents .in p {
    width: 90%;
    margin: 10px auto 0;
}

@media only screen and (max-width: 749px) {
    .lcontents .in p {
        width: 100%;
        padding: 0 15px 10px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}

.lcontents .in02 {
    width: 30%;
    margin: 0 5%;
}

@media only screen and (max-width: 749px) {
    .lcontents .in02 {
        width: 100%;
        margin: 0;
    }
}

.lcontents .in02 img {
    width: 100%;
}

.lcontents .in02 p {
    width: 90%;
    margin: 10px auto 0;
}

@media only screen and (max-width: 749px) {
    .lcontents .in02 p {
        width: 100%;
        padding: 0 15px 10px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}

.lesson03 {
    width: 60%;
    margin: 0 auto 150px;
}

@media only screen and (max-width: 749px) {
    .lesson03 {
        width: 100%;
        margin: 0 0 50px;
    }
}

.lesson03 .lttl {
    font-size: 24px;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    margin-bottom: 20px;
}

@media only screen and (max-width: 749px) {
    .lesson03 .lttl {
        margin-left: 15px;
        margin-bottom: 15px;
        font-size: 18px;
    }
}


.lesson03 dl {
    display: flex;
    width: 100%;
    margin-bottom: 25px;
}

@media only screen and (max-width: 749px) {
    .lesson03 dl {
        display: block;
    }
}


.lesson03 dt {
    width: 45%;
    padding-right: 5%;
    font-size: 23px;
}

@media only screen and (max-width: 749px) {
    .lesson03 dt {
        width: auto;
        margin: 0 0 25px 15px;
    }
}

.lesson03 dt p {
    font-size: 30px;
}

@media only screen and (max-width: 749px) {
    .lesson03 dt p {
        font-size: 16px;
        padding: 0;
    }
}


.lesson03 dd {
    width: 60%;
}

@media only screen and (max-width: 749px) {
    .lesson03 dd {
        width: 100%;
    }
}

.lesson03 dd img {
    width: 100%;
}
.lesson03 p {
    margin-bottom: 25px;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2rem;
    text-align: justify;
}

@media only screen and (max-width: 749px) {
    .lesson03 p {
        width: 100%;
        padding: 0 15px 10px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}

.lessonpic {
    width: 65%;
    margin:  0 auto 25px;
}

@media only screen and (max-width: 749px) {
    .lessonpic {
        width: 100%;
    }
}

.lessonpic img {
    width: 100%;
}

.lessonvoice {
    width: 65%;
    margin:  0 auto;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2rem;
    text-align: justify;
}

@media only screen and (max-width: 749px) {
    .lessonvoice {
        width: 100%;
        padding: 0 15px 10px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}
/*==================================================
plus
===================================*/

.plus {
    width: 100%;
    padding: 150px 0;
}

@media only screen and (max-width: 749px) {
    .plus {
        padding: 50px 0;
    }
}

.pttl {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    margin-bottom: 45px;
    vertical-align: middle;
}

@media only screen and (max-width: 749px) {
    .pttl {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .pttl img {
        width: 50px;
    }
}

.pluscontents {
    width: 80%;
    margin: 0 auto;
    display: flex;
}

@media only screen and (max-width: 749px) {
    .pluscontents {
        width: 100%;
        display: block;
    }
}


.plus01 {
    width: 47%;
    margin: 0 2% 0 1%;
    padding: 30px 20px;
    background-color: #fff;
    border: 1px solid #000;
}

@media only screen and (max-width: 749px) {
    .plus01 {
        width: 100%;
        margin: 0;
        padding: 20px 0;
        background-color: #fff;
        border: none;
    }
}

.plus01 .ttlc {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 20px;
    font-size: 20px;
}

@media only screen and (max-width: 749px) {
    .plus01 .ttlc {
        font-size: 16px;
    }
}

.plus01 img {
    width: 100%;
    margin-bottom: 20px;
}

.plus01 p {
    font-size: 18px;
}

@media only screen and (max-width: 749px) {
    .plus01 p {
        width: 100%;
        padding: 0 15px 10px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}

.plus02 {
    width: 47%;
    margin: 0 1% 0 2%;
    padding: 30px 20px;
    background-color: #fff;
    border: 1px solid #000;
}

@media only screen and (max-width: 749px) {
    .plus02 {
        width: 100%;
        margin: 0;
        padding: 20px 0;
        background-color: #fff;
        border: none;
    }
}

.plus02 .ttlc {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 20px;
    font-size: 20px;
}

@media only screen and (max-width: 749px) {
    .plus02 .ttlc {
        font-size: 16px;
    }
}

.plus02 img {
    width: 100%;
    margin-bottom: 20px;
}

.plus02 p {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 3rem;
}

@media only screen and (max-width: 749px) {
    .plus02 p {
        width: 100%;
        padding: 0 15px 10px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}

.plus02 dl {
    width: 100%;
    display: flex;
}

.plus02 dt {
    width: 50%;
}

.plus02 dt img {
    margin: 0;
}
.plus02 dd {
    margin-top: auto;
    width: 50%;
    padding-left: 3%;
}

@media only screen and (max-width: 749px) {
    .plus02 dd {
        padding: 0 15px;
        font-size: 13px;
        line-height: 1.6rem;
    }
}

/*==================================================
footer
===================================*/
#footer{
    color: #221815;
    background:#DBDCD3;
    height: auto;
    width:100%;
    text-align:center;
    padding-top: 75px;
}

@media only screen and (max-width: 749px) {
    #footer{
        padding-top: 40px;
    }
}

.shopinfo {
    margin-bottom: 40px;
}

@media only screen and (max-width: 749px) {
    .shopinfo {
        margin-bottom: 60px;
    }
}

.shopttl {
    font-size: 20px;
    margin-bottom:30px;
}

@media only screen and (max-width: 749px) {
    .shopttl {
        font-size: 16px;
        margin-bottom: 10px;
    }
}


.shoppic {
    margin-bottom: 30px;
}

.shoppic img {
    width: 550px;
}

@media only screen and (max-width: 749px) {
    .shoppic {
        margin-bottom: 10px;
    }
    .shoppic img {
        width: 70%;
    }
}

.shopname {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}

@media only screen and (max-width: 749px) {
    .shopname {
        font-size: 15px;
        margin-bottom: 10px;
    }
}

.shopinfotext {
    font-size: 16px;
    line-height: 1.6rem;
}


@media only screen and (max-width: 749px) {
    .shopinfotext {
        font-size: 11px;
        line-height: 1.5rem;
    }
}

.footer-area {
    width: 35%;
    margin: 0 auto;
    padding-bottom: 15px;
}

@media only screen and (max-width: 749px) {
    .footer-area {
        width: 60%;
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 749px) {
.tittle img {
    width: 35% !important;
}
}

.archive {
    width: 100%;
    margin: 8% auto 5%;
    padding-bottom: 15px;
}

@media only screen and (max-width: 749px) {
    .archive {
        width: 100%;
        padding-bottom: 10px;
        margin: 0;
    }
}

/*==================================================
slider
===================================*/

.slider {
    width:100%;
    height: auto;
    margin:0 auto;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.slider img {
    width:100%;
    height:auto;
}

.slider .slick-slide {
    margin:0 10px;
    height: auto;
}

@media only screen and (max-width: 768px) {
.slider .slick-slide {
    margin:0 10px;
}
}

.slider p {
    font-size: 12px;
    margin-top: 10px;
    letter-spacing: -0.2;
}

.sns-link {
    width: 50%;
    margin: 0 auto;
    padding: 50px 0 40px;
    display: flex;
}

@media only screen and (max-width: 749px) {
    .sns-link {
        width: 50%;
        margin: 0 auto;
        padding: 25px 0 10px;
    }
}


.sns-link li {
    width: 33%;
    list-style: none;
    text-align: center;
}

.sns-link li img  {
    width: 40%;
}

.footer-area small {
    font-size: 16px;
}

@media only screen and (max-width: 749px) {
    .footer-area small {
        font-size: 8px;
    }
}





/*==================================================
animation
===================================*/
.effect-fade {
  opacity: 0;
  transform: translate(0, 100px); 
  transition: all 2000ms;
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

.effect-fadey {
    opacity: 0;
    transform: translate(20px, 0); 
    transition: all 1240ms;
    transition-delay: 1s;
  }
.effect-scroll {
    opacity: 1;
    transform: translate(0, 0);
  }


.js-marker {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, #fff, #fff); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 50%; /* '30%'の部分にマーカーの太さを記入 */
    transition: all 5s ease; /* マーカーを引く速度を調整 */
  }
  
  /* アニメーション発火時 */
  .js-marker.inview {
    background-size: 100% 50%; /* '30%'の部分は上で設定した太さに合わせる */
  }

.mark img {
    -webkit-transform: scale(1.15) translate(-30px,0);
    transform: scale(1.15) translate(-30px,0);
    opacity: 0;
    margin-right: 15px;
    transition-property: transform,opacity,-webkit-transform;
    transition-duration: 1.4s,.6s;
    transition-timing-function: cubic-bezier(.32,.43,.49,1.36),ease-in;
    transition-delay: 1s;
}

.animet img {
    transform: scale(1) translate(0,0)!important;
    opacity: 1!important;
}