@charset "UTF-8";

/* ================================================================================================
　共通設定
================================================================================================ */
/*ベース設定*/
:root {
  --color-main: #fe8a01;
  --color-main-light: #fe8a01;
  --color-main-pale: #ffad45;
  --color-main-bg: #f8f2e8;

  --color-sub: #3f6fb6;
  --color-sub-dark: #3f6fb6;
  --color-sub-light: #3f6fb6;
  --color-sub-pale: #f8f2e8;

  --color-white: #fff;
  --color-black: #000;
  --color-text: #333;
  --color-text-muted: #777;

  --color-border: #ccc;
  --color-border-light: #ddd;

  --color-event: var(--color-sub-dark);
  --color-school: #009765;

  --color-accent-blue: #1e73be;
  --color-accent-cyan: #12cac0;

  --color-success: #55bc64;
  --color-success-dark: #248431;
  --color-success-light: #5fcf6f;

  --color-warning: #F5A551;
  --color-warning-dark: #f7823c;
  --color-warning-light: #fab267;

  --color-error: red;
  --color-error-text: #a94442;
  --color-error-bg: #f2dede;
  --color-error-border: #ebccd1;

  --color-form-border: #8a8a8a;
  --color-form-bg: #f7f7f7; /*TOPページ背景色２*/
  --color-form-bg2: #eef4fb; /*TOPページ背景色３*/
  --color-form-focus: #fffaee;
  --color-button-bg: #ececec;
  --color-button-border: #ababab;

  --color-overlay: rgba(100, 100, 100, .8);
  --color-shadow: rgba(171, 171, 171, 0.2);
}
body{
	font-family: 'Noto Sans JP', sans-serif;
  }

h3{
	border-left: 5px solid var(--color-main);
	margin: 45px 0 10px 0;
	font-weight: bold;
	text-indent: 1em;
	font-size: 1.4rem;
}
h4{
	font-weight: bold;
	margin: 10px 5px 5px 5px;
	font-size: 85%;
}

a {
  color: var(--color-main);
}
a:visited {
  color: var(--color-main);
}

nav li a {
	text-align:center;
}

.no_disp { display: none !important; }

.bg_base { background: var(--color-main) !important; }
.bg_dark { background: var(--color-sub) !important; }
.bg_pale { background: var(--color-sub-pale) !important; }
/*.school_border { border-color: var(--color-main); }*/

.menu01 { background: no-repeat url(/images/menu/top-menu-kmap.svg); }
.menu02 { background: no-repeat url(/images/menu/top-menu-yamaha.svg); }
.menu03 { background: no-repeat url(/images/menu/top-menu-yamaha-en.svg); }
.menu04 { background: no-repeat url(/images/menu/top-menu-course.svg); }
.menu05 { background: no-repeat url(/images/menu/top-menu-show.svg); }
.menu06 { background: no-repeat url(/images/menu/top-menu-tuning.svg); }
.menu07 { background: no-repeat url(/images/menu/top-menu-contact.svg); }

.bg_stripe_base {
	padding: 16px 0;
	color: var(--color-main);
	font-size: 2rem;
	display: flex;
    align-items: center;
}
.bg_color02{
	background: var(--color-form-bg);
}
.bg_color03{
	background: var(--color-form-bg2);
}


.textblocks {
  font-size: 75%;
  margin: 8px;
  line-height: 150%;
}
.imgblocks img{
	width: auto;
}
.imgblocks-am img{
	width: 100%;
	cursor: pointer;
}
.imgblocks-am img:hover{
	opacity: 0.75;
	filter: alpha(opacity=75);
}
.imgblocks-am{
	text-align: center;
}

.returntotop a span{
	cursor:pointer;
	color: var(--color-sub-dark);
	font-size: 16px;
	font-weight: bold;
}
.returntotop a img{
	width:auto;
	cursor: pointer;
}


/* ================================================================================================
　スマホレイアウト
================================================================================================ */
#headerbox {
	width: 100%;
	background: var(--color-white);
	position: fixed;
	z-index: 99;
}

#headerbox h1 {
	display: inline-block;
}

.allwrapper{
	width: 100%;
	margin:auto auto;
	background: var(--color-white);
	text-align: center;
	padding: 0;
}

#wrapper {
	position: relative;
	margin: auto;
    max-width: 800px;
	margin-bottom: 80px;
}

.mainimage img {
	/*width: 100%;*/
	height: auto;
	cursor: pointer;
}
.mainimage img:hover,
.mainimage img:focus {
	opacity: 0.75;
	filter: alpha(opacity=75);
}
.slick-slide img {
	height: 44vw; 
	width: auto;
  max–height: 400px; 
  min–height: 350px;
  padding: 0 10px;
}
.slick-slide a {
	width: 100%;
	height: 100%;
	display: inline-block;
	cursor: pointer;
	z-index: 2;
		}
		.mainimage .slick-prev-arrow, .slick-next-arrow{
			width: 50px;
			height: 50px;
		}
.maincontents{
	margin: auto auto;
	 padding: 116px 10px 90px 10px;
}
.maincontents.maincontents-toppage{
	margin: auto auto;
	 padding: 0px 0px 0px 0px;
}
.maincontents.news{
	padding: 60px 0 0 0;
}

.maincontents-top {
	width: 100%;
	margin: auto auto;
	padding: 0;
	position: relative;
	padding-top: 62px;
}

.maincontents img{
	max-width: 100%;
	height: auto !important;
}

.separate{
	vertical-align: top;
	margin: 5px;
	font-size: 100%;
}
.separate.banners{
	margin: auto;
}
.threediv{
	font-size: 11px;
	vertical-align: top;
	margin: 5px;
	line-height:150%;
}

.hd-inner{
		margin: auto auto;
		padding: 20px 0;
}
.hd-right{
	display: none;
}

.hd-menu > li {
	display: inline-block;
	font-size: 14px;
}

