@charset "utf-8";

/*-----------------------------------------------
SP
-----------------------------------------------*/

@media screen and (max-width: 768px) {

/*PC改行なし*/
.br-sp {
    display: block; 
}

/*PC改行*/
.br-pc {
    display: none; 
}

/*レイアウト*/
.container{
    width: 100%;
    margin: 0 auto;
}

/*-----------------------------------------------
CTAセクション
-----------------------------------------------*/
.cta{
    padding-bottom: 3rem;
}

.cta-title img{
    width: 100%;
    height: auto;
}

.cta-btn{
    width: 90%;
    margin-top: -0.8rem;
}

.mc-copy{
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.2;
}

.cta-btn_no-res{
    width: 80%;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

/*-----------------------------------------------
解決策の提示セクション
-----------------------------------------------*/
.solution-box{
    margin-top: -14rem;
}

.solution-copy{
    padding: 3rem 3.5rem;
    font-size: 2.4rem;
    text-align: justify;
}

/*-----------------------------------------------
お客様の声セクション
-----------------------------------------------*/
.voice-bg{
    padding: 4rem 1.5rem;
}

.voice-title{
    max-width: 80%;
    padding-bottom: 1rem;
}

.voice-hosoku{
    font-size: 2rem;
    text-align: center;
    padding-bottom: 2rem;
}

.voice-container{
    max-width: 100%;
}

.voice-box{
    padding: 2.5rem;
    margin-bottom: 1.5rem;
}

.voice-title_h3{
    padding-bottom: 1rem;
}

.voice-title_h3-item01{
    width: 25%;
}

.voice-title_h3-item02{
    width: 70%;
}

.voice-title_h3-item02 p{
    font-size: 2.7rem;
}

.voice-title_h3-item02 h3{
    font-size: 3rem;
    color: #007599;
    line-height: 1.3;
}

.voice-copy{
    font-size: 2rem;
}

/*-----------------------------------------------
選ばれる理由セクション
-----------------------------------------------*/
.reason-container p{
    font-size: 2rem;
    line-height: 1.4;
    padding: 3rem 3.5rem;
    text-align: justify;
}

.reason-bg p{
    font-size: 2rem;
    line-height: 1.4;
    text-align: justify;
}

.custom-line {
    margin-bottom: 1rem;
}

.reason-bg h4{
    font-size: 2.8rem;
}

/*-----------------------------------------------
マシン紹介
-----------------------------------------------*/
.machine-bg{
    padding-bottom: 2rem;
}

.custom-line {
    max-width: 745px;
}

.machine-title {
    font-size: 2.2rem;
    text-align: center;
    padding-bottom: 1rem;
}

/*-----------------------------------------------
料金セクション
-----------------------------------------------*/
.price-title{
    padding: 3rem 0;
    font-size: 3rem;
    line-height: 1.1;
}

.price-bg{
    padding: 6rem 0;
}

.price-img{
    max-width: 80%;
    padding-bottom: 4rem;
}

.ofer-img{
    max-width: 80%;
    margin: 0 auto;
}

/*-----------------------------------------------
スタッフ紹介セクション
-----------------------------------------------*/

.staff-title{
    padding: 3rem 0;
    font-size: 3rem;
    line-height: 1.1;
}

.staff-small-txt{
    font-size: 2.2rem;
}

.profile-txt{
    width: 95%;
    margin: auto;
}
.profile-txt p{
    font-size: 2rem;
    color: #000;
    text-align: justify;
    padding-bottom: 3rem;
}

table {
    width: 85%;
    margin: auto;
    margin-top: 1rem;
}

table td {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.category {
    width: 20%;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 10px;
}

.content {
    width: 80%;
    font-size: 1.6rem;
    text-align: justify;
}

.keireki-text{
    font-size: 1.6rem;
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

li {
    position: relative;
    padding-left: 1.2rem;
}

li:before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 3rem;
    line-height: 3rem;
}

.food-hobby_container {
    width: 85%;
    margin: auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.food-hobby_container:last-child {
    padding-bottom: 0;
}

.food-hobby_item {
    width: 50%;
}

.food-hobby_title {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

.food-hobby_text{
    font-size: 1.6rem;
    padding-bottom: 3rem;
}

/*-----------------------------------------------
代表挨拶セクション
-----------------------------------------------*/
.aisatu-bg{
    padding-bottom: 0rem;
}

.aisatu-box{
    padding: 3rem 3.5rem;
    font-size: 1.8rem;
    text-align: justify;
}

/*-----------------------------------------------
予約までの流れセクション
-----------------------------------------------*/
.flow-title{
    max-width: 1125px;
    padding-bottom: 2rem;
}

.flow-box{
    padding-top: 3rem;
}

.flow-box:first-child {
    padding-top: 0 !important;
}

.flow-box p{
    font-size: 2rem;   
}

.flow-img{
    max-width: 100%;
    padding-top: 2rem;
}

.flow-box h3{
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.marker {
    font-size: 5rem;
}

.marker::after {
    content: "";
    position: absolute;
    left: -15px;
    right: -15px;
    bottom: -1px;
    width: calc(100% + 30px);
    height: 45%;
    background-color: #ffff80;
    z-index: -1;
}

/*-----------------------------------------------
アクセスセクション
-----------------------------------------------*/
.map-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 46.25%;
    overflow: hidden;
    margin-bottom: 20px;
}

.access-container{
    max-width: 85%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.access-icon{
    max-width: 25px;
    text-align: center;
}

.access-icon img{
    width: 100%;
    height: auto;
}

.access-box {
    margin-bottom: 0.5rem;
}
.access-heading {
    color: #5EB2A8;
    font-size: 2.4rem;
    letter-spacing: 0.2rem;
    padding-left: 0rem;
    padding-bottom: 0rem;
}

.access-txt {
    color: #000;
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 2rem;
}

.map-container {
    margin-bottom: 0px;
}

/*-----------------------------------------------
フッターセクション
-----------------------------------------------*/
.footer_link {
    font-size: 17px;
    padding: 10px 0;
}

.footer_link a {
    color: #fff;
    text-decoration: none;
}

.copy {
    font-size: 15px;
}

}

@media screen and (max-width: 520px) {

/*-----------------------------------------------
CTAセクション
-----------------------------------------------*/

.mc-copy{
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.2;
}

/*-----------------------------------------------
解決策の提示セクション
-----------------------------------------------*/
.solution-box{
    margin-top: -8rem;
}

.solution-copy{
    font-size: 1.3rem;
}


/*-----------------------------------------------
お客様の声セクション
-----------------------------------------------*/
.voice-bg{
    padding: 4rem 1rem;
}

.voice-title{
    padding-bottom: 1rem;
}

.voice-hosoku{
    font-size: 1.05rem;
    text-align: center;
    padding-bottom: 2rem;
}

.voice-container{
    max-width: 100%;
}

.voice-box{
    border-radius: 2rem;
    padding: 2rem;
}

.voice-title_h3-item01{
    width: 25%;
}

.voice-title_h3-item02{
    width: 70%;
}

.voice-title_h3-item02 p{
    font-size: 1.4rem;
}

.voice-title_h3-item02 h3{
    font-size: 1.6rem;
    color: #007599;
    line-height: 1.3;
}

.voice-copy{
    font-size: 1.3rem;
}

/*-----------------------------------------------
選ばれる理由セクション
-----------------------------------------------*/
.reason-container p{
    font-size: 1.3rem;
}

.reason-bg p{
    font-size: 1.3rem;
    text-align: justify;
}

.custom-line {
    max-width: 325px;
}

/*-----------------------------------------------
スタッフ紹介セクション
-----------------------------------------------*/

.category {
    width: 20%;
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 10px;
}

.content {
    width: 70%;
    font-size: 1.3rem;
}

.keireki-text{
    font-size: 1.3rem;
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

li {
    position: relative;
    padding-left: 1.4rem;
}

li:before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 2rem;
    line-height: 2rem;
}

.food-hobby_item {
    width: 50%;
}

.food-hobby_title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.food-hobby_text{
    font-size: 1.3rem;
    padding-bottom: 3rem;
}

/*-----------------------------------------------
代表挨拶セクション
-----------------------------------------------*/

.aisatu-box{
    font-size: 1.3rem;
}

/*-----------------------------------------------
予約までの流れセクション
-----------------------------------------------*/

.flow-box p{
    font-size: 1.3rem;   
}

.marker {
    font-size: 2.4rem;
}

/*-----------------------------------------------
アクセスセクション
-----------------------------------------------*/

.access-heading {
    font-size: 2.2rem;
}

.access-txt {
    color: #000;
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

/*-----------------------------------------------
フッターセクション
-----------------------------------------------*/
footer{
    padding: 2rem 0;
}

.footer_link {
    font-size: 1.2rem;
    padding: 10px 0;
}

.copy {
    font-size: 1.2rem;
}

}

@media screen and (max-width: 360px) {

/*フッター*/
.footer_link {
    font-size: 1rem;
    padding: 10px 0;
}

.copy {
    font-size: 1rem;
}

}