@charset "UTF-8";
@import url(all.css);
/* ###################### */
/* ######## 変数 ######## */
/* ###################### */
/* カラー */
/* パターン */
/* 書式 */
/* ###################### */
/* ######## 関数 ######## */
/* ###################### */
/*===============================================
  切り替え用
===============================================*/
.pc-none {
  display: none !important;
}

a[href^="tel:"] {
  pointer-events: none;
}

/*===============================================
  ページネーション
===============================================*/
.pagenation {
  padding-top: 48px;
}
.pagenation li {
  width: 30px;
  font-size: 1.3rem;
  line-height: 30px;
  margin: 5px 4px 0;
}

/*===============================================
  詳細ページ前後
===============================================*/
.paginated-link {
  padding-top: 24px;
  margin-top: 32px;
}
.paginated-link li {
  width: 110px;
}
.paginated-link li a {
  line-height: 1.625;
  letter-spacing: 0em;
}
.paginated-link li.prev-link a::before {
  margin-right: 16px;
}
.paginated-link li.next-link a::after {
  margin-left: 16px;
}

/*===============================================
  wrapper
===============================================*/
#wrapper {
  min-width: 1280px;
}

/*===============================================
  header
===============================================*/
#header .h-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 30px;
}
#header .h-logo {
  padding: 15px 0;
}
#header .h-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#header .h-right > * {
  margin-right: 20px;
}
#header .h-right > *:last-child {
  margin-right: 0;
}
#header .h-oth {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  padding-right: 30px;
}
#header .h-oth > * {
  margin-bottom: 10px;
}
#header .h-oth > *:last-child {
  margin-bottom: 0;
}
#header .htels {
  flex-direction: row;
  padding-right: 10px;
}
#header .htels .com-replace {
  margin-top: 0;
  margin-left: 8px;
}

/*===============================================
  footer
===============================================*/
#footer {
  padding: 70px 0 63px;
}
#footer::before {
  padding-top: min(223px, 11.615%);
  top: 0;
  margin-top: max(-173px, -9.011%);
}
#footer .f-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#footer .f-info {
  font-size: 1.6rem;
  line-height: 1.875;
  padding-top: 23px;
}
#footer .f-info .add {
  margin-bottom: 6px;
}
#footer .f-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  max-width: 640px;
  margin-top: -30px;
  padding-bottom: 69px;
}
#footer .f-right > * {
  margin-top: 30px;
  margin-left: 30px;
}
#footer .f-right > *:first-child {
  margin-left: 0;
}
#footer .ftels {
  justify-content: flex-end;
  flex-direction: row;
  width: 100%;
  order: 2;
}
#footer .ftels .com-replace {
  margin-top: 0;
  margin-left: 8px;
}
#footer .flinks {
  margin-left: 0;
}
#footer .flinks li {
  margin-right: 30px;
}
#footer .flinks li:last-of-type {
  margin-right: 0;
}
#footer .flinks-item {
  width: 180px;
  height: 56px;
}
#footer .flinks-item a {
  font-size: 1.6rem;
  letter-spacing: 0.025em;
}
#footer .sns li {
  width: 50px;
  margin-right: 25px;
}

/*フッターナビ
-----------------------------*/
.fnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 1080px;
  margin: -56px auto 0;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.fnav .fnav-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  max-width: 540px;
  margin-right: -2.3em;
}
.fnav .fnav-list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #171a16;
  letter-spacing: 0.025em;
  line-height: 2;
}
.fnav .fnav-list-item::after {
  content: "/";
  color: #ffc428;
  padding: 0 1em;
}
.fnav .fnav-list-item a {
  display: block;
  color: #171a16;
  transition: all 0.12s;
}
.fnav .fnav-list-item a:hover {
  text-decoration: none;
  color: #ffa524;
}
.fnav .fnav-list-item.current a {
  color: #ffa524;
}

/*コピーライト
-----------------------------*/
div.copy {
  padding: 5px 0;
}
div.copy p {
  font-size: 1.4rem;
  letter-spacing: 0.025em;
  line-height: 1.78572;
}

