@charset "UTF-8";
/* CSS Document */
word-break: break-all; word-wrap: break-word; overflow-wrap: break-word;

html {
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth;}

body {
    margin: 0;
    padding: 0;
    font-size: 0rem;
}



img {
    width: 100%;
    height: 100%;
    vertical-align:top;
}

a {
    transition: 0.3s;
    text-decoration: none;
}
a:hover {
    transition: 0.3s;
}


h1,h2,h3,h4,p,ul,li {
    color: #000;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 400;
    font-style: normal;
    vertical-align: baseline;
}

h1 {
    font-weight: 300;
    text-align: center;
    font-size: 2.5rem;
    margin-top: 0;
}
h2 {
    font-size: 2.3rem;
}
h3 {
    font-size: 1.8rem;
}
h4 {
    font-size: 1.2rem;
}
p,ul,li {
    font-size: 1rem;
    line-height: 235%;
    letter-spacing: 0.8px;
    text-align: justify;
}




/*---------------------
	トップテキスト
-----------------------*/
.toptxt {
    background-image: url(../images/bkimg_01.jpg);
    background-size: cover;
    padding: 7% 5% 5%;
}
.toptxt h1 {
    font-size: 1.7rem;
    position:relative;
    margin-bottom: 50px;
}
.toptxt h1::after {
    content:"";
    display:block;
    width:65px;
    height:1px;
    background-color:#000;
    position:absolute;
    bottom:-40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.toptxt div {
    max-width: 800px;
    margin: 0 auto;
}



/*---------------------
	見出し
-----------------------*/
.title {
    text-align: center;
    padding: 5% ;
}
.title img {
    max-width: 320px;
}


/*---------------------
	what's newボタン
-----------------------*/
.blogbtn {
    width: 100%;
    background-color: #7dd2c8;
    width: fit-content;
    border-radius: 5px;
    margin: 0 auto;
    transition: 0.3s;
}
.blogbtn p {
    padding: 10px 40px;
}
.blogbtn:hover {
    background-color: #d7ebeb;
    transition: 0.3s;
}



/*---------------------
	特長・サービス
-----------------------*/
.about {
    background-color: #f5fafa;
}
.about .pcview,.about .spview {
    padding: 2% 5%;
}
.about section {
    max-width: 800px;
    margin: 0 auto 20px;
}
.about .title img {
    max-width: 780px;
}

/*-------アンカーリンクの位置調整---------*/
#point_03::before,#point_03_sp::before {
    display: block;
    height: 6rem;
    margin-top: -6rem;
    content: "";
}



/*---------------------
	パーソナルカラー診断とは？
-----------------------*/
#personal {
    margin: 0;
}
.personal {
    margin: 0 auto;
    padding: 70px 5% 5%;
    background-color: #d7ebeb;
}
.per_btn img {
    max-width: 300px;
}
.per_btn a {
    font-size: 1.2rem;
    text-align: left;
    transition: 0.3s;
}
.per_btn a:hover {
    opacity: 0.7;
    transition: 0.3s;
}



/*---------------------
	料金について
-----------------------*/
.plan {
    text-align: center;
    background-color: #f5fafa;
    padding: 5%;
}
.plan img {
    max-width: 800px;
}



/*--------------------
お客様の声
--------------------*/
.koe {
    text-align: center;
    background-color: #f5fafa;
    padding: 2% 5%;
}
.koe img {
    max-width: 800px;
}
.koe .title {
    max-width: 400px;
    margin: 0 auto;
}



/*--------------------
比較表
--------------------*/
.comparison {
    text-align: center;
    background-color: #f5fafa;
    padding: 5%;
}
.comparison img {
    max-width: 800px;
}





/*---------------------
	アクセス
-----------------------*/
.access {
    padding: 5%;
}
.access_flex {
    display: flex;
    justify-content: center;
    max-width: 800px;
    margin: 5% auto;
}
.access_flex p {
    max-width: 100%;
    color: #fff;
    font-size: 0.8rem;
}
.access_flex img {
    max-width: 150px;
    margin: 0;
}
.access_flex .ac_logo {
    max-width: 130px;
}
.access_txt {
    padding: 30px;
    background-color: #333;
}
.map {
    width: 400px;
    height: 400px;
}