.hd-menu > .contact_trial {
	background-color: var(--color-main);
	border-radius: 6px;
	color: var(--color-white);
	padding: 6px 16px;
}

.hd-menu > .contact_trial a {
	color: var(--color-white);
}

.hd-menu > .contact_school {
	color: var(--color-main);
	padding: 10px 10px 10px 32px;
	background: no-repeat url(/images/menu/top-menu-contact.svg);
	background-size: 22px;
	background-position: 0 46%;
	margin-left: 40px;
}

.hd-menu > .contact_school a {
	color: var(--color-main);
}

.logoimages{
	display: inline-block;
}
.logoimages img{
	cursor: pointer;
}

.newsblock{
		margin: 0 auto;
		padding: 0 0 60px 0;
		text-align: left;
}
.newsblock:nth-child(n+3){
	margin-top: 40px;
}
.newsblock ul{
	height: 100%;
	max-height: 400px;
	MAX-width: 940px;
	overflow: auto;
	background: var(--color-white);
	margin: 0 auto;
}
.newsblock ul li{
		border-bottom: 1px dotted var(--color-main);
		padding: 8px 0px;
		list-style: none;
		margin-bottom: 0px;
		font-size: 90%;
		text-indent: 1em;
}

.newsblock ul li .topics-block {
	margin: 1rem 2rem;
	text-indent: initial;
	position: relative;
	display: block;
}
.newsblock ul li h3 .topics-block {
	margin-bottom: 0.7em;
}

.newsblock ul li .day {
	display: flex;
	margin-bottom: 0.5rem;
}
.newsblock-inner{
	background:var(--color-white);
	border-radius: 10px;
}

.infoDate{
	margin: 0 1em 0 0;
	display: inline-block;
}
.infoNews, .infoEvent, .infoSroom {
	display: inline-block;
	font-weight: normal;
	vertical-align: bottom;
	width: 80px;
	margin-right: 1em;
    text-align: center;
}
.infoNews{
	background: var(--color-main);
	color: var(--color-white);
	font-size: 11px;
	padding: 3px 0;
	border-radius: 3px;
}
.infoEvent{
	background: var(--color-sub-dark);
	color: var(--color-white);
	font-size: 11px;
	padding: 3px 0;
	border-radius: 3px;
}
.infoSroom{
	background: var(--color-school);
	color: var(--color-white);
	font-size: 11px;
	padding: 3px 0;
	border-radius: 3px;
}
.infoTitle{
	display: inline-block;
	margin-right: 30px;
}
.infoTxt{
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-indent: 1em;
	width: 100%;
	padding-top: 3px;
}
.infoTxt img{
	cursor: pointer;
	max-width: 92% !important;
	height: auto !important;
}
.infoTxt img:hover{
	opacity: 0.75;
	filter: alpha(opacity=75);
}
.topics h3{
	border-top-color: var(--color-accent-blue);
	border-left: none;
	margin: auto;
}

.banners{
	/*margin: 5px auto;
	text-align: center;
	vertical-align: middle;*/
	max-width: calc(50% - 24px);
}

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

.sns {
	text-align: center;
}

.sns a {
	display: inline-block;
	margin: 20px;
}

.footer-inner{
	margin: auto auto;
	padding: 20px;
	background: var(--color-main);
}

.footer-link{
	text-align: center;
	color: var(--color-white);
	max-width: 980px;
	margin: 0 auto;
}

.footer-link ul {
	margin-bottom: 40px;
}

.footer-link ul li {
	margin: 5px 0;
}

.footer-link a {
	color: var(--color-white) !important;
	font-size:16px;
}

.copyrights{
	/* font-size:80%; 2022 remove */
	text-align: center;/* right */
	padding-top: 40px;/* 20px */
	color: var(--color-white);
}

.pagetitle{
	padding: 10px;
	border-bottom: double 3px var(--color-main);
	margin-bottom: 5px;
}
.pagetitle h2{
	font-weight: bold;
}

/*グローバルナビ*/
.globalnavi ul {
	display: grid;
	background-color: var(--color-white);
	width: 95%;
	margin: auto;
}

.globalnavi-pc ul {
	display: grid;
	grid-template-columns: repeat(6, minmax(125px, 1fr));
	grid-template-rows: repeat(1, minmax(60px, 1fr));
}

.globalnavi-top ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(100px, 1fr));
	grid-template-rows: repeat(2, minmax(100px, 1fr));
}

.globalnavi li {
	margin: 0;
	padding: 0;
}

.globalnavi-pc li {
	margin: 0;
	padding: 0;
	border-right: 1px solid var(--color-main);
}

.globalnavi-pc li:last-child {
	border-right: none;
}
.globalnavi-pc li a {
	top: 0 !important;
}

.globalnavi-top li {
	margin: 10px 0;
	padding: 0;
	border-right: 1px solid var(--color-main);
}

.globalnavi-top li:nth-child(3n) {
	border-right: none;
}

.globalnavi li a,
.globalnavi-pc li a,
.globalnavi-top li a{
	font-size: 75%;
	color: var(--color-text-muted);
	text-align: center;
	background-color: var(--color-white);
	font-weight: bold;
	position: relative;
	top: 0;
	display: block;
	padding: 0;
	margin: 0;
	text-decoration: none;
	width: 100% !important;
	height: 100%;
	border-radius: initial !important;
}

.globalnavi li a{
	background-position: 3% 50%;
	background-size: 6%;
	text-align: left;
	line-height: 3.5rem;
}

.globalnavi-pc li a{
	background-position: 50% 20%;
	background-size: 20%;
}

.globalnavi-top li a{
	background-position: 50% 25%;
	background-size: 25%;
}

.globalnavi li a:hover,
.globalnavi-pc li a:hover,
.globalnavi-top li a:hover{
	background-color: var(--color-main-pale);
	transition: 1.0s ;
}