/*===============================================
  fixed固定
===============================================*/
/*===============================================
  visual
===============================================*/
/*メインビジュアル
-----------------------------*/
.main-visual {
  height: clamp(560px, 40.625vw, 780px);
  background-size: min(529px, 27.553%), min(781px, 40.6771%), min(360px, 18.75%), min(180px, 9.375%);
}
.main-visual::before {
  background-size: min(385px, 20.053%);
}
.main-visual::after {
  background-size: min(704px, 36.667%);
  background-position: right 21.958% bottom;
}
.main-visual .mv-box {
  width: min(1160px, 100% - 240px);
  filter: drop-shadow(7px 5px 5px rgba(159, 155, 145, 0.32));
}
.main-visual .mv-box .catch {
  width: clamp(540px, 35.209vw, 676px);
  height: clamp(400px, 26.042vw, 500px);
}
.main-visual .mv-box .catch::before {
  width: max(172px, 30.178%);
  height: 184px;
  top: 10px;
  right: -63px;
}
.main-visual .mv-box .catch::after {
  width: 128px;
  height: 97px;
  left: 16px;
  bottom: -60px;
}
.main-visual .mv-box .catch span {
  width: 71.746%;
  margin-left: 9.764%;
}

/*サブビジュアル
-----------------------------*/
.sub-visual {
  height: clamp(320px, 21.355vw, 410px);
  background-size: min(435px, 22.65625%), min(220px, 11.4584%);
  padding-left: max(80px, 50vw - 720px);
}
.sub-visual::before {
  width: calc(100% - 40px);
  max-width: 1780px;
}
.sub-visual::after {
  padding-top: min(190px, 9.896%);
  bottom: 10px;
}
.sub-visual .sv-box {
  width: min(732px, 43.572%);
  padding: 47px 0;
}
.sub-visual .sv-box::before {
  filter: drop-shadow(7px 5px 5px rgba(159, 155, 145, 0.32));
}
.sub-visual .sv-box .catch {
  font-size: clamp(4.2rem, 3.334vw, 6.4rem);
  line-height: 1.5;
  letter-spacing: 0.025em;
}
.sub-visual .sv-box .catch span {
  background: linear-gradient(to top, rgba(251, 227, 20, 0.4) 30px, transparent 30px);
}
.sub-visual .sv-box .catch span::before {
  -webkit-text-stroke-width: 11px;
}
.sub-visual .sv-box .catch span::after {
  -webkit-text-stroke-width: 8px;
}
.sub-visual.sv-e404 .sv-box {
  padding: 51px 0;
}
.sub-visual.sv-e404 .sv-box .catch {
  font-size: clamp(3.7rem, 2.917vw, 5.6rem);
  line-height: 1.57143;
}

/*===============================================
  グローバルナビ
===============================================*/
#nav.gnav {
  padding: 0 10px;
  border-bottom: solid 2px #ffc428;
  position: relative;
  z-index: 0;
}
#nav.gnav::after {
  content: "";
  width: 30px;
  height: 30px;
  background: url(../img/common/nav_pencil.png) no-repeat center/contain;
  position: absolute;
  left: calc(100% + 1px);
  bottom: 0;
  z-index: -2;
}
#nav.gnav .gnav-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
#nav.gnav .gnav-list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #171a16;
  letter-spacing: 0.025em;
  line-height: 1.75;
}
#nav.gnav .gnav-list-item::after {
  content: "/";
  color: #ffc428;
  margin: 0 1em;
}
#nav.gnav .gnav-list-item:last-of-type::after {
  display: none;
}
#nav.gnav .gnav-list-item a {
  display: block;
  color: #171a16;
  transition: all 0.12s;
}
#nav.gnav .gnav-list-item a:hover {
  text-decoration: none;
  color: #ffa524;
}
#nav.gnav .gnav-list-item.current a {
  color: #ffa524;
}

/*===============================================
  main#container
===============================================*/
#container {
  font-size: 1.6rem;
  line-height: 1.875;
  letter-spacing: 0.025em;
}

