@charset "UTF-8";

/* ================================== */
/* 今回のサンプル(A～D)の共通デザイン */
/* ================================== */
/* 以下のCSSは、描画領域の横幅に関係なく、常に適用されます。 */
/* 描画領域の横幅が600px・850px以上になった際には、別途HTMLソース側に記述したCSSで装飾を上書きする形(＝モバイルファースト)でレスポンシブ・ウェブデザインを実現しています。 */

	/* -------------------------- */
	/* ▼ページ周囲の余白をなくす */
	body {
		padding: 0;
		margin: 0;
		font-size: 18px;
		box-sizing: border-box;
		line-height: 1.2em;
		font-family: "メイリオ","游ゴシック","游明朝体","明朝体",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic",sans-serif;
	-webkit-text-size-adjust: 100%;
		color:#000000;
	}
	
	.center { text-align : center; }
	.right { text-align : right; }
	.boid { font-weight: bold ; }
	.black { font-weight: bold; color: #000000; }
	.red { font-weight: bold; color: #ff4500; }
	.orange { font-weight: bold; color: #ff8c00; }
	.green { font-weight: bold; color: #008000; }
	.pink { font-weight: bold; color: #ff69b4; }
	.cyan { font-weight: bold; color: #0dcaf0; }
	.purple { font-weight: bold; color: #6f42c1; }
	.blueberry { font-weight: bold; color: #4D648D; }
	.blue { font-weight: bold; color: #0d6efd; }
	.indigo { font-weight: bold; color: #283655; }
	.midnight-blue { font-weight: bold; color: #1E1F26; }
	.teal { font-weight: bold; color: #34a853; }
	.white { font-weight: bold; color: #ffffff; }
	.gray-100 { font-weight: bold; color: #f8f9fa; }
	.gray-200 { font-weight: bold; color: #e9ecef; }
	.gray-300 { font-weight: bold; color: #dee2e6; }
	.gray-400 { font-weight: bold; color: #ced4da; }
	.gray-500 { font-weight: bold; color: #adb5bd; }
	.gray-600 { font-weight: bold; color: #6c757d; }
	.gray-700 { font-weight: bold; color: #495057; }
	.gray-800 { font-weight: bold; color: #343a40; }
	.gray-900 { font-weight: bold; color: #212529; }

	a {
		font-weight: bold ;
	}
	
	.speacer005{
		padding: 0em;
		margin-bottom: 0.5px;
	}
	.speacer01{
		padding: 0em;
		margin-bottom: 1px;
	}
	.speacer03{
		padding: 0em;
		margin-bottom: 3px;
	}
	.speacer05{
		padding: 0em;
		margin-bottom: 5px;
	}
	.speacer10{
		padding: 0em;
		margin-bottom: 10px;
	}

	.speacer15{
		padding: 0em;
		margin-bottom: 15px;
	}

	.speacer20{
		padding: 0em;
		margin-bottom: 20px;
	}

	.speacer30{
		padding: 0em;
		margin-bottom: 30px;
	}

	img {
		max-width : 100% ;
		height : auto ;
	}
	.resizeimage img { 
		width: 70%;
	}
	.card-img-top {
    max-width: 100%;
    flex-shrink:0;
	}
	
	/* -------------------- */
	/* ▼ページ説明の装飾 */
	/* -------------------- */
	
	.page-description {
		padding: 0;
		margin: 0px 5px 5px;
		font-size: 11px;
		letter-spacing: -0.5px;
		line-height: 1.0;
	}


	/* -------------------- */
	/* ▼ナビの装飾 */
	/* -------------------- */

	.nav{
		line-height: 1.2;
		letter-spacing: -1.0px;
	}

	.navbar-light .navbar-toggler-icon{
		/* 三本線 */
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(0,0,0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	  }
	  
	  .navbar-light .navbar-toggler{
		/* 枠線 */
		border-color: rgba(0,0,0,0);
	  }
	  
	  .navbar-light .navbar-brand{
		/* サイトタイトル */
		color: rgb(0,0,0);
	  }



	/* -------------------- */
	/* ▼パンくずリストの装飾 */
	/* -------------------- */

	.breadcrumb{/* 背景色の変更 */
		background: #ffffff;
		padding: 0;
		margin: 0px 5px;
		font-size: 11px; 
	}
	.breadcrumb-item+.breadcrumb-item::before{/* 区切り線の文字色変更 */
	color:#212529;
	}




	/* -------------------- */
	/* ▼メインカラムの装飾 */
	/* -------------------- */



	.main-column {
		background: #ffffff;	/* 背景色 */
		padding: 0;		/* 内側の余白(上下に1px) */
		margin: 0;
	}
	

	/* -------------------- */
	/* ▼メインヘッダーの装飾 */
	/* -------------------- */

	.main-header {
		padding: 0;
		margin: 0;
		text-align : center;
		line-height: 1;
	}
	.main-header h3 {
		padding: 0.25em 0.5em;/*上下 左右の余白*/
		line-height: 1;
		letter-spacing: 0.9;	
	}
	.main-header h4 {
		padding: 0.25em 0.5em;/*上下 左右の余白*/
		line-height: 1;
		letter-spacing: 0.9;	
	}
	.main-header h5 {
		padding: 0.25em 0.5em;/*上下 左右の余白*/
		line-height: 0.5;
		letter-spacing: 1;
	}
	.main-header small {
		line-height: 0.5;
		letter-spacing: 0.8;
	}
	
	.midashi h3 {
  		padding: 0.25em 0.5em;/*上下 左右の余白*/
  		color: #494949;/*文字色*/
  		background: #f5f9fc;/*背景透明に*/
  		border-left: solid 5px #ff69b4;/*左線*/
	}



	/* -------------------- */
	/* ▼お知らせの装飾 */
	/* -------------------- */

	.info {
		font-size: 20px;
		font-weight: bold ;
	}




	/* -------------------- */
	/* ▼メニュートップページの装飾 */
	/* -------------------- */

	.salonflow {
		text-align : center;
		font-size: 16px;
	}








	/* -------------------- */
	/* ▼メニュートップページの装飾 */
	/* -------------------- */

	.menutop {
		text-align : center;
		font-size: 20px;
	}




	/* -------------------- */
	/* ▼メニューページの装飾 */
	/* -------------------- */

	.menupage {
		text-align : center;
		font-size: 20px;
	}




	/* -------------------- */
	/* ▼メインカードの装飾 */
	/* -------------------- */


	.card {
		padding: 0em;
		margin: 0em;
	}
	.card-header {
		padding: 0.5em;
		margin: 0em;
		letter-spacing: 0em;
		line-height: 1.2;
	}




	/* -------------------- */
	/* ▼トップへ戻るの装飾 */
	/* -------------------- */


	.go-top{
		padding: 0em;
		margin: 2em;
		letter-spacing: -0.1em;
		text-align : center;
		line-height: 1.2;
		font-size: 0.9em;
	}

	/* -------------------- */
	/* ▼コース料金の装飾 */
	/* -------------------- */

	.course-title{
		text-align : left;
		padding: 0em;
		margin-left: -0.5em;
		margin-right: -0.5em;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.5em;
		color: #000000; 
	}
	.course-category{
		text-align : left;
		padding: 0em;
		margin-left: -0.5em;
		margin-right: -0.5em;
		font-size: 12px;
		font-weight: lighter;
		line-height: 1;
		color: #212529; 
	}

	.course-l{
		text-align : left;
		padding: 0em;
		margin-left: -0.5em;
		margin-right: -0.5em;
		font-size: 18px;
		font-weight: bold;
		color: #000000; 
	}
    .course-small{
		text-align : left;
		padding: 0em;
		margin-left: -0.5em;
		margin-right: -0.5em;
		font-size: 14px;
		line-height: 1em;
		color: #000000; 
	}
	.course-la{
		text-align : left;
		padding: 0em;
		margin-left: -0.5em;
		margin-right: -0.5em;
		font-size: 14px;
	}
	.price-r{
		text-align : right;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: -0.5em;
		font-size: 18px;
		font-weight: bold;
	}
	.price-l{
		text-align : left;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: -0.5em;
		font-size: 18px;
		font-weight: bold;
	}
	.course-pink{
		text-align : left;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: -0.5em;
		margin-bottom: 0em;
		line-height: 1.5;
		color: #ff69b4;
		font-size: 14px;
		font-weight: bold;		
	}
	.course-orange{
		text-align : left;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: -0.5em;
		margin-bottom: 0em;
		line-height: 1.5;
		color: #ff8c00;
		font-size: 18px;
		font-weight: bold;		
	}
	.course-black{
		text-align : left;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: -0.5em;
		margin-bottom: 0em;
		line-height: 1.5;
		color: #212529;
		font-size: 12px;
		font-weight: bold;
	}
	.course-description{
		text-align : left;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: 1em;
		margin-bottom: 0em;
		line-height: 1.1;
		color: #212529;
		font-size: 12px;
	}
	.menu-category{
		text-align : left;
		padding: 0em;
		margin-left: 1em;
		margin-right: -0.5em;
		font-size: 16px;
		font-weight: lighter;
		line-height: 1;
		color: #212529; 
	}
	.menu-description{
		text-align : left;
		padding: 0em;
		margin-right: -0.5em;
		margin-left: -1.0em;
		margin-bottom: 0em;
		line-height: 1.1;
		color: #212529;
		font-size: 12px;
	}
	

	












	/* -------------------- */
	/* ▼サイドカラムの装飾 */
	/* -------------------- */
	.side-column {
		background-color: #ffffff;	/* 背景色(淡い緑色) */
		padding: 1px 0px;			/* 内側の余白(上下に1px) */
	}
	.side-box {
		margin: 1em;
		border: 1px solid white;
		border-radius: 0px 0px 10px 10px;
		background-color: #ffffff;
		text-align : center;
	}
	.side-box h2 {
		font-size: 1.2em;
		padding: 0.5em 0.5em 0.5em 0.5em;
		margin: 0em;
		letter-spacing: 0em;
		line-height: 1.2;
		text-align : center;

		background-color: #ffddbb;
	}
	.side-box h3 {
		margin: 0px;
		padding: 3px 5px;
		font-size: 1.2em;
		background-color: #ffddbb;
	}
	.side-box div {
		padding: 0px 0.5em;
		text-align : center;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.side-box p {
		padding: 0px 0.5em;
		text-align : left;
	}
	.side-box ul li {
		line-height: 1.8;
		text-align : left;
	}
	iframe { width : 100% ;
	}
	li.list-group-item{
		font-size: 16px;
	}		
	/* ------------------ */
	/* ▼ヘッダ部分の装飾 */
	.pageheader {
		background-color: #cccccc;
		margin: 0px;
		color: derk;
	}

	/* ------------------ */
	/* ▼フッタ部分の装飾 */
	.pagefooter {
		background-color: #ffddbb;
		margin: 0px;
		padding: 1em;
		border-top: 1px solid white;
	}
	.pagefooter ul {
		text-align : center;
	}

	.pagefooter2 {
		background-color: #ffffff;
		margin: 0px;
		padding: 1em;
		border-top: 1px solid white;
	}
	.pagefooter2 ul {
		text-align : center;
	}



/* ================================================================================================================ */
/* 以下は、サンプル掲載用の装飾・説明用の装飾であり、記述は必須ではありません。（本記事のテクニックとは無関係です） */
/* ================================================================================================================ */







		/* ======================================= */
		/* ▼横幅600px～849pxの場合に適用されるCSS */	/* ※この部分の解説は、記事4ページ目をご参照下さい。 */
		/* ======================================= */
		@media (min-width: 600px) and (max-width: 849px) {

			/* ▼サイドカラムの装飾 */
			.side-column {
				text-align: center;   /* 内部のインラインブロックを中央に寄せる */
				padding: 1em 0.2em;   /* 上下に若干の余白を設ける */
			}
			/* ▼サイドカラムの内側だけで各ボックスを2段組にする */
			.side-box {
				display: inline-block;  /* インラインブロック化 */
				width: 48%;             /* 横幅を48%に(2段組にするため) */
				vertical-align: top;    /* 横並びのブロック間では上端を揃える */
				margin: 0;              /* 外側の余白をなくす */
				text-align: left;       /* ボックス内部は左寄せ */
			}

		}

		/* ==================================== */
		/* ▼横幅850px以上の場合に適用されるCSS */	/* ※この部分の解説は、記事3ページ目をご参照下さい。 */
		/* ==================================== */
		@media (min-width: 850px) {

			/* ▼ページレイアウト */
			.page-cover {
				display: flex;       /* フレキシブルボックスでレイアウト */
      			flex-direction: row; /* 横並びにする */
			}

			/* ▼メインカラムの装飾 */
			.main-column {
				order: 2;	/* 2番目に表示 */
				width: 70%;
			}
			/* ▼サイドカラムの装飾 */
			.side-column {
				order: 1;	/* 1番目に表示 */
				width: 30%;
			}

		}