.globalnavi li span,
.globalnavi-pc li span,
.globalnavi-top li span {
	display: block;
	font-weight: normal;
	color: var(--color-main);
}

.globalnavi li span {
	font-size: 15px;
	position: relative;
	top: 0;
	left: 11%;
}

.globalnavi-pc li span {
	display: block;
	font-size:16px;
	text-align: center;
	padding: 50px 0 0 0;
	cursor: pointer;
}

.globalnavi-top li span {
	font-size: 110% !important;
	position: relative;
	top: 70%;
}
#globalnavi_cr{
	display: block;
	width: 15%;
	height: 41px;
	cursor:pointer;
	font-size: 11px;
	font-weight: bold;
	color: var(--color-text-muted);
	text-align: center;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	position: absolute;
	top:10px;
	right: 10px;
	z-index: 10;
}
.globalnavi, .globalnavi-pc{
	display: none;
	position: relative;
}

.globalnavi {
	padding: 50px 0;
	position: fixed;
	left: 0;
	top: 65px;
	width: 100%;
	background: rgba(100, 100, 100, .8);
	z-index: 10;
	height: 100%;
}

.globalnavi-top {
	display: block;
	position: relative;
}

/*テーブルレイアウト　共通設定*/
th, td {
	padding: 8px;
}
td {
	border-right: 1px dotted var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
th {
	color: var(--color-black);
	font-weight: normal;
	text-align: center;
	border-right: 1px dotted var(--color-white);
	border-bottom: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
}
/*テーブルレイアウト　教室を探す*/

.lsts {
		clear: both;
		margin-bottom: 20px;
		border: 1px solid var(--color-border);
		width: 100%;
}
table.lsts {
		border-collapse: collapse;
		font-size: 75%;/* 70% */
}

.table-inst,.seriestable{
	width: 2800px;
}


/*テーブル関連のレイアウト　個人教室・教室MAP*/
.lst {
		clear: both;
		margin-bottom: 20px;
		border: 1px solid var(--color-border);
		width: 100%;/* 2022 add */
}
table.lst {
		border-collapse: collapse;
		font-size: 75%;
}

.t-scroll {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 5px 0;
}
.cdefault{
	font-size: 140%;
	cursor: default;
}
.cfsize{
	  font-size: 140%;
 }
.cbackground{
	background-color: #F8E0F1;
}

  
.form-reg-sheet dd{
		-webkit-margin-start: 5px;
		word-wrap: break-word;
		line-height: 150%;
}
.ct {
  text-align: center;
}

.btn-def {
  display: block;
  margin: auto auto;
  padding: 0 2px;
  color: var(--color-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  behavior: url(/admin_test/Templates/css/PIE.htc);
  position: relative;
  text-align: center;
}

.trial-btn {
	padding: 20px;
	text-align: center;
}

.trial-btn a {
	background-color: var(--color-main);
	color: var(--color-white);
	padding: 20px 10px;
	border-radius: 6px;
	display: block;
	font-size: 124%;
	margin: 20px;
}

.banner-announce {
	margin-top: 30px;
	margin-bottom: 0;
	display: inline-block;
	text-align: center;
	background: var(--color-white);
	border-radius: 10px;
	padding: 10px 20px;
	color: var(--color-accent-cyan) !important;
	border: 2px solid var(--color-accent-cyan);
}

.bannerarea{
	margin: auto auto;
	padding: 40px 0;
	text-align: left;
	display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.bannerarea2{
	margin: auto auto;
	padding: 40px 0;
	text-align: left;
	display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.anchor {
	display: block;
	padding-top: 102px;
	margin-top: -102px;
	pointer-events: none;
}
.kmap-school-list-wrap{
	margin: 60px 0;
}
.kmap-school-list{
	margin: 10px 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border);
	position: relative;
}
.kmap-school-list .photo-area{
	display: inline-block;
	vertical-align: top;
	width:  calc(35% - 10px);
	object-fit: cover;
	margin-left: 10px;
}
.kmap-school-list .photo-area img{
	width: 100%;
    object-fit: cover;
}
.kmap-school-list .text-area{
	display: inline-block;
	vertical-align: top;
	width: calc(65% - 20px);
	pointer-events: none;
}
.kmap-school-list .text-area h4,p{
	margin-left: 10px;
}
.kmap-school-list .text-area h4{
	font-size: 18px;
	margin-top: 0px;
	margin-bottom: 12px;
}
.kmap-school-list .text-area p{
	font-size: 12px;
}
.kmap-school-list .text-area .about{
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 任意の行数を指定 */
  margin-top: 10px;
  font-size: 14px;
  margin-bottom: 32px;
}
.kmap-school-list a{
	display: block;
    width: 100%;
    height: 100%;
    color: var(--color-black);
    position: absolute;
	top: 0px;
	left: 0px;
    cursor: pointer;
    z-index: 30;
}
.kmap-school-list .text-area .btn-act{
	display: inline-block;
	padding: 0 4px;
    color: var(--color-main);
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-main);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    text-align: center;
	position: absolute;
    bottom: 20px;
    right: 10px;
	cursor: pointer;
}
.kmap-school-list:hover .btn-act {
	color: var(--color-main);
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-main);
	transition: .4s;
}
.kmap-school-list:hover {
	background-color: var(--color-white);
	transition: .4s;
}
.kmap-school-list .address {
	font-size: 12px;
    margin-right: 8px;
}
.kmap-school-list-wrap .filters-titile{
	background: var(--color-main-bg);
	margin: 0;
    padding: 10px 0px 0 10px;
    font-weight: normal;
	font-size: 14px;
}
.filters{
	display: block;
	margin-bottom: 20px;
	background: var(--color-main-bg);
    padding: 10px;
}
.filters li{
	display: inline-block;
	padding: 0px;
}
.filters li label{
	padding: 2px 4px;
	cursor: pointer;
	border-radius: 4px;
	margin-right: 16px;
	text-decoration: underline;
}
.filters li label:hover{
	color: var(--color-main);
}
.text-area span a[href^="tel:"],.text-area span {
	color: inherit;
  text-decoration: none;
  pointer-events: none;
  display: inline-block;
  position: static;
}

[value="All"]:checked ~ .targets [data-category] {
	display: block;
  }
  [value="kawasaki"]:checked ~ .targets .target:not([data-category~="川崎"]),
  [value="yokohama"]:checked ~ .targets .target:not([data-category~="横浜"]){
	display: none;
  }
  /*  ラジオボタンを非表示に */
  input[type="radio"] {
	position: absolute;
	left: -9999px;
  }
[value="All"]:checked ~ .filters [for="All"], 
[value="kawasaki"]:checked ~ .filters [for="kawasaki"], 
[value="yokohama"]:checked ~ .filters [for="yokohama"]{
  background: var(--color-main);
  color: var(--color-white);
}
.btn-def_sc {
	display: inline-block;
	margin: 5px auto;
	padding: 10px 12px;
	font-size: 78%;
	color: var(--color-main);
	background-color: var(--color-white);
	border: 1px solid var(--color-main);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	behavior: url(/admin_test/Templates/css/PIE.htc);
	position: relative;
	width: calc(50% - 30px);
	font-weight: bold;
	vertical-align: top;
}

.btn-def:hover,
.btn-def_sc:hover {
	background-color: var(--color-main-pale);
	transition: 1.0s;
	color: var(--color-main);
}
/*2024 add*/
.ocourse .btn-def_sc {
	color: var(--color-white);
	background-color: var(--color-success);
	border: 1px solid var(--color-success-dark);
	font-weight: normal;
	font-size: 11px;
	text-align: center;
}

.ocourse .btn-def:hover,
.ocourse .btn-def_sc:hover {
	background-color: var(--color-success-light);
	transition: .6s;
	color: var(--color-white);
}
.ocourse-lesson .btn-def_sc {
	color: var(--color-white);
	background-color: var(--color-warning);
	border: 1px solid var(--color-warning-dark);
	font-weight: normal;
	font-size: 11px;
}
.agedcourse-music .btn-def_age {
	color: var(--color-white);
	background-color: #7E57C2;
	border: 1px solid #673AB7;
	font-weight: normal;
	font-size: 11px;
	display: inline-block;
    margin: 5px auto;
    padding: 10px 16px;
	border-radius: 4px;
	min-width: 280px;
	text-align: center;
}
.agedcourse-music .btn-def_age:hover {
  background-color: #A184D8;
  border-color: #876BC4;
  	transition: .6s;
}
.agedcourse-english .btn-def_age {
	color: var(--color-white);
	background-color: #5B8FD9;
	border: 1px solid #4779C2;
	font-weight: normal;
	font-size: 11px;
	display: inline-block;
	margin: 5px auto;
	padding: 10px 16px;
	border-radius: 4px;
	min-width: 280px;
	text-align: center;
}
.agedcourse-age{
  font-size: 16px;
}

.agedcourse-english .btn-def_age:hover {
	background-color: #76A4E3;
	border-color: #5E8FD0;
	transition: .6s;
}
.ocourse-lesson .btn-def:hover,
.ocourse-lesson .btn-def_sc:hover {/* 2022 add */
	background-color: var(--color-warning-light);
	transition: .6s;
	color: var(--color-white);
}
.ocourse-lesson .btn-def_sc.none {
	color: var(--color-white);
	background-color: #9999;
	border: 1px solid #9999;
	font-weight: normal;
	font-size: 11px;
	text-align: center;
}

.ocourse-lesson .btn-def_sc.none:hover,
.ocourse-lesson .btn-def_sc.none:hover {
	background-color: #9999;
}
/*slide*/
/* ========================================
  Slider Arrow Modern
======================================== */

.slick-slide-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;

  border: none;
  border-radius: 999px;

  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);

  box-shadow:
    0 6px 18px rgba(0,0,0,.12);

  cursor: pointer;

  z-index: 20;

  transition:
    .25s ease;
}