/*===============================================
  パンくずリスト
===============================================*/
.bread {
  height: 32px;
}
.bread .breadcrumbs {
  width: 1080px;
}
.bread .breadcrumbs li {
  font-size: 1.2rem;
  letter-spacing: 0.025em;
  line-height: 1.66667;
}

/*===============================================
  main共通
===============================================*/
.inbox {
  width: 1080px;
}

/*電話番号
-----------------------------*/
.com-tels .com-tel {
  font-size: 2.2rem;
  letter-spacing: 0.025em;
}
.com-tels .com-tel::before {
  width: 22px;
  height: 22px;
  margin-right: 8px;
}
.com-tels .com-tel a {
  margin-right: -0.025em;
}
.com-tels .com-replace {
  margin-top: 5px;
}

.com-replace img {
  height: 13px;
}

/*ボタン
-----------------------------*/
.com-btn {
  width: 254px;
  height: 60px;
}
.com-btn a {
  font-size: 1.6rem;
  letter-spacing: 0.025em;
  border-radius: 12px;
  box-shadow: 5px 4px #f68500;
}
.com-btn a::after {
  width: 13px;
  right: 14px;
}
.com-btn a:active {
  box-shadow: none;
  transform: translate(5px, 4px);
}

.com-mail-btn {
  width: 180px;
  height: 56px;
}
.com-mail-btn a {
  font-size: 1.6rem;
  letter-spacing: 0.025em;
}
.com-mail-btn a::before {
  width: 25px;
  height: 18px;
  margin-right: 7px;
}

/*テーブル
-----------------------------*/
.com-table {
  padding: 60px;
}
.com-table::before {
  border-radius: 12px;
}
.com-table tr th {
  width: 140px;
  padding: 8px 20px 8px 30px;
}
.com-table tr td {
  padding: 8px 30px 8px 20px;
}

.com-table2 tr th {
  padding: 8px 100px 8px 0;
}
.com-table2 tr td {
  padding: 8px 0 8px 100px;
}

/*テキストボックス
-----------------------------*/
.com-text-box {
  margin: -7px 0;
}
.com-text-box p {
  margin-right: -0.525em;
}
.com-text-box .mb {
  margin-bottom: 30px;
}

/*画像スタイル
-----------------------------*/
.com-img div {
  border-radius: 12px;
}
.com-img.clip::before {
  width: 98px;
  height: 85px;
}

/*背景パターン
-----------------------------*/
.com-plant1::after {
  padding-top: min(212px, 11.042%);
  margin-bottom: max(-152px, -7.917%);
}

.com-plant2::before {
  padding-top: min(273px, 14.21875%);
  margin-bottom: max(-190px, -9.896%);
}
.com-plant2::after {
  padding-top: min(223px, 11.615%);
  margin-bottom: max(-100px, -5.2084%);
}

.com-stationery1::before {
  min-width: 1400px;
  padding-top: min(553px, 28.803%);
  margin-bottom: max(-100px, -5.2084%);
}
.com-stationery1::after {
  min-width: 1480px;
  padding-top: min(660px, 34.375%);
  margin-bottom: max(-150px, -7.8125%);
}

.com-stationery2::before {
  min-width: 1320px;
  padding-top: min(313px, 16.3021%);
  margin-bottom: max(-40px, -2.084%);
}
.com-stationery2::after {
  min-width: 1480px;
  padding-top: min(660px, 34.375%);
  margin-bottom: max(-160px, -8.334%);
}

.com-book::before {
  padding-top: min(223px, 11.615%);
  margin-bottom: max(-120px, -6.25%);
}
.com-book::after {
  width: min(1880px, 100% - 40px);
  padding-top: min(214px, 11.146%);
  margin-bottom: max(-40px, -2.084%);
}

