@charset "UTF-8";
@media screen {
	/* 共通部分
	------------------------------- */
	html {
	    font-size: 100%;
	}
	body{
	    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
	    line-height: 1.7;
	    color:#0a1228;
	}
	a {
	    text-decoration: none;
		color: #000;
	}
	img {
	    max-width: 100%;
	}
	p {
		font-size: 1rem;
	  text-indent: 1rem;
	  margin: 0px;
	  padding: 0px;
	
	}
	/* レイアウト */
	.wrapper {
	    max-width: 1120px;
	    margin: auto;
	    padding: 0 1.5rem;
	}
	.align-center {
	    text-align: center;
	}
	
	/* フォント */
	.heading-large{
		padding: 1rem;
		font-size: large;
	}
	
	.rocknroll-one-regular {
	  font-family: "RocknRoll One", sans-serif;
	  font-weight: 400;
	  font-style: normal;
	}
	
	.noto-sans-jp-s {
	  font-family: "Noto Sans JP", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	}
	.imperial-script-regular {
	  font-family: "Imperial Script", cursive;
	  font-weight: 400;
	  font-style: normal;
	}
	.m-plus-1p-regular {
	  font-family: "M PLUS 1p", sans-serif;
	  font-weight: 400;
	  font-style: normal;
	}
	
	/* アイコン */
	.fa-award{
		color:goldenrod;
	}
	.fa-star{
		color: #f9e900;
	}
	.fa-check{
		color:orangered;
	}
	.fa-facebook{
		color: dodgerblue;
	}
	/* 装飾 */
	.bold{
		font-weight:bold;
	}

	
	/* 囲み線 */
	.outline{
		border:1px solid #ccc;
		outline:2px solid #ccc;
		outline-offset: 4px;
		padding:0 5rem 2rem 5rem;
		margin:auto;
		margin-bottom: 1rem;
		width: 800px;
		background-color: #fff;
		position: relative;
	}
	.dot{
		list-style: none; /* デフォルトの・を消す */
		padding-left: 0;
	}
	.dot ul li {
		
		position: relative;
		padding-left: 20px;
		padding-bottom: 5px;
	}
	.dot ul li::before{
		content:' ';
		position: absolute;
			left: 0;
			top: 8px;
			width: 6px;
			height: 6px;
			background-color: #000;
			border-radius: 50%;
	}
	.kome ul {
		list-style: none; /* デフォルトの・を消す */
		padding-left: 0;
	}

	.kome ul li {
		position: relative;
		padding-left: 20px;
		padding-bottom: 5px;
	}
	.kome ul li::before{
		content:'※';
		position: absolute;
		left: 0;
		top:0;
	}
	
	/* ボタン */
	.btn {
	    display: inline-block;
	    font-size: 1rem;
	    background-color: #f9e900;
	    color: #432;
		box-shadow: 5px 5px #1A0B08;
	    border-radius: 15px;
	    padding: .75rem 1.5rem;
	    transition: .5s;
		margin: 30px 0;
	}
	.btn:hover {
	    background-color: #f7efa2;
	}
	/* バナー */
	.close-btn{
		position: absolute;
		right: 15px;
		top: 0px;
		cursor: pointer;
		font-size: 20px;
	}
	.bottom-banner{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		text-align: center;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
		z-index: 9999;
		padding: 10px 0;
	}
	.bottom-banner img{
	
	  height: auto;
	}
	/* Access */
	.access{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		max-width: 800px;
		margin:auto;
		position: relative;
	}
	.iframe-wrapper{
		width: 90%;
		aspect-ratio: 16 / 9;
	}
	.iframe-wrapper iframe{
		width: 100%;
		height: 100%;
	}
	
	
	.info {
	    width: 100%;
	    max-width: 800px;
	    margin: auto;
	    padding: 0 1.5rem;
	    border-spacing: 0;
	}
	.info th,
	.info td {
	    border-bottom: 1px solid #c9c2bc;
	}
	.info th {
		width: 200px;
	    text-align: left;
	    font-weight: normal;
	    padding: 1rem;
	}
	.info td {
	    padding: 1rem 0;
	}
	/* フッター */
	.copyright {
	    background-color: #432;
	    text-align: center;
	    padding: 2rem 0 150px 0;
	    color: #fff;
		
	}
	
	
	/* トップ画面
	------------------------------- */
	.top-header{
		display: flex;
		flex-direction: row;
		position: relative;
	}
	.contents-header{
		color: #1A0B08;
		background-color: #fff;
		background-size: cover;
		height: 100px;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 20px;
		margin:0 10px;
	}
	.contents-header h1{
			font-size: 1.5rem;
	}
	.contents-header h3{
			font-size: 0.5rem;
	}
	.top-contents{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FBF6F0;
	}
	.top-image{
		margin:20px;
		padding: 20px;
		max-width: 1500px;
	}
	.top-image img:hover{
		box-shadow: 0 0 2rem rgba(0,0,0,0.5);
		transition: .5s;
	}
	.top-banner{
		position: absolute;
		right: 0;
	}
	
	/* レッスンスタジオ画面
	------------------------------- */
	.lesson-header{
		color: #1A0B08;
		background-color: #fff;
		background-size: cover;
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.lesson-header h1{
		font-size: 3rem;
	}
	.lesson-main{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.lesson-catch{
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #FBF6F0;
		padding:2rem;
	}
	.lesson-catch div{
		margin:auto;
		padding:10px;
		max-width: 1000px;
	}
	.table{
		background-image: url(../images/table.jpeg);
		background-size: cover;
		border-radius: 20% 50% 20% 40%/20% 40% 20% 30%;
		height: 500px;
		width: 1000px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	.point{
		color:#1A0B08 ;
		font-weight: bold;
		background: rgb(255 255 255/0.8);
		box-shadow: 30px 20px #1A0B08;
		padding:1rem;
		width: 300px;
		text-align: left;
	}
	.lesson-presents{
		margin:2rem;
		font-size: 1.5rem;
		text-decoration: underline dotted 5px #fff200;
	}
	
	.lesson-mail{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FBF6F0;
	}
	.lesson-link{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lesson-link a{
		font-size: 1rem;
	    color: black;
	    border-radius: 10px;
	    border-width: thick;
	    border-style: outset;
	    border-color: #888888;
	    padding: 1.5rem 3rem;
	    transition: .5s;
		margin:2rem;
	}
	.lesson-link a:hover{
		background-color: #fff200;
	}
	/* レッスン内容画面
	------------------------------- */
	
	.contents-main{
		padding-top: 50px;
		background-color: #FBF6F0;
	}
	.contents-main h1{
		font-weight: bold;
		font-size:  3rem;
		color: #1A0B08;
		text-align: center;
	}
	.contents-main h2{
		font-size: 2rem;
	}
	.contents-article{
		display: flex;
		justify-content: space-between;
		max-width: 1000px;
		margin:0 auto;
	}
	.contents-left{
		display: flex;
		flex-direction: column;
	}
	.detail{
		padding:0 50px;
	}
	.contents-img{
		width: 350px;
		height: auto;
	}
	.brawn{
		background-image: url(../images/brawn.png);
		background-position: 0% 50%;
		display: flex;
		flex-direction: row;
	}
	.brawn h2{
		font-size: 2rem;
		color: #eed13f;
		padding-left: 10px;
	}
	.brawn h1{
		font-size: 2rem;
		color: #1A0B08;
		padding-top:30px;
		padding-left: 0px;
	}
	.contents-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30px;
		max-width: 1000px;
		margin:auto;
		position: relative;
	}
	.contents-table	p{
			text-align: left;
			padding-left: 10%;
	}

	.contents-table ul li {
		list-style: none;
		position: relative;
		padding-left: 20px;
		padding-bottom: 5px;
	}
	.contents-table ul li::before{
		content:'※';
		position: absolute;
		left: 0;
		top:0;
	}
	.ctable{
		display: flex;
		justify-content: center;
		border-collapse: collapse;
	}
	
	.ctable td{
		border: solid 2px #9ba5a0;
		padding:10px;
	}
	.ctable th{
		width: 90px;
		border: solid 2px #9ba5a0;
	}
	
	/* 大久保店画面
	------------------------------- */
	.okubo{
		background-image: url(../images/babble.png);
		background-size: cover;
	}
	.okubo-header{
		color: #000;
		height: 300px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}	
	.okubo-header h1{
			font-size: 3rem;
	}
	.okubo-header img{
			width: 100px;
			height: 100px;
	}
	.okubo-pic{
		display: flex;
		justify-content: center;
		height: 200;
	}
	.slideshow-container{
		margin: auto;     /* 中央に配置 */
		overflow: hidden;      /* 枠外を隠す */
		border-radius: 12px;
		max-width: 1500px;
	}
	.slides {
	  display: flex;          /* 横に並べる */
	  width: 100%;            /* 画像3枚ぶんの幅（枚数に応じて変更） */
	  transition: transform 1s ease; /* スライドのアニメーション */
	}
	
	.slides img {
	  width: 100%;
	  flex-shrink: 0;         /* 画像が縮まないように */
	}
	.indicators {
	  text-align: center;
	  margin-top: 10px;
	}
	
	.dot {
	  height: 12px;
	  width: 12px;
	  margin: 0 5px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.3s;
	  cursor: pointer;
	}
	
	.dot.active {
	  background-color: #333;
	}
	
	.okubo-concept{
		color: #000;
		background-color: #fff;
	
		background-size: cover;
		height: 800px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.okubo-concept h1{
			font-size: 3rem;
			width: 50%;
	}
	.okubo-sub-title{
		background-color: rgb(156,141,134);
		clip-path: inset(10px round 10px);
		color:#fff;
		font-size: 2rem;
		padding:10px;
		position: absolute;
		top:-4rem;
		left:30%;
		right: 30%;
	}
	
	.otable{
		display: flex;
		justify-content: flex-start;
		border-collapse: collapse;
		background-color: #fff;
	}
	
	.otable th{
			border: solid 2px #9ba5a0;
			padding:10px;
		}
	.otable td{
		border: solid 2px #9ba5a0;
		padding:10px;
	}
	/* 講師紹介画面
	------------------------------- */
	.inst-main,.cust-main{
		background-color: #FBF6F0;
		padding:2rem;
	}
 	.inst-main,.cust-main h1{
			font-weight: bold;
			font-size: 3rem;
	}
	.inst-main,.cust-main h2{
			font-size: 2rem;
	}
	inst-main{
		display: flex;
		justify-content: center;
		align-items:center;

		margin:auto;
	}
	.inst-name{
		display: flex;
		justify-content: center;
		align-items:center;

	}
	.inst-list{
		font-size: 1.3rem;
	}
	.inst-catch{
		display: flex;
		justify-content: center;
		align-items:center;
		margin:auto;
	}
	.inst-catch img{
		width: 400px;
		margin:10px;
	}
	.inst-catch p{
		width: 400px;
		margin:10px;
	}
	.inst-sns{
		display: flex;
		justify-content: center;
		align-items:center;
		margin:auto;
		position: relative;
		padding:0 40px;
	}
	
	/* 受講者の声画面
	------------------------------- */
	.cust-main{
		background-color: #FBF6F0;
	}
	.cust-main h1{
			font-size: 3rem;
	}
	.cust-main h3{
			font-size: 2rem;
	}
	.cust-main h2{
			padding-left: 30%;
	}
	.cust-main h2::before{
			content:"\f559";
			font-family: "Font Awesome 5 Free";
			color: #eed13f;
	}
	.cust-list{
		display: flex;
		justify-content: flex-start;
		max-width: 1500px;
		margin:auto;
		font-weight: bold;
	}
	.cust-list img{
			width: 200px;
			padding-right: 2rem;
	}
	
	.cust-koni{
		position: relative;
		display: inline-block;
		margin: 1.5em 0 1.5em 15px;
		padding: 7px 10px;
		min-width: 120px;
		max-width: 100%;
		color: #555;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #555;
		box-sizing: border-box;
	}
	.cust-koni::before{
		content: "";
		position: absolute;
		top: 50%;
		left: -24px;
		margin-top: -12px;
		border: 12px solid transparent;
		border-right: 12px solid #FFF;
		z-index: 2;
	}
	.cust-koni::after{
		content: "";
		position: absolute;
		top: 50%;
		left: -30px;
		margin-top: -14px;
		border: 14px solid transparent;
		border-right: 14px solid #555;
		z-index: 1;
	}
	.cust-num{
		display: flex;
		justify-content: left;
		max-width: 1500px;
		margin:auto;
	}
	.cust-num p{
			font-size: 2rem;
	}
	.cust-num.number{
			color:goldenrod;
	}
	.cust-koni-det{
		background-color: #fff;
		padding: 0 10px;
		border-radius: 10px;
		max-width: 1500px;
		margin:auto;
	}
	.cust-koni-det h3{
			font-size: 1rem;
	}
	.cust-koni-det ul{
		padding-left: 20px;
	}
	.yellow-line{
		text-decoration: underline solid 10px #f9e900;
		text-underline-offset: -5px;
	}
	
	.cust-ul,.cust-ur{
		display: flex;
		justify-content: center;
		align-items: center;
	
		margin:  2rem 5rem;
	}
	.cust-ul img,.cust-ur img{
			width: 150px;
			height: 80px;
			padding: 0 2rem;
	}
	.cust-ul div,.cust-ur div{
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 550px;
			background-color:lightgoldenrodyellow;
			position: relative;
			margin: 1.5em 0 1.5em 0;
			padding: 7px 10px;
	}
	.cust-ul h2::before,.cust-ur h2::before{
			content:"\f559";
			font-family: "Font Awesome 5 Free";
			color: #eed13f;
	}
	.cust-left{
		margin: 1.5em 0 1.5em 15px;
	}
	.cust-left::before{
		content:"";
		position: absolute;
		 top: 50%;
		 left: -30px;
		 margin-top: -15px;
		 border: 15px solid transparent;
		  border-right: 15px solid lightgoldenrodyellow;
	}
	.cust-right{
		margin: 1.5em 15px 1.5em 0;
	}
	.cust-right::before{
			content:"";
			position: absolute;
			 top: 50%;
			 right: -30px;
			 margin-top: -15px;
			 border: 15px solid transparent;
			  border-left: 15px solid lightgoldenrodyellow;
		}
	
	/* ビギナー画面
	------------------------------- */
	.beginner-header{
		color: #000;
		height: 300px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: url(../images/cue.jpeg);
		background-size: cover;
	}
	.beginner-header h1{
			font-size: 3rem;
			color: #fff;
			-webkit-text-stroke:2px #9fca99;
			paint-order:stroke fill;
	}
	.beginner-comment{
		font-size: 1.2rem;
		max-width: 1000px;
		margin:auto;
	}
	.beginner-comment p{
			font-size: 1.2rem;
	}
	.beginner-point{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		max-width: 1500px;
		padding :50px 50px;
		margin:auto;
	}
	.beginner-point-det{
		width: 300px;
		margin:0 30px 30px 30px;
		border:5px dashed #9fca99;
		border-radius: 10px;
		box-shadow:0 0 0 5px rgb(217, 233, 214);
		background-color:rgb(217, 233, 214);
	}
	.beginner-point-det img{
			padding-top: 10px;
			width: 80%;
	}
	.beginner-point-det h2{
	
		color: #000;
	
	}
	
	.beginner-foot{
		font-size: 1.2rem;
		background-color: rgb(217, 233, 214);
	}
	.beginner-foot h2{
			font-size: 1.5rem;
	}
}

/* 中間画面
------------------------------- */
@media screen and (max-width: 1000px) {
	.outline{
		border:1px solid #ccc;
		outline:2px solid #ccc;
		outline-offset: 4px;
		padding:0 0 2rem 0;
		margin:auto;
		width: 450px;
		background-color: #fff;
		position: relative;
	}
	.outline ul li {
		margin: 0 20px;
	}
	.bottom-banner img{
		width: 380px;
	  	height: auto;
	}


	.info {

	    margin: 10px;
		font-size:1rem;
	}
	.info th {
		width: 100px;
	}
	.top-header{
		justify-content: space-around;

	}
	.contents-header{
		height: 100px;
		padding-left: 0px;
		margin:0px;
	}
	.contents-header h1{
			font-size: 1rem;
		}
	.contents-header h3{
			font-size: 0.5rem;
	}
	.top-image{
		margin:10px;
		padding: 10px;
	}
	.top-image img{
		box-shadow: 0 0 1rem rgba(0,0,0,.5);
	}
	.copyright {
	    background-color: #432;
	    text-align: center;
	    padding: 2rem 0 120px 0;
	    color: #fff;
		
	}

	.okubo-header{
		height: 200px;
	}
	.okubo-header h1{
			font-size: 2rem;
	}
	.okubo-header img{
			width: 80px;
			height: 80px;
	}
	.okubo-pic{
		height: 100px;
	}
	.slideshow-container{
		margin: 50px 50px;     /* 中央に配置 */
	}
	.okubo-sub-title{
		font-size: 1rem;
		padding:10px;
		top:-3rem;
	}
	.otable{
		display: flex;
		justify-content: center;
		border-collapse: collapse;
		background-color: #fff;
	}

	.otable th{
			border: solid 2px #9ba5a0;
			padding:10px;
		}
	.otable td{
		border: solid 2px #9ba5a0;
		padding:10px;
	}
	.lesson-header{
		height: 150px;
	}
	.lesson-header h1{
		font-size: 2rem;
	}

	.lesson-catch{
		padding:0.5rem;
	}
	.lesson-catch div{
		margin:auto;
		padding:10px;
		max-width: 1000px;
	}
	.table{
		height: 285px;
		width: 500px;
	}

	.point{
		display: flex;
		align-items: center;
		color:#1A0B08 ;
		font-weight: bold;
		background: rgb(255 255 255/0.8);
		box-shadow: 20px 10px #1A0B08;
		width: 150px;
		height: 40px;
		font-size: 0.9rem;
	}
	.lesson-presents{
		margin:2rem;
		font-size: 1rem;
		text-decoration: underline dotted 5px #fff200;
	}
	.lesson-link{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lesson-link a{
		font-size: 0.8rem;
	    color: black;
	    border-radius: 10px;
	    border-width: thick;
	    border-style: outset;
	    border-color: #888888;
	    padding: 1rem 2rem;
	    transition: .5s;
		margin:1.5rem 1rem;
	}
	.inst-main,.cust-main h1{
			font-weight: bold;
			font-size: 2rem;
	}
	.inst-main,.cust-main h2{
			font-size: 1rem;
	}
	.inst-name{
		display: flex;
		justify-content: left;
		align-items:center;
		margin-left: 35%;
	}
	.inst-catch{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items:center;
	}

	.lesson-presents{
		margin:1rem;
		font-size: 1rem;
		text-decoration: underline dotted 5px #fff200;
	}
	.contents-main h1{
		font-size:  2rem;
	}
	.contents-article{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin:1rem;
		width: auto;
	}
	.contents-article.div{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.contents-img{
		margin:auto;
	}
	.brawn h1{
		font-size: 1.8rem;
		color: #1A0B08;
		padding-top:30px;
		padding-left: 0px;
	}

	.contents-main h2{
		font-size: 1.5rem;
	}
	.contents-table p{
			text-align: left;
			padding-left: 0;
			padding-bottom: 0.5rem;
	}
	.cust-main h1{
			font-size: 2rem;
	}
	.cust-main h3{
			font-size: 1.5rem;
	}
	.cust-main h2{
			font-size: 1.5rem;
			padding-left: initial;
	}
	.cust-main h2::before{
			content:"\f559";
			font-family: "Font Awesome 5 Free";
			color: #eed13f;
	}
	.cust-list{
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
		margin-left: initial;
		font-weight: normal;
	}
	.cust-list img{
			width: 200px;
	}
	.cust-koni{
		all:unset;
		position: relative;
		display: inline-block;
		margin: 1.5em 0;
		padding: 7px 10px;
		min-width: 120px;
		max-width: 100%;
		color: #555;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #555;
		box-sizing: border-box;
	}
	.cust-koni::before{
		all:unset;
		content: "";
		position: absolute;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid #FFF;
		z-index: 2;

	}
	.cust-koni::after{
		all:unset;
		content: "";
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid #555;
		z-index: 1;
	}
	.cust-num{
		margin-left:initial;
	}
	.cust-koni-det{
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
		margin-left: initial;
	}
	.cust-koni-det h3{
			font-size: 1rem;
	}
	.cust-ul{
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}
	.cust-ul div{
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 500px;
	}
	.cust-ur{
		flex-direction: column;
	}
	.cust-ur div{
			width: 500px;
	}

	.cust-left::before{
		all:unset;
		content:"";
		position: absolute;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid lightgoldenrodyellow;
		z-index: 2;
	}
	.cust-left::after{
		all:unset;
		content: "";
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid lightgoldenrodyellow;
		z-index: 1;
	}

	.cust-right::before{
		all:unset;
		content:"";
		position: absolute;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid lightgoldenrodyellow;
		z-index: 2;
	}
	.cust-right::after{
		all:unset;
		content: "";
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid lightgoldenrodyellow;
		z-index: 1;
	}
	.beginner-header{
		color: #000;
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: url(../images/cue.jpeg);
		background-size: cover;
	}
	.beginner-header h1{
			font-size: 1.4rem;
			color: #fff;
			-webkit-text-stroke:2px #9fca99;
			paint-order:stroke fill;
	}
	.beginner-comment{
		max-width: 500px;
	}
	.beginner-point-det{
		width: 300px;
		margin:0 30px 30px 30px;
		border:5px dashed #9fca99;
		border-radius: 10px;
		box-shadow:0 0 0 5px rgb(217, 233, 214);
		background-color:rgb(217, 233, 214);
	}
	.beginner-point-det h2{
			color: #000;
			font-size: 1rem;
	}
}
/* スマートフォン版
------------------------------- */
@media screen and (max-width: 480px) {
	.outline{
		border:1px solid #ccc;
		outline:2px solid #ccc;
		outline-offset: 4px;
		padding:0 0 2rem 0;
		margin:auto;
		width: 80%;
		background-color: #fff;
		position: relative;
	}
	.outline ul li {
		margin: 0 30px;
	}
	.bottom-banner img{
		width: 380px;
	  	height: auto;
	}


	.info {
	    max-width: 400px;
	    margin: 10px;
		font-size:1rem;
	}
	.info th {
		width: 100px;
	}
	.top-header{
		justify-content: space-around;

	}
	.contents-header{
		height: 100px;
		padding-left: 0px;
		margin:0px;
	}
	.contents-header h1{
			font-size: 1rem;
	}
	.contents-header h3{
			font-size: 0.5rem;
	}
	.top-image{
		margin:10px;
		padding: 10px;
	}
	.top-image img{
		box-shadow: 0 0 1rem rgba(0,0,0,.5);
	}
	.copyright {
	    background-color: #432;
	    text-align: center;
	    padding: 2rem 0 120px 0;
	    color: #fff;
		
	}
	.okubo-header{
		height: 200px;
	}
	.okubo-header h1{
			font-size: 2rem;
	}
	.okubo-header img{
			width: 80px;
			height: 80px;
	}
	.okubo-pic{
		height: 80px;
	}
	.slideshow-container{
		margin: 50px 50px;     /* 中央に配置 */
	}
	.okubo-sub-title{
		font-size: 1rem;
		padding:10px;
		top:-3rem;
	}
	.otable{
		display: flex;
		justify-content: center;
		border-collapse: collapse;
		background-color: #fff;
	}

	.otable th{
			border: solid 2px #9ba5a0;
			padding:10px;
			font-size: 0.5rem;
		}
	.otable td{
		border: solid 2px #9ba5a0;
		padding:10px;
		font-size: 0.5rem;
	}
	.lesson-header{
		height: 150px;
	}
	.lesson-header h1{
		font-size: 2rem;
	}

	.lesson-catch{
		padding:0.5rem;
	}
	.lesson-catch div{
		margin:auto;
		padding:10px;
		max-width: 1000px;
	}
	.table{
		height: 190px;
		width: 360px;
	}

	.point{
		display: flex;
		align-items: center;
		color:#1A0B08 ;
		font-weight: bold;
		background: rgb(255 255 255/0.8);
		box-shadow: 10px 5px #1A0B08;
		width: 140px;
		height: 40px;
		font-size: 0.8rem;
	}
	.lesson-presents{
		margin:2rem;
		font-size: 1rem;
		text-decoration: underline dotted 5px #fff200;
	}
	.lesson-link{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lesson-link a{
		font-size: 0.8rem;
	    color: black;
	    border-radius: 10px;
	    border-width: thick;
	    border-style: outset;
	    border-color: #888888;
	    padding: 0.5rem 1rem;
	    transition: .5s;
		margin:1rem 0.5rem;
	}
	.inst-name{
		display: flex;
		justify-content: left;
		align-items:center;
		margin-left: 70px;
	}
	.inst-catch{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items:flex-start;
	}
	.inst-catch img{
		max-width: 80%;
		margin:10px;
	}
	.inst-catch p{
		max-width: 80%;
		margin:10px;
	}

	.lesson-presents{
		margin:1rem;
		font-size: 1rem;
		text-decoration: underline dotted 5px #fff200;
	}
	.contents-main h1{
		font-size:  2rem;
	}
	.contents-article{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin:1rem;
		width: auto;
	}
	.contents-article.div{
		display: flex;
		flex-direction: column;
	}
	.brawn{
		background-image: url(../images/sbrawn.png);
		background-position: 0% 50%;
		display: flex;
		flex-direction: row;
	}
	.brawn h2{
		font-size: 1.5rem;
		color: #eed13f;
		padding-left: 10px;
	}
	.brawn h1{
		font-size: 1rem;
		color: #1A0B08;
		padding-top:30px;
		padding-left: 0px;
	}

	.contents-main h2{
		font-size: 1.5rem;
	}
	.contents-table p{
			text-align: left;
			padding-left: 0;
			padding-bottom: 0.5rem;
	}
	.cust-main h1{
			font-size: 2rem;
		}
	.cust-main h3{
			font-size: 1.5rem;
	}
	.cust-main h2{
			font-size: 1.2rem;
			padding-left: initial;
	}
	.cust-main h2::before{
			content:"\f559";
			font-family: "Font Awesome 5 Free";
			color: #eed13f;
	}
	.cust-list{
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-start;

		margin-left: initial;
		font-weight: normal;
	}
	.cust-list img{
			width: 200px;
			padding-right: 10%;
	}
	.cust-koni{
		all:unset;
		position: relative;
		display: inline-block;
		margin: 1.5em 0;
		padding: 7px 10px;
		min-width: 120px;
		max-width: 100%;
		color: #555;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #555;
		box-sizing: border-box;
	}
	.cust-koni::before{
		all:unset;
		content: "";
		position: absolute;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid #FFF;
		z-index: 2;

	}
	.cust-koni::after{
		all:unset;
		content: "";
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid #555;
		z-index: 1;
	}
	.cust-num{
		margin-left:initial;
	}
	.cust-koni-det{
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
		margin-left: initial;
	}
	.cust-koni-det h3{
			font-size: 1rem;
	}
	.cust-ul{
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}
	.cust-ul div{
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 330px;
	}
	.cust-ur{
		flex-direction: column;
	}
	.cust-ur div{
			width: 330px;
	}

	.cust-left::before{
		all:unset;
		content:"";
		position: absolute;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid lightgoldenrodyellow;
		z-index: 2;
	}
	.cust-left::after{
		all:unset;
		content: "";
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid lightgoldenrodyellow;
		z-index: 1;
	}

	.cust-right::before{
		all:unset;
		content:"";
		position: absolute;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid lightgoldenrodyellow;
		z-index: 2;
	}
	.cust-right::after{
		all:unset;
		content: "";
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid lightgoldenrodyellow;
		z-index: 1;
	}
	.beginner-header{
		color: #000;
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: url(../images/cue.jpeg);
		background-size: cover;
	}
	.beginner-header h1{
			font-size: 1.4rem;
			color: #fff;
			-webkit-text-stroke:2px #9fca99;
			paint-order:stroke fill;
	}
	.beginner-comment{
		font-size: 1.2rem;
		max-width: 350px;
		margin:auto;
	}
	.beginner-comment p{
			font-size: 1rem;
	}
	.beginner-point-det{
		width: 300px;
		margin:0 30px 30px 30px;
		border:5px dashed #9fca99;
		border-radius: 10px;
		box-shadow:0 0 0 5px rgb(217, 233, 214);
		background-color:rgb(217, 233, 214);
	}
	.beginner-point-det	h2{
			color: #000;
			font-size: 1rem;
	}
}