/* hover */
.slick-slide-arrow:hover{
  background: rgba(255,255,255,.98);

  box-shadow:
    0 10px 24px rgba(0,0,0,.16);

  transform:
    translateY(-50%)
    scale(1.06);
}

/* 左右位置 */
.slick-prev-arrow{
  left: 24px;
}

.slick-next-arrow{
  right: 24px;
}

/* ========================================
  Arrow Shape
======================================== */

.slick-slide-arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--color-main);
  border-right: 3px solid var(--color-main);
}

/* 左 */
.slick-prev-arrow::before{
  transform:
    translate(-35%, -50%)
    rotate(-135deg);
}

/* 右 */
.slick-next-arrow::before{
  transform:
    translate(-65%, -50%)
    rotate(45deg);
}

/*slide*/

/* ================================================================================================
　PCレイアウト
================================================================================================ */
@media screen and (max-width: 980px){
	.logo-text{
		position: static;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 6px;
	}
	.maincontents-toppage {
        padding-top: 0;
        max-width: 980px;
		margin: 0 20px;
    }
	.maincontents-top .slick-slider {
    padding: 20px 0;
}
.bannerarea {
    padding: 20px 10px;
    gap: 10px;
}
.bannerarea2 {
    padding: 20px 10px 80px 10px;
    gap: 10px;
}
.banners {
    max-width: calc(50% - 10px);
}
.maincontents.news {
    padding: 20px 10px;
}
.bg_stripe_base {
    font-size: 1.6rem;
}
.newsblock ul li .topics-block {
    margin: 0.6rem 1.4rem;
    text-indent: initial;
    position: relative;
    font-weight: bold;
    display: block;
}
.newsblock {
    margin: 0 auto;
    padding: 0 0 40px 0;
    text-align: left;
}
.copyrights {
    text-align: center;
    padding-top: 20px;
    color: var(--color-white);
}
.newsblock ul {
    height: 100%;
    max-height: 400px;
    width: 90%;
    overflow: auto;
    background: var(--color-white);
    margin: 0 auto;
}
/* スマホ */
  .slick-slide-arrow{
    width: 38px;
    height: 38px;
  }
  .slick-prev-arrow{
    left: 12px;
  }
  .slick-next-arrow{
    right: 12px;
  }
  .slick-slide-arrow::before{
    width: 8px;
    height: 8px;
  }
  /* スマホ */
  .returntotop{
    right: 16px;
    bottom: 16px;
  }
  #scrolltotop{
    width: 46px;
    height: 46px;
  }
  #scrolltotop::before{
    width: 10px;
    height: 10px;
    top: 18px;
  }
}
@media screen and (min-width: 981px){
	    .maincontents {
        max-width: 800px;
    }
	.headerbox_border {
		box-shadow: 0 2px 5px 0 rgba(171, 171, 171, 0.2);
	}
	.logoimages img{
		margin-bottom: auto;
	}
	.hd-inner{
		/*max-width: 1100px;*/
	}
	.hd-left{
		float: left;
	}
	.hd-right{
		display: inline-block;
		float: right;
	}
	.hd-menu{
		margin-top: 4px;
	}
	.globalnavi-top ul {
		display: grid;
		grid-template-columns: repeat(6, minmax(125px, 1fr));
		grid-template-rows: repeat(1, minmax(150px, 1fr));
	}
	.globalnavi-top li{
		display: inline-block;/* table-cell */
		width: auto;/* 1% */
		height: 120px;
		float: none;
		list-style: none;
	}
	.globalnavi-top li:first-child {
		border-left: 1px solid var(--color-main);
	}
	.globalnavi-top li:nth-child(3n) {
		border-right: 1px solid var(--color-main);
	}
	.globalnavi-top li a {
		background-position: 50% 25% !important;
		background-size: 28% !important;
	}
	li:first-child > a {
	  border-left: 0;
	  border-radius: 5px 0 0 5px;
	}
	.trial-btn {
		display: none;
	}
	/*.bg_stripe_base {
		font-size: 1.3rem;
	}*/
	.banner-announce {
		margin-top: 40px;
		width: 70%;
		font-size:124%;
	}
	/*.banners{
		display: inline-block;
		margin: 0.4rem;
		text-align: center;
		width: calc(50% - 1.6rem);
	}*/
	.logoimages img{
		width: auto;
	}

	.globalnavi-pc{
		clear: both;
		display: block;
		max-width: 1100px;
		margin: 10px auto auto;
	}

	.globalnavi-top{
		clear: both;
		display: block;
		max-width: 1100px;
		margin: auto auto;
	}

	#globalnavi_cr, .globalnavi{
		display: none !important;
	}

	.maincontents-top {
		padding-top: 96px;
	}
	
	.maincontents-toppage {
		padding-top: 0;
		max-width: 980px;
	}

	.newsblock{
		max-width: 980px;
	}
	.newsblock ul li h3 .topics-block {
		margin-bottom: 0;
		display: inline-block;
		margin: 45px 0 10px 0;
		font-weight: bold;
		text-indent: 1em;
	}
	.infoTxt{
		height: auto;
	}
	.infoTxt img{
		max-width: 97% !important;
	}

	.bannerarea img{
		cursor: pointer;
	}
	.bannerarea img:hover,
	.bannerarea img:focus{
		opacity: 0.75;
		filter: alpha(opacity=75);
	}
	.banners img {
		width: 100%;
	}
	.banners img:hover,
	.banners img:focus{
		cursor: pointer;
		opacity: 0.75;
		filter: alpha(opacity=75);
	}

	.mainimage{
		margin: auto auto;
	}
	.mainimage img{
		width: auto;
		cursor: pointer;
	}
	.mainimage img:hover,
	.mainimage img:focus {
		opacity: 0.75;
		filter: alpha(opacity=75);
	}

	.mainimage .slick-prev,
	.mainimage .slick-prev:hover,
	.mainimage .slick-prev:visited,
	.mainimage .slick-prev:link,
	.mainimage .slick-prev:focus,
	.mainimage .slick-prev:active,
	.mainimage .slick-next,
	.mainimage .slick-next:hover,
	.mainimage .slick-next:link,
	.mainimage .slick-next:active,
	.mainimage .slick-next:focus,
	.mainimage .slick-next:visited
	{
		background-color: var(--color-text-muted);
		color: var(--color-text-muted);
	}

	.slick-slide img {
	height: 28vw; 
  max–height: 400px; 
  min–height: 350px;
  padding: 0 20px;
  z-index: 1;
	}
	.slick-slide a {
	width: 100%;
	height: 100%;
	display: inline-block;
	cursor: pointer;
	z-index: 2;
		}
		.slick-slide a:hover {
			opacity: 0.75;
				}
		.mainimage .slick-prev-arrow, .slick-next-arrow{
			width: 50px;
			height: 50px;
		}

	.slick-prev-arrow {
		left: 24px;
	}
	.slick-next-arrow {
		right: 24px;
	}
	.separate{
		display: inline-block;
		width: 48%;
		line-height: 150%;
	}
	.separate.banners{
		margin: auto;
	}
	.threediv{
		display: inline-block;
		width: 31%;
	}

	.form-reg-sheet{
		font-size: 85%;
	}
	.form-reg-sheet dt{
	}
	#intro{
		font-size: 85%;
		line-height: 150%;
	}
	.textblocks {
		font-size: 85%;
		margin: 8px;
	}
	.imgblocks-am img{
		width: 13%;
	}
	.site-map{
		padding: 20px;
	}
	.site-map ul{
		padding: 0 0 0 10px;
	}
	.site-map ul li{
		font-size: 11px;
		border-bottom: dotted 1px var(--color-border-light);
		padding: 10px 0;
		list-style: none;
	}
	.lsts img{
		width: auto;
	}
	.mapimages{
		width : 550px;
		margin: auto auto;
	}
	.btn-def_sc {
		width: 20%;
  	}
	.ct > .btn-def_sc {
		font-size: 68%;
	}
	.form-contents .contact-input-txt-long,
	.form-contents textarea {
		width: 98.8%;
	}

	.footer-link {
		text-align: left;
	}

	.footer-link ul {
		display: inline-block;
		width: 32.5%;
		vertical-align: top;
	}

	.movie iframe {
		width: 560px;
		height: 315px;
	}
	.anchor {
    	padding-top: 190px;
    	margin-top: -190px;
		pointer-events: none;
	}