.com-blackboard::before {
  height: 48px;
  filter: drop-shadow(0 6px 2px #28413f);
}
.com-blackboard::after {
  height: 136px;
  background: url(../img/common/board_bottom.png) no-repeat right max(22px, 50vw - 938px) bottom 48px, linear-gradient(to top, #9c5b2a 48px, #bf783c 48px, #bf783c 60px, #28413f 60px, #28413f 66px, transparent 66px);
  filter: drop-shadow(0 0 2px #28413f);
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.com-ttl01 {
  font-size: 5.8rem;
  letter-spacing: 0.025em;
  margin-bottom: 50px;
}

/*サブタイトル
-----------------------------*/
.com-subttl01 {
  font-size: 3rem;
  line-height: 1.26667;
  letter-spacing: 0.025em;
  margin-bottom: 30px;
}
.com-subttl01 > span {
  background: linear-gradient(to top, rgba(85, 181, 14, 0.3) 12px, transparent 12px);
}

.com-subttl02 {
  font-size: 3rem;
  line-height: 1.53334;
  margin-bottom: 30px;
}
.com-subttl02 > span {
  background: linear-gradient(to top, rgba(255, 196, 40, 0.3) 20px, transparent 20px);
}

/*===============================================
  共有セクション
===============================================*/
/*コース案内
-----------------------------*/
.com-course-section {
  padding: 100px 0;
}
.com-course-section .course-ttl {
  margin-bottom: 66px;
}
.com-course-section .course-list-box {
  border-width: 4px;
  border-radius: 12px;
  padding: 38px 20px 46px;
  margin-bottom: 36px;
}
.com-course-section .course-list-box::before {
  width: 22px;
  height: 35px;
  top: -10px;
  left: 6px;
}
.com-course-section .course-list-box .box-ttl {
  margin-bottom: 40px;
}
.com-course-section .course-list-box .box-text {
  text-align: center;
}
.com-course-section .course-list-box .box-sub {
  text-align: center;
  padding-top: 50px;
}
.com-course-section .course-list-box .box-sub dt {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 30px;
}
.com-course-section .course-list-box:nth-of-type(2n) .box-ttl > span {
  background: linear-gradient(to top, rgba(85, 181, 14, 0.3) 20px, transparent 20px);
}

/*時間割
-----------------------------*/
.com-timetable-section {
  padding: 100px 0;
}
.com-timetable-section .inbox {
  width: 900px;
}
.com-timetable-section .timetable-time {
  font-size: 3.8rem;
  line-height: 1.31579;
  padding: 40px;
  border-radius: 12px;
}
.com-timetable-section .timetable-time::before {
  width: 197px;
  height: 166px;
  top: -70px;
  left: -90px;
}
.com-timetable-section .timetable-time::after {
  width: 200px;
  height: 184px;
  right: -90px;
  bottom: -140px;
}
.com-timetable-section .timetable-time dt {
  padding: 18px 120px 17px 0;
  margin-right: 160px;
}
.com-timetable-section .timetable-list {
  padding-top: 50px;
}
.com-timetable-section .timetable-list-item {
  font-size: 2.4rem;
  line-height: 1.16667;
  padding-left: 40px;
  padding-right: 120px;
  margin-bottom: 30px;
}
.com-timetable-section .timetable-list-item::before {
  width: 28px;
  height: 28px;
}
.com-timetable-section .timetable-list-item > span {
  background: linear-gradient(to top, rgba(22, 150, 48, 0.2) 12px, transparent 12px);
}

/*料金表
-----------------------------*/
.com-price-section {
  padding: 100px 0;
}
.com-price-section .price-list {
  padding: 52px 140px 60px;
  border-radius: 12px;
}
.com-price-section .price-list-box {
  margin-bottom: 52px;
}
.com-price-section .price-list-box .box-table {
  margin-top: 30px;
}
.com-price-section .price-list-box .box-table th {
  padding: 8px 74px 8px 0;
}
.com-price-section .price-list-box .box-table td {
  padding: 8px 0 8px 74px;
}

article[class$=-section]:nth-last-child(2).com-timetable-section {
  padding-bottom: 0;
}

/*===============================================
  トップページ
===============================================*/
.top .com-ttl01 {
  font-size: 5.4rem;
}
.top .com-ttl01 .b {
  font-size: 6.4rem;
}
.top .com-ttl01 > span.en {
  font-size: 3.2rem;
  padding: 0 calc(16px - 0.025em) 12px 16px;
  margin-bottom: 20px;
}
.top .com-ttl01 > span.en::before {
  height: 6px;
}
.top .com-ttl01 > span.en::after {
  width: 31px;
  height: 42px;
  left: calc(100% + 2px);
  bottom: 2px;
}

/*季節バナー
-----------------------------*/
.top-season {
  padding: 80px 0;
}
.top-season .season-box {
  border-radius: 12px;
  border-width: 4px;
}
.top-season .season-box .box-ttl {
  padding: 48px 0 34px;
}
.top-season .season-box .box-text {
  padding: 23px 0;
}
.top-season .season-box .box-text::before {
  width: calc(100% + 8px);
  height: 244px;
  left: -4px;
  bottom: 11px;
}
.top-season .season-box .box-text p {
  font-size: 2.6rem;
  line-height: 1.15385;
}

/*お知らせ
-----------------------------*/
.top-news {
  padding: 80px 0;
}
.top-news .news-ttl {
  margin-bottom: 110px;
}
.top-news .news-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 0;
}
.top-news .news-list {
  width: 740px;
}
.top-news .news-list .list-item {
  border-radius: 12px;
  margin-bottom: 20px;
}
.top-news .news-list .list-item::before {
  width: 22px;
  height: 35px;
  top: -10px;
  left: 10px;
}
.top-news .news-list .list-item a {
  padding: 9px 55px 9px 50px;
  border-radius: 12px;
}
.top-news .news-list .list-item .tag {
  font-size: 1.4rem;
  line-height: 1.57143;
}
.top-news .news-list .list-item .tag li {
  padding: 4px 0;
  margin-right: 10px;
}
.top-news .news-list .list-item .tag li span {
  padding: 0 6px;
  background: linear-gradient(to top, rgba(22, 150, 48, 0.2) 10px, transparent 10px);
}
.top-news .news-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

/*こんなお悩みありませんか？
-----------------------------*/
.top-worries {
  padding: 96px 0 40px;
}
.top-worries::before {
  height: calc(100% + 100px);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px));
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px));
}
.top-worries::after {
  width: min(1780px, 100% - 40px);
  padding-top: min(446px, 23.23%);
  background-size: auto 76.234%, auto 93.274%;
  bottom: 0;
  margin-bottom: max(-260px, -13.542%);
}
.top-worries .worries-ttl {
  margin-bottom: 60px;
}
.top-worries .worries-list-wrap {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: -40px;
  margin-bottom: 70px;
}
.top-worries .worries-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: calc(50% - 20px);
  padding: 35px 20px;
  border-radius: 12px;
  margin-top: 40px;
}
.top-worries .worries-list::after {
  width: 150px;
  height: 174px;
  right: 19px;
}
.top-worries .worries-list:nth-of-type(2n)::after {
  right: 6px;
}
.top-worries .worries-list-item {
  font-size: 2.2rem;
  line-height: 1.9091;
}
.top-worries .worries-list-item:nth-of-type(2n + 1) span {
  background: linear-gradient(to top, rgba(255, 196, 40, 0.4) 12px, transparent 12px);
}
.top-worries .worries-list-item:nth-of-type(2n) span {
  background: linear-gradient(to top, rgba(255, 165, 36, 0.4) 12px, transparent 12px);
}
.top-worries .reason-btn {
  width: 330px;
  height: 70px;
  margin: 0 auto;
}

