@charset "UTF-8";
@import url("grid.css?1");
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

img {max-width:100%;height: auto;}
*,*:before,*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}
html {scroll-padding-top: 300px;scroll-behavior: smooth;}

h2.square {
    position: relative;
    display: block;
    font-size: 2.9rem;
    padding: 0 0 0 35px;
    margin: 20px 0;
}

h2.square::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    background: #000;
    content: "";
}

h2.title {
    color: #364e96;/*文字色*/
    padding: 0.4em 0;/*上下の余白*/
    margin: 70px auto 40px auto;
    border-top: solid 3px #364e96;/*上線*/
    border-bottom: solid 3px #364e96;/*下線*/
    font-size: 3.0rem;
    width: 70%;
    text-align: center;
}

.main_text {
    width: 90%;
    margin: 0 auto;
    font-size: 2.0rem;
}

/**********     ファーストビュー     **********/

img.fig {
    width: 60%;
    margin: 30px 20%;
}
/**********     飲食店が直面する課題     **********/

.kadai_box {
    width: 90%;
    display: flex;
}

.kadai_img {
    width: 30%;
}

.kadai_img img {
    width: 60%;
    margin: 0 20%;
}

.kadai_list {
    width: 70%;
}

.kadai_ul li {
    font-size: 2.1rem;
    margin: 0 0 15px 0;
}

/**********     5つの解決策     **********/

.kadai_text {
    width: 90%;
    margin: 70px auto 30px;
    display: flex;
    //justify-content: center;
    align-items: center;
    font-size: 3.5rem;
}

.kadai_text span {font-size: 200%;color:red;}
img.sma {width: 220px;}
img.te  {width: 150px;}

.kaiketsu_box {
    width: 90%;
    margin: 10px auto 70px;
}

h3.ktitle {
    border-bottom: solid 5px #00b0f0;
    font-size: 2.6rem;
    font-weight: 500;
}

h3.ktitle span {
    font-size: 140%;
    font-weight: 700;
}

.ksubt {
    text-align: center;
    font-size: 2.2rem;
    margin: 30px 0;
}

.kimg {text-align: center;}
.kimg img {height: 140px;object-fit: contain;}

ul.klist {
    width: 70%;
    margin: 20px auto;
    font-size: 2.1rem;
    list-style: disc;
}
/**********     スマレジを選ぶ理由     **********/

.riyuu_box {
    width: 80%;
    margin: 15px auto;
    display: flex;
}

.rleft {
    width: 40%;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
    color:#0070c0;
}

.rright {
    width: 60%;
    font-size: 2.1rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.last_box {
    width: 80%;
    margin: 55px auto;
    display: flex;
}

.last_img {
    width: 40%;
    margin: 0 5%;
}

.last_text {
    width: 50%;
    font-size: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}



/**********     T-SERIES     **********/

.tlogo {
    width: 100%;
    text-align: center;
    margin: 30px 0 0 0;
}
.tlogo img {width: 250px;}

.ttext {
    font-size: 2.8rem;
    font-weight: 600;
    text-align: center;
    margin: -20px 0 0 0;
}

.thome_flex {
    display:flex;
    width: 70%;
    margin: 70px 20% 20px 10%;
}

.thometext {
    width: 50%;
    font-size: 2.2rem;
    text-align: right;
}
.thomelogo {width: 40%;margin-left:5% ;}

a.thomelink {
  transition-property: opacity;
  transition-duration: 0.9s;
  text-decoration: none;
}
a.thomelink:hover {opacity: 0.3; }


/**********     T-Food用　CTA     **********/

.button-29 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 370px;
    margin:0 auto;
    padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #000;
    border-radius: 25px;
    background-color: #000;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
}

.button-29:hover {
    background-color: transparent;
    color: #000;
}

.button-29::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #fff;
    content: '';
    transition: width .3s ease;
}

.button-29:hover::before {
    width: 100%;
}

/*問い合わせ-------------------------------------*/

.note {
    max-width: 1000px;
    margin: 20px auto 0;
    font-size: 1.7rem;
    line-height: 2.1;
}

@media screen and (min-width:769px){
    br.spbr {display: none;}
}

@media screen and (max-width:768px){
    h2.title    {font-size: 2.2rem;}
    h2.work     {font-size: 1.9rem;}
    h4          {font-size: 2.2rem;}
    .note       {font-size: 1.5rem;line-height:1.8;}
    .main       {margin-top: 20px;}
    .main_text  {font-size: 1.7rem;}
    h2.square   {font-size: 1.9rem;padding: 0 0 0 22px;}
    .button-29 {width: 88%;font-size: 1.6rem;padding: 0.8em 0.5rem;}
    .kadai_box {display:block;width: 98%;}
    .kadai_img {width: 85%;margin:10px auto;}
    .kadai_list {width:98%;margin: 0 auto;}
    .kadai_ul li{font-size: 1.7rem;}
    .kadai_text {width: 98%;margin: 40px auto 60px;display: block;font-size: 1.9rem;}
    .kadai_text span {font-size: 150%;color:red;}
    img.sma {width: 200px;display: block;}
    img.te  {width: 45px;margin: 0 0 3px 0;}
    h3.ktitle {
        border:none;
        font-size: 1.9rem;
        text-decoration:underline;
        text-decoration-color: #00b0f0;
        text-decoration-thickness: 4px;
        text-underline-offset: 7px;
    }
    .ksubt {font-size: 1.7rem;}
    ul.klist {width: 90%;font-size: 1.5rem;}
    .riyuu_box {width: 95%;}
    .rleft {font-size: 2.0rem;}
    .rright {font-size: 1.6rem;}
    .last_box {width: 95%;display: block;}
    .last_img {width: 90%;}
    .last_text {width: 90%;font-size: 1.7rem;margin: 15px auto;}
}