@charset "UTF-8";
/*!
Theme Name: ムジカオハナ
Author: WEBUNIVERSE
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: webuniverse
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

WEBUNIVERSE is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
body {
  font-family: "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "小塚ゴシック Pro", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, "MS ゴシック", Osaka-mono, sans-serif;
  -webkit-text-size-adjust: 100%;
  background-color: #FAFAEE;
  color: #0E0E00;
  line-height: 2;
  font-size: 16px;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

/* メディアクエリ設定 */
/* パソコンで見たときは"pc"のclassが表示される */
.pc {
  display: block;
}

.sp {
  display: none;
}

/* スマホで見たときは"sp"のclassが表示される */
@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* SCSS設定 */
.container {
  max-width: 1080px;
  margin: 0 auto;
}

.text12 {
  font-size: 12px;
}

/*--------------------------------------------------------------
# header.php
--------------------------------------------------------------*/
/*ヘッダー*/
.header {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  font-weight: 500;
  font-size: 16px;
  height: auto;
  background-image: url(images/hedder.png);
  background-size: contain;
  background-repeat: no-repeat;
  color: #151417;
  overflow: hidden;
}

.logo {
  width: 160px;
  height: auto;
  margin: -30px auto 30px;
}
.logo img {
  width: 100%;
  margin-top: 40px;
  padding-bottom: -16px;
  text-align: center;
}

@media (max-width: 768px) {
  .kengaku {
    width: 240px;
  }
}
.kengaku img {
  width: 240px;
}
@media (max-width: 768px) {
  .kengaku img {
    margin-top: 0px;
  }
}

.logo-flex {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .logo-flex {
    display: flex;
  }
}

.main-navigation {
  background-color: #FAFAEE;
  display: flex;
  justify-content: space-between;
}
.main-navigation ul {
  max-width: 100%;
  margin: 0 auto;
  margin-top: -16px;
  margin-bottom: 16px;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.main-navigation li {
  list-style: none;
  margin-left: 18px;
  padding-right: 12px;
  line-height: 1.2;
  border-right: 1px dotted #B1DD0C;
}
.main-navigation a {
  color: #464839;
}
.main-navigation a:hover {
  color: #B1DD0C;
  opacity: 0.8;
}

.navi_frame a {
  padding: 8px 12px;
  color: #fff;
  background-color: #57C3C3;
  border-right: 1px dotted #483C3C;
}
.navi_frame a:hover {
  color: #483C3C;
  opacity: 0.8;
}

/*ここからハンバーガーメニュー*/
/*メニューボタンを追加する*/
.drawer-menu {
  box-sizing: border-box;
  position: fixed;
  top: 10px;
  right: 0px;
  width: 420px;
  /*メニューの横幅*/
  height: 680px;
  /*メニューの縦幅*/
  transition-property: all;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transform-origin: right center;
  transform: perspective(500px) rotateY(90deg);
  opacity: 0;
  /*↓メニュー枠線のデザイン。ご自由に*/
  background: rgba(177, 221, 12, 0.9);
  box-shadow: 0 0 0 5px #fff;
  border: 1px dashed #ccc;
  padding: 0.2em 0.5em;
  color: #454545;
  border-radius: 10px 0 0 10px;
  /*↑メニュー枠線のデザイン*/
}

/*ボタンを押したときの左側の黒い部分*/
.close-menu {
  position: fixed;
  top: 10px;
  right: 360px;
  /*メニューの横幅を増やしたらrightも増やす*/
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  transition-property: all;
  transition-duration: 0.3s;
  transition-delay: 0s;
  visibility: hidden;
  opacity: 0;
}

.bar {
  position: absolute;
  top: 10px;
  left: 0;
  display: block;
  width: 40px;
  /*横線の幅*/
  height: 4px;
  /*横線の太さ*/
  background: #B1DD0C;
  /*ボタンの色*/
  transition: all 0.5s;
  transform-origin: left top;
}

.bar.middle {
  top: 20px;
  opacity: 1;
}

.bar.bottom {
  top: 30px;
  transform-origin: left bottom;
}

.menu-btn {
  position: fixed;
  display: block;
  top: 10px;
  /*ボタンの場所。右上にしたければtop: 10px*/
  right: 5px;
  width: 40px;
  height: 40px;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  color: #B1DD0C;
  z-index: 2147483647;
  /*重なり順を一番上に*/
}

.check:checked ~ .drawer-menu {
  transition-delay: 0.3s;
  transform: none;
  opacity: 1;
  z-index: 2147483645;
}

.check:checked ~ .contents {
  transition-delay: 0s;
  transform: translateX(-250px);
}

.check:checked ~ .menu-btn .menu-btn__text {
  visibility: hidden;
  opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
  width: 56px;
  transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
  opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
  width: 56px;
  top: 50px;
  transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
  transition-duration: 1s;
  transition-delay: 0.3s;
  background: rgba(0, 0, 0, 0.5);
  visibility: visible;
  opacity: 1;
  z-index: 2147483646;
  /*重なり順を一番上に*/
}

.menu-btn:hover .bar {
  background: #ffffff;
}

.menu-btn:hover .menu-btn__text {
  color: #B1DD0C;
}

.menu-btn__text {
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  margin: auto;
  color: #B1DD0C;
  font-family: sans-serif;
  transition: all 0.5s;
  display: block;
  visibility: visible;
  opacity: 1;
  font-size: 14px;
  font-weight: bold;
}

.check {
  display: none;
}

.drawer-menu ul {
  position: relative;
  width: 100%;
  list-style: none;
}

.drawer-menu li {
  /*各メニューリストの左余白*/
  border-bottom: 1px dotted #fff;
  /*各メニューリストの下線*/
}

.drawer-menu li a {
  display: block;
  height: 50px;
  margin-left: 30px;
  /*各メニューリストの縦幅*/
  line-height: 50px;
  /*各メニューリストの縦幅*/
  font-size: 16px;
  color: #141414;
  font-weight: bold;
  transition: all 0.8s;
}

.drawer-menu li a:hover {
  color: #3B4233;
  cursor: pointer;
}

.topimage-pc {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage.png);
  background-size: cover;
  height: 540px;
  text-align: left;
  padding-top: 40px;
  position: relative;
}

#slide {
  max-width: 840px;
  height: 460px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
}

#slide img {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 28px;
  border: 1px solid #fff;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
@media (max-width: 768px) {
  #slide img {
    margin: 0 auto;
    margin-top: 140px;
    max-width: 400px;
    height: auto;
  }
}

/*ムジカオハナについて*/
.fp_about {
  text-align: center;
  padding-bottom: 120px;
}
.fp_about img {
  margin: 0px auto;
  max-width: 70%;
}
@media (max-width: 768px) {
  .fp_about img {
    max-width: 96%;
  }
}

.yellow {
  border-bottom: 4px solid yellow;
  padding-bottom: 1px;
}

.fp_feature h3 {
  font-size: 18px;
  color: #57C3C3;
  font-weight: 500;
}
.fp_feature p {
  font-size: 15px;
  line-height: 1.5;
}

.fp_feature_box {
  max-width: 320px;
  margin: 10px auto;
  padding: 20px 18px;
  background-color: #fff;
  text-align: center;
  border: 1px solid #43C6AC;
  border-radius: 8px;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
.fp_feature_box img {
  margin: 0 auto;
  max-width: 60%;
}
@media (max-width: 768px) {
  .fp_feature_box p {
    text-align: left;
    padding: 10px;
    line-height: 1.8;
  }
}

fp_feature_link {
  max-width: 90%;
  margin: 20px auto;
}
fp_feature_link:hover {
  opacity: 0.6;
  translate: 0.3S;
}
@media (max-width: 768px) {
  fp_feature_link {
    max-width: 60%;
    margin: 30px auto;
    margin-top: 0px;
  }
}
fp_feature_link img {
  max-width: 100%;
}

.fp_feature_button {
  display: block;
  max-width: 350px;
  margin: 20px auto;
  padding: 8px 8px;
  color: #fff;
  background-color: #57C3C3;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  text-align: center;
}
@media (max-width: 768px) {
  .fp_feature_button {
    max-width: 300px;
  }
}
.fp_feature_button:hover {
  opacity: 0.6;
  color: #fff;
}

.fp_institution {
  background-image: url(images/topimage.png);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 20px;
  padding-bottom: 80px;
}
.fp_institution h2 img {
  margin: 0px auto;
  max-width: 40%;
}
@media (max-width: 768px) {
  .fp_institution h2 img {
    max-width: 80%;
  }
}

.institution_name {
  margin-bottom: -24px;
}

.institution {
  max-width: 100%;
}

.fp_institution_taisho {
  padding: 12px 18px;
  background-color: #B1DD0C;
}

.fp_institution_ryoho {
  display: flex;
  justify-content: space-between;
  max-width: 94%;
  margin: 0 auto;
}

.fp_institution_ryoho_text {
  padding: 8px 4px;
  background-color: #F3D336;
  border-radius: 8px;
  color: #3B4233;
  font-size: 10px;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.4);
}
.fp_institution_ryoho_text p {
  font-size: 8px;
}

.left {
  text-align: left;
  margin-left: 20px;
}

.fp_ryoiku {
  text-align: center;
  padding-bottom: 80px;
}
.fp_ryoiku img {
  max-width: 60%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .fp_ryoiku img {
    max-width: 90%;
  }
}
.fp_ryoiku h2 img {
  margin: 0px auto;
  max-width: 60%;
}
@media (max-width: 768px) {
  .fp_ryoiku h2 img {
    max-width: 90%;
  }
}
@media (max-width: 768px) {
  .fp_ryoiku p {
    text-align: left;
    padding: 20px;
  }
}

