/** SP版 **/
@media screen and (max-width: 679px){
	p.catch {
		text-align: left;
	}
	.display-title {
		margin:20px auto 0;
		text-align: center;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-weight: 300;
	}
	.display-desc {
		margin: 30px auto 0;
		text-align: center;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-weight: 300;
	}
	.studio-photo {
		opacity: 0.4;
		width: 115px;
		height: 64px;
		object-fit: cover;
	}
	.ml-10 {
		margin-left: 10px;
	}
	.active {
		opacity: 1;
	}
	.display-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.studio-name {
		font-size: 30px;
		font-weight: bold;
		margin:30px auto 0;
		text-align: center;
	}
	.slide-line {
		width: 30px;
		border: 1px solid #888888;
		text-align: center;
		background: #888888;
		margin: 17px auto;
	}
	.gallery-images {
		margin: 10px auto 0;
		display: flex;
		justify-content: left;
		align-items: flex-start;
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: scroll;
	}
	.c-studio-information-wrap {
		margin: 10px auto 0;
	}
	.catch {
		font-size: 30px;
		font-weight: bold;
	}
	.description {
		line-height: 1.87;
		font-size: 16px;
		font-weight: bold;
		margin: 20px auto 0;
		text-align: center;
	}
	#access {
		margin-top: 50px;
	}
	#access p {
		font-size: 14px;
		line-height: 1.5;
		padding: 0 10px;
		margin-top: 10px;
	}
	#access ol p:before {
		content: counter(no, decimal-leading-zero);
		display: block;
		font-weight: 700;
		font-family: "Roboto", sans-serif;
		line-height: 1;
		font-size: 20px;
		margin-bottom: 10px;
	}
	#access ol > li {
		counter-increment: no;
		margin-top: 10px;
	}
	#access ol {
		display: inline-block;
		text-align: center;
	}
	#access li {
		width: 100%;
		margin-bottom: 10px;
	}
	#access .map-container{
		margin: 20px auto 20px auto;
		height : 350px;
		width: 100%;
	}
	#access h4 {
		margin: 30px auto;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
	}
	#information h4{
		font-weight : 600;
	}
	#information p , #information li li{
		font-weight : 300;
	}
	#information dl > div{
		display : flex;
		align-items : flex-start;
	}
	#information li > dl > div > dt{
		font-weight : 600;
		width: 5em;
		flex-shrink: 0;
		text-align: right;
	}
	#information dt:after{
		content : "：";
	}
	#information .wrap-inner{
		padding-bottom : calc( 110px - 7.5px );
	}
	#information .wrap-inner > ul{
		display : inline-block;
	}
	#information .wrap-inner{
		padding-top : 40px;
		text-align: center;
	}
	#information .wrap-inner > ul{
		margin-top : 82px;
	}
	#information h4{
		font-size : 18px;
	}
	#information p , #information li li , #information dt , #information dd{
		font-size : 15px;
		line-height : 2;
		white-space: nowrap;
	}
	#information p , #information ul ul , #information li > dl{
		margin-top : calc( 41px - 7.5px );
	}
	li.access {
		margin-top: 20px;
	}
	li.contact {
		margin-top: 20px;
	}
	.title {
		margin-left:auto;
		margin-right: auto;
		text-align: center;
		font-size: 30px;
		font-weight: bold;
	}
	.room {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		> img {
			max-width: 100%;
			height: 250px;
		}
	}
	.reverse {
		flex-direction: row-reverse;
	}
	.other-room {
		> img {
			max-width: 100%;
			height: 250px;
			padding: 10px;
		}
		display: inline;
	}
	.latest-room-line {
		width: 30px;
		border: 1px solid #707070;
		background-color: #888888;
		text-align: center;
		margin: 2px auto 5px;
	}
	.latest-room-title {
		font-family: "termina", sans-serif;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: 0.1em;
		color: #666666;
		text-align: center;
		line-height: 2.27;
	}
	.latest-room-text {
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 12px;
		line-height: 2.27;
		font-weight: normal;
		text-align: center;
		padding: 0 10px;
	}
	.description {
		text-align: center;
		font-weight: 300;
		font-size: 18px;
	}
	p.description {
		text-align: left;
	}
	.lesson-room-title {
		font-family: "termina", sans-serif;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.1em;
		line-height: 4.6;
		color: #666666;
	}
	.lesson-room-line {
		width: 30px;
		border: 1px solid #707070;
		background-color: #888888;
		margin: 2px auto 27px;
	}
	.lesson-room-name {
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 18px;
		line-height: 1;
		letter-spacing: 0.1em;
		font-weight: 600;
		margin: 19px 0px;
	}
	.lesson-room-desc {
		font-family: "Hiragino Kaku Gothic ProN", sans-serif;
		font-size: 13px;
		line-height: 1.45;
		font-weight: 300;
		letter-spacing: 0.1em;
	}
	.lesson-room-content {
		width: calc(580px / 2);
		padding: 10px;
		margin-left: auto;
		margin-right: auto;
		text-align: center
	}
	.lesson-room-wrap {
		margin-top: 30px;
	}
	.latest-room {
		margin-top: 30px;
	}
	.latest-room-wrap {
		margin-top: 30px;
	}
	.latest-room-content {
		margin-top: 20px;
	}
	#studio,
	#about,
	#information,
	#access,
	#lesson-room,
	#latest-room {
		margin-top: 50px;
	}
    #lesson-room {
        padding: 10px;
    }
	.access-image {
		width: 250px;
		height: 200px;
	}
	.studio-content {
		margin-top: 30px;
		text-align: center;
        padding: 10px;
	}
	.studio-content-wrap {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-top: 30px;
	}
	.studio-content-image {
		max-width: 100%;
		object-fit: cover;
		height: auto;
		margin-top: 20px;
	}
	#about-studio {
		margin: 30px auto 50px auto;
		max-width: 580px;
	}
	.about-container {
		margin: 30px auto 0;
		padding:20px;
		max-width: 580px;
	}
	.about-display-image-wrap {
		margin-left:auto;
		margin-right: auto;
		text-align: center;
		margin-top: 30px;
	}
}
/** タブレット版 **/
@media screen and (min-width: 680px) and (max-width:1000px){
	.display-title {
		margin:20px auto 0;
		text-align: center;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-weight: 300;
	}
	.display-desc {
		margin: 30px auto 0;
		text-align: center;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-weight: 300;
	}
	.studio-photo {
		opacity: 0.4;
		width: 115px;
		height: 64px;
		object-fit: cover;
	}
	.ml-10 {
		margin-left: 10px;
	}
	.active {
		opacity: 1;
	}
	.display-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.studio-name {
		font-size: 30px;
		font-weight: bold;
		margin:30px auto 0;
		text-align: center;
	}
	.slide-line {
		width: 30px;
		border: 1px solid #888888;
		text-align: center;
		background: #888888;
		margin: 17px auto;
	}
	.gallery-images {
		margin: 10px auto 0;
		display: flex;
		justify-content: left;
		align-items: flex-start;
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: scroll;
	}
	.c-studio-information-wrap {
		margin: 10px auto 0;
	}
	.catch {
		font-size: 30px;
		font-weight: bold;
	}
	.description {
		line-height: 1.87;
		font-size: 16px;
		font-weight: bold;
		margin: 20px auto 0;
		text-align: center;
	}
	#access {
		margin-top: 50px;
	}
	#access p {
		font-size: 14px;
		line-height: 1.5;
		padding: 0 10px;
	}
	#access ol p:before {
		content: counter(no, decimal-leading-zero);
		display: block;
		font-weight: 700;
		font-family: "Roboto", sans-serif;
		line-height: 1;
		font-size: 20px;
		margin-bottom: 10px;
	}
	#access ol > li {
		counter-increment: no;
		display: flex;
	}
	#access ol {
		display: inline-block;
	}
	#access li {
		width: 100%;
		margin-bottom: 10px;
	}
	#access .map-container{
		margin: 20px auto 20px auto;
		height : 350px;
		width: 100%;
	}
	#access h4 {
		margin: 30px auto;
		text-align: left;
		font-size: 24px;
		font-weight: bold;
	}
	#information h4{
		font-weight : 600;
	}
	#information p , #information li li{
		font-weight : 300;
	}
	#information dl > div{
		display : flex;
		align-items : flex-start;
	}
	#information li > dl > div > dt{
		font-weight : 600;
		width: 5em;
		flex-shrink: 0;
		text-align: right;
	}
	#information dt:after{
		content : "：";
	}
	#information .wrap-inner{
		padding-bottom : calc( 110px - 7.5px );
	}
	#information .wrap-inner > ul{
		display : inline-block;
	}
	#information .wrap-inner{
		padding-top : 40px;
		text-align: center;
	}
	#information .wrap-inner > ul{
		margin-top : 82px;
	}
	#information h4{
		font-size : 18px;
	}
	#information p , #information li li , #information dt , #information dd{
		font-size : 15px;
		line-height : 2;
		white-space: nowrap;
	}
	#information p , #information ul ul , #information li > dl{
		margin-top : calc( 41px - 7.5px );
	}
	li.access {
		margin-top: 20px;
	}
	li.contact {
		margin-top: 20px;
	}
	.title {
		margin-left:auto;
		margin-right: auto;
		text-align: center;
		font-size: 30px;
		font-weight: bold;
	}
	.room {
		max-width: 680px;
		height: 250px;
		display: flex;
		justify-content: center;
		gap: 15px;
	}
	.reverse {
		flex-direction: row-reverse;
	}
	.other-room {
		> img {
			width: calc(680px / 4);
			height: 180px;
		}
		display: inline;
	}
	.latest-room-line {
		width: 30px;
		border: 1px solid #707070;
		background-color: #888888;
		text-align: center;
		margin: 2px auto 5px;
	}
	.latest-room-title {
		font-family: "termina", sans-serif;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: 0.1em;
		color: #666666;
		text-align: center;
		line-height: 2.27;
	}
	.latest-room-text {
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 12px;
		line-height: 2.27;
		font-weight: normal;
		text-align: center;
		padding: 0 10px;
	}
	.description {
		text-align: center;
		font-weight: 300;
		font-size: 18px;
	}
	p.description {
		text-align: left;
	}
	.lesson-room-title {
		font-family: "termina", sans-serif;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.1em;
		line-height: 4.6;
		color: #666666;
	}
	.lesson-room-line {
		width: 30px;
		border: 1px solid #707070;
		background-color: #888888;
		margin: 2px 0px 27px;
	}
	.lesson-room-name {
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 18px;
		line-height: 1;
		letter-spacing: 0.1em;
		font-weight: 600;
		margin: 19px 0px;
	}
	.lesson-room-desc {
		font-family: "Hiragino Kaku Gothic ProN", sans-serif;
		font-size: 13px;
		line-height: 1.45;
		font-weight: 300;
		letter-spacing: 0.1em;
	}
	.lesson-room-content {
		width: calc(680px /2);
		padding: 10px 20px;
	}
	.lesson-room-wrap {
		margin-top: 30px;
	}
	.latest-room {
		margin-top: 30px;
	}
	.latest-room-wrap {
		margin-top: 30px;
	}
	.latest-room-content {
		margin-top: 20px;
	}
	#studio,
	#about,
	#information,
	#access,
	#lesson-room,
	#latest-room {
		margin-top: 50px;
	}
	.access-image {
		width: 250px;
		height: 200px;
	}
	.studio-content {
		margin-top: 30px;
		text-align: center;
	}
	.studio-content-wrap {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-top: 30px;
	}
	.studio-content-image {
		max-width: 100%;
		object-fit: cover;
		height: auto;
		margin-top: 20px;
	}
	#about-studio {
		margin: 30px auto 50px auto;
		padding:40px;
		max-width: 680px;
	}
	.about-container {
		margin: 30px auto 0;
		padding:20px;
		max-width: 680px;
	}
	.about-display-image-wrap {
		margin-left:auto;
		margin-right: auto;
		text-align: center;
		margin-top: 30px;
	}
}
/** PC版 **/
@media screen and (min-width: 1001px){
	.display-title {
		margin:20px auto 0;
		text-align: center;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-weight: 300;
	}
	.display-desc {
		margin: 30px auto 0;
		text-align: center;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-weight: 300;
	}
	.studio-photo {
		opacity: 0.4;
		width: 115px;
		height: 64px;
		object-fit: cover;
	}
	.ml-10 {
		margin-left: 10px;
	}
	.active {
		opacity: 1;
	}
	.display-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.studio-name {
		font-size: 30px;
		font-weight: bold;
		margin:30px auto 0;
		text-align: center;
	}
	.slide-line {
		width: 30px;
		border: 1px solid #888888;
		text-align: center;
		background: #888888;
		margin: 17px auto;
	}
	.gallery-images {
		margin: 10px auto 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 80%;
		flex-wrap: nowrap;
	}
	.c-studio-information-wrap {
		margin: 10px auto 0;
	}
	.catch {
		font-size: 30px;
		font-weight: bold;
	}
	.description {
		line-height: 1.87;
		font-size: 16px;
		font-weight: bold;
		margin: 20px auto 0;
		text-align: center;
	}
	#access {
		margin-top: 50px;
	}
	#access p {
		font-size: 14px;
		line-height: 1.5;
		padding: 0 10px;
	}
	#access ol p:before {
		content: counter(no, decimal-leading-zero);
		display: block;
		font-weight: 700;
		font-family: "Roboto", sans-serif;
		line-height: 1;
		font-size: 20px;
		margin-bottom: 10px;
	}
	#access ol > li {
		counter-increment: no;
		display: flex;
	}
	#access ol {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	#access li {
		width: calc( 470 * 100% / 960 );
		padding-bottom: calc( ( 28 - 3 ) * 100vw / 1300 );
	}
	#access .map-container{
		margin: 20px auto 20px auto;
		height : 350px;
		width: 100%;
	}
	#access h4 {
		margin: 30px auto;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
	}
	#information h4{
		font-weight : 600;
	}
	#information p , #information li li{
		font-weight : 300;
	}
	#information dl > div{
		display : flex;
		align-items : flex-start;
	}
	#information li > dl > div > dt{
		font-weight : 600;
		width: 5em;
		flex-shrink: 0;
		text-align: right;
	}
	#information dt:after{
		content : "：";
	}
	#information .wrap-inner{
		padding-bottom : calc( 110px - 7.5px );
	}
	#information .wrap-inner > ul{
		display : flex;
		justify-content : center;
	}
	#information .wrap-inner{
		padding-top : 40px;
	}
	#information .wrap-inner > ul{
		margin-top : 82px;
	}
	#information .wrap-inner > ul > li + li{
		margin-left : 117px;
	}
	#information h4{
		font-size : 18px;
	}
	#information p , #information li li , #information dt , #information dd{
		font-size : 15px;
		line-height : 2;
		white-space: nowrap;
	}
	#information p , #information ul ul , #information li > dl{
		margin-top : calc( 41px - 7.5px );
	}
	.title {
		margin-left:auto;
		margin-right: auto;
		text-align: center;
		font-size: 30px;
		font-weight: bold;
	}
	.room {
		max-width: 980px;
		height: 250px;
		display: flex;
		justify-content: center;
	}
	.reverse {
		flex-direction: row-reverse;
	}
	.other-room {
		> img {
			width: calc(980px / 4);
			height: 200px;
			margin-right: 20px;
		}
		display: inline;
	}
	.latest-room-line {
		width: 30px;
		border: 1px solid #707070;
		background-color: #888888;
		text-align: center;
		margin: 2px auto 5px;
	}
	.latest-room-title {
		font-family: "termina", sans-serif;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: 0.1em;
		color: #666666;
		text-align: center;
		line-height: 2.27;
	}
	.latest-room-text {
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 12px;
		line-height: 2.27;
		font-weight: normal;
		text-align: center;
		padding: 0 10px;
	}
	.description {
		text-align: center;
		font-weight: 300;
		font-size: 18px;
	}
	.lesson-room-title {
		font-family: "termina", sans-serif;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.1em;
		line-height: 4.6;
		color: #666666;
	}
	.lesson-room-line {
		width: 30px;
		border: 1px solid #707070;
		background-color: #888888;
		margin: 2px 0px 27px;
	}
	.lesson-room-name {
		font-family: "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 18px;
		line-height: 1;
		letter-spacing: 0.1em;
		font-weight: 600;
		margin: 19px 0px;
	}
	.lesson-room-desc {
		font-family: "Hiragino Kaku Gothic ProN", sans-serif;
		font-size: 13px;
		line-height: 1.45;
		font-weight: 300;
		letter-spacing: 0.1em;
	}
	.lesson-room-content {
		width: calc(980px /2);
		padding: 10px 20px;
	}
	.lesson-room-wrap {
		margin-top: 30px;
	}
	.latest-room {
		margin-top: 30px;
	}
	.latest-room-wrap {
		margin-top: 30px;
	}
	.latest-room-content {
		margin-top: 20px;
	}
	#studio,
	#about,
	#information,
	#access,
	#lesson-room,
	#latest-room {
		margin-top: 50px;
	}
	.access-image {
		width: 200px;
		height: 150px;
	}
	.studio-content {
		display: flex;
		justify-content: flex-start;
		margin-top: 30px;
	}
	.studio-content-wrap {
		margin-right: 40px;
		max-width: 400px;
	}
	.studio-content-image {
		max-width: 400px;
		height: auto;
	}
	#about-studio {
		margin: 30px auto 50px auto;
		padding:40px;
		max-width: 920px;
	}
	.about-container {
		margin: 30px auto 0;
		padding:20px;
		max-width: 920px;
	}
	.about-display-image-wrap {
		margin-left:auto;
		margin-right: auto;
		text-align: center;
		margin-top: 30px;
	}
}