@charset "UTF-8";
/* CSS Document */


/*---------- hirata.css ----------*/

/*価格表 文字関係*/
.price-text {
  text-align: left;
  margin-bottom: 2rem;
}
.price-font-red {
  color: #ff0000;
}
.price-font-small {
  font-size: 0.9em;
}
.price-info-title, .price-foot-list p {
  margin-bottom: 1rem;
}
.price-sub-title {
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 2rem);
  margin: 0;
}
/*価格表 説明*/
.price-info {
  border: 1px solid #ccc;
  padding: clamp(2rem, 2vw, 2rem);
}
.price-info-text {
  text-align: left;
}
.price-info-text p {
  font-weight: 700;
  margin-bottom: 0;
}
.price-info-note {
  text-align: left;
  font-size: 0.8em;
  margin-top: 0.5em;
}
.price-info-text ul {
  margin: 1rem 0;
}
.price-info-text li {
  list-style: disc;
}
/*価格表 説明*/
.price-text-exp {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}
.price-text-exp div {
  text-align: right;
}
.price-text-exp p {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}
.price-text-exp span {
  background-color: #ebaec3;
  border: solid 1px #333;
  padding: 0.5rem 1rem;
  margin: 1rem 0.5rem;
}
.price-text-attention {
  font-size: clamp(1rem, 1.5vw + 1rem, 2rem);
  font-weight: 700;
  margin: 0.5rem 0;
}
.price-inv-tbl {
  width: 100%;
}
.price-inv-tbl table {
  border: none;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
}
.price-inv-tbl table p {
  margin: 1rem 0 0 0;
}
.price-inv-tbl table img {
  width: 100%;
}
.price-inv-tbl table td {
  padding: 0.5rem;
}
.price-inv-tbl-left {
  width: calc(70%-5px);
  margin-right: 10px;
  background-color: #f2f2f2;
}
.price-inv-tbl-center {
  width: 10px;
}
.price-inv-tbl-right {
  width: calc(40%-5px);
  background-color: #f2f2f2;
}
/*表*/
.price-container {}
.price-midashi, .price-midashi2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  line-height: 2rem;
  border-bottom: solid 1px #ccc;
}
.price-midashi {
  margin-top: 50px;
}
.price-midashi-left {
  margin-right: 10px;
}
.price-midashi-right {
  text-align: left;
}
.price-midashi-right p, .price-midashi-center p {
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height: 1.2;
  word-break: keep-all; /*wbr改行用*/
  overflow-wrap: break-word; /*wbr改行用*/
}
.price-midashi-center p {
  margin-bottom: 0.4rem;
}
.price-midashi-right p {
  margin: 0;
}
.price-midashi-center span {
  font-size: clamp(1rem, 1vw + 1rem, 2rem);
}
.price-midashi-center p img {
  height: 2.5rem;
  margin-left: 0.5rem;
}
.price-note {
  font-size: 1rem;
  display: block;
  margin: 1rem 0;
}
.price-note span {
  font-weight: 700;
  font-size: 1.5rem;
}
.price-table {
  display: flex;
  justify-content: space-between;
}
.price-table div {
  flex: 1;
}
.price-table table {
  font-size: 1.4rem;
}
.price-table-left {
  margin-right: 10px;
}
.price-table-left table, .price-table-right table {
  width: 100%;
}
.price-table td, .price-table th {
  padding: 0.5rem 0;
  border: solid 1px #333;
  line-height: 1.8rem;
  text-align: center;
}
.price-table th {
  background-color: #ebaec3;
  font-weight: 400;
}
.price-tbl-2 .tbl-qty {
  width: 28%;
}
.price-tbl-2 .tbl-price {
  width: 72%;
}
.price-tbl-3 .tbl-qty {
  width: 20%;
}
.price-tbl-3 .tbl-price {
  width: 40%;
}
.price-tbl-4 .tbl-qty {
  width: 40%;
}
.price-tbl-4 .tbl-price {
  width: 60%;
}
.price-tbl-inb {
  justify-content: center;
}
.price-tbl-inb div {
  vertical-align: middle;
  display: inline-block;
}
.price-tbl-inb img {
  width: calc(20px + 0.5vw);
}
.price-table .tbl-qty {
  background-color: #fff5f5;
  text-align: center;
}
.price-table .tbl-price {
  background-color: #fff;
}
.price-table .tbl-price div {
  display: inline-block;
  text-align: right;
}
.price-table .tbl-price span {
  font-size: 80%;
}
.price-sq {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price-sq div {
  width: calc(50% - 5px);
  margin-top: 1rem;
  font-size: 1.2rem;
}
.price-sq div p {
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}
.price-sq a {
  font-weight: 700;
  width: 100%;
  border: none;
  padding: 1rem;
  margin-bottom: 10px;
  text-decoration: none;
  background: no-repeat url(../price/images/accordion_btn.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 98% 50%;
  display: inline-block;
  background-color: #f2f2f2;
}
.price-sq a:hover {
  background-color: #fff5f5;
  color: #333;
}
.price-hide-text {
  margin-top: -1px; /*上の線だけ消す 擬似*/
}
.price-accordion {
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  background-color: #f2f2f2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  margin-top: 10px;
  border: none;
  width: 100%;
  color: #333;
}
.price-accordion:after {
  content: url(../price/images/accordion_btn.svg);
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
  transition: all .3s ease;
  margin-left: 8px;
  display: block;
}
.price-accordion.on-click:after {
  transform: rotate(0deg);
}
.price-accordion .open {
  display: block;
}
.price-accordion.on-click .open {
  display: none;
}
.price-accordion .close {
  display: none;
}
.price-accordion.on-click .close {
  display: block;
}
.price-accordion:hover {
  background-color: #fff5f5;
}
.price-notice {
  margin-top: 10px;
  font-size: 1.3rem;
  text-align: left;
}
/*価格表 こちらボタン*/
.price-link-btn {
  text-align: right;
  margin: 1rem 0;
}
.price-link-btn a {
  font-weight: 700;
  background-color: #fff5f5;
  border: solid 1px #333;
  padding: 1rem 3rem;
  text-decoration: none;
  display: inline-block;
}
.price-link-btn a:hover {
  background-color: #ebaec3;
  color: #333;
}
/*価格表 オプション*/
.price-option {
  text-align: left;
}
.price-option-item {
  border: solid 1px #333;
  background-color: #f2f2f2;
  display: inline-block;
  margin: 0;
  text-align: left;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
}
.price-option-detail {
  border: solid 1px #333;
  margin-top: -1px;
  padding: 1.5rem;
}
.price-option-margin {
  margin-bottom: 1.5rem;
}
.price-option-detail span {
  font-size: 1.2rem;
  line-height: 1.5;
  display: block;
}
.price-option-link {
  margin: 0.5rem 0;
}
.price-option-link a {
  border: solid 1px #333;
  text-decoration: none;
  padding: 0.2rem 0.7rem 0.2rem 1.5em;
  margin: 0.2rem 0;
  display: inline-block;
  background: no-repeat url(../price/images/list_btn.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 10% 50%;
  background-color: #fff5f5;
}
.price-option-link a:hover {
  color: #333;
  background-color: #ebaec3;
}
/*価格表 商品一覧*/
.price-foot-list {
  margin-top: 50px;
}
.price-foot-list div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price-foot-list div a {
  font-weight: 700;
  width: calc(50% - 5px);
  border: solid 1px #333;
  padding: 1rem;
  margin-bottom: 10px;
  text-decoration: none;
  background: no-repeat url(../price/images/list_btn.svg);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: right 50%;
}
@media (max-width: 440px) {
  /* 横幅が440px以下の場合に適用するスタイル */
  .price-foot-list div a {
    background-size: 20px;
  }
}
.price-foot-list div a:hover, .price-foot-list .list-now {
  background-color: #f2f2f2;
  color: #333;
}
/*アパレル Tシャツ*/
/*アパレル Tシャツ アレンジ*/
.apparel-arrange-center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.apparel-arrange-frame {
  width: 100%;
  border: 1px solid #cccccc;
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 10px;
}
.apparel-arrange-frame p {
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 2rem);
  margin: 0;
}
.apparel-arrange-frame img {
  width: 70%;
}
@media screen and (max-width: 768px) {
  .apparel-arrange-center-text {
    text-align: left;
  }
  .apparel-arrange-frame img {
    width: 100%;
  }
}
/*アパレル Tシャツ オリジナル*/
.apparel-original-caption {
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 2rem);
  margin: 2rem 0 0 0;
  display: block;
}
.apparel-original-section {
  border-top: 1px solid #cccccc;
  padding-top: 2rem;
}
/*アパレル Tシャツ 種類*/
.apparel-tshirt-types-menu {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1em;
  margin-bottom: 30px;
  word-break: break-all;
}
.apparel-tshirt-types-menu p {
  font-weight: 700;
  margin-bottom: 0;
}
.apparel-tshirt-types-item {
  text-align: left;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 1rem;
  margin-top: 2rem;
}
.apparel-tshirt-types-item-p {
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 2rem);
  margin: 0;
}
.apparel-tshirt-types-item div {
  text-align: center;
}
.apparel-tshirt-types-item img {
  width: 600px;
}
@media screen and (max-width: 768px) {
  .apparel-tshirt-types-item img {
    width: 90%;
  }
}
.apparel-tshirt-types-item-p:before {
  content: "⚫︎";
}
.apparel-tshirt-types-subm {
  font-weight: 700;
}
.apparel-tshirt-types-caption {
  text-align: left;
}
.apparel-info-ul {
  text-align: left;
  font-size: 0.8em;
}
.apparel-info-ul li {
  list-style: square;
}
.apparel-item-contents {
  border: solid 1px #ccc;
  padding: 1em;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 2em;
}
.apparel-item-contents p {
  font-weight: 700;
  font-size: clamp(1.8rem, 1.5vw, 1.5rem);
  margin-bottom: 0.5em;
}
.apparel-item-contents span {
  display: block;
}
.apparel-item-contents-box {
  margin: 1em 0 0 0;
  font-size: 0.9em;
}
.apparel-item-contents-box2 {
  border-top: 1px solid #ccc;
  padding-top: 1em;
}
.apparel-item-contents-box img {
  width: 600px;
}
@media screen and (max-width: 768px) {
  .apparel-item-contents-box img {
    width: 90%;
    display: block;
    margin: auto;
  }
  .apparel-item-contents-box, .apparel-item-contents span {
    text-align: left;
  }
}
.apparel-sample-banner {
  width: 100%;
  margin-top: 2rem;
  padding: 1.5em;
  background-color: #fff5f5;
}
.apparel-sample-banner-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.apparel-sample-banner-flex-img {
  text-align: center;
  width: 30%;
}
.apparel-sample-banner-flex-img img {
  width: 100%;
}
.apparel-sample-banner-flex-text {
  width: 70%;
  padding-left: 1em;
  text-align: left;
}
.apparel-sample-banner-flex-text p {
  font-size: clamp(1.8rem, 1.5vw, 1.5rem);
  font-weight: 700;
}
.apparel-sample-banner-flex-text p span {
  background: linear-gradient(transparent 50%, yellow 50%);
}
.apparel-sample-banner-flex-text a {
  text-decoration: none;
  border: 2px solid #b0975c;
  color: #b0975c;
  padding: 0.3em 0.5em;
  font-size: 1.3em;
  border-radius: 6px;
  background-color: #fff;
  display: inline-block;
  margin: 0;
}
.apparel-sample-banner-flex-text a:hover {
  background-color: #b0975c;
  color: #fff;
}
.apparel-sample-banner-flex-text-inner {
  font-size: 0.9em;
  line-height: 130%;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 600px) {
  .apparel-sample-banner-flex-img {
    width: 80%;
    display: block;
    margin: auto;
  }
  .apparel-sample-banner-flex-text {
    padding-left: 0em;
    width: 100%;
  }
}
/*アパレル チームウェア*/
.apparel-teamwear-midashi {
  wwidth: 100%;
  display: block;
  margin: auto;
}
.apparel-teamwear-midashi p {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0;
}
.apparel-teamwear-midashi span {
  display: block;
}
@media screen and (max-width: 768px) {
  .apparel-teamwear-midashi span {
    text-align: left;
  }
}
/*チームウェア 種類*/
.apparel-teamwear-types {
  width: 100%;
  margin-top: 2em;
}
.apparel-teamwear-types-cursive {
  text-align: center;
}
.apparel-teamwear-types-cursive img {
  height: 50px;
}
.apparel-teamwear-types-title {
  text-align: center;
  font-size: clamp(1.8rem, 2vw, 2rem);
  border-bottom: 1px #ccc solid;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.apparel-teamwear-types-cap {
  text-align: left;
}
.apparel-teamwear-flex {
  display: flex;
  width: 100%;
  gap: 1em;
}
.apparel-teamwear-flex-left {
  width: 60%;
  text-align: left;
  margin-bottom: 2em;
}
.apparel-teamwear-flex-price-box {
  display: grid;
  grid-template-columns: 12em 1fr;
}
.apparel-teamwear-flex-price-box-name {
  font-weight: 700;
  width: 12em;
}
.apparel-teamwear-flex-price-box-price span {
  font-size: 0.8em;
}
.apparel-teamwear-flex-price-info {
  background-color: #ebead8;
  padding: 0.5em 0.8em;
  font-size: 0.8em;
  display: inline-block;
  line-height: 1.2;
}
.apparel-teamwear-flex-price-detail {
  border: 1px solid #d0b77b;
  padding: 0.8em 1.3em;
  margin-top: 1em;
  font-size: 0.9em;
}
.apparel-teamwear-flex-price-detail p {
  line-height: 1.2;
  margin: 0.5em 0;
}
.apparel-teamwear-flex-price-detail-fabric {
  font-size: 0.8em;
  line-height: 1.2;
  display: flex;
  gap: 1em;
  align-items: center;
  padding-top: 0.8em;
}
.apparel-teamwear-flex-price-detail-fabric img {
  width: 75px;
}
.apparel-teamwear-flex-price-detail-fabric span {}
.apparel-teamwear-flex-right {
  width: 40%;
  text-align: left;
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 2em;
}
.apparel-teamwear-flex-right img {
  width: 100%;
  margin-bottom: 5px;
}
.apparel-teamwear-flex-right p {
  font-size: 1.3rem;
  margin: 0;
}
.apparel-teamwear-flex2 {
  display: flex;
  gap: 1em;
  justify-content: center;
}
.apparel-teamwear-flex2 div {
  width: 33%;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.2;
}
.apparel-teamwear-flex2 img {
  width: 100%;
  margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .apparel-teamwear-types-title {
    word-break: keep-all; /*wbr改行用*/
    overflow-wrap: break-word; /*wbr改行用*/
    font-size: 2rem;
  }
  .apparel-teamwear-types-cursive img {
    height: 35px;
  }
  .apparel-teamwear-flex {
    gap: 0;
    flex-direction: column;
    flex-direction: column-reverse;
  }
  .apparel-teamwear-flex-left {
    width: 100%;
    margin-bottom: 1em;
    margin-top: 1em;
  }
  .apparel-teamwear-flex-right {
    width: 100%;
    text-align: center;
    width: 70%;
    max-width: 300px;
    display: block;
    margin: auto;
    text-align: left;
  }
  .apparel-teamwear-flex2 {
    gap: 0.5em;
  }
  .apparel-teamwear-flex2 div {
    font-size: 0.8em;
  }
}
/*チームウェア 刺繍*/
.apparel-teamwear-embroidery-pic {
  margin-top: 0;
  margin-bottom: 2em;
  width: 100%;
}
.apparel-teamwear-embroidery-pic picture {
  margin: 0;
}
.apparel-teamwear-embroidery-flex {
  display: flex;
  gap: 1em;
  margin: 0 auto;
  align-items: center;
  max-width: 765px;
}
.apparel-teamwear-embroidery-flex div {
  width: 50%;
  text-align: center;
}
.apparel-teamwear-embroidery-flex div img {
  width: 100%;
}
.apparel-teamwear-embroidery-flex div p {
  margin: 0.5em auto;
  font-size: clamp(1.7rem, 1.7vw, 1.7rem);
  font-weight: 700;
}
.apparel-teamwear-embroidery-flex div span {
  text-align: left;
  line-height: 1.2;
  display: block;
  font-size: 0.9em;
}
.apparel-teamwear-embroidery-images {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5em;
  width: 100%;
  max-width: 765px;
  margin: 2em auto;
}
.apparel-teamwear-embroidery-images div {
  width: 25%;
}
.apparel-teamwear-embroidery-images div img {
  width: 100%;
}
@media screen and (max-width: 500px) {
  .apparel-teamwear-embroidery-flex {
    display: flex;
    gap: 1em;
    flex-direction: column;
  }
  .apparel-teamwear-embroidery-flex div {
    width: 100%;
  }
  .apparel-teamwear-embroidery-flex div img {
    width: 70%;
  }
}
/*アパレル　トートバッグ*/
.apparel-bag-types-menu img {
  width: 80%;
  max-width: 500px;
}
.apparel-bag-types-menu p {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.apparel-bag-types-item {
  text-align: left;
  border-top: 1px solid #cccccc;
  padding-top: 1rem;
  margin-top: 2rem;
}
.apparel-bag-types-item-p {
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 2rem);
  margin: 0;
}
.apparel-bag-types-item div {
  text-align: center;
}
.apparel-bag-types-item img {
  width: 100%;
  max-width: 450px;
  margin-top: 1em;
}
.apparel-bag-types-item-p:before {
  content: "⚫︎";
}
.apparel-bag-types-caption {
  text-align: left;
}
.apparel-bag-info {
  border: 1px solid #d0b77b;
  border-radius: 10px;
  padding: 1em;
  display: inline-block;
  margin-top: 2em;
}
.flow-item-bag:last-child::after {
  content: "";
}
/*サイトマップ*/
.sitemap-container {
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.sitemap-container a {
  text-decoration: none;
}
.sitemap-list-top {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.sitemap-list-top a:before ,.sitemap-list-top-no-link:before {
  content: url("../images/sitemap-1.svg");
  width: 1.5rem;
  display: inline-block;
}
.sitemap-list-middle {
  font-size: 1.5rem;
  margin-bottom: 5px;
  padding-left: 1.5rem;
}
.sitemap-list-middle ul {
  padding-left: 0;
}
.sitemap-list-bottom {
  padding-left: 1.5rem;
  font-size: 1.4rem;
  font-weight: normal;
}
.sitemap-list-bottom li:before {
  content: "・";
  display: inline-block;
}
.sitemap-list-middle-pick{
	font-weight:700;
}
/*お役立ちコーナー*/
.helpful-text,.helpful-text2 {
  text-align: left;
  margin-bottom: 2em;

}
.helpful-text2{
	font-size:0.9em;
	border:1px solid #ddd;
	padding:0.5em;
	}
.helpful-text2 p{
	font-weight:700;
	font-size:1.1em;
	margin:0;
}
.helpful-text2 span{
	  border: 1px #333 solid;
  padding: 0.2em 0.5em;
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 0.9em;
  font-weight: 700;
margin:0 0.3em;
}
/*生徒募集チラシの作り方*/
.helpful-recruitment-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.helpful-recruitment-flex div {
  width: calc(33% - 5px);
  margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
  .helpful-recruitment-flex div {
    width: calc(50% - 5px);
  }
}
.helpful-recruitment-flex div p {
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 1.1em;
font-weight:700;
color:#b49a5d;
	border-bottom:1px solid #b49a5d;
	margin:0.3em 0;
}
.helpful-recruitment-flex div img {
  width: 100%;
  border: 1px #ccc solid;
}
.helpful-recruitment-flex div a {
  border: 1px #333 solid;
  padding: 0.2em 0.5em;
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 0.8em;
  font-weight: 700;
}
.helpful-recruitment-flex div a:hover {
  border: 1px #d0b77b solid;
  background-color: #d0b77b;
  color: #fff;
}

/*シルエット素材*/
.helpful-silhouette-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.helpful-silhouette-flex::after {
  content: "";
  display: block;
  width: 50%;
}
.helpful-silhouette-flex-box {
  width: calc(50% - 5px);
  margin-bottom: 50px;
  text-align: left;
}
.helpful-silhouette-flex-box p {
  font-size: 1.3em;
  border-bottom: 1px solid #b49a5d;
  margin: 0;
  padding: 0;
	color:#b49a5d;
	font-weight:700;
}
.helpful-silhouette-flex-box span {
  font-size: 0.9em;
}
.helpful-silhouette-flex-box-item {
  display: flex;
}
.helpful-silhouette-flex-box-item div {
  width: calc(50% - 5px);
  text-align: center;
}
.helpful-silhouette-flex-box-item-img {
  align-items: center;
  justify-content: center;
  height: 220px;
}
.helpful-silhouette-flex-box-item-img div img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.helpful-silhouette-flex-box-item div a {
  border: 1px #333 solid;
  padding: 0.2em 0.5em;
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 0.9em;
  font-weight: 700;
}
.helpful-silhouette-flex-box-item div a:hover {
  border: 1px #d0b77b solid;
  background-color: #d0b77b;
  color: #fff;
}

@media screen and (max-width: 765px) {
  .helpful-silhouette-flex-box {
    width: 100%;
  }
	.helpful-silhouette-flex-box-item {
  height: auto;
}
}




/*---------- kunikane.css ----------*/

.interview_wrap{
	width:auto;
}

.interview_text{
		  font-size: 1.7rem;
	text-align: left;
	line-height: 3.5rem;
}
/* ★インデックスページバレエ教室開業 */
.opening-banner{
  text-align:center;
  margin:10px auto 40px;
  max-width:800px;
}
.opening-banner picture{
  display:block;
}
.opening-banner img{
  width:100%;
  height:auto;
	display:block;
}

.opening-box{
  display:block;
  border-top:1.5px solid #d0b77b;
  border-bottom:1.5px solid #d0b77b;
  padding:28px 0;
  max-width:800px;
  margin:1rem auto 3rem;
  text-decoration:none;
  color:#333;
}
.opening-box:hover{
  background:#faf7f4;
		  transition:0.25s;
	  color:#333;
	color:inherit;
}
.opening-inner{
  display:flex;
  gap:30px;
  max-width:740px;
  margin:0 auto;
}
.opening-photo{
  width:220px;
  flex-shrink:0;
}
.opening-photo img{
  width:100%;
  height:auto;
  display:block;
}
.opening-text{
  flex:1;
  display:flex;
  flex-direction:column;
}
.opening-name{
  font-size:2.5rem;
  font-weight:500;
  margin:8px 0 6px;
}
.opening-date{
  font-size:1.2rem;
  font-weight:500;
  color:#777;
  margin-bottom:12px;
}
.opening-desc{
  font-size:1.5rem;
  line-height:1.75;
  margin-bottom:12px;
}
.opening-link{
  text-align:right;
  font-size:1.3rem;
  font-weight:600;
  margin-top:auto;
}


.opening-toc{
	display:none; 
  max-width:800px;
  margin:3rem auto 4rem;
  border-top:1.5px solid #d0b77b;
}
.toc-heading{
  letter-spacing:0.1em;
  color:#d0b77b;
  margin:1rem 0 0;
	  font-weight:600;
}
.opening-toc-item{
  display:block;
  padding:0 0 1rem;
  border-bottom:1px dashed #ccc;
  text-decoration:none;
  color:#333;
  transition:all 0.2s ease;
}
.opening-toc-item:hover{
  opacity:0.7;
}
.toc-title{
  font-size:17px;
  font-weight:600;
  margin:0;
}
.opening-toc-item:hover .toc-title{
  color:#eb5e8f;
}
.toc-meta{
  font-size:13px;
  color:#777;
  margin:1rem 0 0;
}
/* むらさき版 */
.toc-purple{
  border-top:1.5px solid #502d64;
}
.toc-purple .toc-heading{
  color:#502d64;
}
.toc-purple .opening-toc-item:hover .toc-title{
  color:#666;
}

.opening-interviewer{
	  font-size:1.4rem;
  font-weight:600;
	line-height: normal;
}

.opening-cataloglink{
   text-align:center;
  margin:10px auto;
}
.opening-cataloglink a{
  display:inline-block;
}
.opening-cataloglink img{
  width:100%;
  max-width:500px;
  height:auto;
  transition:0.3s;
}
.opening-cataloglink a:hover img{
  opacity:0.8;
}

/* ★インデックスページお客様訪問 */
.interview_title {
  position: relative;
	margin-bottom: 3rem;  /* 下だけ余白 */
	  line-height: 1.2;
  color:#502d64;
  text-align: center;
	letter-spacing: 0.35em;
  padding: 1.5rem 1rem;
font-size: 3.6rem;
  font-weight: bold;
}
.interview_title::before,
.interview_title::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 90%;
  max-width: 800px;
  height: 6px;
  border-color: #502d64;
  border-style: solid;
}

.interview_title::before {
  top: 0;
  border-width:2px 0 1px 0;
}
.interview_title::after {
  bottom: 0;
  border-width:1px 0 2px 0;
}
.interview_sub {
	display: block;
  font-family: 'Limelight', cursive;
  letter-spacing: 0.05em;
	  font-size: 1.7rem;
  font-weight: normal;
	  color: #858585;
	margin-top: 0.1rem;
}


/* リード文 */
.lead_text{
font-size: 1.6rem;
font-weight: 500;
	  max-width: 800px; 
	margin: 0 auto 2rem;
}


/* バナー */
.interview-banner {
  display: flex;
  width: 100%;
  max-width: 660px;
  height: 220px;
	margin: 40px auto;

  text-decoration: none;
  color: #444;
  overflow: hidden;
}

.interview-banner__image {
  width: 220px;
  height: 100%;
  flex-shrink: 0;
}
.interview-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview-banner__text {
  flex: 1;
  background-color: #fff5f5;
  padding: 2rem 2.5rem 0.5rem;
  box-sizing: border-box;
	  display: flex;
  flex-direction: column;
}
.interview-banner__name {
  font-size: 1.8rem;
  margin: 0 0 4px;
  font-weight: bold;
}
.interview-banner__meta {
  font-size: 1.2rem;
  margin: 0 0 12px;
  letter-spacing: 0.05em;
}
.interview-banner__description {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0;
	  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* ←3行でカット */
  -webkit-box-orient: vertical;
}
	  .interview-banner__jump {
    font-size: 1.3rem;
		    font-weight: bold;
		    text-align: right;
  margin-top: auto;
  }
.interview-banner,
.interview-banner:hover {
  color: #444;
}

/* 画像にアニメーション準備 */
.interview-banner__image img {
  transition: transform 0.6s ease;
}

/* バナー全体にホバーしたら画像だけズーム */
.interview-banner:hover .interview-banner__image img {
  transform: scale(1.08);
}

/* ★先輩教室記事ページ */
.opening-catchcopy {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 800px;
  margin: 0.5rem auto;
}
.opening-subcopy {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 800px;
  margin: 0 auto 1rem;
}

.opening-top-image {
  max-width: 1080px;
  margin: 0 auto;
}
.opening-top-image picture{
  width:100%;
  display:block;
}
.opening-top-image img{
  width:100%;
  height:auto;
  display:block;
}

/* ★お客様訪問記事ページ */
.article-hero {
  position: relative;
  padding: 3rem 0 2rem;

  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* ピンク背景を消す（先輩教室用） */
.article-hero.no-bg::before {
  display: none;
}
/* 地色用のレイヤー */
.article-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%;              /* ← メイン画像の半分くらい */
  background-color: #fdf3f3;
  z-index: 0;
}

/* 中身を前面に */
.article-hero-inner {
	  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
	 max-width: 1080px;
  margin: 0 auto;
}
.article-container {
  max-width: 800px;	/* ← 基準幅 */
  margin: 0 auto;
}

.article-body {
  max-width: 800px;
  margin: 0 auto;
}

/* 記事キャッチ */
.catchcopy {
  font-size: 2.7rem;
  font-weight: bold;
  line-height: 1.4;
  max-width: 800px;
  margin: 0 auto;
}
.catchcopy-indent {
  text-indent: -0.5em;
  padding-left: 0.5em;
}

.article-meta{
	  display: flex;
  justify-content: flex-end;
font-size: 1.2rem;
color: #333333;
  margin: 1rem 1rem 1.5rem;
font-weight: bold;
}
.top-image {
  display: flex;
  justify-content: center; 
}
.top-image img {
  width: 100%;
  border-radius: 30px;
  object-fit: cover;
}


/* プロフィール全体 */
.interview-profiles {
  margin: 3rem auto;
}

.profile-box {
  border: 2px solid #eea6bd; 
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.profile-name {
	  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.profile-text {
  font-size: 1.4rem;
	font-weight: 500;
  line-height: 1.5;
}
.pickup-box{
  border: 1.5px solid #8a7636;   /* 黄土色 */
	  background: #fdfcf7;
}
.pickup-text{
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
	  margin-bottom: 0;
}
/* プロフィール写真 */
.profile-inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.profile-image img {
  width: 180px;   /* お好みで調整 */
  height: auto;
  display: block;
}
/* 2つ目だけ左右反転 */
.profile-box.reverse .profile-inner {
  flex-direction: row-reverse;
}

/* インタビュー共通 */
.interview p {
  line-height: 1.9;
  margin-bottom: 1.5rem;
}
/* 話者ラベル共通 */
.speaker {
  font-weight: bold;
  margin-right: 0.4em;
  white-space: nowrap;
}
/* メイン人物 */
.speaker-main {
  color: #3071b9; 
}
.speaker-main2 {
  color: #2e8b57; 
}
.speaker-op {
	  margin: 0 0 1.8rem;
  line-height: 1.9;
  color: #333; 
}
/* インタビュアー */
.speaker-interviewer {
  color: #ea545d; 
}
.op-interviewer{
  font-weight: 600;
  margin: 0 0 1.8rem;
	line-height: 1.9;
}
.op-interviewer::before{
  content:"――";
  margin-right:0.4em;
  letter-spacing:-0.2em;
}

/* 見出し */
.article-headline {
  font-size: 1.9rem;
  font-weight: 500;
  color: #444444;
	  line-height: 1.7;
  padding: 0.5rem 1.5rem;
  border-top: 2px solid #eea6bd;
  border-bottom: 2px solid #eea6bd;
	margin: 4rem 0 2.4rem;
}

.chapter-headline{
  font-size: 2.3rem;
	  font-weight: 500;
  color: #444;
  background: #ffffff;
  padding: 0.8rem 1.6rem;
  margin: 3.5rem 0 2rem;
  border-left: 8px solid #8a7636;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
}
.sub-headline{
  font-size: 1.8rem;
  font-weight: 600;
  color: #004ea2;
  margin: 2.6rem 0 1.4rem;
}

/* 記事内の写真左右に */
/* PC 横並び */
.article-split {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  margin: 3rem 0;
}
.article-split__image {
  flex: 0 0 300px;
}
.article-split__image img {
  width: 100%;
  height: auto;
  display: block;
}
.article-split__text {
  flex: 1;
}
.article-split.reverse {
  flex-direction: row-reverse;
}

/* ==============================
   共通：写真
============================== */
.article-photo img {
  width: 100%;
  height: auto;
  max-height: 330px;
  object-fit: contain;
}

.article-photo {
  scroll-snap-align: start;
}

.horizontal-photo {
  text-align: center;
  margin: 40px 0;
}
.horizontal-photo img {
  height: auto;
}
/* spでタテ並びにする */
  .photo-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .article-photo img {
    aspect-ratio: auto;
    max-height: 330px;
  }

.has-shadow {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* ==============================
   PC表示（通常レイアウト）
============================== */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0;
}
.photo-carousel {
  display: flex;
  gap: 24px;
  margin: 40px 0;
  overflow-x: auto;
}
.photo-carousel .article-photo {
  flex: 0 0 auto;
}
.photo-carousel .article-photo img {
  height: 330px;
  width: auto;
  display: block;
}



/* キャプション */
.photo-caption {
  font-size: 1.3rem;
  line-height: 1.5;
  color: #333;
  margin-top: 0.8rem;
}
.photo-caption.is-center {
  text-align: center;
}
.photo-caption.is-right {
  text-align: right;
}
/* 画像の中にキャプション */
.image-wrap {
  position: relative;
}
.image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.image-wrap--narrow {
  width: 60%;
  max-width: 800px;
  margin: 0 auto;
}

.image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0)
  );
}
.image-caption {
  position: absolute;
  bottom: 3px;
  left: 20px;
  right: 20px;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.5;
  z-index: 1;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.9);
}
/* キャプションなしのときはグラデ消す */
.image-wrap--plain::after {
  display: none;
}
.image-caption.is-center {
  left: 50%;
  width: 80%;
  transform: translateX(-50%);
  text-align: center;
}