.kmap-school-list-wrap{
	margin: 60px 0;
}
.kmap-school-list{
	margin: 0;
	padding: 20px;
	border-bottom: 1px solid var(--color-border);
	position: relative;
}
.kmap-school-list .photo-area{
	display: inline-block;
	vertical-align: top;
	object-fit: cover;
    height: 207px;
}
.kmap-school-list .photo-area img{
	width: 250px;
	height: 200px !important;
	object-fit: cover;
}
.kmap-school-list .text-area{
	display: inline-block;
	vertical-align: top;
	width:  calc(65% - 20px);
}
.kmap-school-list .text-area h4,p{
	margin-left: 20px;
}
.kmap-school-list .text-area h4{
	font-size: 18px;
	margin-top: 0px;
	margin-bottom: 12px;
}
.kmap-school-list .text-area p{
	font-size: 12px;
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.kmap-school-list .text-area .about{
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-top: 20px;
  font-size: 14px;
}
.kmap-school-list a{
	display: block;
    width: 100%;
    height: 100%;
    color: var(--color-black);
    position: absolute;
	top: 0px;
	left: 0px;
    cursor: pointer;
    z-index: 30;
}
.kmap-school-list .text-area .btn-act{
	display: inline-block;
	padding: 0 4px;
    color: var(--color-main);
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-main);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    text-align: center;
	position: absolute;
    bottom: 20px;
    right: 20px;
	cursor: pointer;
}
.kmap-school-list:hover .btn-act {
	color: var(--color-white);
    background-color: var(--color-main) !important;
    border: 1px solid var(--color-main);
	transition: .4s;
}
.kmap-school-list:hover {
	background-color: var(--color-main-pale);
	transition: .4s;
}
.kmap-school-list .address {
	font-size: 12px;
    margin-right: 8px;
}