.fp_staff {
  background-color: #fff;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 80px;
}
.fp_staff h2 img {
  margin: 0px auto;
  max-width: 56%;
}
@media (max-width: 768px) {
  .fp_staff h2 img {
    max-width: 90%;
  }
}

.fp_staff_contents {
  max-width: 780px;
  margin: 0 auto;
}

.fp_staff_box img {
  max-width: 80%;
}
@media (max-width: 768px) {
  .fp_staff_box img {
    max-width: 60%;
  }
}

.fp_qa {
  background-image: url(images/topimage.png);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 20px;
  padding-bottom: 80px;
}
.fp_qa h2 img {
  margin: 0px auto;
  max-width: 40%;
}
@media (max-width: 768px) {
  .fp_qa h2 img {
    max-width: 80%;
  }
}

.fp_qa_inner {
  max-width: 780px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #57C3C3;
  margin-bottom: 60px;
  text-align: left;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .fp_qa_inner {
    max-width: 96%;
    margin: 0 auto;
    margin-bottom: 40px;
  }
}

.fp_cta {
  text-align: center;
  margin: 60px auto;
}
.fp_cta img {
  max-width: 90%;
  margin: 0 auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
}
.fp_cta a {
  cursor: pointer;
}
.fp_cta a:hover {
  opacity: 0.6;
  color: #fff;
}

/*----------------------------------
ご利用料金　　　(price.php)
--------------------------------*/
.price_container {
  max-width: 880px;
  background-color: #fafafa;
  border: 1px solid #E6DFDF;
  margin: 60px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .price_container {
    max-width: 98%;
    margin: 0 auto;
  }
}
.price_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-top: 80px;
  margin-bottom: 40px;
  color: #fff;
  font-size: 24px;
  background: #57C3C3;
  text-align: center;
}
.price_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #57C3C3;
}
.price_container ul {
  list-style: none;
  padding-left: 60px;
  text-align: left;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .price_container ul {
    padding-left: 10px;
  }
}
.price_container img {
  max-width: 96%;
}

.price_text18 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
}

/*--------------------------------------------------------------
# Gクレフページ(gclef.php)
--------------------------------------------------------------*/
.gclef_topimage {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}
.gclef_topimage img {
  max-width: 100%;
  margin: 0 auto;
}

.gclef_about {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  margin: 0 auto;
  background-image: url(images/gclef-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.gclef_about_container {
  max-width: 880px;
  background-color: #ffffff;
  margin: 80px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border: 1px solid #B1DD0C;
  text-align: center;
  padding-top: 60px;
}
.gclef_about_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #fff;
  font-size: 24px;
  background: #B1DD0C;
  text-align: center;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
.gclef_about_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #B1DD0C;
}
.gclef_about_container img {
  max-width: 90%;
  margin: 0 auto;
}

.text15red {
  font-size: 15px;
  line-height: 1.4;
  color: #D05D5D;
  font-weight: 600;
}

.gclef_customervoice {
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 40px;
  background-color: #FAFAEE;
}
@media (max-width: 768px) {
  .gclef_customervoice {
    max-width: 100%;
    margin: 0 auto;
  }
}

.gclef_feature {
  max-width: 880px;
  margin: 0 auto;
  background-color: #FAFAEE;
  text-align: left;
  align-items: center;
  padding-top: 20px;
}
.gclef_feature img {
  max-width: 30%;
}
@media (max-width: 768px) {
  .gclef_feature img {
    max-width: 70%;
  }
}

.gclef_feature_inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 40px;
  line-height: 1.8;
}

.txt14 {
  font-size: 14px;
  padding-top: -10px;
}

.gclef_feature_green {
  padding: 8px 16px;
  background-color: #B1DD0C;
  max-width: 500px;
  margin: 0px auto;
  color: #fff;
  font-size: 24px;
  text-align: center;
  align-items: center;
}

.gclef_feature_contents h3 {
  border-bottom: 2px solid #fff10a;
  padding-bottom: 2px;
}

.gclef_customer {
  align-items: center;
  text-align: center;
  max-width: 96%;
  margin: 10px auto;
  padding: 12px;
}

.gclef_customer_box_face img {
  max-width: 90%;
}

.gclef_customer_box_text {
  color: #fff;
  font-weight: 600;
  background-color: #57C3C3;
}

.gclef_customer_box_write img {
  max-width: 100%;
}

.gclef_customer_box_textinner {
  padding: 0 16px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}

.gclef_jirei {
  padding-top: 60px;
}
@media (max-width: 768px) {
  .gclef_jirei {
    padding: 40px 24px;
  }
  .gclef_jirei p {
    text-align: left;
  }
}

.gclef_jirei_contents img {
  max-width: 60%;
}

.gclef_jirei_text {
  margin: 20px;
  padding: 12px;
  border-left: 2px solid #B1DD0C;
  border-right: 2px solid #B1DD0C;
  text-align: left;
}
.gclef_jirei_text p {
  font-size: 15px;
}

.gclef_feature_below {
  max-width: 880px;
  margin: 0 auto;
  background-color: #fff;
  padding-top: 80px;
  padding-bottom: 80x;
}

.gclef_feature_below_box {
  margin-bottom: 30px;
}

.gclef_feature_image {
  max-width: 60%;
  margin: 0 auto;
}

.gclef_feature_below_contents {
  text-align: left;
  max-width: 90%;
  margin: 0 auto;
}
.gclef_feature_below_contents h3 {
  font-size: 20px;
  font-weight: 600;
  color: #B1DD0C;
}
.gclef_feature_below_contents ul {
  text-align: left;
  list-style: none;
  margin-top: 30px;
  padding-right: 40px;
  padding-left: 20px;
}
.gclef_feature_below_contents li {
  padding-bottom: 2px;
  border-bottom: 1px dotted #B1DD0C;
}
.gclef_feature_below_contents img {
  display: block;
  max-width: 90%;
  margin: 0 auto;
}

.gclef_feature_below_contents_text {
  max-width: 90%;
  margin: 30px auto;
}

.gclef_ryoiku_top {
  text-align: center;
}

.feature_number {
  font-size: 80px;
  color: #B1DD0C;
  font-style: italic;
  font-weight: 700;
  font-family: "Franklin Gothic Medium";
  padding-right: 8px;
}
@media (max-width: 768px) {
  .feature_number {
    font-size: 48px;
  }
}

.gclef_feature_below_box_middle {
  padding-top: 40px;
  padding-bottom: 40px;
  margin: 0 auto;
  max-width: 100%;
}

.feature_strong {
  font-family: "Franklin Gothic Medium";
  font-weight: 600;
  font-size: 18px;
  padding-left: 8px;
  color: #B1DD0C;
}

.gclef_ryoiku {
  margin-top: 80px;
  padding-bottom: 80px;
}
.gclef_ryoiku h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  max-width: 400px;
  margin: 20px auto;
  color: #fff;
  font-size: 24px;
  background: #B1DD0C;
  text-align: center;
  margin-bottom: 40px;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
.gclef_ryoiku h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #B1DD0C;
}

.gclef_flow {
  max-width: 80%;
  margin: 80px auto;
  margin-bottom: 0px;
}