.image-caption.is-right {
  left: auto;
  right: 20px;
  text-align: right;
}


/* 最後の写真と注釈 */
.interview-end {
  display: flex;
  gap: 40px;
  margin-top: 60px;
	  align-items: flex-start;
}

.end-photo {
  flex: 1;
}

.end-photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* 注釈 */
.end-note {
  flex: 1;
  font-size: 1.3rem;
  color: #333;
  line-height: 1.7;
	  margin-bottom: 1rem;
}
.end-note-lead {
  font-size: 1.6rem;
  font-weight: 700;
}


@media screen and (max-width: 768px) {
  .interview_wrap {
    padding: 0 5%;
  }
  .article-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5%;
  }

  .opening-toc{
    display:block;
  }

/* ----- 先輩教室 ----- */
	
	  .opening-inner{
    flex-direction:column;
    gap:16px;
    text-align:center;
  }
 .opening-photo{
	    width:100%;
    margin:0 auto;
  }
  .opening-name{
    font-size:2.5rem;
    text-align:center;
    margin:0 auto;
  }
  .opening-date{
    text-align:center;
    font-size:1.1rem;
  }
	.opening-desc{
  text-align:left;
}
  .opening-link{
    text-align:right;
    font-size:1.4rem;
  }
	  .opening-box:hover{
    background:#faf7f4;
    transition:0.25s;
  }
	
	  .opening-top-image {  /* top画像sp余白無し */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
  }
  .opening-top-image img {
    width: 100%;
  }
	
	  .opening-catchcopy {
    font-size: 2.2rem; 
    font-weight: 600;
    line-height: 1.5;
    margin: 1.2rem 0 0.8rem;
  }
  .opening-subcopy {
    font-size: 1.6rem; 
    font-weight: 500;
    line-height: 1.7;
    margin: 0 0 1.5rem;
  }