/*弘友私塾にお任せください！
-----------------------------*/
.top-about {
  padding: 176px 0 100px;
}
.top-about::before {
  margin-bottom: max(-117px, -6.094%);
}
.top-about::after {
  margin-bottom: max(-200px, -10.417%);
}
.top-about .about-ttl {
  margin-bottom: 70px;
}
.top-about .about-in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.top-about .about-text {
  width: 560px;
}
.top-about .about-img {
  width: 474px;
}
.top-about .about-img::before {
  top: -40px;
  left: -36px;
}

/*コース・料金
-----------------------------*/
.top-course {
  padding: 100px 0 90px;
}
.top-course .course-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-top: -24px;
}
.top-course .course-list-item {
  width: 344px;
  height: 280px;
  border-radius: 12px;
  border-width: 4px;
  margin-top: 24px;
  margin-right: 24px;
}
.top-course .course-list-item:nth-of-type(3n), .top-course .course-list-item:last-of-type {
  margin-right: 0;
}
.top-course .course-list-item:nth-of-type(3n + 2) {
  transform: translateY(20px);
}
.top-course .course-list-item a {
  padding-bottom: 21px;
}
.top-course .course-list-item a::after {
  width: 22px;
  height: 22px;
  background-size: 6px;
  top: 16px;
  right: 16px;
}
.top-course .course-list-item:nth-of-type(2n + 1) {
  box-shadow: 5px 4px #f68500;
}
.top-course .course-list-item:nth-of-type(2n + 1) a::after {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ffa524;
}
.top-course .course-list-item:nth-of-type(2n) {
  box-shadow: 5px 4px #169630;
}
.top-course .course-list-item:nth-of-type(2n) a::after {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #55b50e;
}

