@charset "UTF-8";
@font-face {
    font-family: "Open Sans";
    src:url("../fonts/OpenSans.ttf") format("truetype"),
}

body {
    font-family: "Open Sans",'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;
    font-size: 16px;
    color: #5b5a5a;
}

#main-img {
    width: 100%;
}

#main-img img {
    width: 100%;
}

#main-img-sp {
    width: 100%;
    display: none;
}

#main-img-sp img {
    width: 100%;
}

.cont-ajust {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    margin-top: 48px;
}

.cont-max {
    width: 100%;
    margin-top: 48px;
}

section h2 {
    background-color: #fcf4ea;
    border-left: solid 5px #f7ab00;
    width: 40%;
    padding-left: 2.5%;
    font-size: 2rem;
    margin-bottom: 24px;
    color: #f7ab00;
    background:linear-gradient(-135deg, transparent 40px, #fcf4ea 0);
}

.cont-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items:center;
}

.reverse {
    flex-direction: row-reverse;
}

.halfbox-img {
    width: 48%;
}

.halfbox-text {
    width: 43%;
    padding: 2.5%;
    font-size: 1.25rem;
}

.youtube {
    width: 48%;
    aspect-ratio: 16 / 9;
  }

.youtube iframe {
    width: 100%;
    height: 100%;
}

.office-cont {
    width: 32%;
    text-align: center;
}

.office-cont img {
    width: 75%;
}

.office-cont h3 {
    margin-top: 24px;
    font-size: 1.5rem;
}

.seats {
    font-size: 1.5rem;
}

.cafeimg {
    margin-bottom: 17.6px;
}

.cafetitle {
    margin-bottom: 17.6px;
}

.office-text {
    font-size: 1.25rem;
    padding: 2.5%;
}

.studybox-img {
    width: 47%;
}

.studybox-text {
    width: 44%;
    padding: 2.5%;
}

.studybox-text h3 {
    text-align: center;
    font-size: 1.5rem;
}

.studybox-text p {
    margin-top: 24px;
    font-size: 1.25rem;
}

.beginner-text {
    width: 94%;
    margin:24px 3% 0 3%;
}

.beginner-text h3 {
    text-align: center;
    font-size: 1.5rem;
    color: #f7ab00; 
}

.beginner-text p {
    margin-top: 12px;
    text-align: left;
    font-size: 1.25rem;
}

.staff-cont-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.staff-cont {
    width: 30%;
}

.sc_underspace {
    margin-bottom: 48px;
} 

.staff-cont img {
    width: 75%;
    margin: auto;
    display: block;
}

.staff-cont h3 {
    margin-top: 24px;
    font-size: 1.25rem;
}

.staff-cont h3 span {
    color: #f7ab00;
}

.staff-text {
    margin-top: 24px;
}

.flow-cont {
    width: 94%;
    margin:0 3% 0 3%;
}

.flow-cont h3 {
    padding: 12px;
    font-size: 1.5rem;
    text-align: center;
    background-color: #f7ab00;
    color: #ffffff;
}

.flow-cont p {
    padding: 12px;
    font-size: 1.25rem;
    text-align: center;
    background-color: #fcf4ea;
}

.flow-text {
    width: 94%;
    margin:24px 3% 0 3%;
}

.flow-text h3 {
    text-align: center;
    font-size: 1.5rem;
    color: #f7ab00; 
}

.flow-text p {
    margin-top: 12px;
    text-align: center;
    font-size: 1.25rem;
}

.flow-underarrow {
    margin: 12px 0;
    width: 50px;
}

.access-text dt {
    font-size: 1.25rem;
    color: #f7ab00; 
}

.access-text dd {
   margin-bottom: 8px;
}

.transportation-title {
    font-size: 1.5rem;
    color: #f7ab00; 
}

.transportation-text {
    margin-top: 12px;
    width: 94%;
    font-size: 1.25rem;
    line-height: 2;
}