/* ----- インタビュー ----- */
	  .interview_title {
    font-size: 2.6rem;
		  padding: 1.5rem;
		  	margin-bottom: 1.5rem;  /* 下だけ余白 */
    letter-spacing: 0.2em;
  }
	  .interview_title::before,
  .interview_title::after {
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
  }
	.interview_sub {
		 font-size: 1.2rem;
		}

	  .catchcopy {
    font-size: 2rem;
    line-height: 1.5;
  }
	  .article-headline {
    font-size: 1.6rem;
    line-height: 1.7;
    margin: 3rem 0 1.8rem;
  }
	/* ----- 小さめ写真1枚 ----- */
	  .horizontal-photo img {
    width: 100%;
  }
	  .image-wrap--narrow {
    width: 100%;
  }
	/* 縦並び写真 */
.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

	 /* ----- gridを横スクロール化 ----- */
  .photo-grid-wrapper,
  .photo-carousel-wrapper {
    position: relative;   
  }
  .photo-grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
  }
  .photo-grid .article-photo {
    flex: 0 0 85%;
}
  /* ----- carousel ----- */
  .photo-carousel {
  display: flex;
  gap: 24px;
  margin: 40px 0;
	  overflow-x: auto; 
	  scroll-snap-type: x proximity;
  }
  .photo-carousel img {
  height: 300px;
  width: auto;
  display: block;
  }
  .photo-carousel .article-photo {
    flex: 0 0 auto;
	    scroll-snap-align: start;
  }

  /*  フェード（スクロール要素の外側） */
  .photo-grid-wrapper::after,
  .photo-carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, #fff, transparent);
  }
	
	/* spでタテ並びバナー　*/
  .interview-banner {
    flex-direction: column;
    height: auto;
	      margin: 30px auto;
  }
  .interview-banner__image {
    width: 100%;
    height: auto;
  }
  .interview-banner__image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .interview-banner__name {
    font-size: 1.6rem;
  }
  .interview-banner__meta,
  .interview-banner__description {
	  -webkit-line-clamp: unset;
    display: block;
  }
  .interview-banner__jump {
    margin-top: 10px; 
  }
	
 .article-split,
  .article-split.reverse {
    flex-direction: column;
    gap: 2rem;
  }
  .article-split__image {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.2rem;
  }
	  .profile-name {
    text-align: center;
  }
	.interview-end {
    flex-direction: column;    
		gap: 24px;
  }
	  /* プロフィール写真 */
