@charset "utf-8";

/* *****共通設定***** */
body {
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	overflow-x: hidden;
	background-color: #fff!important;
}

html {
	font-size: 62.5% !important;
	overflow-x: hidden;
}

* {
	font-family: 'Meiryo', "Roboto", "Noto Sans JP", sans-serif;
	color: #333;
	font-size: clamp(14px, 1.6rem, 16px);
}

strong {
	font-family: 'Meiryo', "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 900;
}

.alphabet {
	font-family: "Roboto", sans-serif;
	letter-spacing: 0.05em;
	font-weight: 900;
	color: #0cb36b;
}

.mincho-font {
	font-family: "Roboto", "Noto Serif JP", serif;
}

.colorRed {
	color: #ff0000;
}

@media screen and (min-width:400px) {
	.d-ss-none {
		display: none !important;
	}
}

main {
	display: block;
	color: #5B5B5B;
}

main .btn {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	font-size: 1.5rem;
}

.gray {
	color: #6c757d;
}

.card {
	border-color: #e0c7b2;
}

.img-thumbnail {
	width: 100%;
	padding: .25rem;
	background-color: transparent;
	border: none;
}

.high-light {
	/*background-color: #ffff00;*/
}

.midashi-10 {
	font-size: 10px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(10 + ((1vw - 3.2rem) * 0.625));
}

.midashi-12 {
	font-size: 12px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(12 + ((1vw - 3.2rem) * 0.625));
}

.midashi-14 {
	font-size: 14px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	/* before 16 */
	font-size: calc(14 + ((1vw - 3.2rem) * 0.625));
}

.midashi-16 {
	font-size: 16px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(16 + ((1vw - 3.2rem) * 0.625));
}

.midashi-18 {
	font-size: 18px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(18 + ((1vw - 3.2rem) * 0.625));
}

.midashi-20 {
	font-size: 20px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(20 + ((1vw - 3.2rem) * 0.625));
}

.midashi-22 {
	font-size: 22px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(22 + ((1vw - 3.2rem) * 0.625));
}


.daitoku-midashi h2,
h2.daitoku-midashi {
	color: #333;
	font-size: clamp(22px, 5vw, 36px);
	/* max-width: 960px; */
	margin-bottom: 40px;
	font-weight: bold;
}

.daitoku-midashi h2 span,
h2.daitoku-midashi span {
	display: block;
	/* text-align: center; */
	font-size: clamp(14px, 3vw, 18px);
	line-height: 2.8em;
	color: #0cb36b;
	text-transform: uppercase;
}



/*---------------------------------------------
大きいブロックの隙間調整
===============================================*/
section {
	padding-top: 80px;
	padding-bottom: 80px;
}

@media screen and (max-width:767.98px) {
	section {
		padding-top: 80px;
		padding-bottom: 80px;
	}

section.hero {}

section.hero {
    height: calc(100vh - 81px);
}

	section.index-top {
		padding-bottom: 0px;
	}
}

/* 個別ページのsection　背景を白に */
#Page-contact section,
#Page-lesson section {
	background-color: #ffffff;
}

@media screen and (max-width:375px) {
	.max-375 {
		display: none;
	}

}



/*---------------------------------------------
文字サイズ/h1～6
===============================================*/
.midashi-fukidashi {
  position: relative;              /* 三角形を相対配置するため */
  display: block;
  background: #f2f2f2;             /* 背景色（グレー） */
  padding: 10px 20px;              /* 内側余白 */
  font-size: 18px;
  font-weight: bold;
  color: #333;
  border-radius: 2px;              /* 角を少し丸くする */
  width: 100%;
}

/* 左の吹き出し部分（三角形） */
.midashi-fukidashi::before {
  content: "";
  position: absolute;
  bottom: -10px;                 /* 要素の下に配置 */
  left: 30px;                    /* 左からの位置（調整可） */
  border-width: 10px 10px 0 10px;/* 上だけ透明にして下向き三角形 */
  border-style: solid;
  border-color: #f2f2f2 transparent transparent transparent;
}



.flex-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
}


.max-960 {
	width: 90%;
	margin: 0 auto;
	max-width: 960px;
}

.max-1200 {
	max-width: 1200px;
}



/*---------------------------------------------
フォーム上部　導入部分
===============================================*/

.form-caption h2 {
	font-weight: bold;
}

.cata-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* gap: 30px; */
  width: 100%;
  margin: 30px auto;
}

.cata-box .inner-text, 
.cata-box2 .inner-cata .inner-text {
	width: calc( 100% - 210px);
}

.cata-box .inner-img, 
.cata-box2 .inner-cata .inner-img {
	width: 180px;
}

.cata-box .inner-img img, 
.cata-box2 .inner-cata .inner-img img {
	width: calc(100% - 30px);
	border: 0.5px solid #aaa;
}


.cata-box2 {
	display: flex;
	justify-content: space-between;
	gap: 60px;
	flex-wrap: wrap;
}

.cata-box2 .inner-cata {
	width: calc( (100% - 60px)/2);
	display: flex;
	justify-content: space-between;
}

.cata-box2 .inner-cata .inner-text {
	width: 60%;
}

.cata-box2 .inner-cata .inner-img {
	width: 30%;
}

.cata-box2 .inner-cata .inner-img img {
	width: 100%;
	border: 0.5px solid #aaa;
}

/*---------------------------------------------
header
===============================================*/
.header-bg {
	background-color: #f2f2f2;	
}

.client-logo-main {
	width: 405px;
	margin: 0px;
	height: 90px;
	display: flex;
	align-items: center;
	padding: 24px 0 0 20px;	
}

.client-logo-sub a {
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	color: #333;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .client-logo-main {
        padding-top: 33px;
        max-width: 320px;
    }
}


@media only screen and (max-width: 767px) {
	header {
		height: 52px;
	}

    .client-logo-main {
        width: calc(100% - 120px);
        max-width: 245px;
        padding: 10px 10px 0 10px;
    }
}