.inquiry-title {
    color: #f7ab00; 
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.inquiry-btns {
    margin-top: 24px;
    font-size: 1.25rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#h-tel,#h-mail {
    width: 40%;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    text-align: center;
    background-color: #f7ab00; 
    color: #fff;
    box-shadow: 0 1px 2px #999;
    transition: .5s;
}

.inquiry-flow:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    text-decoration: none;
    cursor: pointer;
}

#h-tel a,#h-mail a {
    display: block;
    padding:12px 0;
    line-height:180%;
}

.sns-title {
    margin: 24px 0 24px 0;
}

.snsicon li {
    display: inline-block;
}

.snsbtniti {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    max-width: 600px;/* ボタンを設置する場所の最大横幅 */
    margin: 0 auto;/* ボタンを中央へ */
}
  
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
    padding: 0!important;
    list-style-type: none!important;
}
  
/* ボタン同士の余白調整 */
.snsbtniti li {
    flex: 0 0 20%;/* ボタンを5つ並びへ */
    text-align: center!important;
}
  
/* ボタン全体 */
.flowbtn {
    font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
    position: relative;
    display: inline-block;
    width: 75px; /* 背景横幅 */
    height: 65px;/* 背景高さ */
    font-size: 30px;/* アイコンサイズ */
    border-radius: 4px;
    color: #fff!important;/* ボタン内カラー */
    transition: .5s;
    text-decoration: none;
    box-shadow: 0 1px 2px #999;
    margin-bottom:10px;/* ボタン下余白 */
}
  
/* アイコンの位置を少し下げる */
.flowbtn i {
    position: relative;
    top: 5px;
}
  
/* ボタン内テキスト調整 */
.flowbtn div {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
}
  
/* ボタンマウスホバー時少し浮き上がる */
.flowbtn:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    text-decoration: none;
    cursor: pointer;
}
  
/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn i.fa-brands.fa-instagram,.flowbtn i.fa-brands.fa-amazon {
    font-size: 35px;
}

/* litalico背景 */
.my_litalico1 {
    background: #8eaf29;
}

/* Threads背景 */
.my_threads1 {
    background: #000;
}
  
/* エックス背景 */
.my_x1 {
    background: #000;
}
  
/* Instagram紫グラデ背景 */
.my_instagram1 {
   background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* LINE背景 */
.my_line1 {
    background: #00b900;
}

.recruit-title {
    margin: 24px 0 24px 0;
}

.recruit-text {
    margin-top: 12px;
    text-align: center;
    font-size: 1.25rem;
}

.recruit-btn-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#recruit-btn {
    width: 40%;
    margin-top: 24px;
    font-size: 1.25rem;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    text-align: center;
    background-color: #f7ab00; 
    color: #fff;
    box-shadow: 0 1px 2px #999;
    transition: .5s;
}

#recruit-btn a {
    display: block;
    padding-top: 24px;
    padding-bottom: 24px;
}

footer {
    width: 100%;
    background-color: #f7ab00; 
    margin-top: 48px;
    padding-top: 25px;
    padding-bottom: 20px;
    box-shadow: 0.5px 0px 2px 0.5px #777;
}

#f_logo {
    width: 100%;
    max-width: 180px;
    margin: auto;
    margin-bottom: 25px;
}

#f_cont-box {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}

.f_cont {
    width: 32%;
    color: #ffffff;
}

.f_cont h3 {
    font-size: 1.5rem;
    text-decoration:underline; 
    text-decoration-color:#ffffff;
    text-underline-offset: 6px;
}

.f_cont h3 span {
    background-color: #ffffff;
    color: #f7ab00;
    font-size: 2rem;
    font-weight: bold;
    padding: 2px;
    margin-right: 5px;
}

.f_cont_list {
    margin-top: 15px;
}

.f_cont_list li {
    margin-top: 10px;
    margin-left: 15px;
}

.f_cont_list li a {
    position: relative;
    display: inline-block;
}

.f_cont_list li a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 0;
    height: 1.5px;
    background-color: #ffffff;
    transition: .5s;
  }

.f_cont_list li a:hover::after {
    width: 100%;
}

#copywrite {
    width: 100%;
    padding: 5px 10px;
    font-size: 0.8rem;
    text-align: center;
    color: #ffffff;
}