/*弘友私塾が選ばれる理由
-----------------------------*/
.top-reason {
  padding: 100px 0;
}
.top-reason::after {
  width: 100%;
  padding-top: min(394px, 20.521%);
  margin-bottom: 0;
}
.top-reason .reason-ttl {
  margin-bottom: 60px;
}
.top-reason .reason-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: -45px;
  margin-bottom: 70px;
}
.top-reason .reason-list-item {
  width: calc(50% - 35px);
  margin-top: 45px;
}
.top-reason .reason-list-item .item-img {
  width: 460px;
  margin: 0 7px 0 auto;
  transform: rotate(-4deg);
}
.top-reason .reason-list-item .item-txt {
  width: 420px;
  padding: 21px 24px 25px;
  border-radius: 12px;
  margin-top: -65px;
}
.top-reason .reason-list-item .item-txt p {
  font-size: 2.2rem;
  line-height: 1.36364;
}
.top-reason .reason-list-item .item-txt p span {
  background: linear-gradient(to top, rgba(85, 181, 14, 0.2) 12px, transparent 12px);
}
.top-reason .reason-list-item .item-txt p span::before {
  font-size: 3.8rem;
  margin-right: 8px;
}
.top-reason .reason-btn {
  width: 300px;
  height: 70px;
  margin: 0 auto;
}

/*入塾までの流れ
-----------------------------*/
.top-flow {
  padding: 100px 0 170px;
}
.top-flow .flow-list {
  padding-bottom: 30px;
  margin-top: -40px;
}
@media screen and (max-width: 1850px) {
  .top-flow .flow-list {
    width: 1180px;
    margin: -40px auto 0;
  }
}
.top-flow .flow-list-item {
  width: 322px;
  margin: 40px 20px 0;
}
.top-flow .flow-list-item::after {
  width: 22px;
  height: calc(100% - 29px);
  left: calc(100% + 9px);
}
.top-flow .flow-list-item:nth-of-type(2n) {
  transform: translateY(30px);
}
@media screen and (max-width: 1850px) {
  .top-flow .flow-list-item:nth-of-type(5) {
    transform: translateY(30px);
  }
}

/*リンクセクション
-----------------------------*/
.top-links {
  padding: 130px 0;
}
.top-links .links-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -110px;
}
.top-links .links-list-item {
  width: calc(50% - 20px);
  height: 200px;
  margin-top: 110px;
}
.top-links .links-list-item a {
  border-radius: 12px;
  padding: 20px;
}
.top-links .links-list-item a::before {
  width: 388px;
  height: 340px;
  left: 20px;
}
.top-links .links-list-item a::after {
  width: 22px;
  height: 22px;
  top: 30px;
  right: 30px;
}
.top-links .links-list-item:nth-of-type(2n + 1) a::after {
  box-shadow: 0 0 0 4px #ffa524, 0 0 0 7px #fff;
}
.top-links .links-list-item:nth-of-type(2n) a::after {
  box-shadow: 0 0 0 4px #55b50e, 0 0 0 7px #fff;
}