.gclef_flow_box {
  background-color: #fff;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
  border: 1px solid #B1DD0C;
  border-radius: 10px;
  max-width: 90%;
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 12px;
}
.gclef_flow_box p {
  line-height: 1.4;
}
@media (max-width: 768px) {
  .gclef_flow_box p {
    font-size: 18px;
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .gclef_flow_box img {
    max-width: 40%;
    margin: 0 auto;
  }
}

.flow_number {
  font-size: 30px;
  color: #B1DD0C;
  font-style: italic;
  font-weight: 700;
  font-family: "Franklin Gothic Medium";
  padding-right: 8px;
}
@media (max-width: 768px) {
  .flow_number {
    font-size: 20px;
  }
}

.gclef_ryoiku_contents {
  background-image: url(images/gclef-bg02.png);
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 880px;
  margin: 0 auto;
  border: 4px solid #B1DD0C;
  background-color: #fff;
  margin-bottom: 30px;
  padding: 20px;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
  .gclef_ryoiku_contents {
    max-width: 96%;
    margin: 0 auto;
  }
}

.gclef_ryoiku_monday {
  padding: 30px;
}
.gclef_ryoiku_monday p {
  line-height: 1.8;
}

.gclef_ryoiku_naiyo {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px dotted #B1DD0C;
  border-bottom: 1px dotted #B1DD0C;
  font-size: 20px;
  color: #FF515C;
  font-weight: 500;
}

.ryoiku_strong {
  font-size: 38px;
  color: #B1DD0C;
  font-weight: 700;
  margin-bottom: -2px;
}

.under_yellow {
  padding-bottom: 2px;
  border-bottom: 2px solid #fff10a;
}

.ryoiku_kokko {
  font-size: 24px;
  font-weight: 600;
  color: #57C3C3;
}

.gclef_ryoiku_event {
  padding-bottom: 40px;
  text-align: center;
}
.gclef_ryoiku_event img {
  max-width: 100%;
}

.gclef_schedule_bg {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  margin: 0 auto;
  background-image: url(images/gclef-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.gclef_schedule_container {
  max-width: 880px;
  background-color: #fff;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
}
.gclef_schedule_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #464839;
  font-size: 24px;
  background: #B1DD0C;
  text-align: center;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
.gclef_schedule_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #B1DD0C;
}

.gclef_ryoiku_sche {
  max-width: 100%;
  background-image: url(images/okepit-ryoiku-sche-bg.png);
  background-size: contain;
  background-repeat: repeat-y;
  padding-bottom: 120px;
}
.gclef_ryoiku_sche img {
  max-width: 70%;
  margin: 20px auto;
}

.gclef_schedule {
  max-width: 880px;
  margin: 60px auto;
}

.gclef_schedule_back {
  padding: 8px 16px;
  background-color: #B1DD0C;
  color: #fff;
}

.gclef_schedule_title {
  display: inline-block;
  width: 25%;
  font-weight: 400;
  font-family: "Times New Roman";
  text-align: left;
  align-items: baseline;
}

.gclef_schedule_text {
  width: 75%;
  text-align: left;
  padding-bottom: 30px;
  align-items: center;
  border-bottom: 1px dotted #57C3C3;
}

.gclef_schedule_schoolday {
  max-width: 96%;
  margin: 0 auto;
  border-radius: 16px;
  background-color: #FAFAEE;
  color: #464839;
  padding: 16px;
  text-align: center;
}
.gclef_schedule_schoolday h3 {
  font-size: 18px;
  margin-top: -20px;
  margin-bottom: 30px;
}

.gclef_institution {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  margin: 0px auto;
  margin-top: 80px;
  margin-bottom: 80px;
  background-image: url(images/gclef-bg02.png);
  background-size: cover;
}

.gclef_institution_container {
  max-width: 880px;
  background-color: #fff;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
}
.gclef_institution_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #464839;
  font-size: 24px;
  background: #B1DD0C;
  text-align: center;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
.gclef_institution_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #B1DD0C;
}
.gclef_institution_container p {
  max-width: 60%;
  margin: 0 auto;
  margin-top: -20px;
  font-size: 18px;
  color: #fff;
  background-color: #B1DD0C;
  font-weight: 600;
  padding: 4px 16px;
}

.gclef_institution_bg {
  text-align: center;
}

.gclef_institution_text {
  max-width: 80%;
  margin: 0 auto;
  background-color: #fff;
  font-size: 16px;
  color: #483C3C;
  line-height: 1.8;
  padding-bottom: 40px;
}

/*--------------------------------------------------------------
# オケピットページ(okepit.php)
--------------------------------------------------------------*/
.okepit_topimage {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}
.okepit_topimage img {
  max-width: 100%;
  margin: 0 auto;
}

.okepit_bg {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  margin: 0 auto;
  background-image: url(images/gclef-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.okepit_top_image {
  max-width: 880px;
  display: flex;
  justify-content: space-between;
}

.text15blue {
  font-size: 15px;
  font-weight: 300;
  color: #483C3C;
}

.okepit_top {
  margin-top: 60px;
  background-color: #fff;
}
.okepit_top p {
  color: #57C3C3;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .okepit_top p {
    font-size: 16px;
    padding: 0 12px;
  }
}

.okepit_top_image {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.okepit_top_image img {
  max-width: 24%;
  margin: 0 auto;
}

.okepit_container {
  max-width: 880px;
  background-color: #ffffff;
  margin: 80px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border: 1px solid #B1DD0C;
  text-align: center;
  padding-top: 60px;
}
@media (max-width: 768px) {
  .okepit_container h1 img {
    max-width: 80%;
  }
}
.okepit_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #fff;
  font-size: 24px;
  background: #57C3C3;
  text-align: center;
}
.okepit_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #57C3C3;
}

.okepit_top_text {
  background-color: rgba(243, 211, 54, 0.5);
  padding: 20px;
  max-width: 80%;
  margin: 40px auto;
}
@media (max-width: 768px) {
  .okepit_top_text {
    max-width: 90%;
    padding: 20px 12px;
  }
}

.okepit_top_text_title {
  font-size: 24px;
  color: #57C3C3;
}

.okepit_top_text_despri {
  font-size: 16px;
  color: #483C3C;
  line-height: 1.5;
  text-align: left;
  font-weight: 400;
}

.okepit_sst_container {
  max-width: 880px;
  background-color: #57C3C3;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
}
.okepit_sst_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #57C3C3;
  font-size: 24px;
  background: #fff;
  text-align: center;
}
.okepit_sst_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}


.okepit_sst_box {
  padding: 20px 10px;
  max-width: 96%;
  margin: 0 auto;
}
.okepit_sst_box img {
  max-width: 100%;
}

.okepit_sst img {
  max-width: 100%;
}


.okepit_sstup {
  max-width: 780px;
  margin: 0 auto;
}



.okepit_sstup_box {
  padding: 20px 10px;
  border: 1px solid #464839;
  background-color: #fff;
  max-width: 96%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .okepit_sstup_box {
    max-width: 90%;
    margin-bottom: 10px;
  }
}
.okepit_sstup_box ul {
  padding-top: 20px;
  text-align: center;
  list-style: none;
  padding-left: 0px;
}

.okepit_sstup_title {
  padding-bottom: 2px;
  border-bottom: 1px double #57C3C3;
}

.okepit_ryoho_category {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 10px;
  background-color: #57C3C3;
  color: #fff;
}

.okepit_sstup_image {
  display: flex;
  justify-content: space-between;
}
.okepit_sstup_image img {
  max-width: 50%;
}

.okepit_sstup_staff {
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 16px;
  background-color: #fff;
  border: 1px dotted #464839;
  padding: 20px;
  align-items: center;
  text-align: left;
}
@media (max-width: 768px) {
  .okepit_sstup_staff img {
    max-width: 50%;
  }
}
@media (max-width: 768px) {
  .okepit_sstup_staff {
    max-width: 90%;
  }
}

.okepit_event_container {
  max-width: 880px;
  background-color: #fff;
  margin: 0 auto;
  padding-top: 60px;
}
.okepit_event_container h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #fff;
  font-size: 24px;
  background: #57C3C3;
  text-align: center;
}
.okepit_event_container h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #57C3C3;
}

.okepit_ryoiku_sche {
  max-width: 100%;
  background-image: url(images/okepit-ryoiku-sche-bg.png);
  background-size: contain;
  background-repeat: repeat-y;
  padding-bottom: 120px;
  padding-top: 30px;
}
@media (max-width: 768px) {
  .okepit_ryoiku_sche {
    padding-top: 20px;
  }
}
.okepit_ryoiku_sche img {
  max-width: 70%;
  margin: 20px auto;
}

.okepit_schedule {
  max-width: 880px;
  margin: 60px auto;
}

.schedule_back {
  padding: 8px 16px;
  background-color: #57C3C3;
  color: #fff;
}

.okepitto_ryoiku_top {
  text-align: center;
}