.separate{
	font-size: 100%;
}
.filters li {
	display: inline-block;
	padding: 2px 4px;
}
.btn-def_sc {
	display: inline-block;
	margin: 5px auto;
	padding: 10px 16px;
	font-size: 78%;
	color: var(--color-main);
	background-color: var(--color-white);
	border: 1px solid var(--color-main);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	behavior: url(/admin_test/Templates/css/PIE.htc);
	position: relative;
	width: 20%;
	font-weight: bold;
	vertical-align: top;
}

.btn-def:hover,
.btn-def_sc:hover {
	background-color: var(--color-main-pale);
	transition: 1.0s;
	color: var(--color-main);
}
/*2024 add*/
.ocourse .btn-def_sc {
	color: var(--color-white);
	background-color: var(--color-success);
	border: 1px solid var(--color-success-dark);
	font-weight: normal;
	font-size: 11px;
}

.ocourse .btn-def:hover,
.ocourse .btn-def_sc:hover {
	background-color: var(--color-success-light);
	transition: .6s;
	color: var(--color-white);
}
.ocourse-lesson .btn-def_sc {
	color: var(--color-white);
	background-color: var(--color-warning);
	border: 1px solid var(--color-warning-dark);
	font-weight: normal;
	font-size: 11px;
}

.ocourse-lesson .btn-def:hover,
.ocourse-lesson .btn-def_sc:hover {
	background-color: var(--color-warning-light);
	transition: .6s;
	color: var(--color-white);
}
.ocourse-lesson .btn-def_sc.none {
	color: var(--color-white);
	background-color: #9999;
	border: 1px solid #9999;
	font-weight: normal;
	font-size: 11px;
}

.ocourse-lesson .btn-def_sc.none:hover,
.ocourse-lesson .btn-def_sc.none:hover {
	background-color: #9999;
}
.newsblock ul li .day{
	display:inline-block;
	margin-bottom: 0rem;
}
}

/* ================================================================================================
　お問い合わせ
================================================================================================ */

.contact-h2 {
	height: auto;
	margin-bottom: 20px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: normal;
	text-align: center;
}

#contact-area {
	margin: 0 auto 30px auto;
}
.contact-form-att {
	margin: 5px;
	color: var(--color-white);
	background-color: var(--color-error);
	font-size: 11px;
	padding: 2px 8px;
}
#contact-area dt {
	height: 30px;
	margin-bottom: 10px;
	text-indent: 1em;
	font-size: 14px;
	line-height: 30px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	behavior: url(/Templates/css/pc/PIE.htc);
	background-color: #e5e5e5;
}
#contact-area dd {
	margin: auto auto 20px auto;

}
.contact-input-name {
	width: 178px;
	margin-right: 10px;
}
.contact-input-txt {
	/*width: 440px;*/
}
.contact-label-birth {
	margin: 0 10px;
}
.contact-evidence {
	margin-bottom: 10px;
}
.contact-input-att {
	color: #666;
}
.contact-form-err {
	margin-top: 10px;
	padding: 0 5px;
	line-height: 24px;
	color: var(--color-error-text);
	background-color: var(--color-error-bg);
	border: 1px solid var(--color-error-border);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	behavior: url(/Templates/css/pc/PIE.htc);
	position: relative;
}
#contact-privacy-area {
	/*width: 430px;
	height: 200px;*/
	margin-bottom: 20px;
	padding: 9px;
	background-color: #f7f7f7;
	border: 1px solid var(--color-text);
	overflow: auto;
	font-size: 11px;
}
.contact-privacy-tit {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--color-text);
}
.contact-put-att {
	margin-bottom: 20px;
}
.contact-cf {
	margin-left: 1em;
}
.contact-msg-comp {
	padding: 20px 0;
	text-align: center;
}

