@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.work {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #000;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #000;/*左線*/
  font-size: 3.0rem;
  font-weight: 600;
  margin: 40px 0;
}

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 {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 {
    font-size: 1.9rem;
    list-style-type: circle;
}

/**********     ポイント     **********/
.point_box {
    width: 90%;
    margin: 0 0 0 10%;
}

.point_title {
    text-align: center;
    font-size: 3.5rem;
    margin: 0 0 30px 0;
    font-weight: 600;
}

.point_title span {
    color:#ffa500;
    font-weight: 700;
    font-size: 120%;
}


.midashi {
    height: 50px;
    vertical-align: middle;
    background-image:url(../img/midashi.png);
    background-position: top -40px left -40px;
    background-repeat: no-repeat;
    font-size: 2.8rem;
    color: #fff;
    padding: 0 0 0 20px;
    margin: 0 0 10px 0;
}

.point_desc {
    font-size: 2.2rem;
    margin: 0 0 30px 2%;
}

/**********     ラインナップ     **********/

.lineup_box {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 10px 0;
    width: 90%;
    border: 3px solid #000;
    margin: 20px auto;
}

.lineup_midashi {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 10px 10px 10px 20px;
    margin: 0 0 5px -20px;
    width: calc(60% + 20px);
    font-size: 2.4rem;
    font-weight: 600;
    background: #FCB815;
}

.lineup_midashi::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px #E29517;
}

.lineup_midashi:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.lineup_midashi:after {
    top: 0;
    right: 0;
    border-width: 30px 15px 30px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

.lbox {
    display: flex;
    width: 90%;
    margin: 0 auto;
}

.lineup_left {
    width: 40%;
    margin: 0 5% 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.0rem;
}

.lineup_right {
    width: 50%;
}

img.re {
    width: 30%;
    margin: 10px 30%;
}

.lineup_cen {
    width: 80%;
    margin: 30px auto;
    font-size: 2.0rem;
}

/**********     よくある質問     **********/

.last_box {
    width: 90%;
    margin: 20px auto;
}

.last_img {
    width: 35%;
}

.last_text {
    width: 80%;
    margin: -30px auto 0;
    font-size: 2.5rem;
    font-weight: 500;
    color: #E76E6E;
}

/*Q&A-------------------------------------*/

#QandA-2 {width: 100%;}
#QandA-2 h3 {margin-top: 32px;}
#QandA-2 dl {border: 1px solid #ccc;}
#QandA-2 dt {
font-weight: bold;
    color: #111;
    background: #f4f4f4; /* 「Q」タイトルの背景色 */
    padding: 8px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#QandA-2 dt:first-child {border-top: none;}
#QandA-2 dt:before {content: "Q.";font-weight: bold;margin-right: 8px;}
#QandA-2 dd {padding: 16px 16px 24px 30px;margin: 0;line-height: 140%;}
#QandA-2 dd {color: #696969;}

/**********     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     **********/

.toi_box {
    width: 95%;
    margin: 10px auto;
    border: solid 3px #000;
    display: flex;
    flex-wrap: wrap;
}

.toi_title{
    display: flex;
    align-items: center;
    width: 90%;
    padding: 10px 4%;
    font-size: 2.4rem;
    font-weight: 500;
}

.toi_title img{width: 50px;margin: 0 10px 0 0;}

.form_box {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 10%;
}

.scr {width: 30%;margin: 0 0 0 8%;}

.item{
    box-sizing: border-box;
    width:60%;
    margin: 5px auto;
    display: flex;
    margin: 20px 0 0 0;
}

.qr {width: 40%;}
.qr img {width: 120px;}
.toi_text {width: 95%;font-size: 1.8rem;}
.qr2 {width: 80%;}
.qr2 img {width: 25%;margin: 20px 30% 20px 45%;}

.btn,a.btn,button.btn {
    width: 280px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 2.5rem;
}

a.btn--orange {color: #fff;background-color: #000;}
a.btn--orange:hover {color: #fff;background: #7d7d7d;}
a.btn-c {position: relative;padding: 1.5rem 2rem 1.5rem 2rem;}
a.btn-c i.fa {margin-right: 1rem;}

@media screen and (max-width: 768px){
    .item {width: 90%;margin: 10px auto;}
    .btn,a.btn,button.btn {max-width:240px;font-size: 1.4rem;}
    .btn-wrap-pc-sp {text-align:center;}
    .toi_box {border: solid 2px;display:block;}
    .toi_title img {width: 25px;}
    .toi_title {font-size: 1.6rem;width: 95%;}
    .form_box {width: 90%;margin: 0 auto;}
    .qr {width: 100%;text-align: center;}
    .qr img {width: 50%;margin: 20px 20% 20px 15%;}
    .toi_text {width:90%;font-size: 1.5rem;}
    .scr {width: 80%;margin: 0 0 0 10%;}

    .qr2 {width: 100%;}
    .qr2 img {width: 50%;margin: 20px 20% 20px 25%;}
}

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

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

@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;}
    img.fig     {width: 90%;margin: 10px 5%}
    .kadai_box  {width: 95%;display: block;}
    .kadai_img  {width: 80%;margin: 5px auto;}
    .kadai_list {width: 92%;margin: 10px auto;}
    .kadai_ul   {font-size: 1.5rem;}
    .point_box  {width: 98%;margin: 10px auto;}
    .point_title{font-size: 2.2rem;}
    .midashi    {height: 32px;font-size: 1.7rem;padding-left: 8px;}
    .point_desc {font-size: 1.6rem;}
    .lineup_box {width: 94%;}
    .lineup_midashi {font-size: 1.9rem;padding:10px; width: calc(70% + 20px);}
    .lbox {width: 95%;display: block;}
    .lineup_left {width: 95%;font-size: 1.6rem;margin: 10px auto 20px;}
    .lineup_right {width: 95%;}
    .lineup_cen {width: 98%;font-size: 1.6rem;}
    .last_box {width: 98%;}
    .last_img {width: 50%;}
    .last_text{width: 95%;font-size: 1.6rem;margin: -16px auto 10px;}
}