.actxt_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}




/*---------------------
	Q&A
-----------------------*/
.qa {
    max-width: 800px;
    margin: 0 auto;
}





/*---------------------
	プライバシーポリシー
-----------------------*/
.policy p {
    font-size: 0.8rem;
    line-height: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5% 5%;
}


/*---------------------
	体験予約はコチラ-フローティング
-----------------------*/
.sns_banner {
    max-width: 100px;
    position: fixed;
    z-index: 1;
    bottom: 20px;
    transition: 0.3s;
}
.sns_banner:hover {
    opacity: 0.7;
    transition: 0.3s;
}



/*---------------------
	PCとスマホの切り替え
-----------------------*/

.pcview {
    
}
.spview {
    display: none;
}



/*----------------- 
フッター
-----------------*/
footer {
    background-color: #333;
}
footer img {
    max-width: 120px;
    margin: 5%;
    margin-left: 0;
}
footer p {
    text-align: center;
    color: #fff;
    border-top: 0.5px solid #fff;
    padding: 10px 0;
}
footer .btn_top {
    max-width: 60px;
}
footer a:hover {
    opacity: 0.7;
}
.footer_flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.copyright {
    letter-spacing: 2px;
    font-size: 0.8rem;
    margin: 0 auto;
}



/*----------------- 
レスポンシブ
-----------------*/
@media screen and (max-width:800px) {
    
    .access_flex {
        display: block;
    }
    .map {
        width: 100%;
    }
    /*---------------------
	PCとスマホの切り替え
    -----------------------*/
    .pcview {
        display: none;
    }
    .spview {
        display: block;
    }
    
    .personal img {
        max-width: 90%;
        margin: 0 auto;
    }
    .per_btn {
        text-align: center;
        padding: 10px 3% 0;
        margin-top: 0;
    }
    .qa {
        max-width: 90%;
    }
}

@media screen and (max-width:680px) {
    h1 {
        font-size: 2rem;
    }
    
    .policy {
        padding: 0 5%;
    }
    .plan_flex .border_box {
        height: 280px;
    }
    .btn {
        bottom: -10px;
        left: 20%;
    }
    .access,.staff {
        padding: 5% 10%;
    }
}

@media screen and (max-width:598px) {
    .plan_flex .border_box {
        height: 340px;
    }
    .btn {
        margin: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    } 
    .sonota p {
        font-size: 1.2rem;
    }
    .koe .title {
        max-width: 300px;
    }
}

@media screen and (max-width:475px) {
    .toptxt {
        padding-top: 50px;
    }
    .toptxt h1 {
        font-size: 1.4rem;
    }
    .toptxt h1::after {
        bottom:-30%;
    }
    .toptxt p {
        font-size: 0.8rem;
        line-height: 2;
    }
    .title {
        padding-top: 30px;
        max-width: 220px;
        margin: 0 auto;
    }
    .policy .title {
        max-width: 100%;
    }
    .policy h2 {
        font-size: 1.4rem;
        max-width: 100%;
    }
    .per_btn a {
        font-size: 1.0rem;
    }
    .per_btn::before {
        width: 25px;
        height: 25px;
    }
    .about img {
        max-width: 100%;
    }
    .map {
        max-height: 300px;
    }
    .access_txt img {
        max-width: 100px;
        margin: 10px auto;
    }
    .policy p {
        font-size: 0.6rem;
    }
    footer {
        padding-top: 20px;
        margin-top: 30px;
    }
    
    .copyright {
        font-size: 0.6rem;
        padding: 10px;
        margin: 20px auto 0;
    }

    .personal img {
        max-width: 100%;
    }
    .sns_banner {
        max-width: 90px;
        bottom: 5px;
    }

    .about .title {
        max-width: 340px;
        padding: 30px 10px;
    }

    .koe .title {
        max-width: 220px;
    }
}