/* ================================================================================================
 フォーム要素
================================================================================================ */

input[type="text"],
input[type="email"],
input[type="button"],
textarea {
	display: inline-block;/* block 2022 remove */
	padding: 4px;
	margin-bottom: 2px;
	border: 1px solid var(--color-form-border);
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',MS GOTHIC,sans-serif;
	background-color: var(--color-white);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	behavior: url(/Templates/css/pc/PIE.htc);
}
input[type="button"] {
	background-color: #f7f7f7;
	cursor: pointer;
}
select {
	padding: 4px;
	border: 1px solid var(--color-form-border);
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',MS GOTHIC,sans-serif;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	behavior: url(/Templates/css/pc/PIE.htc);
}
textarea {
	/*width: 440px;
	height: 140px;*/
	width: 98%;
	height: 150px;
}
input[type="text"]:focus,
textarea:focus,
input[type="file"]:focus,
select:focus {
  color: var(--color-text);
  background-color: var(--color-white);
}
label { margin-right: 10px; }
input[type="submit"],
button {
	margin-bottom: 2rem !important;
	padding: 0 18px !important;
	line-height: 40px;
	color: var(--color-text);
	text-align: center;
	cursor: pointer;
	background-color: var(--color-button-bg);
	border-top: 1px solid var(--color-button-border);
	border-right: 1px solid var(--color-button-border);
	border-bottom: 3px solid var(--color-button-border);
	border-left: 1px solid var(--color-button-border);
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	behavior: url(/Templates/css/pc/PIE.htc);
	position: relative;
}
button {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',MS GOTHIC, sans-serif;
}
input[type="submit"]:hover,
button:hover {
	opacity: 0.8;
	-ms-filter: "alpha(opacity=80)";
}
input[type="submit"]:focus,
button:focus {
	border-bottom: 3px solid var(--color-button-border);
}
.subbutton{
	display: block;
	margin: auto auto 5px auto;
}
/* 2022 add */
.form-contents .contact-input-txt-long,
.form-contents textarea {
	width: 97.5%;
}

/* ================================================================================================
 スマホでのメニュー開閉
================================================================================================ */

#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--color-main);
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--color-main);
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}


.newsblock .arrow{
	position: absolute;
    display: inline-block;
    width: 7.7px;
    height: 13.3px;
    top: calc(100% - 50% - 16px);
    right: 0px;
    padding: 10px 0;
  }
  
  .newsblock .arrow::before,
  .newsblock .arrow::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	right: 0;
	width: 10px;
	height: 3px;
	border-radius: 9999px;
	background-color: var(--color-main);
	transform-origin: calc(100% - 0.5px) 50%;
  }
  
  .newsblock .arrow::before {
	transform: rotate(45deg);
  }
  .newsblock .arrow::after {
	transform: rotate(-45deg);
  }
  .newsblock a{
	color: var(--color-black);
	width: 100%;
    display: block;
	cursor: pointer;
  }
  .newsblock a div,  .newsblock a span {
	cursor: pointer;
  }
  .slick-slider{
    background:var(--color-main-bg);
	padding: 40px 0;
}
/* ========================================
  Back To Top
======================================== */

.returntotop{
  text-align: right;
  position: relative;
}

#scrolltotop{
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:.25s ease;
 position: absolute;
bottom: 0px;
right: 0px;
}

/* hover */
#scrolltotop:hover{
  transform:
    translateY(-4px);
}

/* 矢印 */
#scrolltotop::before{
  content:"";
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--color-main);
  border-left: 3px solid var(--color-main);
  transform:rotate(45deg);
  position: absolute;
  top: 22px;
}

<!--END ヘッダー-->
.nav-icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--color-main);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.global-nav a:last-child .nav-icon {
  stroke: #fff;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: 'Noto Sans JP', sans-serif;
  color:#222;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================
TOP BAR
========================= */

.header-top{
  background:var(--color-main);
  color:#fff;
  height:34px;
  display:flex;
  align-items:center;
  font-size:13px;
}

.header-top-inner{
  width:100%;
  max-width:1400px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 24px;
}

.top-links{
  display:flex;
  gap:24px;
}

.lang-search{
  display:flex;
  align-items:center;
  gap:20px;
}

.lang{
  display:flex;
  gap:12px;
}

.lang a{
  opacity:.7;
}

.lang a.active{
  opacity:1;
  font-weight:bold;
}

.search-box{
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:999px;
  overflow:hidden;
  height:34px;
}

.search-box input{
  border:none;
  outline:none;
  padding:0 16px;
  width:220px;
  font-size:14px;
}

.search-box button{
  border:none;
  background:none;
  /*width:44px;*/
  cursor:pointer;
  font-size:16px;
}

/* =========================
MAIN HEADER
========================= */

.header-main{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--color-main);
  background:#fff;
}

.logo-area{
  width:36%;
  min-height:96px;
  display:flex;
  align-items:center;
  gap:18px;
}

.logo-area img{
  padding: 0 16px;
}

.logo-text .jp{
  font-size:16px;
  font-weight:700;
}

.logo-text .en{
  font-size:13px;
  color:#666;
  margin-top:4px;
}

/* =========================
NAVIGATION
========================= */

.global-nav{
  width:64%;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  /*border-left:1px solid #ddd;*/
}