/*===============================================
  弘友私塾について
===============================================*/
/*ご挨拶
-----------------------------*/
.about-greeting {
  padding: 100px 0;
}
.about-greeting .greeting-in::after {
  content: "";
  display: block;
  clear: both;
}
.about-greeting .greeting-img {
  width: 470px;
  float: right;
  margin: 7px 0 0 68px;
}
.about-greeting .name {
  font-size: 1.8rem;
  line-height: 1.66667;
  padding-top: 37px;
}

/*弘友私塾が選ばれる理由
-----------------------------*/
.about-reason {
  padding: 100px 0;
}
.about-reason .reason-ttl {
  margin-bottom: 70px;
}
.about-reason .reason-list-box {
  min-height: 230px;
  padding-left: 435px;
  margin-bottom: 60px;
  position: relative;
  z-index: 0;
}
.about-reason .reason-list-box .box-ttl {
  margin-bottom: 40px;
}
.about-reason .reason-list-box .box-ttl > span::before {
  font-size: 3.8rem;
  margin-right: 15px;
}
.about-reason .reason-list-box .box-img {
  width: 390px;
  position: absolute;
  top: 0;
  left: 0;
}
.about-reason .reason-list-box .box-img::before {
  width: 77px;
  height: 46px;
  top: 6px;
  left: -16px;
}

/*合格実績
-----------------------------*/
.about-record {
  padding: 100px 0;
}
.about-record .record-list {
  padding: 52px 140px 60px;
  border-radius: 12px;
}
.about-record .record-list-box {
  margin-bottom: 52px;
}

/*教室の様子
-----------------------------*/
.about-gallery {
  padding: 100px 0 110px;
}
.about-gallery .gallery-ttl {
  margin-bottom: 60px;
}
.about-gallery .gallery-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -30px;
}
.about-gallery .gallery-list-item {
  width: 340px;
  margin-top: 30px;
  margin-right: 30px;
}
.about-gallery .gallery-list-item:nth-of-type(3n), .about-gallery .gallery-list-item:last-of-type {
  margin-right: 0;
}
.about-gallery .gallery-list-item div {
  border-radius: 12px;
}