.okepitto_ryoiku_contents {
  background-image: url(images/gclef-bg02.png);
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 780px;
  margin: 0 auto;
  border: 4px solid #57C3C3;
  background-color: #fff;
  margin-bottom: 30px;
  padding: 20px;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
  .okepitto_ryoiku_contents {
    max-width: 90%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

.okepitto_ryoiku_monday {
  padding: 30px;
  text-align: left;
}
@media (max-width: 768px) {
  .okepitto_ryoiku_monday {
    padding: 20px;
  }
}
.okepitto_ryoiku_monday p {
  line-height: 1.8;
}

.okepitto_ryoiku_monday_image {
  padding: 0px;
}
.okepitto_ryoiku_monday_image img {
  max-width: 100%;
}

.okepitto_ryoiku_naiyo {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px dotted #B1DD0C;
  border-bottom: 1px dotted #B1DD0C;
  font-size: 20px;
  color: #FF515C;
  font-weight: 500;
}

.okepitto_ryoiku_strong {
  font-size: 38px;
  color: #57C3C3;
  font-weight: 700;
  margin-bottom: -2px;
}

.under_yellow {
  padding-bottom: 2px;
  border-bottom: 2px solid #fff10a;
}

.okepit_schedule_title {
  display: inline-block;
  width: 25%;
  font-weight: 400;
  font-family: "Times New Roman";
  text-align: left;
  align-items: baseline;
}

.okepit_schedule_text {
  width: 75%;
  text-align: left;
  padding-bottom: 30px;
  align-items: center;
  border-bottom: 1px dotted #57C3C3;
}

.okepit_schedule_schoolday {
  max-width: 96%;
  margin: 0 auto;
  border-radius: 16px;
  background-color: #FAFAEE;
  color: #464839;
}
.okepit_schedule_schoolday h3 {
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.okepit_event {
  max-width: 880px;
  margin: 0px auto;
}
.okepit_event img {
  max-width: 100%;
}

.okepit_event_box {
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #464839;
  margin-top: 60px;
  box-shadow: 10px 10px 15px -10px rgba(255, 255, 255, 0.4);
}
.okepit_event_box p {
  padding: 18px;
  line-height: 1.7;
}

.okepit_event_box_imagetop img {
  margin-top: -40px;
}

.okepit_institution {
  max-width: 100%;
  background-image: url(images/gclef-bg02.png);
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 80px;
}
.okepit_institution h2 {
  position: relative;
  display: block;
  padding: 12px 42px;
  min-width: 120px;
  max-width: 400px;
  margin: 20px auto;
  margin-bottom: 40px;
  color: #fff;
  font-size: 24px;
  background: #57C3C3;
  text-align: center;
}
.okepit_institution h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #57C3C3;
}

.okepit_institution_inner {
  max-width: 780px;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  border: 1px solid #57C3C3;
  background-color: #fff;
  box-shadow: 10px 10px 15px -10px rgba(255, 255, 255, 0.4);
}
@media (max-width: 768px) {
  .okepit_institution_inner {
    max-width: 96%;
    margin: 0 auto;
  }
}
.okepit_institution_inner p {
  max-width: 60%;
  margin: 0 auto;
  margin-top: -20px;
  font-size: 18px;
  color: #fff;
  background-color: #57C3C3;
  font-weight: 600;
  padding: 4px 16px;
}

/*--------------------------------------------------------------
# グランデページ(grande.php)
--------------------------------------------------------------*/
.grande_about {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  margin: 0 auto;
  background-image: url(images/gclef-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.grande_about_container {
  max-width: 880px;
  background-color: #ffffff;
  margin: 80px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border: 1px solid #B1DD0C;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
.grande_about_container img {
  max-width: 90%;
  margin: 0 auto;
}
.grande_about_container p {
  padding: 10px 60px;
}

/*--------------------------------------------------------------
# 療育ページ(ryoiku.php)
--------------------------------------------------------------*/
.ryoiku {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.ryoiku-image {
  text-align: center;
}
.ryoiku-image img {
  width: 50%;
}
@media (max-width: 768px) {
  .ryoiku-image img {
    width: 90%;
  }
}

.ryoiku_inner {
  max-width: 780px;
  margin: 60px auto;
  background-color: #fff;
  border: 1px solid #57C3C3;
}
@media (max-width: 768px) {
  .ryoiku_inner {
    max-width: 96%;
    margin: 20px auto;
    margin-bottom: 40px;
  }
}

.ryoiku_container {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 40px;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
}

.ryoiku_category {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.ryoiku_category_link_h2 {
  margin-bottom: 20px;
  text-align: center;
}
.ryoiku_category_link_h2 h2 {
  font-size: 20px;
  max-width: 80%;
  margin: 30px auto;
  padding: 20px;
  background-color: #57C3C3;
  color: #fff;
}
@media (max-width: 768px) {
  .ryoiku_category_link_h2 h2 {
    max-width: 100%;
    font-size: 18px;
  }
}

.ryoiku_text {
  margin-bottom: 80px;
  text-align: center;
}
.ryoiku_text p {
  text-align: left;
}
.ryoiku_text img {
  max-width: 80%;
  margin: 0px auto;
  margin-top: 40px;
}

/*--------------------------------------------------------------
# 保護者様の声(customer-voice.php)
--------------------------------------------------------------*/
.voice_inner {
  max-width: 880px;
  margin: 60px auto;
  background-color: #fff;
  border: 1px solid #57C3C3;
  text-align: center;
}
.voice_inner h2 {
  max-width: 90%;
  background-color: #57C3C3;
  margin: 20px auto;
  padding: 12px;
  color: #fff;
  font-size: 24px;
}
@media (max-width: 768px) {
  .voice_inner {
    max-width: 96%;
    margin: 20px auto;
    margin-bottom: 40px;
  }
}

/*--------------------------------------------------------------
# 施設紹介(institution.php)
--------------------------------------------------------------*/
.institution {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.institution-image {
  text-align: center;
}
.institution-image img {
  width: 40%;
}
@media (max-width: 768px) {
  .institution-image img {
    width: 90%;
  }
}

.institution_inner {
  max-width: 980px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
  margin-bottom: 40px;
  border: 1px solid #E6DFDF;
}
@media (max-width: 768px) {
  .institution_inner {
    max-width: 96%;
    margin: 0 auto;
  }
}

.institution_container {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
}

.institution_description {
  padding: 8px 16px;
  border-bottom: 3px solid #B1DD0C;
  border-radius: 16px;
  max-width: 84%;
  margin: 30px auto;
}

.institution_description2 {
  padding: 8px 16px;
  border-radius: 16px;
  max-width: 84%;
  margin: 30px auto;
  border-bottom: 3px solid #57C3C3;
}

.institution_description3 {
  padding: 8px 16px;
  border-radius: 16px;
  max-width: 84%;
  margin: 30px auto;
  border-bottom: 3px solid #D05D5D;
}

.institution_iframe iframe {
  max-width: 100%;
  margin: 0px auto;
  margin-top: 30px;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .institution_iframe iframe {
    max-width: 100%;
    margin: 20px auto;
  }
}

.institution_title {
  padding: 2px 4px;
  background-color: #B1DD0C;
  color: #fff;
  margin-right: 10px;
}

.institution_title2 {
  padding: 2px 4px;
  background-color: #57C3C3;
  color: #fff;
  margin-right: 10px;
}

.institution_title3 {
  padding: 2px 4px;
  background-color: #D05D5D;
  color: #fff;
  margin-right: 10px;
}

.institution_gclef_button {
  display: block;
  max-width: 350px;
  margin: 20px auto;
  padding: 8px 8px;
  color: #fff;
  background-color: #B1DD0C;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border-radius: 20px;
}
@media (max-width: 768px) {
  .institution_gclef_button {
    max-width: 300px;
  }
}
.institution_gclef_button:hover {
  opacity: 0.6;
  color: #fff;
}

.institution_gclef_button2 {
  display: block;
  max-width: 350px;
  margin: 20px auto;
  padding: 8px 8px;
  color: #fff;
  background-color: #57C3C3;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border-radius: 20px;
}
@media (max-width: 768px) {
  .institution_gclef_button2 {
    max-width: 300px;
  }
}
.institution_gclef_button2:hover {
  opacity: 0.6;
  color: #fff;
}

.institution_gclef_button3 {
  display: block;
  max-width: 350px;
  margin: 20px auto;
  padding: 8px 8px;
  color: #fff;
  background-color: #D05D5D;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  border-radius: 20px;
}
@media (max-width: 768px) {
  .institution_gclef_button3 {
    max-width: 300px;
  }
}
.institution_gclef_button3:hover {
  opacity: 0.6;
  color: #fff;
}

/*--------------------------------------------------------------
# スタッフ紹介ページ(staff.php)
--------------------------------------------------------------*/
.staff_top {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage-company.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.staff_top h1 {
  padding: 24px 16px;
  color: #fff;
  background-color: #57C3C3;
  max-width: 400px;
  height: 8vh;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.1);
}

.staff_about {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  margin: 0 auto;
}

.staff_about_container {
  max-width: 880px;
  margin: 0px auto;
  text-align: center;
}
.staff_about_container h2 {
  margin: 30px auto;
}
.staff_about_container h2 img {
  max-width: 70%;
}

.staff_information {
  background-color: #fff;
  max-width: 290px;
  margin: 20px auto;
  border: 1px solid #B1DD0C;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.6);
}

.staff_information_okepit {
  background-color: #fff;
  max-width: 290px;
  margin: 20px auto;
  border: 1px solid #57C3C3;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.6);
}

.staff_information_top {
  background-color: #fff;
}
.staff_information_top p {
  color: #FF7054;
  font-weight: 600;
  font-size: 15px;
}
.staff_information_top img {
  max-width: 60%;
  margin: 0 auto;
  margin-top: -50px;
}

.staff_name {
  color: #FF7054;
  font-weight: 500;
  font-size: 18px;
}

.staff_round {
  padding: 4px 16px;
  background-color: #B1DD0C;
  border-radius: 4px;
  color: #fff;
  margin-right: 10px;
}

.staff_round_okepit {
  padding: 4px 16px;
  background-color: #57C3C3;
  border-radius: 4px;
  color: #fff;
  margin-right: 10px;
}

.staff_information_bottom {
  padding: 16px;
  line-height: 1.6;
  text-align: left;
}

.staff_memory {
  color: #B1DD0C;
  text-align: left;
  font-weight: 600;
  margin-bottom: 10px;
}

.staff_memory_okepit {
  color: #57C3C3;
  text-align: left;
  font-weight: 500;
  line-height: 1;
}

.staff_under {
  padding-bottom: 2px;
  border-bottom: 1px dotted #464839;
  text-align: left;
  font-size: 15px;
  margin-top: -10px;
}

.staff_information_bottom_text {
  margin-bottom: 30px;
}

/*----------------------------------
事業者情報(company.php)
--------------------------------*/
.company_top {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage-company.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.company_top h1 {
  padding: 24px 16px;
  color: #fff;
  background-color: #57C3C3;
  max-width: 400px;
  height: 8vh;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.1);
}

.company_inner {
  padding-bottom: 60px;
}
.company_inner h2 {
  width: 50%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .company_inner h2 {
    width: 100%;
  }
}
.company_inner h2 img {
  max-width: 100%;
  margin: 0 auto;
}

.company_about {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 80px;
  background-color: #fff;
  border: 1px solid #E6DFDF;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.3);
}
.company_about h3 {
  padding-left: 10px;
  border-left: 6px solid #57C3C3;
  text-align: left;
}
.company_about p {
  margin-top: 30px;
  text-align: left;
  line-height: 2.4;
}
@media (max-width: 768px) {
  .company_about {
    max-width: 96%;
    margin: 10px auto;
    padding: 30px;
  }
}

.company_about_inner {
  margin-bottom: 60px;
  text-align: center;
}
.company_about_inner img {
  max-width: 60%;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .company_about_inner img {
    max-width: 100%;
  }
}

.company_about_table {
  max-width: 600px;
  margin: 0 auto;
}
.company_about_table th {
  max-width: 30%;
  border-bottom: 1px dotted #57C3C3;
  border-top: 1px dotted #57C3C3;
  padding: 12px 16px;
}
.company_about_table td {
  max-width: 70%;
  border-bottom: 1px dotted #57C3C3;
  border-left: 1px dotted #57C3C3;
  border-top: 1px dotted #57C3C3;
  padding: 12px 16px;
  text-align: left;
}

/*--------------------------------------------------------------
# よくある質問(qa.php)
--------------------------------------------------------------*/
.qa {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.qa-image {
  text-align: center;
}
.qa-image img {
  width: 50%;
}
@media (max-width: 768px) {
  .qa-image img {
    width: 90%;
  }
}

.qa_inner {
  max-width: 780px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #57C3C3;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .qa_inner {
    max-width: 96%;
    margin: 0 auto;
    margin-bottom: 40px;
  }
}

.qa_container {
  max-width: 700px;
  margin: 0 auto;
  padding-top: 30px;
}

.qa_category {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.qa_category_link {
  margin-bottom: 30px;
  margin-top: 30px;
  padding: 8px 16px;
  color: #fff;
  background-color: #57C3C3;
  text-align: center;
  border-radius: 10px;
}
.qa_category_link:hover {
  opacity: 0.6;
  translate: 0.3S;
}
@media (max-width: 768px) {
  .qa_category_link {
    margin: 10px auto;
    max-width: 60%;
  }
}
.qa_category_link a {
  font-size: 16px;
  color: #fff;
}

.qa_category_link_h2 {
  margin-bottom: 20px;
  text-align: center;
}
.qa_category_link_h2 h2 {
  font-size: 20px;
  max-width: 60%;
  margin: 0 auto;
  border-bottom: 1px solid #57C3C3;
  padding-bottom: 4px;
  padding-top: 30px;
}

.accordion_area .accordion_one .ac_header {
  background-color: #F9FAF6;
  padding: 1.3rem 4rem 1.3rem 2rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: 0.2s;
}

.accordion_area .accordion_one .ac_header:not(.open):hover {
  background-color: #F9FAF6;
}

.accordion_area .accordion_one:nth-child(odd) .ac_header {
  background-color: #F9FAF6;
}

.accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover {
  background-color: #F9FAF6;
}

.accordion_area .accordion_one .ac_header .i_box {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}

.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

.accordion_area .accordion_one .ac_header .i_box:before {
  border-top: 2px solid #57C3C3;
  width: 20px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.accordion_area .accordion_one .ac_header .i_box:after {
  border-left: 2px solid #57C3C3;
  width: 0;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 9px;
  transition: 0.3s;
}

.accordion_area .accordion_one .ac_header.open .i_box:after {
  height: 0;
}

.accordion_area .accordion_one .ac_inner {
  display: none;
  padding: 1.5rem 2rem 1.5rem 2rem;
  box-sizing: border-box;
  background: #F9FAF6;
}

@media screen and (max-width: 736px) {
  .accordion_area .accordion_one .ac_header {
    padding: 1.5rem 2rem 1.5rem 1rem;
  }
  .accordion_area .accordion_one .ac_header .i_box {
    right: 0.8rem;
    width: 15px;
    height: 15px;
    margin-top: -7px;
  }
  .accordion_area .accordion_one .ac_header .i_box:before {
    width: 15px;
  }
  .accordion_area .accordion_one .ac_header .i_box:after {
    height: 15px;
    right: 7px;
  }
  .accordion_area .accordion_one .ac_inner {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
}
.accordion_one {
  margin-bottom: 10px;
}

/*=========
faq
=========*/
.p-faq__headinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}

.p-faq__headinner::before {
  position: absolute;
  left: 0;
  content: "Q．";
  color: #57C3C3;
  font-size: 18px;
  font-weight: bold;
}

.p-faq__headinner p.p-faq__q-txt {
  font-size: 16px;
  margin-bottom: 0rem;
  color: #464839;
}

@media screen and (max-width: 736px) {
  .p-faq__headinner {
    padding-left: 25px;
  }
  .p-faq__headinner::before {
    font-size: 14px;
  }
  .p-faq__headinner p.p-faq__q-txt {
    font-size: 14px;
    margin-bottom: 0rem;
  }
}
.p-faq__bodyinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}

.p-faq__bodyinner::before {
  position: absolute;
  left: 0;
  content: "A．";
  color: #D05D5D;
  font-size: 16px;
  font-weight: bold;
}

.p-faq__bodyinner p.p-faq__a-txt {
  font-size: 16px;
  margin-bottom: 0rem;
  color: #464839;
}

@media screen and (max-width: 736px) {
  .p-faq__bodyinner {
    padding-left: 25px;
  }
  .p-faq__bodyinner::before {
    font-size: 14px;
  }
  .p-faq__bodyinner p.p-faq__a-txt {
    font-size: 14px;
    margin-bottom: 0rem;
    color: #464839;
  }
}
/*--------------------------------------------------------------
# contact.php
--------------------------------------------------------------*/
.contact_top {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage-contact.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.contact_top h1 {
  padding: 16px 24px;
  color: #fff;
  background-color: #57C3C3;
  border-radius: 26px;
  max-width: 360px;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.1);
}

.contact_container {
  max-width: 880px;
  background-color: #57C3C3;
  margin: 0px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .contact_container {
    max-width: 98%;
    margin: 0 auto;
  }
}
.contact_container a {
  font-size: 8px;
  color: #483C3C;
}

.contact_inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 768px) {
  .contact_inner {
    max-width: 96%;
    margin: 0 auto;
  }
}

.contact_textbox {
  margin-bottom: 30px;
}

.wavyline {
  color: #fff;
  font-weight: 600;
  margin-bottom: 60px;
}

.contact_head {
  text-align: left;
  margin-bottom: 0px;
}

.required {
  background-color: #D05D5D;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  margin-left: 10px;
}

/*フォーム*/
input[type=text] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
  display: inline;
}
@media (max-width: 768px) {
  input[type=text] {
    width: 100%;
  }
}

input[type=email] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  input[type=email] {
    width: 100%;
  }
}

input[type=tel] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  input[type=tel] {
    width: 100%;
  }
}

.textarea_01 {
  width: 95%;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  .textarea_01 {
    width: 100%;
  }
}

/*ボタン*/
.btn-form01 {
  width: 40%;
  margin: 20px auto;
  padding: 12px 24px;
  border: 1px solid #fff;
  font-size: 20px;
  background: #999;
  color: #fff;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .btn-form01 {
    width: 80%;
  }
}

.btn-form01:hover,
.btn-form01:active,
.btn-form01:focus {
  background-color: #fff;
  color: #141414;
}

.placeholder {
  background-color: #FFFFFE;
}

/*--------------------------------------------------------------
# jikohyoukahyo.php
--------------------------------------------------------------*/
.jikohyoukahyo_link {
  padding-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}
.jikohyoukahyo_link a {
  font-size: 24px;
  text-decoration: underline;
  width: 400px;
  margin: 30px auto;
  padding: 20px;
  color: #57C3C3;
}
@media (max-width: 768px) {
  .jikohyoukahyo_link a {
    max-width: 100%;
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# inspection.php
--------------------------------------------------------------*/
.inspection_top {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage-contact.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.inspection_top h1 {
  padding: 16px 24px;
  color: #fff;
  background-color: #57C3C3;
  border-radius: 26px;
  max-width: 360px;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.1);
}

.inspection_container {
  max-width: 880px;
  background-color: #57C3C3;
  margin: 0px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .inspection_container {
    max-width: 98%;
    margin: 0 auto;
  }
}
.inspection_container a {
  font-size: 8px;
  color: #483C3C;
}

.inspection_inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 768px) {
  .inspection_inner {
    max-width: 96%;
    margin: 0 auto;
  }
}

.inspection_textbox {
  margin-bottom: 30px;
}

.wavyline {
  color: #fff;
  font-weight: 600;
  margin-bottom: 60px;
}

.inspection_head {
  text-align: left;
  margin-bottom: 0px;
}

.required {
  background-color: #D05D5D;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  margin-left: 10px;
}

/*フォーム*/
input[type=text] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
  display: inline;
}
@media (max-width: 768px) {
  input[type=text] {
    width: 100%;
  }
}

input[type=email] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  input[type=email] {
    width: 100%;
  }
}

input[type=tel] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  input[type=tel] {
    width: 100%;
  }
}

.textarea_01 {
  width: 95%;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  .textarea_01 {
    width: 100%;
  }
}

/*ボタン*/
.btn-form01 {
  width: 40%;
  margin: 20px auto;
  padding: 12px 24px;
  border: 1px solid #fff;
  font-size: 20px;
  background: #999;
  color: #fff;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .btn-form01 {
    width: 80%;
  }
}

.btn-form01:hover,
.btn-form01:active,
.btn-form01:focus {
  background-color: #fff;
  color: #141414;
}

.placeholder {
  background-color: #FFFFFE;
}

/*----------------------------------
個別ページ(single.php)
--------------------------------*/
.single {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.single_content {
  max-width: 780px;
  margin: 6% auto;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #fff;
  border: 1px solid #E6DFDF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
@media (max-width: 768px) {
  .single_content {
    max-width: 94%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.single_content h1 {
  font-size: 28px;
  margin: 0px auto;
  font-weight: bold;
  border-left: 0.4em solid #57C3C3;
  padding-left: 0.6em;
}
@media (max-width: 768px) {
  .single_content h1 {
    font-size: 20px;
    margin-top: 30px;
  }
}
.single_content h2 {
  font-size: 18px;
  margin: 2.4em auto;
  font-weight: bold;
  border-left: 0.4em solid #57C3C3;
  padding-left: 0.6em;
  max-width: 90%;
}
.single_content h3 {
  font-size: 18px;
  margin: 2.4em auto;
  font-weight: bold;
  border-bottom: double 3px #57C3C3;
  padding-bottom: 0.4em;
  max-width: 90%;
}
.single_content p {
  line-height: 1.8;
  font-size: 18px;
  margin: 0 auto;
  margin-top: 5%;
}
@media (max-width: 768px) {
  .single_content p {
    font-size: 16px;
    line-height: 1.8;
  }
}
.single_content img {
  max-width: 100%;
  margin: 0 auto;
}
.single_content ul,
.single_content ol {
  max-width: 90%;
  padding: 3.4em;
  margin: 2.6em auto;
  border: 1px solid #DACBAC;
}
@media (max-width: 768px) {
  .single_content ul,
  .single_content ol {
    padding: 4px;
    border: none;
  }
}
.single_content li {
  font-size: 18px;
  line-height: 18px;
}

.single_contaner {
  padding: 80px 40px;
}
@media (max-width: 768px) {
  .single_contaner {
    padding: 20px 0px;
  }
}

.single_category ul {
  list-style: none;
  padding: 0px;
  border: none;
  margin: 30px 0px auto;
  display: flex;
}
.single_category li {
  margin: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.single_category a {
  color: #fff;
  list-style: none;
  padding: 10px 16px;
  background-color: #57C3C3;
  border-radius: 10px;
  font-size: 15px;
}
.single_category a:hover {
  opacity: 0.6;
  translate: 0.3S;
}

.single_thumb {
  margin: 0 auto;
  text-align: center;
}

.single_date {
  max-width: 100px;
  margin: 10px 10px 10px auto;
}

/*----------------------------------
採用募集個別ページ(single-recruit.php)
--------------------------------*/
.recruit {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.recruit_inner {
  max-width: 1080px;
  margin: 6% auto;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #fff;
  border: 1px solid #E6DFDF;
}
@media (max-width: 768px) {
  .recruit_inner {
    max-width: 94%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.recruit_kubun {
  max-width: 180px;
  padding: 6px 20px;
  background-color: #FF8749;
  color: #fff;
  border-radius: 14px;
  margin: 0px auto 14px 160px;
  text-align: center;
}
@media (max-width: 768px) {
  .recruit_kubun {
    margin: 0px auto 14px 10px;
  }
}

.recruit_title {
  text-align: center;
  color: #151417;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.recruit_date {
  margin-left: 30px;
  color: #999;
}

.recruit_free {
  text-align: center;
}

.recruit_content {
  max-width: 880px;
  margin: 60px auto;
  border: 2px solid #57C3C3;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.recruit_content_title {
  max-width: 26%;
  text-align: center;
  border: 1px solid #fff;
  background-color: #57C3C3;
  color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}

.recruit_content_data {
  max-width: 74%;
  line-height: 1.6;
  border: 1px solid #57C3C3;
  background-color: #FAFAFA;
  padding: 20px;
}

.recruit_form {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 60px;
}
.recruit_form a {
  color: #fff;
  background-color: #57C3C3;
  padding: 24px 48px;
  font-size: 24px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.recruit_form a:hover {
  opacity: 0.6;
  translate: 0.3S;
  background-color: #fff;
  border: 2px solid #57C3C3;
  color: #57C3C3;
}

/*----------------------------------
採用情報アーカイブページ(archive-recruit.php)
--------------------------------*/
.recruit_archive_top {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage-recruit.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.recruit_archive_top h1 {
  padding-top: 60px;
  color: #fff;
  border-radius: 26px;
  max-width: 360px;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.1);
}
.recruit_archive_top p {
  padding: 0px;
  color: #fff;
  padding-bottom: 40px;
}

.recruit_archive_inner {
  max-width: 1080px;
  margin: 6% auto;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #fff;
  border: 1px solid #E6DFDF;
}
.recruit_archive_inner p {
  text-align: center;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .recruit_archive_inner {
    max-width: 98%;
    margin: 40px auto;
  }
}

.recruit_archive_box {
  max-width: 80%;
  margin: 0 auto;
  border-left: 6px solid #B1DD0C;
  padding-left: 14px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .recruit_archive_box {
    max-width: 90%;
    padding-left: 0px;
  }
}

.recruit_archive_kubun {
  color: #FF8749;
  border-radius: 14px;
  margin: 0px;
  text-align: center;
  font-weight: 600;
  align-items: center;
}

.recruit_archive_box_contents {
  background-color: #fafafa;
  padding: 8px 16px;
  list-style: none;
  align-items: center;
  border: 1px solid #B1DD0C;
}

.recruit_archive_btn {
  color: #fff;
  background-color: #B1DD0C;
  text-align: center;
  padding: 4px 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.recruit_archive_btn:hover {
  opacity: 0.6;
  translate: 0.3S;
  background-color: #fff;
  border: 2px solid #B1DD0C;
  color: #151417;
}

/*----------------------------------
採用応募フォーム(recruitform.php)
--------------------------------*/
.recruit_contact_container {
  max-width: 880px;
  background-color: #fafafa;
  border: 1px solid #E6DFDF;
  margin: 60px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .recruit_contact_container {
    max-width: 98%;
    margin: 0 auto;
  }
}
.recruit_contact_container a {
  font-size: 8px;
  color: #483C3C;
}

.recruit_contact_inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 768px) {
  .recruit_contact_inner {
    max-width: 96%;
    margin: 0 auto;
  }
}

.recruit_contact_textbox {
  margin-bottom: 30px;
}

.recruit_wavyline {
  color: #FF8749;
  font-weight: 600;
  margin-bottom: 60px;
}

.recruit_contact_head {
  text-align: left;
  margin-bottom: 0px;
}

.recruit_required {
  background-color: #FF8749;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  margin-left: 10px;
}

/*フォーム*/
input[type=text] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #E6DFDF;
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
  display: inline;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  input[type=text] {
    width: 100%;
  }
}

input[type=email] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #E6DFDF;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  input[type=email] {
    width: 100%;
  }
}

input[type=tel] {
  width: 80%;
  height: 30px;
  text-align: left;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #E6DFDF;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  input[type=tel] {
    width: 100%;
  }
}

.textarea_01 {
  width: 95%;
  border: 1px solid #E6DFDF;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-color: #fff;
  padding-left: 10px;
}
@media (max-width: 768px) {
  .textarea_01 {
    width: 100%;
  }
}

/*ボタン*/
.btn-form01 {
  width: 40%;
  margin: 20px auto;
  padding: 12px 24px;
  border: 1px solid #fff;
  font-size: 20px;
  background: #FF7054;
  color: #fff;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .btn-form01 {
    width: 80%;
  }
}

.btn-form01:hover,
.btn-form01:active,
.btn-form01:focus {
  background-color: #fff;
  color: #464839;
  border: 1px solid #FF8749;
}

.placeholder {
  background-color: #FFFFFE;
}

/*----------------------------------
プライバシーポリシー(privacy-policy.php)
--------------------------------*/
.privacy_top {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background-image: url(images/topimage-contact.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.privacy_top h1 {
  padding: 16px 24px;
  color: #fff;
  background-color: #57C3C3;
  border-radius: 26px;
  max-width: 80%;
  margin: 40px auto;
  box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.1);
}

.privacy_contents {
  max-width: 880px;
  background-color: #fff;
  border: 2px solid #57C3C3;
  margin: 40px auto;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .privacy_contents {
    max-width: 98%;
    margin: 0 auto;
  }
}
.privacy_contents h2 {
  margin-top: 60px;
  color: #57C3C3;
  font-size: 28px;
}
.privacy_contents h3 {
  margin-top: 30px;
  color: #57C3C3;
  font-size: 24px;
}
.privacy_contents p {
  padding-top: 10px;
}

.privacy_contents_inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 768px) {
  .privacy_contents_inner {
    max-width: 96%;
    margin: 0 auto;
  }
}

/*----------------------------------
パンくずリスト(breadcrumb.php)
--------------------------------*/
.breadcrumb {
  max-width: 100%;
  margin-bottom: 0px;
  background-color: #FAFAEE;
  padding: 6px 60px;
}
@media (max-width: 768px) {
  .breadcrumb {
    padding: 4px;
  }
}
.breadcrumb a {
  font-size: 12px;
  color: #57C3C3;
}
.breadcrumb li {
  font-size: 12px;
  color: #57C3C3;
}

/*----------------------------------
アーカイブ(archive.php)
--------------------------------*/
.archive {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.archive_title {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}
.archive_title h2 {
  margin-top: 40px;
  padding-bottom: 2px;
  border-bottom: 2px solid #B1DD0C;
  margin-bottom: 30px;
  font-family: "Times New Roman";
}

.archive_inner {
  max-width: 700px;
  margin: 0 auto;
}

.archive_box ul {
  list-style: none;
  padding-left: 0px;
}
@media (max-width: 768px) {
  .archive_box ul {
    padding-left: 0px;
  }
}
.archive_box li {
  max-height: 340px;
  margin-bottom: 30px;
}

.archive_thumb {
  max-height: 180px;
  overflow: hidden;
}
.archive_thumb img {
  max-height: 100%;
}
.archive_thumb:hover {
  opacity: 0.6;
  translate: 0.3S;
}

.archive_box_inner {
  margin: 30px 26px;
  border: 1px solid #B4B68C;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
@media (max-width: 768px) {
  .archive_box_inner {
    margin: 30px 10px;
  }
}

.archive_text {
  text-align: left;
  padding-left: 20px;
  margin-top: 16px;
}

.archive_date {
  color: #57C3C3;
}

.archive_more_btn {
  margin: 20px 0px 0px 0px;
  text-align: left;
}
.archive_more_btn a {
  background-color: #57C3C3;
  color: #fff;
  padding: 8px 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.archive_more_btn:hover {
  opacity: 0.6;
  translate: 0.3S;
}

/*----------------------------------
ブログアーカイブ(blog-archive.php)
--------------------------------*/
.blogarchive {
  max-width: 1080px;
  margin: 0 auto;
}

.blogarchive_inner {
  max-width: 780px;
  margin: 0px auto;
  text-align: center;
  margin-bottom: 80px;
}
.blogarchive_inner h2 {
  margin-top: 80px;
  text-align: center;
}
.blogarchive_inner p {
  font-size: 24px;
  color: #57C3C3;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .blogarchive_inner p {
    font-size: 20px;
  }
}

.category_box {
  display: block;
  padding: 30px 30px 10px 30px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background-color: #fff;
  margin-top: 60px;
  border: solid 4px #57C3C3;
}
.category_box img {
  max-width: 100%;
}

.archive_category_btn {
  text-align: center;
  font-size: 14px;
  background-color: #57C3C3;
  color: #fff;
  padding: 12px 20px;
  max-width: 80%;
  margin: 30px auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.flexbox {
  display: flex;
}

/*----------------------------------
サイドバー(sidebar.php)
--------------------------------*/
@media (max-width: 768px) {
  .sidebar {
    margin-top: 60px;
  }
}

.sidebar_contents {
  margin-top: 60px;
}
.sidebar_contents ul {
  list-style: none;
}
.sidebar_contents li {
  margin-left: -30px;
  border: 1px solid #57C3C3;
}
.sidebar_contents a {
  display: block;
  color: #0E0E00;
}
.sidebar_contents a:hover {
  opacity: 0.6;
  translate: 0.3S;
}

.sidebar_underline {
  max-width: 180px;
  margin: 10px auto 10px 0px;
}

.sidebar_col {
  text-align: left;
  align-items: center;
}

.sidebar_col_txt {
  text-align: left;
}

.sidebar_thumb {
  margin: 0 auto;
  max-width: 300px;
  overflow: hidden;
}
.sidebar_thumb img {
  max-width: 100%;
  height: auto;
}

.sidebar_single_ttl {
  font-size: 15px;
  margin-top: 4px;
  padding: 0px 8px 0px 16px;
  text-align: left;
}

.sidebar_date {
  font-size: 14px;
  width: 76px;
  margin-left: auto;
}

.sidebar_months li {
  border: none;
  margin-bottom: 6px;
}

/*--------------------------------------------------------------
# footer.php
--------------------------------------------------------------*/
.site-footer {
  background-image: url(images/footer-image.png);
  background-size: cover;
  background-color: #0E0E00;
  margin-top: -28px;
  color: #464839;
  text-align: center;
  padding-bottom: 10px;
}

.site-info {
  max-width: 980px;
  margin: 0px auto;
}
@media (max-width: 768px) {
  .site-info {
    padding-top: 40px;
    margin-bottom: 0px;
  }
}
.site-info ul {
  margin-top: 100px;
  text-align: left;
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .site-info ul {
    margin-top: 0px;
    text-align: left;
    padding-left: 50px;
  }
}
.site-info li {
  list-style: none;
  margin-bottom: 10px;
}
.site-info a {
  color: #464839;
}
.site-info a:hover {
  opacity: 0.6;
  translate: 0.3S;
}

.golfpin {
  max-width: 30px;
}

.text13 {
  font-size: 13px;
}

.sns {
  margin-top: 80px;
  display: flex;
}
@media (max-width: 768px) {
  .sns {
    margin-top: 20px;
  }
  .sns img {
    max-width: 80%;
  }
}

.line {
  max-width: 90%;
  margin: 20px auto;
}
.line:hover {
  opacity: 0.6;
  translate: 0.3S;
}
@media (max-width: 768px) {
  .line {
    max-width: 60%;
    margin: 30px auto;
    margin-top: 0px;
  }
}
.line img {
  max-width: 100%;
}

/*-----------------------------------
装飾　フェードイン
-----------------------------------*/
.effect-fade {
  opacity: 0;
  transform: translate(0, 80px);
  /* フェードインで動く高さを指定 */
  transition: all 1600ms;
  /* フェードインにかかる時間を指定 */
}

.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

/*左からフェードイン*/
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 0.2s;
}

.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}/*# sourceMappingURL=style.css.map */

/* ==============================================================
   2026-09 アンサンブル追加・施設カラー統一
   ============================================================== */

:root {
  --color-musicaohana: #59bccb;
  --color-gclef: #bbe118;
  --color-okepit: #345a83;
  --color-okepit-accent: #345a83; /* オケピットは紺一色 */
  --color-grande: #ff751e;
  --color-ensemble: #69380f;
}

/* ---------- 施設共通カラー ---------- */
.facility_name_label {
  display: block;
  width: calc(100% - 40px);
  max-width: 360px;
  margin: 0 auto 22px;
  padding: 10px 20px;
  border-radius: 28px 28px 12px 12px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.55);
}

.facility_name_label.facility-gclef {
  background-color: var(--color-gclef);
  color: #3b4233;
}

.facility_name_label.facility-okepit {
  background-color: var(--color-okepit);
  border-bottom: 5px solid var(--color-okepit-accent);
}

.facility_name_label.facility-grande {
  background-color: var(--color-grande);
}

.facility_name_label.facility-ensemble {
  background-color: var(--color-ensemble);
}

.facility-gclef-bg {
  background-color: var(--color-gclef) !important;
  color: #3b4233 !important;
}

.facility-okepit-bg {
  background-color: var(--color-okepit) !important;
  color: #fff !important;
}

.facility-grande-bg {
  background-color: var(--color-grande) !important;
  color: #fff !important;
}

.facility-ensemble-bg {
  background-color: var(--color-ensemble) !important;
  color: #fff !important;
}

.facility-gclef-border {
  border-bottom-color: var(--color-gclef) !important;
}

.facility-okepit-border {
  border-bottom-color: var(--color-okepit-accent) !important;
}

.facility-grande-border {
  border-bottom-color: var(--color-grande) !important;
}

.facility-ensemble-border {
  border-bottom-color: var(--color-ensemble) !important;
}

.facility_opening_notice,
.ensemble_opening_notice {
  display: inline-block;
  margin: 0 auto 18px;
  padding: 6px 18px;
  border: 2px solid var(--color-ensemble);
  border-radius: 999px;
  background-color: #fff;
  color: var(--color-ensemble);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- トップページ：施設紹介 2列×2段 ---------- */
.fp_institution_contents {
  display: flex;
  flex-wrap: wrap;
  max-width: 980px;
  margin: 0 auto;
}

.fp_institution_box {
  display: flex;
  flex-direction: column;
  margin-bottom: 54px;
  padding: 0 20px;
  box-sizing: border-box;
}

.fp_institution_box .institution {
  display: block;
  width: 100%;
  max-width: 440px;
  height: 250px;
  margin: 0 auto 18px;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.55);
}

.fp_institution_box .left {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 14px;
  line-height: 1.7;
}

.fp_institution_box .fp_institution_ryoho {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.fp_institution_box .fp_institution_ryoho_text {
  margin: 0;
  padding: 6px 9px;
  font-size: 11px;
}

.facility-gclef-card .fp_institution_ryoho_text {
  background-color: var(--color-gclef);
}

.facility-okepit-card .fp_institution_ryoho_text {
  background-color: var(--color-okepit-accent);
  color: #fff;
}

.facility-grande-card .fp_institution_ryoho_text {
  background-color: var(--color-grande);
  color: #fff;
}

.facility-ensemble-card .fp_institution_ryoho_text {
  background-color: var(--color-ensemble);
  color: #fff;
}

.fp_institution_link {
  width: 100%;
  max-width: 440px;
  margin: auto auto 0;
}

.fp_facility_button {
  display: block;
  width: 100%;
  margin: 22px auto 0;
  padding: 10px 14px;
  border-radius: 22px;
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  font-weight: 600;
}

.fp_facility_button:hover {
  opacity: 0.72;
}

/* ---------- 施設紹介ページ ---------- */
.institution-image > p {
  padding: 0 20px 30px;
}

.institution_container .facility_name_label {
  margin-top: 0;
}

.institution_description {
  box-sizing: border-box;
}

.institution_meta_label {
  display: inline-block;
  min-width: 46px;
  margin: 5px 10px 5px 0;
  padding: 2px 7px;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.institution_facility_photo {
  display: block;
  width: 100%;
  max-width: 430px;
  height: 270px;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.55);
}

.institution_facility_button {
  display: block;
  max-width: 350px;
  margin: 20px auto;
  padding: 9px 12px;
  border-radius: 20px;
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.8);
  text-align: center;
  font-weight: 600;
}

.institution_facility_button:hover {
  opacity: 0.72;
}

.institution_ensemble {
  border-color: rgba(105, 56, 15, 0.25);
}

/* ---------- アンサンブル詳細ページ ---------- */
.ensemble_page {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  color: #3b3029;
}

.ensemble_hero {
  padding: 70px 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(89, 188, 203, 0.14), transparent 24%),
    radial-gradient(circle at 85% 75%, rgba(187, 225, 24, 0.12), transparent 22%),
    #fffaf4;
}

.ensemble_hero_inner {
  display: flex;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.ensemble_hero_text {
  padding: 30px 34px;
  text-align: left;
}

.ensemble_service {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--color-ensemble);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.ensemble_hero h1 {
  margin: 0 0 18px;
  color: var(--color-ensemble);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.09em;
}

.ensemble_catch {
  margin: 22px 0 4px;
  color: var(--color-grande);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.65;
}

.ensemble_catch_sub {
  margin: 0;
  color: var(--color-grande);
  font-size: 16px;
  font-weight: 600;
}

.ensemble_hero_image img {
  display: block;
  width: 100%;
  max-width: 470px;
  height: 350px;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 15px 26px -18px rgba(0, 0, 0, 0.55);
}

.ensemble_section {
  padding: 74px 20px;
}

.ensemble_btype {
  background-color: #fff;
}

.ensemble_care {
  background-color: rgba(105, 56, 15, 0.045);
}

.ensemble_container {
  max-width: 900px;
  margin: 0 auto;
}

.ensemble_container > h2 {
  position: relative;
  margin: 0 auto 42px;
  padding: 13px 24px;
  border-radius: 8px;
  background-color: var(--color-ensemble);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.ensemble_feature_list {
  padding: 0 18px;
}

.ensemble_feature {
  margin-bottom: 34px;
  padding: 0 0 28px;
  border-bottom: 1px dotted rgba(105, 56, 15, 0.42);
}

.ensemble_feature:last-child {
  border-bottom: none;
}

.ensemble_feature h3 {
  margin: 0 0 10px;
  color: var(--color-ensemble);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
}

.ensemble_feature p {
  margin: 0;
  padding-left: 48px;
  font-size: 16px;
  line-height: 1.9;
}

.ensemble_note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: var(--color-ensemble);
  color: #fff;
  font-size: 20px;
  vertical-align: middle;
}

.ensemble_work_images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 36px;
}

.ensemble_work_images img {
  display: block;
  width: 100%;
  height: 320px;
  margin: 0 auto 24px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 12px 20px -18px rgba(0, 0, 0, 0.7);
}

.ensemble_character {
  max-width: 430px;
  margin: 45px auto 0;
  text-align: center;
}

.ensemble_character img {
  display: block;
  width: 100%;
  margin: 0 auto;
  border-radius: 28px;
}

.ensemble_info {
  padding: 70px 20px 100px;
  background:
    radial-gradient(circle at 20% 20%, rgba(89, 188, 203, 0.13), transparent 23%),
    radial-gradient(circle at 80% 80%, rgba(187, 225, 24, 0.12), transparent 20%),
    #fffaf4;
}

.ensemble_info_inner {
  max-width: 660px;
  margin: 0 auto;
  padding: 46px 54px;
  border: 2px solid rgba(105, 56, 15, 0.22);
  border-radius: 28px;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 15px 25px -22px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.ensemble_info_type {
  margin: 0;
  color: var(--color-ensemble);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
}

.ensemble_info h2 {
  margin: 10px 0 18px;
  color: var(--color-ensemble);
  font-size: 43px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ensemble_info_details {
  max-width: 440px;
  margin: 20px auto 0;
  text-align: left;
}

.ensemble_info_details p {
  margin: 8px 0;
  font-size: 18px;
  line-height: 1.65;
}

.ensemble_info_details span {
  display: inline-block;
  min-width: 62px;
  margin-right: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--color-ensemble);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- スマートフォン ---------- */
@media (max-width: 768px) {
  .facility_name_label {
    width: calc(100% - 20px);
    max-width: 330px;
    margin-bottom: 16px;
    font-size: 23px;
  }

  .fp_institution_contents {
    display: block;
  }

  .fp_institution_box {
    width: 100%;
    margin-bottom: 48px;
    padding: 0 14px;
  }

  .fp_institution_box .institution {
    height: 220px;
  }

  .fp_institution_box .left {
    font-size: 14px;
  }

  .fp_institution_box .fp_institution_ryoho {
    gap: 6px;
  }

  .institution_inner {
    margin-bottom: 30px;
  }

  .institution_container {
    padding: 38px 14px;
  }

  .institution_container .left {
    margin-left: 0;
    padding: 0 10px;
    font-size: 14px;
  }

  .institution_description {
    max-width: 96%;
    margin: 20px auto;
    padding: 8px 10px;
  }

  .institution_facility_photo {
    height: 230px;
    margin-top: 18px;
  }

  .institution_facility_button {
    max-width: 300px;
  }

  .ensemble_hero {
    padding: 44px 16px;
  }

  .ensemble_hero_inner {
    display: block;
  }

  .ensemble_hero_text {
    padding: 10px 6px 30px;
    text-align: center;
  }

  .ensemble_service {
    font-size: 14px;
  }

  .ensemble_hero h1 {
    font-size: 39px;
  }

  .ensemble_catch {
    font-size: 20px;
  }

  .ensemble_catch_sub {
    font-size: 14px;
  }

  .ensemble_hero_image img {
    height: 250px;
  }

  .ensemble_section {
    padding: 52px 14px;
  }

  .ensemble_container > h2 {
    margin-bottom: 32px;
    padding: 11px 14px;
    font-size: 21px;
  }

  .ensemble_feature_list {
    padding: 0 4px;
  }

  .ensemble_feature h3 {
    font-size: 19px;
  }

  .ensemble_feature p {
    padding-left: 0;
    font-size: 15px;
    line-height: 1.85;
  }

  .ensemble_note {
    width: 30px;
    height: 30px;
    margin-right: 7px;
    font-size: 17px;
  }

  .ensemble_work_images {
    display: block;
  }

  .ensemble_work_images img {
    height: 235px;
  }

  .ensemble_character {
    max-width: 330px;
  }

  .ensemble_info {
    padding: 50px 14px 70px;
  }

  .ensemble_info_inner {
    padding: 34px 20px;
  }

  .ensemble_info_type {
    font-size: 16px;
  }

  .ensemble_info h2 {
    font-size: 34px;
  }

  .ensemble_info_details p {
    font-size: 15px;
  }
}

/*--------------------------------------------------------------
# グランデページ 2026リニューアル
--------------------------------------------------------------*/
.grande_page {
  --grande-color: #ff751e;
  --grande-color-dark: #9a4f1f;
  --grande-bg: #fffbed;
  --grande-pink: #fff0ec;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 7%, rgba(255, 216, 96, .20), transparent 24%),
    radial-gradient(circle at 92% 30%, rgba(89, 188, 203, .12), transparent 24%),
    var(--grande-bg);
  color: #4b4540;
}

.grande_hero {
  padding: 70px 24px 38px;
}
.grande_hero_inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
  gap: 48px;
  align-items: center;
}
.grande_hero_copy {
  text-align: left;
}
.grande_service_label {
  display: inline-block;
  margin: 0 0 24px;
  padding: 11px 34px;
  border-radius: 999px;
  background: var(--grande-color);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
}
.grande_hero h1 {
  margin: 0 0 22px;
  color: var(--grande-color);
  font-size: clamp(46px, 6vw, 74px);
  line-height: 1.1;
  letter-spacing: .08em;
  font-weight: 700;
}
.grande_catch {
  margin: 0;
  color: var(--grande-color);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: .03em;
}
.grande_hero_photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: none !important;
  background: transparent !important;
  border-radius: 28px;
  box-shadow: none !important;
}

.grande_feature_section {
  padding: 26px 24px 26px;
}
.grande_content_inner {
  max-width: 980px;
  margin: 0 auto;
}
.grande_ribbon_title {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 330px;
  margin: 0 0 -12px 18px;
  padding: 13px 42px;
  background: var(--grande-color);
  color: #fff;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-shadow: none;
}
.grande_ribbon_title::before,
.grande_ribbon_title::after {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 100%;
  background: var(--grande-color);
}
.grande_ribbon_title::before {
  left: -20px;
  clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%, 24% 50%);
}
.grande_ribbon_title::after {
  right: -20px;
  clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%, 24% 50%);
  transform: scaleX(-1);
}
.grande_feature_box {
  padding: 58px 48px 44px;
  background: rgba(255, 240, 236, .82);
  border: 2px dotted #f06b62;
  border-radius: 0 54px 54px 54px;
}
.grande_feature_item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.grande_feature_item + .grande_feature_item {
  margin-top: 36px;
}
.grande_feature_icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff7e2b, #ff515c);
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(255, 117, 30, .18);
}
.grande_feature_text h3 {
  margin: 0 0 8px;
  padding: 0;
  border: none;
  color: var(--grande-color);
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.45;
  font-weight: 700;
}
.grande_feature_text p {
  margin: 0;
  padding: 0;
  color: #56504b;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
}

.grande_activity_section {
  padding: 20px 24px 50px;
}
.grande_activity_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.grande_activity_card {
  margin: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 18px;
  box-shadow: none;
}
.grande_activity_card figcaption {
  margin: 0;
  padding: 8px 8px 6px;
  background: var(--grande-color);
  color: #fff;
  border-radius: 14px 14px 6px 6px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.grande_activity_card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 0 18px 18px;
}

@media (max-width: 768px) {
  .grande_hero {
    padding: 42px 18px 24px;
  }
  .grande_hero_inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .grande_service_label {
    margin-bottom: 18px;
    padding: 9px 22px;
    font-size: 16px;
  }
  .grande_hero h1 {
    font-size: 46px;
  }
  .grande_catch {
    font-size: 20px;
  }
  .grande_hero_photo {
    max-width: 520px;
    margin: 0 auto;
  }
  .grande_feature_section {
    padding: 20px 14px;
  }
  .grande_ribbon_title {
    min-width: 0;
    width: calc(100% - 36px);
    margin-left: 18px;
    padding: 11px 22px;
    font-size: 24px;
  }
  .grande_feature_box {
    padding: 46px 20px 30px;
    border-radius: 0 34px 34px 34px;
  }
  .grande_feature_item {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }
  .grande_feature_icon {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .grande_feature_text h3 {
    font-size: 21px;
  }
  .grande_feature_text p {
    font-size: 15px;
    line-height: 1.8;
  }
  .grande_activity_section {
    padding: 10px 14px 36px;
  }
  .grande_activity_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .grande_activity_card figcaption {
    font-size: 15px;
  }
}

@media (max-width: 460px) {
  .grande_activity_grid {
    grid-template-columns: 1fr;
  }
}