.global-nav a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:0px;
  min-height:96px;
  /*border-right:1px solid #ddd;*/
  transition:.3s;
}
.global-nav a:last-child{
  background:var(--color-main);
}

.global-nav a:hover{
  background:var(--color-main-pale);
}
/* ヘッダーメニュー：縦区切り線 */
.header-main .global-nav > a {
  position: relative;
}

.header-main .global-nav > a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--color-main-pale);
}

/* 7番目＝お問い合わせの左線も消す＝サービス右横の線も消える */
.header-main nav.global-nav > a:nth-child(7)::before {
  display: none;
}


.global-nav .icon{
  font-size:28px;
}

.global-nav span:last-child{
  font-size:14px;
  font-weight:700;
  color: var(--color-black);
}

.hamburger {
  display: none;
}
@media screen and (min-width: 1600px) {
	.logo-area {
    width: 44%;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.global-nav {
    width: 56%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* border-left: 1px solid #ddd; */
}
}
@media screen and (max-width: 1599px) {
	.logo-area {
    width: 30%;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.global-nav {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* border-left: 1px solid #ddd; */
}
.global-nav span:last-child {
        font-size: 14px;
        font-weight: 700;
    }
}

@media screen and (max-width: 1200px) {
	.logoimages img {
    max-width: 240px;
    height: auto;
	padding-left: 20px;
  }
  .logo-area {
    width: 20%;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.global-nav {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
    .maincontents-top {
        padding-top: 96px;
    }
}
@media screen and (max-width: 980px) {
.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 0 16px;
  }

  .logo-area {
    width: auto;
    min-height: 72px;
    flex: 1;
	display:flex;
  align-items:center;
  }

  .logoimages img {
    max-width: 240px;
    padding-left: 10px;
  }

  .hamburger {
    position: static;

    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 6px;
  }

  .hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-main);
    border-radius: 999px;
  }

  .hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .global-nav {
    display: none;

    position: absolute;
    top: 72px;
    left: 0;

    width: 100%;
    background: #fff;
    z-index: 100;

    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-main);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  .global-nav.is-open {
    display: grid;
  }

  .global-nav a {
    min-height: auto;
    padding: 18px 20px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    border-bottom: 1px solid #eee;
  }

  .global-nav .icon {
    font-size: 20px;
  }

  .global-nav span:last-child {
    font-size: 15px;
  }

  .global-nav a:last-child {
    background: var(--color-main);
    color: #fff;
  }
      .maincontents-top {
        padding-top: 73px;
    }
}

/* ========================================
  京浜楽器 共通ボタン
======================================== */
a.keihin-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 16px 8px 34px;
  border-radius: 4px;
  color: #fff;
  font-weight: normal;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.2s ease;
  width: 100%;
margin: 4px 0;
}

.keihin-btn:hover {
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
}

.keihin-btn--block {
  display: flex;
  width: 100%;
}

/* 色 */
.keihin-btn--purple {
  background: #8224e3;
  border-top: 1px solid #7520cc;
border-left: 1px solid #7520cc;
border-right: 1px solid #7520cc;
border-bottom: 2px solid #7520cc;
}
/* カーキ */
.keihin-btn--khaki {
  background: #928763;
  border-radius: 4px;
    border-top: 1px solid #756B4F;
border-left: 1px solid #756B4F;
    border-right: 1px solid #756B4F;
    border-bottom: 2px solid #756B4F;
}

/* ピンク */
.keihin-btn--pink {
    background: #E05297;
    border-top: 1px solid #C94886;
    border-left: 1px solid #C94886;
    border-right: 1px solid #C94886;
    border-bottom: 2px solid #B93E79;
}

/* グレー */
.keihin-btn--gray {
    background: #777C85;
    border-top: 1px solid #686D75;
    border-left: 1px solid #686D75;
    border-right: 1px solid #686D75;
    border-bottom: 2px solid #595E66;
}

/* ========================================
  SVGアイコン共通
======================================== */
.keihin-btn::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 外部リンク */
.keihin-btn--external::before {
  background-image: url("/images/button/icon-external.svg");
}

/* 右矢印 */
.keihin-btn--arrow::before {
  background-image: url("/images/button/icon-arrow-right.svg");
}

/* 右向き三角 */
.keihin-btn--triangle {
  padding-left: 30px;
}

.keihin-btn--triangle::before {
  left: 10px;
  width: 14px;
  height: 14px;
  background-image: url("/images/button/icon-triangle-right.svg");
}

h2.school-title {
  padding: 112px 0 16px 0;
  text-align: center;
color: var(--color-main);
font-size: 2rem;
}
@media screen and (max-width: 981px){
	h2.school-title {
  padding:86px 0 16px 0;
  text-align: center;
color: var(--color-main);
font-size: 1.6rem;
}
	}
/* ========================================
   フッター SNSリンク
======================================== */

.footer-sns-area {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 20px;
	background-color: #fff;
	border-top: 1px solid #eee;
}

.footer-sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.footer-sns__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	text-decoration: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.footer-sns__link:hover {
	opacity: 0.75;
	transform: translateY(-1px);
}

.footer-sns__link:focus-visible {
	outline: 2px solid #ff8900;
	outline-offset: 3px;
	border-radius: 4px;
}

.footer-sns__icon {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	cursor: pointer;
}

/* LINEは面が大きいため、Instagramより少し小さく表示 */
.footer-sns__icon--line {
	width: 30px;
	height: 30px;
}

/* Instagramは線のロゴなので、少し大きく表示 */
.footer-sns__icon--instagram {
	width: 32px;
	height: 32px;
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {
	.footer-sns-area {
		padding: 20px 15px;
	}

	.footer-sns {
		gap: 30px;
	}

	.footer-sns__link {
		width: 30px;
		height: 30px;
	}

	.footer-sns__icon--line {
		width: 30px;
		height: 30px;
	}

	.footer-sns__icon--instagram {
		width: 32px;
		height: 32px;
	}
}