/*塾概要
-----------------------------*/
.about-info {
  padding: 100px 0;
}
.about-info .info-in {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.about-info .info-table {
  width: 580px;
}
.about-info .info-table td .replace {
  padding: 8px 0 7px;
}
.about-info .info-table td .replace img {
  height: 15px;
}
.about-info .info-map {
  width: 470px;
  border-radius: 12px;
}

/*===============================================
  小学生
===============================================*/
/*生徒が勉強を
「楽しい！」と思えるように。
-----------------------------*/
.elementary-about {
  padding: 100px 0;
}
.elementary-about .about-ttl {
  font-size: 5.4rem;
  line-height: 1.66667;
  margin-bottom: 70px;
}
.elementary-about .about-ttl .b {
  font-size: 5.8rem;
  line-height: 1;
}
.elementary-about .about-ttl > span {
  display: block;
  margin: -18px 0;
}
.elementary-about .about-in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.elementary-about .about-img {
  width: 441px;
}
.elementary-about .about-img::before {
  top: -30px;
  left: 16px;
}
.elementary-about .about-text {
  width: 595px;
}

/*===============================================
  中学生
===============================================*/
/*その場しのぎではない、
本物の学力を身につけるために。
-----------------------------*/
.junior-about {
  padding: 100px 0;
}
.junior-about .about-ttl {
  font-size: 5.4rem;
  line-height: 1.66667;
  margin-bottom: 70px;
}
.junior-about .about-ttl > span {
  display: block;
  margin: -18px 0;
}
.junior-about .about-in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.junior-about .about-img {
  width: 392px;
}
.junior-about .about-img::before {
  top: -30px;
  right: 16px;
  transform: scale(-1, 1);
}
.junior-about .about-text {
  width: 640px;
}

/*===============================================
  高校生
===============================================*/
/*志望校合格への確かな学力を、
共に築きましょう。
-----------------------------*/
.high-about {
  padding: 100px 0;
}
.high-about .about-ttl {
  font-size: 5.4rem;
  line-height: 1.66667;
  margin-bottom: 70px;
}
.high-about .about-ttl > span {
  display: block;
  margin: -18px 0;
}
.high-about .about-in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.high-about .about-img {
  width: 490px;
}
.high-about .about-img::before {
  top: -30px;
  left: 16px;
}
.high-about .about-text {
  width: 531px;
}

/*==================================================
 ニュース一覧
================================================== */
.news-contents {
  padding: 100px 0;
}
.news-contents .news-list .list-item {
  border-radius: 12px;
  margin-bottom: 20px;
}
.news-contents .news-list .list-item::before {
  width: 22px;
  height: 35px;
  top: -10px;
  left: 10px;
}
.news-contents .news-list .list-item a {
  padding: 24px 55px 24px 50px;
  border-radius: 12px;
}
.news-contents .news-list .list-item .tag {
  max-width: calc(100% - 101px);
  font-size: 1.4rem;
  line-height: 1.57143;
}
.news-contents .news-list .list-item .tag li {
  padding: 4px 0;
  margin-right: 10px;
}
.news-contents .news-list .list-item .tag li span {
  padding: 0 6px;
  background: linear-gradient(to top, rgba(22, 150, 48, 0.2) 10px, transparent 10px);
}
.news-contents .news-list .list-item .item-ttl {
  margin-top: 12px;
}

/*タグリスト
-----------------------------*/
.tag-select-box-wrap .tag-select-box {
  min-width: 240px;
  margin-bottom: 48px;
}
.tag-select-box-wrap .tag-select-box::after {
  right: 18px;
}
.tag-select-box-wrap .tag-select-box select {
  font-size: 1.4rem;
  line-height: 1.42858;
  padding: 12px 48px 12px 12px;
}

/*==================================================
 ニュース詳細
================================================== */
.news-detail {
  padding: 100px 0;
}
.news-detail .post-data {
  font-size: 1.4rem;
  line-height: 1.42858;
  margin-bottom: 20px;
}
.news-detail .news-d-box {
  padding: 50px;
  border-radius: 12px;
}

/*==================================================
 お問い合わせ
================================================== */
.contact-contents {
  padding: 100px 0;
}
.contact-contents .contact-table {
  margin-bottom: 56px;
}
.contact-contents .contact-table th {
  width: 350px;
  text-align: left;
  line-height: 2.375;
}
.contact-contents .contact-table th .optional-mark,
.contact-contents .contact-table th .required-mark {
  font-size: 1.4rem;
  line-height: 2;
  padding: 0 10px;
  margin-top: 5px;
}
.contact-contents .contact-table td {
  vertical-align: middle;
}
.contact-contents .contact-submits-wrap {
  padding-top: 32px;
}

/*==================================================
 お問い合わせ完了
================================================== */
.complete-contents {
  padding: 100px 0;
}
.complete-contents .complete-ttl {
  margin-bottom: 60px;
}
.complete-contents .complete-box {
  padding: 40px;
  border-radius: 12px;
  text-align: center;
}

/*==================================================
プライバシーポリシー
================================================== */
.privacy-contents {
  padding: 100px 0;
}
.privacy-contents .privacy-ttl {
  margin-bottom: 70px;
}
.privacy-contents .item-box {
  padding: 50px;
  border-radius: 12px;
  margin-bottom: 30px;
}

/*==================================================
 サイトマップ
================================================== */
.site-contents {
  padding: 100px 0;
}
.site-contents .site-list {
  width: 800px;
  padding: 40px;
  border-radius: 12px;
  margin: 0 auto;
}
.site-contents .site-list li a {
  font-size: 1.8rem;
  line-height: 1.66667;
  padding: 15px 20px;
}

/*===============================================
  404エラー
===============================================*/
.error-contents {
  padding: 100px 0;
}
.error-contents .error-text {
  padding: 40px;
  border-radius: 12px;
}