.profile-inner {
    flex-direction: column;
	align-items: center;
  }
.profile-box.reverse .profile-inner {
    flex-direction: column;
  }
  .profile-image img {
    width: 100%;
    max-width: 300px;
	  margin: 0 auto;
  }
}



/*---------- oguma.css ----------*/

/*////////////////// style.cssの色の設定に追加 //////////////////*/

/* リンク・文字 */
.f_white{ color: #fff; }
.f_gold{ color: #d0b77b; }

/* 背景色 */
.bg_gray_d{background-color: #333;}
.bg_white{background-color: #fff;}

/* 線色 */
.bdr_gold{border-color: #d0b77b !important;}


/*////////////////// mihon.cssの「スマホ下部　カートボタン」に追加？ //////////////////*/
.fixed_contact_button {
    background: #ebaec3 !important;
}


/*////////////////// カテゴリーのトップページ //////////////////*/

/* カテゴリーへのリンクボタン */
a.btn_category:hover{color: #333333; opacity: 0.6;}


/*////////////////// レイアウト //////////////////*/

.container_w_992{
    max-width: 992px;
    margin: 0 auto;
}
.container_w_768{
    max-width: 768px;
    margin: 0 auto;
}


/*////////////////// 個別ページ：COMPANY //////////////////*/

.company_brandmessage{
    background: url(../images/company_img_1.png) center center no-repeat;
    background-size: cover;
    height: 700px;
    margin-bottom: 80px;
}
@media screen and (max-width: 1200px) {
    .company_brandmessage{
        height: 450px;
        margin-bottom: 60px;
     }
}
@media screen and (max-width: 768px) {
    .company_brandmessage{
        height: 200px;
        margin-bottom: 40px;
    }
}
.company_meaning_img{
    width: 500px;
    max-width: 100%;
}
.company_3service{
    background: url(../images/company_img_9.png) right center no-repeat;
    background-size: cover;
    height: 380px;
    margin-bottom: 80px;
}
@media screen and (max-width: 1200px) {
    .company_3service{
        height: 300px;
    }
}
@media screen and (max-width: 768px) {
    .company_3service{
        height: 250px;
    }
}
.company_3service div{
    position: relative;
} 
.company_3service_content{
    position: absolute;
    max-width: 340px;
    top: 40px;
    left: 0;
    margin-bottom: 100px;
}
.company_3service_content_img{
    max-width: 286px;
}
@media screen and (max-width: 1200px) {
    .company_3service_content_img{
        max-width: 250px;
    }
}
@media screen and (max-width: 768px) {
    .company_3service_content{
        display: none;
    }
}

/*////////////////// 個別ページ：資料請求 //////////////////*/

.demand_check{
    position: relative;
}
.demand_check_btn{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: auto;
}
.demand_check_btn:hover{
    opacity: 0.8;
}

/*////////////////// 個別ページ：ランキング //////////////////*/

.ranking_container{
    background-image: url(../best10/images/ranking_bg.png);
}


/*////////////////// 個別ページ：お客様の声 //////////////////*/

.voice_item{
    margin: 0 0 18px;
    border: 1px solid #cccccc;
    background: #fff;
    overflow: hidden;
}
.voice_summary{
    display: block;
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 20px 56px 20px 20px;
}
.voice_category_customer{
    display: inline-block;
    margin-bottom: 10px;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    background: #ebaec3;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}
.voice_category_work{
    display: inline-block;
    margin-bottom: 10px;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    background: #d0b77b;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}
.voice_summary::-webkit-details-marker{
    display: none;
}
.voice_name{
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}
.voice_lead{
    display: block;
    font-size: 14px;
    line-height: 1.4;
}
.voice_summary::after{
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1;
    color: #666;
    transition: transform 0.25s ease;
}
.voice_item[open] .voice_summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.voice_body{
    padding: 0 20px 10px;
}
.voice_body_title{
    font-size: 0.8em;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 0.25em;
}
.voice_body_name{
    text-align: right;
}
.voice_images{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px
}
.voice_images img{
    height: 220px;
    width: auto; 
}

@media screen and (max-width: 768px) {
    .voice_name{
        font-size: 16px;
    }
    .voice_lead{
        font-size: 12px;
    }
    .voice_images img {
        width: 100%; 
        height: auto;
    }

}

details[open] .voice_body {
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
    }
    100% {
    opacity: 1;
    transform: none;
    }
}

/*////////////////// 個別ページ：当店のホームページサービス //////////////////*/

.homepage_item{
    margin: 0 auto;
    text-align: left;
    border-top: 1px solid #d0b77b;
    border-bottom: 1px solid #d0b77b;
    padding: 10px 15px;
    overflow: hidden;
}
.homepage_summary{
    display: block;
    position: relative;
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}
.homepage_summary::-webkit-details-marker{
    display: none;
}
.homepage_summary::after{
    content: "+";
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1;
    color: #666;
    transition: transform 0.25s ease;
}
.homepage_item[open] .homepage_summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.homepage_body{
    padding: 10px 0 0;
}

details[open] .homepage_body {
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
    }
    100% {
    opacity: 1;
    transform: none;
    }
}



/*---------- shiiya.css ----------*/

.text_box{
	text-align: left;
}



/*//////////////////////インフォメーション//////////////////////*/

/*---会社概要---*/

.text_box .companytext_box{
	text-align: left;
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.company_img{
  flex: 0 0 40%;
  max-width: 40%;
}

.company_img img{
	width:100%;
	height: auto;
	display: block;
}

.company_table{
	flex: 1 1 auto;
  min-width: 0;
}

.company_table th{
	width:120px;
	text-align: left;
	vertical-align: top;
	}

.company_table th,td{
	padding:5px;
	text-align: left;
}

@media screen and (max-width: 768px) {
  .companytext_box{
    flex-direction: column;
    gap: 20px;
  }
  .company_img{
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .company_table{
    width: 100%;
  }
}


/*//////////////////////支払い方法//////////////////////*/


.pay_text_box{
	padding:30px;
	text-align: center;
}

.text_box .pay_box{
	display: flex;
	padding:30px;
	border-bottom: dashed 1px #333;
}

.text_box .pay_box img{
	padding:10px;
	 width:250px;
}


/*左*/
.pay_box_left{
    width: 300px;
    font-size: 90%;
}


/*右*/
.pay_box_right{
	text-align: left;
}

/*共通*/
.h2_title .sub{
	display: block;
	font-size: 15px;
	font-weight: lighter;
}	

.text_red{
	color:#ff0000;
}

.pay_text_box .pay_box:last-child {
  border-bottom: none;
}

 @media screen and (max-width: 768px) {
	.text_box .pay_box{
		 flex-direction: column;
	 }
.pay_box_left  {
    padding:20px;
	width: 100%;
  }
.pay_box_left .h2_title br{display: none;}
}


/*//////////////////////特定商取引法に基づく表記　＆　個人情報保護方針//////////////////////*/
.tokutei_table td,
.tokutei_table th {
  border: 1px solid #000;
}


.tokutei_table{
		 margin: 0 auto;
}

.tokutei_table th{
	padding:15px;
}

.tokutei_table td{
	padding:20px;
}

.tokutei_item{
	width:35%;
}

.tokutei_item, .tokutei_th{
	background-color: #f2f2f2;
		font-weight: bold;
}

.tokutei_th{
	text-align: center;
	font-weight: bold;
}

.privacy_title{
	font-weight: 700; 
	font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	display: block;
	text-align: center;
}

.privacy_table{
	margin-top:50px;
}


/*//////////////////////著作権について//////////////////////*/

.writing_box img{
	width:750px;
	max-width: 100%;
	height:auto;
	display: block;
	 margin: 0 auto;
}

/*//////////////////////よくいただく質問//////////////////////*/

.qa_text{
	padding-bottom: 20px;
}

.question_item{
text-align: left;
}

.text_box .question_item{
	padding:30px 30px;
	border-bottom: solid 1px #ccc;
}

.question_item .h2_title{
	padding:20px 0px;
}

.question_box{
	padding:30px 0;
	border-bottom: dotted 1px #ccc;
}

.question_item .question_box:last-child {
  border-bottom: none;
}

.question{
	padding:  5px 0px;
}

.question, .answer{
	display: flex;
}

.question_Q{
	color: #ebaec3;
}


.question .question_text{
	font-weight: bold;
}

.question_Q, .answer_A{
	font-size:16px;
	font-weight: bold;
	padding-right: 18px;
	}

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

 @media screen and (max-width: 768px) {
	 .question_item .h2_title{
		 display: block;
		 text-align: center;
	 }
	 
	 .text_box .question_item{
	padding:30px 0px;
}
}

/*//////////////////////ペーパーアイテム//////////////////////*/
/*---ポスターサイズ比較表---*/
.size_box{
	margin:30px 0px;
	text-align: left;
}

.poster_size{
	font-weight: bold;
	color:#ea669d;
}

.poster_size_box img{
	width: 100%;
	height:auto;
}

/*---プログラムサイズ表---*/
.program_types{
	margin-top: 30px;
}

.program_types img{
	padding:50px 0;
	width:800px;
	max-width: 100%;
	height:auto;
	display: block;
	margin:0 auto;
}


.program_types_btn{
	display:flex;
	gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
	
}

.program_types_title{
	font-weight: 700; 
	font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	display: block;
	text-align: center;
}

@media screen and (max-width: 768px) {
.program_types_btn {
	gap:1px;
	flex-direction: column;
	align-items: center;
  }
	
	.types_btn{
		padding: 10px 0px;
	}

.program_types_btn .btn_original a{
		 display: inline-block;
    min-width: 260px;
    white-space: nowrap;
	}
}
	
/*//////////////////////ご納品までの流れ//////////////////////*/
.guide_box{
	background-color: #ffebf1;
	border: 1px solid #ff66a8;
	padding:20px;
	display: grid;
	grid-template-columns: minmax(0, 860px) 250px; 
  gap: 16px;                                  
  align-items: start;
  justify-content: start;
	max-width: 900px;
	width: 100%;
  margin: 0 auto;
}
	
.guide_box_text{
	width: auto;
}

.guide_box_text .h2_title{
 min-height: 70px;
  height: auto;
}

.guide_box_text .h2_title + p{
  margin-top: 12px;
}

.guide_box_img{
	width: auto; 
}

.guide_box_img img{
width: 100%;
  height: auto;
}

.square{
	display: inline-flex;
	justify-content: center;
  align-items: center;
	width: 27px; 
  height: 27px;
	line-height: 1; 
    margin-right: 10px;
    border-radius: 5px;
	background-color: #ea669d;
	color: #fff;
}

.guide_next{
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding:30px 0px;
		max-width: 900px;
	width: 100%;
  margin: 0 auto;
}

.guide_mail{
	display: flex;
	align-items: flex-start;
	gap: 12px; 

}

.guide_icon{
  width: 40px;
  height: auto;
  flex: 0 0 auto;
}


.guide_mail, .guide_point{
	width:500px;
	padding:0px 15px;
}


.guide_next img{
	width:40px;
	height: auto;
}





@media screen and (max-width: 768px) {
  .guide_box{
    grid-template-columns: 1fr; 
    justify-content: stretch;
    gap: 20px;
  }
	
.guide_box_text{ 
	justify-self: stretch;
	 width: 100%; 
	} 
	
.guide_box_img{ 
	justify-self: center; 
	}
	
 .guide_box_img img{
    max-width: 250px;
  }
	
.guide_box_text{
	max-width: 100%;
    width: 100%;
	}
	
.guide_next{
    flex-direction: column;
    align-items: center; 
    gap: 20px;
  }

  .guide_mail{
    order: 1;
    width: 100%;
  }

  .guide_point{
    order: 2;
    width: 100%;
	text-align: center;
  }
	
	.guide_mail,.guide_point{
		width:100%;
		 max-width: 500px; 
	}

  .guide_next > img{
    order: 3; 
    align-self: center; 
  }
	
 
}
	
/*/////////////////////あらすじ集///////////////////////////*/


.sotry_box{
	padding:20px 0;
	border-top: solid 1px #cccccc;
		
}

.story_list_tytle{
	color:#333333;
	font-weight: 700; 
	font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	display: block;
	text-align: center;
	padding-bottom:15px;
	padding-top:20px;
}

.sotry_box p{
	text-align: center;
}

.story_comment{
	margin:70px 0;
}

@media screen and (max-width: 768px) {
.story_comment{
	margin:30px 0;
}
}

/*===========あらすじ一覧のリストタブ、クラス===========*/

#story_list{
	max-width: 900px;
	margin: 0 auto;
	margin-bottom: 30px;
}
#story_list ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    list-style: none;
    padding: 20px;
}

#story_list ul li{
    position: relative;
}

#story_list li {
    list-style-type: square;
    list-style-position: inside;
	color: #ebaec3;
}




/*=====================あらすじリスト　スマホ幅===========================*/
@media screen and (max-width: 768px) {
	#story_list ul {
        grid-template-columns: 1fr;
}	
}


/*===========リクエストについて===========*/
.award_request{
	position: relative;
	background-position:right top;
	background-color: #f4f0eb;
	padding:20px;
	max-width: 900px;
	  margin: 0 auto;
	z-index: 0; 
	margin-top:80px;
}


.award_request::after{
	content: "";
	position: absolute;
	top:-3%;
	right: 0;
	background: url("../helpful/story/images/request_img.png") no-repeat center/contain;
	width: 150px;
	height: 150px;
	z-index: -1; 
}

.story_title,
.award_request p,
.award_request .by_prifee{
  position: relative;
  z-index: 1;
}

.by_prifee {
  text-align: right;
  padding-right: 30px;
}

.award_request .story_title br{
	display: none;
}


@media screen and (max-width: 768px) {
 .by_prifee {
  padding-right: 0;
}
		
.award_request .story_title{
	text-align: left;
}
	
.award_request .story_title br{
	display: block;
}
}



/*===========あらすじ・個別あらすじ集の共通===========*/
.story_title{
	color:#563b28;
	font-weight: 700; 
	font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	display: block;
	text-align: center;
	padding-bottom:15px;
}

/*---------------個別あらすじ集---------------*/
.story_writing{
	padding-top:30px;
	padding-bottom: 10px;
}

.story-act{
	font-weight: bold;
		display: block;
	text-align: center;
	border-bottom: 1px solid #cccccc;
}

.story_box{
	background-repeat: no-repeat;
	background-size:250px;
	padding:20px;
	margin:15px 0;
	border: 3px double #d3cac4;
	background-position:right top;
}

.text_box .story_box + .story_box {
  margin-top: 50px;
}

.story_kind ul {
  display: flex; 
  gap: 20px; 
  list-style: none; 
  padding: 0;
}

.story_kind ul li{
    position: relative;
  padding-left: 1.5em;
}

.story_kind ul li::before{
	content: "■";
  color: #ebaec3;
  position: absolute;
  left: 0;
  top: 0;
}

.story_sub ,.story_source{
	font-size: 80%;
}

.story_memo{
	background-image: url("../helpful/story/images/story_bg.png");
	background-size:130px;
	background-repeat:no-repeat;
	background-position: top right;
	background-color:#f4f0ed;
	padding:20px;
	margin-top:40px;
}

.story-program{
	margin-top:30px;
}

.story-proguram_list{
	display: flex;
  flex-wrap: wrap;
		gap: 15px;
}


/*/////////////////////あいさつ文例集///////////////////////////*/
.bunrei_p{
	margin-bottom: 30px;
}

.aisatsu_bunrei_box{	
	margin-top: 20px;
    margin-bottom: 20px;
    border: 3px double #d3cac4;
    padding: 20px 30px;
    background-color: #f4f0eb;
}

.aisatsu_bunrei_title{
	 color: #cc3366;
    font-size: 130%;
    margin-bottom: 10px;
    font-weight: bold;
}

.aisatsu_bunrei_foot, .bunrei_r{
	text-align: right;
}

@media (max-width: 768px){
.aisatsu_bunrei_title{
	text-align: center;
  }
}


/*------------------文例主催者編～基本的な作成のポイント～　ここから--------------------*/

.aisatsu_bunrei_point{
	margin:60px 0px;
}

#aisatsu_title{
	display: block;
  margin-bottom:20px;
  padding: 0;
}

.aisatsubunrei_mainbox{
  max-width:1200px;
  margin:0 auto;         
  padding:0 16px;
}

.aisatsubunrei_textbox{
  position: relative;
  background: #f2f2f2;
  border: 1px solid #CCCCCC;
  padding: 20px;
  max-width: 550px;
  overflow: visible; 
}

.bunrei_block{
  position: relative; 
  margin: 0 0 24px;
}

.bunrei_block p{
  margin: 0;
  line-height: 1.9;
}

/* ●の設定 */
.bunrei_block--note::before{
  content:"";
  position:absolute;
  top: 7px;         /* 一番上 */
  right:-15px;       /* 一番右 */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
	color:#d3cac4;
}

/* 線の設定 */
.bunrei_block--note::after{
  content:"";
  position:absolute;
  top: 11px;       /* ●の中心付近に合わせる */
  right: -60px;  /* 外へ出す量 */
  width: 50px;   /* 線の長さ */
  height: 2px;
  background:#333;

}

/* 注釈：灰色ボックスの外 */
.bunrei_note{
  position:absolute;
  top: 0;
  left: calc(100% + 70px);
  width: clamp(300px, 40vw, 600px); 
}


/*ポイントの色 */
.bunrei_note_label, .bunrei_SP{
  font-weight: 700;
  margin-bottom: 1px;
	color:#cc3366;
}

.bunrei_note_text_SP{
	display:none;
}

.text_pink{
	color:#cc3366;
}




@media screen and (max-width: 970px) {


.aisatsubunrei_textbox{
  position: relative;
  background: #f2f2f2;
  border: 1px solid #CCCCCC;
  padding: 10px;
  max-width: 350px;
}
	
  .bunrei_block--note::before,
  .bunrei_block--note::after{
    display: none;
  }


  .aisatsubunrei_textbox{
    max-width: 100%;
    overflow: hidden; 
  }

  .bunrei_block{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  .bunrei_block p{
    grid-column: 1 / 2;
    margin: 0;
  }

  /* ポイントを中に入れる */
  .bunrei_note{
    position: static;
    top: auto;
    left: auto;
    width: auto;
	 display: contents;
  }

  .bunrei_note_label{
    grid-column: 2 / 3;
    justify-self: end;
    white-space: nowrap;
    margin: 0;
  }


  .bunrei_note_text{
    grid-column: 1 / -1;
    display: block;
  }

  .bunrei_note_text_SP{
    grid-column: 1 / -1;
    display: block;
  }

.bunrei_note_text{
	display:none;
	}

.bunrei_note_text_SP{
	margin:30px 0px
	}
	
.bunrei_SP_box{
		margin:20px 0px;
	}
	
/*-----------------------基本的な作成のポイントここまで-----------------------------*/
	
	
/* --------------お礼文例集リンク--------------*/
  .bunrei_kind ul{
    grid-template-columns: 1fr; 
  }
}

/* --------------季語　表--------------*/
.bunrei_sample_kigo_box{
	background-color:#f9f9f9;
	border:1px solid #e5e5e5;
	margin-top:10px;
	padding:10px;
}

.bunrei_sample_kigo_box table{
	width:100%;
}

.bunrei_sample_kigo th{
	background-color:#ffd6e3;
	text-align: center;
	width: 30px;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-topi-style:solid;
	border-bottom-style: solid;
	border-top-color:#f9f9f9;
	border-bottom-color:#f9f9f9;
}

.bunrei_sample_kigo td{
	background-color: #fff;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-topi-style:solid;
	border-bottom-style: solid;
	border-top-color:#f9f9f9;
	border-bottom-color:#f9f9f9;
	padding:10px;
	
}

.f_d{
	font-weight: bold;
}




/*///////////////////////////-挨拶状///////////////////////////*/
.aisatsu_kind li{
  display: grid;
  grid-template-columns: 260px 1fr;
}

@media (max-width: 768px){
  .aisatsu_kind li{
    grid-template-columns: 1fr;
    gap: 6px;
	margin-bottom: 20px;
  }
}

/*///////////////////////////体験レッスンのお礼状///////////////////////////*/

.orei_box{
	display: flex;
	gap:50px;
	align-items: flex-start;
	margin-top:20px;
	margin-bottom: 50px;
}

.orei_p{
  flex: 1;
  max-width:700px; 
}

.orei_img img{
  width: 230px;
  height: auto;
  display: block;
}

@media (max-width: 768px){
  .orei_box{
    flex-direction: column;
  }
  .orei_img{
	 width: 100%; 
    display: flex;
    justify-content: center;
  }
}

/*-----------------------体験レッスンのお礼状・アンケートテンプレート　リンク-----------------------------*/

.bunrei_kind ul {
	display:flex;
  gap: 50px;
  list-style: none;
  padding: 0;
  margin: 0px 20px;
}


.bunrei_kind ul li{
    position: relative;
  padding-left: 1.5em;
}

.bunrei_kind ul li::before{
	content: "■";
  color: #ebaec3;
  position: absolute;
  left: 0;
	top: 0;
}


@media (max-width: 768px){
.bunrei_kind ul {
    flex-direction: column;
    gap: 15px; 
  }
}

/*-----------------------注意事項　リンク-----------------------------*/
.bunrei_kind2 ul {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0px 20px;
}


.bunrei_kind2 ul li{
    position: relative;
  padding-left: 1.5em;
}

.bunrei_kind2 ul li::before{
	content: "■";
  color: #ebaec3;
  position: absolute;
  left: 0;
	top: 0;
}


@media (max-width: 768px){
.bunrei_kind2 ul {
    grid-template-columns: 1fr;
    gap: 15px; 
  }
}


/*///////////////////////////アンケートテンプレート///////////////////////////*/

.survey{
	text-align: center;
	font-weight: bold;
}


.DL_btn a{
	display: inline-block;
	border:1px solid #dee2e6;
	background-color: #fff;
	padding:1rem 3.5rem 1rem 3.5rem;
	border-radius: 5px;
	font-size:1.8rem;
	font-weight: bold;
	text-decoration: none;
}



/*///////////////////////////初めての発表会鑑賞用　バレエの基本用語集///////////////////////////*/
.basic_box{
	border: 1px solid #FF66A8;
	align-items: flex-start;
	max-width: 900px;
	width: 100%;
	padding:20px;
	margin-top:15px;
	margin-bottom:15px;
	border-radius: 10px;
	 margin: 15px auto;
	
	
}

.basic_title{
	font-size: 130%;
    margin-bottom: 10px;
	font-weight: bold;
}

.basic_content{
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.basic_content p{
  flex: 1;
  min-width: 0; 
}

.basic_img_box{
  flex: 0 0 280px; 
}

.basic_img_box img{
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px){

  .basic_content{
    flex-direction: column;
  }

  .basic_img_box img{
   width:auto;
	max-width: 80%;
	 margin: 0 auto;
  }
	

}


/*///////////////////////////初めての発表会鑑賞用　著名作品のポイントメモ///////////////////////////*/
.famous_main_box{
	max-width: 900px;
	margin:15px auto;
}

.famous_box{
	width: 100%;
	padding:20px;
	margin-top:15px;
	margin-bottom:15px;
	
	background-repeat: no-repeat;
	background-size:300px;
	background-position:90%;
	background-color: #FAF6EA;
	border:3px double #d3cac4;
	padding:20px;
}

.famous_title{
	color:#CC3366;
	font-size:130%;
	font-weight:bold;
}

.famous_content{
	margin:10px 0px;
}

.famous_midashi{
	color:#563b28;
	font-size:120%;
	font-weight:bold;
}

.famous_midashi2{
	color:#563b28;
	font-weight: bold;
}

@media (max-width: 768px){

.famous_box{
	background-size:150px;
	background-position:right top;
	}

  }
	



/*///////////////////////////アナウンス原稿///////////////////////////*/
.announce_box{
	margin-bottom:20px;
	width: 100%;
}


.announce_box td,
.announce_box th {
	border: 1px solid #000;
	padding:10px;
}

.announce_disaster{
	width:100%;
	border:1px solid #cccccc;
	padding:10px;
	margin:20px 0px;
	background-color: #fff;
}


/*///////////////////////////広告依頼文　無料テンプレート///////////////////////////*/

/*------------------広告掲載・申込書の表---------------------*/
.koukoku_box, .koukoku_signup_box{
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
	padding:20px 0px;
}

.koukoku_box_table, .koukoku_sigup_table{
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  table-layout: fixed;
}

/*------------------広告掲載・申込書の表　線---------------------*/

.koukoku_box_table th, .koukoku_box_table td,
.koukoku_sigup_table td{
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  word-break: break-word;
}

/*------------------広告掲載・申込書の表　td 太字---------------------*/

.koukoku_box_table th, .koukoku_sigup_table td{
  font-weight: bold;
}

/*------------------締め切り期限---------------------*/

.koukoku_due{
  padding: 20px 0;
  margin: 0;
}


/*------------------広告掲載・申込書の表　見出し---------------------*/
.koukoku_temp{
  font-size: 120%;
  font-weight: bold;
  text-align: center;
}

.koukoku_signup_box{
  padding-top: 30px;
}

/*------------------申込書の表　---------------------*/
.koukoku_signup_mainbox{
	border-top:1px solid #ccc;
}

.koukoku_page{
  text-align: center;
  background-color: #f2f2f2;
}

/*------------------申込書の表　左寄せ・太字解除---------------------*/
.koukoku_sigup_table td.koukoku_unit{
  text-align: right;
	font-weight: normal;
}

.koukoku_list{
  margin: 0;
  padding-left: 1.2em;
}

.koukoku_note{
  text-align: center;
}


/*/////////////////////////広告枠のサイズ例//////////////////////////////////*/

.koukokuwaku_box{
    display: flex;
    gap: 50px;         
	flex-wrap: wrap;
	margin:40px 0px;
}

.koukoku_size{
	color:#FF66A8;
	font-weight: bold;
	font-size: 120%;
	border-bottom: 1px solid #FF66A8;
	margin-bottom:10px;
}

.koukoku-temple{
	max-width:150px;
}


.koukoku-temple img{
	max-width: 100%;
	height: auto;
}

.koukoku-temple a:hover img{
    opacity:0.5;
}


.koukokuwaku{
	color:#563b28;
	font-weight: bold;
	font-size: 120%;
	padding:10px 0px;
}

@media screen and (max-width:768px){

.koukokuwaku_box{
    justify-content:center;
}
}

/*//////////////////////////////////台割//////////////////////////////////*/
.flat_sample{
	 display: flex;
    gap: 30px; 
	justify-content: center;
	flex-wrap: wrap;
	margin:10px 0px;
}

.flat_box{margin-bottom:60px;}

.flat_box+.flat_box{
	border-top:1px solid #ccc;
	padding-top:30px;
}



/*１ページに載せられる生徒写真のサンプル*/
.flat_list{
	margin-top:30px;
}


.flat_size{
	max-width: 180px;
	margin-bottom:20px;
}

.flat_size img{
	max-width: 100%;
	height: auto;
}

.flat_size a:hover img{
    opacity:0.5;
}

.flatplan_a{
    text-decoration: none;
	color: inherit;
}

.flat_number{
	text-align: center;
	font-weight: bold;
}

.flatplan_btn{
	text-align: center;
	border:solid 1px #ccc;
	width:80px;
	margin:10px auto;
}

.flat_title{
	font-size:2rem;
	font-weight: bold;
	margin:10px 0px;
}

.mark_pnk{
	color: #FF66A8;
	font-weight: bold;
}

.flatplan_size{
	font-size: 120%;
	color:#FF66A8;
	font-weight: bold;
}

/*====================ページ数別の台割例=========================*/
.flat_page_main{
	border-top:1px solid #ccc;
}

.flat_page+.flat_page{
	border-top:1px solid #ccc;
}


.flat_page{
	padding:70px 0px;
}

.flat_img{
	max-width: 680px;
}

.flat_img img{
	width:100%;
	height: auto;
}

.flat_img_3ori{
	display: flex;
    gap: 50px;         
	flex-wrap: wrap;
	margin:10px 0px;
}

.flat_img_3ori img{
    width:30%;
	height:auto;}

.flat_page_text,.flat_sub{
	padding:15px 0px;
}




@media screen and (max-width:768px){

.flat_sample{
    	justify-content: space-between;
		gap: 20px 0;
}
	
.flat_size{
		max-width: none;
		width: calc(50% - 10px);
	}

/*改行*/
.flatplan_size{
    display:block;
}
	
	
.flat_img_3ori img{
	display:block;
	width:70%;
	height:auto;
	margin:0 auto;
	}
	
}


/*////////////////////////写真撮影のポイント////////////////////////*/

.photo_box{
	padding:70px 0px;
}

.photo_box+.photo_box{
	border-top:1px solid #ccc;
}

.photo_box .h2_title{
	text-align: left;
}

.photo_p{
	padding:15px;
}


/*----------------------------イラスト----------------------------------*/
/*-----------縦-----------*/

.photo_box_p{
	display:flex;
	align-items:flex-start;
	gap:40px;
}

.photo_texts{
	flex:1;
	min-width:0;
}


.photo_img{
  text-align:center;
		width:200px;
	flex-shrink:0;
}

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

.photo_columns{
  display: flex;
  flex-wrap: wrap;
}

.photo_p_co{
	flex:1;
}

.photo_columns .photo_img{
	max-width:200px;
}

/*-----------横-----------*/
.photo_illust{
	max-width:800px;
		margin:0 auto;
}

.photo_illust img{
	max-width:100%;

}

.photo_illust,.photo_illust2{
	margin-top:10px;
}

.photo_illust2{
	margin:0 auto;
	max-width: 600px;
}

.photo_illust2 img{
		margin:0 auto;
	max-width: 100%;
}

@media screen and (max-width:768px){
.photo_box_p{
	display:block;
	align-items:flex-start;
	gap:40px;
}
	
.photo_img{
	margin:0 auto;
}
	
}

/*////////////////////////写真撮影　リスト・資料請求////////////////////////*/
.photo_li{
	border:solid 1px #ccc;
	padding:20px;
	margin:0 auto;
	max-width: 550px;
}

.photo_li li{
	padding:7px 0px;
	margin: 0 auto;
} 


.photo_no .square{
	width: 25px;
	height:25px;
}




/*////////////////////////マイムポーズ　意味////////////////////////*/
.maime_box{
    display: flex;
    gap: 70px;         
	flex-wrap: wrap;
	margin:40px 0px;
}

.maime_size{
	color:#FF66A8;
	font-weight: bold;
	font-size: 125%;
	border-bottom: 1px solid #FF66A8;
	margin-bottom:10px;
}

.maime_sub{
	color:#333;
	font-size: 12px;
	font-weight: normal;
	padding-left:10px;
}

.maime-pause{
	max-width:350px;
}


.maime-pause img{
	max-width: 100%;
	height: auto;
}

.koukoku-pause a:hover img{
    opacity:0.5;
}




@media screen and (max-width:768px){

.maime_box{
    justify-content:center;
}
}



/*////////////////////////////校正についての注意点////////////////////////////*/
.attention_box{
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #ccc;
	background: #fafafa;
}

.attention_box .attention_title {
	margin: 0 0 12px;
	font-size: 120%;
	line-height: 1.6;
	font-weight: bold;
	color: #d14b7d;
}

.attention_box p{
	margin: 0 0 12px;
}

.attention_box p:last-child{
	margin-bottom: 0;
}

.attention_list{
	margin: 10px 0 0;
	padding-left: 1.5em;
	line-height: 1.8;
}

.attention_list li{
	margin-bottom: 8px;
}

.attention_list li:last-child{
	margin-bottom: 0;
}

.attention_p{
	margin-top:20px;
}


/*////////////////////////////名前のローマ字表記について////////////////////////////*/
.attention_name-img{
	margin:0 auto;
	max-width:700px;
}

.attention_name-img img{
	width:100%;
}





/*///////////////////////////////////////////////////////
無料テンプレート　ページ（月謝袋・賞状・レッスンカード・レッスンチケット・
バレエ教室案内・チケット用封筒・メッセージカード）
///////////////////////////////////////////////////////*/

/*=======================共通============================*/
.free-template{
	display:flex;
	align-items:flex-start;
	margin:0 auto;
	max-width:950px;
}

.free-temole_img{
	max-width:200px;
	margin-left: 10px; 
}

.free-temole_img_award{
	max-height:180px;
	margin-left: 10px; 
}

.free-temole_img_award img, .free-temole_img img{
	max-width: 100%;
}

.free_temp_p{
	display: block;
}



.free-template_box{	
	display: flex;
    gap: 50px;         
	flex-wrap: wrap;
	justify-content: center;
	margin:45px 0px;
}

.temp-types{
		color:#FF66A8;
	font-weight: bold;
	font-size: 120%;
	border-bottom: 1px solid #FF66A8;
	margin-bottom:10px;
}


@media screen and (max-width:768px){
	 .free-template_box{
    gap:20px;
    justify-content: space-between;
  }
  .free-template{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .free-temole_img{
    order:1;
    max-width:150px;
    margin:0 auto;
  }

  .free-temole_img_award{
    order:1;
    max-width:300px;
    max-height:none;
    margin:0 auto;
  }

  .free-template_text{
    order:2;
    margin:0;
    width:100%;
  }

  .free-temole_img img,
  .free-temole_img_award img{
    width:100%;
    height:auto;
    display:block;
  }
	
	
	.step-text{
  padding-left: 2em;
  text-indent: -2em;
}
}

/*-----------------50枚以上---------------------*/
.temp_more{
    text-align: center;
}

.more_midashi{
	font-size:120%;
	font-weight: bold;
    margin: 0 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.more_midashi img{
    width: 120px;
    height: auto;
}

.temp_more_p{
	margin-top:15px;
}

/*-------------------テンプレート　作り方---------------------------*/
.sakusei-temp_box{
	margin:0 auto;
	text-align: center;
	margin-top:30px;
}

.sakusei-temp_box .midashi{
	border-bottom: solid 1px #ccc;
}

.sakusei_list{
	margin-top:50px;
}

.temp-sakusei_midashi{
	display: block;
	font-weight: bold;
	color:#FF66A8;
	margin-bottom:10px;
}

.sakusei_img{
	max-width:500px ;
	margin:0 auto;
}

.sakusei_img img{
	width:100%;
}

.sakusei_step{
	margin-bottom:50px;
}

.kansei{
	text-align: center;
	font-weight: bold;
}


/*一番下のボックス*/

.sakusei_point{
	border:3px double #d3cac4;
	padding: 20px;
	margin-top:80px;
}

.sakusei_text-title{
	font-size:120%;
	font-weight: bold;
	color:#563b28;	
	padding-bottom:10px;
}


@media screen and (max-width:768px){
	.sakusei_step,.sakusei_text{text-align: left;}
}


/*=======================月謝袋============================*/
.envelope{
	border:1px solid #2b2b2b;
}

.envelope-temp{
max-width:300px;
}

.envelope-temp img{
	width: 100%;
}

.envelope a:hover img{
    opacity:0.5;
}

.envelope-temp .DL_btn{
	margin-top:10px;
	text-align:center;
}

.envelope-temp .DL_btn a{
	justify-content: center;
	   font-size:15px;
    padding:7px 13px;
}


@media screen and (max-width:768px){
	.envelope-temp{
		max-width: none;
		width:calc(50% - 10px);
	}
}


/*------------プリントアウトの欄　よこならび------------*/

.sakusei_text_yoko{
  display: flex;
	justify-content: center;   /* 横方向中央 */
	align-items: center;       /* 縦方向中央 */
	gap: 30px;                 /* 余白 */
	flex-wrap: wrap;           /* スマホで折り返し */
	text-align: left; 
}

.sakusei_text_yoko p{
  margin: 0;
  flex: 1;
	max-width: 500px;
}

.sakusei_yoko_img{
  width: 300px;
  flex-shrink: 0;
	margin-left: 10px; 
}

.ticket-img{
  max-width: 100%;
  height: auto;
  display: block;
}

.sakusei_yoko_img img{
  width: 100%;
  height: auto;
  display: block;
}


@media screen and (max-width: 767px){
  .sakusei_text_yoko{
    flex-direction: column;
  }

  .sakusei_yoko_img{
    width: 100%;
    max-width: 300px;
	margin: 0 auto; 
  }
}



/*=======================賞状============================*/
.award-temp{
max-width:200px;
}

.award{
	border: 1px solid #2b2b2b;
	padding:10px;
	position: relative;
}

.award-temp img{
	width: 100%;
}

.temp-award{
	position: absolute;
	top: 0;
	left: 0;
	padding:0 0.75em;
	background: #ebaec3;
	font-weight: bold;
}

.award:hover{
    opacity: 0.6;
}

.award-th{
	position: absolute;
	top:36px;
	left:8px;
	font-size:11px;
}

.award-temp .DL_btn{
	margin-top:10px;
	text-align:center;
}

.award-temp .DL_btn a{
	justify-content: center;
	   font-size:12px;
    padding:7px 13px;
}

@media screen and (max-width: 767px){
	.award-temp{
		max-width: none;
		width:calc(50% - 10px);
	}
}


/*=======================レッスンチケット　ロータリーカッター============================*/
.ticet_cut{
	background-color:#fff5f5;
	border-radius: 5px;
	padding:20px;
}
.lt-cutter{
	display: flex;
	align-items: center;   
	gap: 20px;            
}

.lt-cutter img{
	max-width: 400px;    
	width: 100%;
}

.lt-cutter_yoko{
	flex: 1;   
}

@media screen and (max-width:768px){
	.ticet_cut{
		text-align: center;
}
	.lt-cutter{
		flex-direction: column; 
		text-align: center;
	}

	.lt-cutter img{
		max-width: 250px;
		margin: 0 auto;
	}
}




/*---------- yamazaki.css ----------*/


/*////////// オリジナルデザインで作成 //////////*/

/*作成の流れ*/

.flow_title{
	font-size: 1.6rem;
	font-weight: bolder;
	text-align: left;
	margin-bottom: 10px;
}

.flow {
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* 上段3つ */
.flow-item {
	position: relative;
	width: calc((100% - 40px) / 3);
	padding: 20px;
	border: 1px solid #ebaec3;
	box-sizing: border-box;
}

/* 下段2つ */
.flow-item:nth-child(4),
.flow-item:nth-child(5) {
	width: calc((100% - 20px) / 2);
}

/* ▶ */
.flow-item::after {
	content: "▶";
	color: #ebaec3;
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
}

.flow-item:nth-of-type(3)::after,
.flow-item:nth-of-type(5)::after {
	content: "";
}

/* 番号 */
.flow-num {
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #ebaec3;
	color: #fff;
	text-align: center;
	line-height: 25px;
	border-radius: 10%;
	margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
	.flow {
		flex-direction: column;
		gap: 0;
	}

	.flow-item {
		width: 100% !important;
		margin-bottom: 40px;
	}
	
	.flow-item::after {
		position: static;
		top: auto;
		right: auto;
		transform: none;
		content: none;
	}
	
	/* ▼ */
	.flow-item:not(:last-child)::after {
		content: "▼";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -32px;
		color: #ebaec3;
	}
}



/* オプション ボタン */
.btn_r{
	justify-content: flex-end;
	display: flex;
	gap: 20px;
	margin-bottom: 15px;
}

.btn_option a{
	display: inline-block;
	border: 2px solid #c6b198;
	padding: 1rem 3.5rem 1rem 2.5rem;
	border-radius: 5px;
	font-size: 1.8rem;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none; 
	background-image: url("../images/btn_arrow_brown.svg");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px auto;
}
.btn_option a:hover{
	color:#000;
	background-color:#ebead8;
}

@media screen and (max-width: 768px) {

    .btn_r {
        flex-direction: column;
        align-items: center;
		gap: 15px;
	margin-bottom: 25px;
    }
	
	.btn_option {
        width: 100%;
        max-width: 400px;
    }
	
    .btn_option a {
        display: block;
        width: 100%;
		font-size: 1.4rem;
        box-sizing: border-box;
        padding: 1rem 2.5rem;
        text-align: center;
        background-position: right 16px center;
    }
}

/* 見本をアレンジして作成 */

.arrange_sample_wrap {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.arrange_sample_wrap img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.arrange_sample_wrap {
		flex-direction: column;
	}
	
	.arrange_sample_wrap {
		margin-bottom: 30px;
	}
}


/*////////// 招待状 //////////*/

.inv_mark{
	color: #d0b77b;
}

.inv_type_wrap {
	display: flex;
	gap: 20px;
	margin: 25px auto;
}

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

.inv_type_bg{
	flex: 1;
	display: block;
	background-color: #f2f2f2;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 5px;
}

.inv_type img,
.inv_type_bg img{
	width: 90%;
	display: block;
	margin: 10px auto 0;
}

.inv_type_bg img{
	width: 100%;
	display: block;
	margin: 10px auto 0;
}

.inv_type_img{
	max-width: 400px;
}

.inv_type_tit{
	font-weight: 700;
	font-size: 1.8rem;
}

.inv_option_name{
	font-size: 120%;
	font-weight: bold;
	color: #563b28;
	border: 1px solid #563b28;
	background-color: #FFF;
	margin-bottom: 10px;
	display: inline-block;
	padding:3px 8px;
}

.inv_option_name_sp{
	display: none;
}

.inv_option{
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 40px;
}

.inv_option_text{order: 1;}
.inv_option_img{
	order: 2;
	margin-left: auto;
}

.inv_option_img img{
	width: 100%;
	max-width: 450px;
	height: auto;
	display: block;
}

.inv_option_img2 {
	max-width: 600px;
}

.types_text{
	text-align: left;	
}

@media (max-width: 768px) {
	.inv_type_wrap{
		flex-direction: column;
		align-items: center;
	}
	
	.types_text_tit{
		font-weight: 700;
		font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	}	
	
	.inv_option{
		flex-direction: column;
		padding: 0;
	}
	.inv_option_text{order: 2;}	
	.inv_option_img{order: 1;}

	.inv_option_name{
		display: none;
	}
	
	.inv_option_name + br{
		display: none;
	}
	
	.inv_option_name_sp{
		font-size: 120%;
		font-weight: bold;
		color: #563b28;
		border: 1px solid #563b28;
		background-color: #FFF;
		margin-bottom: 10px;
		display: inline-block;
		padding:3px 8px;
		margin-top: 10px;
	}
}


/* 文例 */
.bunrei_smple{
	margin-top: 20px;
	margin-bottom: 20px;
	border: 3px double #d3cac4;
	padding: 20px 30px;
	background-color: #f4f0eb;
}

.bunrei_smple_tit{
	color: #cc3366;
	font-size: 130%;
	margin-bottom: 10px;
	font-weight: bold;
}

.bunrei_smple_r{
	text-align: right;	
}

.bunrei_smple_kigo_box{
	background-color: #F9F9F9;
	border: 1px solid #E5E5E5;
	margin-top: 10px;
	padding: 10px;
}

.bunrei_smple_kigo_box table {
	width: 100%;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}

.bunrei_smple_kigo th {
  background-color: #ffd6e3;
  text-align: center;
  width: 30px;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #f9f9f9;
  border-bottom-color: #f9f9f9;
}

.bunrei_smple_kigo td {
  background-color: #FFF;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #f9f9f9;
  border-bottom-color: #f9f9f9;
  padding: 5px;
}


@media (max-width: 768px) {
	.bunrei_smple {
		padding:10px;
	}
}


/*////////// オプション //////////*/

.option_tit{
	font-weight: 700;
	font-size: 1.8rem;
	margin: 10px 0;
}

.option_table {
	border-collapse: collapse;
	border: 1px solid #666666;
	width: 100%;
	margin-bottom: 15px;
}

.option_table caption {
	caption-side: top;
	color: #000;
	background-color: #f0edeb;
	text-align: center;
	padding: 5px;
	font-weight: bold;
	border-top: 1px solid #424242;
	border-left: 1px solid #424242;
	border-right: 1px solid #424242;
}

.option_table th {
	background-color: #d3cac4;
	border: 1px solid #424242;
	text-align: left;
	padding: 5px;
	width: 250px;
}

.option_table td {
	border: 1px solid #666666;
	text-align: left;
	padding: 5px;
}

.option_attention{
	border: solid 1px #d3cac4;
	padding: 5px;
	font-size: 0.9em;
	margin-top: 10px;
}

@media (max-width: 768px) {
	.option_table,
	.option_attention {
		width: 100%; 
	}
	
	.option_table th{
		width: 50%;
	}
	
	.option_table th,
	.option_table td {
		padding: 8px; 
	}
	
	.option_table caption {
		padding: 8px;
	}
}

/*////////// グッズ //////////*/
.original_text .mirror_img{
	width: 70%;
	display: block;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.original_text .mirror_img{
		width: 100%;
	}
}


/* プリマコレクション Prima Collection */
.prima_text{
}

.prima_text img{
	width: 100%;
}

.prima_text img.prima_logo{
	width: 200px;
	margin: 30px auto;
}


@media (max-width: 768px) {
	.prima_text p{
		text-align: left;
	}
	
	.prima_text img.prima_logo{
		width: 150px;
	}
}


/*////////// 月謝袋 //////////*/

.env_midashi{
	font-weight: 700;
	font-size: 1.6rem;
	margin-top: 30px;
}

.env_text{
	text-align: left;
}

.env_text img{
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.env_text img.env_img_s{
	max-width: 250px;
}

.env_mihon_wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.env_mihon{
	width: calc((100% - 40px) / 3);
	border: 1px solid #ebaec3;
	box-sizing: border-box;
	transition: border-color 0.3s ease;
}

.env_mihon_no{
	display: inline-block;
	padding: 0 0.75em;
	background: #ebaec3;
	color: #fff;
	font-weight: bold;
	font-size: 1.5rem;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.env_mihon img{
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.3s ease;
}

.env_mihon:hover{
	border-color: rgba(235,174,195,0.5);
}

.env_mihon:hover .env_mihon_no{
	background-color: rgba(235,174,195,0.5);
	color: #fff;
}

.env_mihon:hover img{
	opacity: 0.7;
}

@media (max-width: 768px){
	.env_mihon_wrap{
		gap: 10px;
	}
	.env_mihon{
		width: calc((100% - 20px) / 2);
	}
}