@charset "UTF-8";

/******************************************************************
Theme Name: Shirayuri Music School
Theme URI:
Author: ballet-p.com
Author URI: https://ballet-p.com/
Description: This site was built by ballet-p.com.
Version: 1.0
******************************************************************/

/*------------------------------------------------------------------------------------------------------------------

カスタマイズ担当者へ

デスクトップファーストで作成し、以下の順で並んでいます。
該当箇所を修正してください。

・サイト全体の基本設定……ボックスモデルやクリアフィックス、フォントや表などの基本設定
・PC版レイアウトおよび各ページの設定……レイアウトのあとに各ページ固有の設定
・タブレット版レイアウトおよび各ページの設定……PC版をもとに、タブレットの時の変更箇所のみ記述
・スマホ版レイアウトおよび各ページの設定…S…P版をもとに、タブレットの時の変更箇所のみ記述
・オプションに関する設定_使用しない場合は削除……facebookやgoogleカレンダーなどの設定
・印刷設定

-----------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------
	サイト全体の基本設定
-----------------------------------------------------------------------------------------------------------------*/
/**-----------------clearfix**/
.clearfix, .cf{
	zoom: 1;
}
.clearfix:before, .clearfix:after, .cf:before, .comment-respond:before, .cf:after, .comment-respond:after{
	content: "";
	display: table;
}
.clearfix:after, .cf:after, .comment-respond:after{
	clear: both;
	}
.clearboth, .cb{
	clear: both;
}

/**-----------------box-sizing　css3草案のborder-box**/
*, *:before, *:after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/**-----------------画像と動画**/
img,
video{
	height: auto;
	max-width: 100%;
}
img.photo1_right{
	width: 220px;
	margin: 0 0 20px 20px;
	float: right;
	display: block;
}
img.photo1_left{
	width: 220px;
	margin: 0 20px 20px 0;
	float: left;
	display: block;
}
.photo_box{
	overflow: hidden;
}
.photo_box img{
	width: 100%;
	margin: 0 auto;
	display: block;
}
.photo3_left, .photo3_center, .photo3_right{
	float: left;
	width: 33.3%;
}
.photo3_left{
	padding: 0 8px 0 0;
}
.photo3_center{
	padding: 0 4px 0;
}
.photo3_right{
	padding: 0 0 0 8px;
}
.photo2_left{
	float: left;
	width: 50%;
	padding: 0 6px 12px 0;
}
.photo2_right{
	float: right;
	width: 50%;
	padding: 0 0 12px 6px;
}

/**-----------------リンク**/
a > img:hover{
	opacity: 0.8;
}
a, a:visited{
	color: #65aadd;
}
a:hover, a:focus, a:visited:hover, a:visited:focus{
	color: #b2d4ee;
}

/**-----------------フォント**/
body{
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 14px;
	color: #646464;
	line-height: 1.8;
}
.gothic{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.decofont{
	font-family: 'Pinyon Script', cursive;
}
.f_75{
	font-size: 75%;
}
.f_50{
	font-size: 50%;
}
.red{
	color: red;
}
.blue{
	color: #65aadd;
}
.white{
	color: #fff;
}

/**-----------------見出し**/
h1, h2, h3, h4{
	line-height: 1.4;
	font-weight: normal;
	color: #646464;
}
h1 a, h2 a, h3 a, h4 a{
	text-decoration: none;
}
h2{
	margin-bottom: 35px;
}
h3{
	color: #65aadd;
	font-size: 180%;
	margin-bottom: 28px;
}
h4{
	font-size: 120%;
	margin-bottom: 14px;
}

.page_title_box{
	position: relative;
}
.page_title_box_r,
.page_title_box_l{
	position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
}
.page_title_box_r{
	right: 0;
}
.page_title_box_l{
	left: 25%;
}
.page_title_box h3{
	text-align: center;
	margin-bottom: 0;
}

/**-----------------段落**/
article p{
	text-align: justify;
	margin-bottom: 0.9em;
}

/**-----------------リスト**/
ul{
	list-style-type: none;
}
.history{
	padding-left: 4em;
	text-indent: -4em;
}
.kome{
	padding-left: 1em;
	text-indent: -1em;
}

/**-----------------表**/
table{
	width:100%;
	border-top: 1px solid #646464;
	line-height: 1.4;
	margin-bottom: 1.8em;
}
tr{
	border-bottom: 1px solid #646464;
	text-align: center;
}
td{
	border-left: 1px solid #646464;
	padding: 10px;
	vertical-align: middle;
}
td:first-child{
	border-left: none;
}
.td_1_bg td:first-child{
	background-color: #e9f2fb;
}
.tr_1_bg tr:first-child{
	background-color: #e9f2fb;
}

/**-----------------アーカイブ**/
.archive_title{
	text-align: left;
	font-weight: normal;
	font-size: 16px;
	margin-bottom: 20px;
}
h2.archive_title:before,
h2.archive_title:after{
	display: none
}

/**-----------------ページネーション**/
.pagenation{
	margin: 1em 0;
}
.pagenation:after, .pagenation ul:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.pagenation ul{
	margin: 0;
}
.pagenation li{
	float: left;
	list-style: none outside none;
	margin-left: 3px;
}
.pagenation li:first-child{
	margin-left: 0;
}
.pagenation li.active{
	background: #e9f2fb;
	cursor: not-allowed;
	padding: 10px 20px;
	border-radius: 5px;
}
.pagenation li a{
	background: #e9f2fb;
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 5px;
}
.pagenation li a:hover{
	background: #e9f2fb;
	border-radius: 5px;
}
.prev_post, .next_post{
	padding: 10px 20px;
	background-color: #e9f2fb;
	border-radius: 5px;
}
.prev_post a, .next_post a{
	text-decoration: none;
}
.next_post{
	float: right;
}
.prev_post{
	float: left;
}

/**-----------------囲み**/
.frame{
	background-color: #e9f2fb;
	margin-bottom: 30px;
	padding: 30px;
	border-radius: 5px;
}

/**-----------------レイアウト調整**/
.top_60{
	margin-top: 60px;
}
.top_30{
	margin-top: 30px;
}
.top_20{
	margin-top: 20px;
}
.btm_0{
	margin-bottom: 0;
}
.btm_20{
	margin-bottom: 20px;
}
.inlineblock{
	display: inline-block;
}
.block{
	display: block;
}

/*------------------------------------------------------------------------------------------------------------------
	PC版レイアウトおよび各ページの設定
-----------------------------------------------------------------------------------------------------------------*/
/**-----------------pc・sp表示切り替え**/
.pconly{
	display: block;
}
.sponly{
	display: none;
}

/**-----------------全体**/
body{
	background-color: #fff;
}
.container{
	width: 100%;
	margin: 0 auto;
}

/**-----------------ヘッダー**/
header{
	background: url(images/header_bg.jpg) left top repeat-x;
}
header img{
	display: block;
}
#header-inner{
	max-width: 1040px;
	margin: 0 auto;
	padding-top: 110px;
	position: relative;
}
.header_tel{
	position: absolute;
	top: 70px;
	right: 0;
	width: 222px;
}
.header_description{
	position: absolute;
	top: 20px;
	left: 0;
}
.header_title img{
	margin: 0 auto 30px;
	width: 920px;
	height: auto;
}
header a > img:hover{
	opacity: 1;
}

/**-----------------グローバルナビ**/
.gn{
	border-top: 1px solid #d3e6f6;
	border-bottom: 5px solid #d3e6f6;
}
.gn li{
	width:14.2%;
	height: 60px;
	float: left;
	position: relative;
	background: url(images/gn_bg.png) right top repeat-y;
}
.gn li:last-child{
	width:14.8%;
	background: none;
}
.gn li a{
	display: block;
	padding-top: 8px;
	color: #000;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
}
.gn li a:hover{
	color: #000;
}
.gn li.current_page_item a{
	background: #d3e6f6;
	background: -moz-linear-gradient(top, #d3e6f6, #82c1ea);
	background: -webkit-linear-gradient(top, #d3e6f6, #82c1ea);
	background: linear-gradient(to bottom, #d3e6f6, #82c1ea);
}
.gn li.current_page_item a,
.gn li.current_page_item a span{
	color: #fff;
}
.gn li a:hover::after,
.gn li.current_page_item a::after{
	content: "";
	display: block;
	width: 100%;
	height: 5px;
	margin-top: 8px;
	background-color: #82c1ea;
}
.gn li span{
	display: block;
	font-family: 'Pinyon Script', cursive;
	font-size: 12px;
	line-height: 20px;
	color: #82c1ea;
}

/**-----------------メインコンテンツ**/
#main-inner{
	max-width: 1040px;
	margin: 0 auto;
	padding: 45px 0;
}
.contents{
	width: 72.5%;
	float: right;
	padding-left: 40px;
}
.article_to_box .article{
	background-color: #e9f2fb;
	margin-bottom: 30px;
	padding: 30px;
	border-radius: 5px;
}
.entry-title{
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 170%;
	margin-bottom: 5px;
	text-align: left;
	border-bottom: 1px solid #fff;
}
.byline{
	color: #999;
	margin-bottom: 10px;
}
.article-header{
	margin-bottom: 20px;
}
.article-footer{
	margin-top: 20px;
}
.sub{
	width: 27.5%;
	float: left;
	list-style: none;
}
.sub img{
	display: block;
	margin-bottom: 20px;
}
.widgettitle{
	background-color: #e9f2fb;
	color: #65aadd;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.widget ul{
	list-style-type: none;
	margin-bottom: 30px;
}

/**-----------------フッター**/
footer{
	background: url(images/footer_bg.jpg) left top repeat-x;
	background-color: #e9f2fb;
	margin-top: 60px;
	padding-top: 62px;
}
#footer-inner{
	max-width: 1040px;
	margin: 0 auto;
	padding: 20px 0;
}
.footer_title img{
	display: block;
	margin: 0 auto 20px;
	height: 180px;
	width: auto;
}
.footer_title a > img:hover{
	opacity: 1;
}
.footer-links{
	margin: 0 0 40px;
}
.footer-links ul{
	text-align: center;
}
.footer-links ul li{
	display: inline-block;
	padding: 0 0.5em;
	border-left: 1px solid #000;
}
.footer-links ul li:last-child{
	border-right: 1px solid #000;
}
.footer-links ul li span{
	display: none;
}
.footer-links ul li a, .footer-links ul li a:visited{
	color: #000;
	text-decoration: none;
}
.footer-links ul li a:hover{
	color: #65aadd;
}
.copyright{
	text-align: center;
	font-size: 11px;
	color: #000;
}

/**-----------------トップページ**/
.topslide_box{
	margin-top: 40px;
}
.slider img{
	width: 100%;
	margin: 0 auto;
}
.slick-prev{
	left: 20px;
	z-index: 1;
}
.slick-next{
	right: 20px;
	z-index: 1;
}
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
	color: #000;
}
.front_h2{
	font-size: 24px;
	line-height: 32px;
	padding-left: 14px;
	padding-bottom: 14px;
	margin-bottom: 28px;
	background-image: url(images/front_h2_bg1.png), url(images/front_h2_bg2.png);
	background-position: left top, left bottom;
	background-repeat: no-repeat, repeat-x;
}
.front_h2 span{
	display: block;
	float: right;
	font-family: 'Pinyon Script', cursive;
	color: #82c1ea;
}
.front_news li{
	margin-bottom: 0.5em;
}
.news_date{
	float: left;
}
.news_title{
	padding-left: 7em;
}

/**-----------------ピアノ科・ヴァイオリン科**/
.class_target{
	float: right;
	font-size: 12px;
	line-height: 23px;
}

/**-----------------お問い合わせ**/
.enquiry_tel{
	font-size: 24px;
	color: #65aadd;
	margin-top: 30px;
	line-height: 1.4;
}
.enquiry_tel a{
	text-decoration: none;
}

/**-----------------体験レッスン**/
.inquiry_form p{
	text-align: start;
}
input, textarea{
	font-size: 1em;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 3px;
	max-width: 100%;
}
textarea{
	width: 100%;
}
.form_name{
	float: left;
	margin-right: 1em;
}

.inquiry_form{
	background-color: #e9f2fb;
	border-radius: 5px;
	padding: 20px;
}
.inquiry_form ::placeholder{
	color: #ccc;
}
.inquiry_left{
	width: 30%;
	float: left;
}
.inquiry_right{
	width: 68%;
	float: right;
}

/*------------------------------------------------------------------------------------------------------------------
	タブレット版レイアウトおよび各ページの設定
-----------------------------------------------------------------------------------------------------------------*/
@media (min-width: 769px) and (max-width: 1155px){
	#header-inner, #footer-inner, #main-inner{
		width: 90%;
	}
	.header_title img{
		width: 700px;
		height: auto;
	}
	.header_tel{
		top: 70px;
		right: 0;
		width: 170px;
	}
	.gn li a {
	    padding-top: 8px;
	    color: #000;
	    font-size: 13px;
	    line-height: 24px;
	    text-align: center;
	    text-decoration: none;
	}
}

/*------------------------------------------------------------------------------------------------------------------
	スマホ版レイアウトおよび各ページの設定
-----------------------------------------------------------------------------------------------------------------*/
@media only screen and  (max-width: 768px){
	/**-----------------pc・sp表示切り替え**/
	.pconly{
		display: none;
	}
	.sponly{
		display: block;
	}

	/**-----------------画像**/
	.alignright, .alignleft{
		float: none !important;
		margin: 0 auto 1em !important;
	}
	img.photo1_right, img.photo1_left{
		float: none;
		width: 300px;
		margin: 0 auto 20px;
	}
	.photo3_left, .photo3_center, .photo3_right,
	.photo2_left, .photo2_right{
		float: none;
		width: 100%;
		max-width: 320px;
		padding: 0;
		margin: 0 auto 20px;
	}

	/**-----------------表**/
	table{
		font-size: 12px;
	}
	td{
		padding: 5px;
	}

	/**-----------------囲み**/
	.frame{
		padding: 20px;
	}

	/**-----------------ヘッダー**/
	header {
	    background: none;
	}
	#header-inner{
		width: 90%;
		padding-top: 60px;
	}
	.header_description{
		padding-right: 50px;
		font-size: 12px;
	}
	.header_tel{
		width: 120px;
		top: 20px;
	}
	.header_title img{
		height: auto;
	}

	/**-----------------グローバルナビ**/
	.gn{
		border: none;
	}
	.gn li span{
		display: none;
	}
	.gn li a{
		line-height: 1.8;
	}
	.gn li a:hover::after,
	.gn li.current_page_item a::after{
		display: none;
	}

	a.meanmenu-reveal {
		display: none;
	}
	.mean-container .mean-bar {
		width: 100%;
		position: relative;
		background: #65aadd;
		padding: 4px 0;
		min-height: 42px;
		z-index: 999999;
	}
	.mean-container a.meanmenu-reveal {
		width: 22px;
		height: 22px;
		padding: 13px 13px 11px 13px;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		color: #fff;
		text-decoration: none;
		font-size: 16px;
		text-indent: -9999em;
		line-height: 22px;
		font-size: 1px;
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 700;
	}
	.mean-container a.meanmenu-reveal span {
		display: block;
		background: #fff;
		height: 3px;
		margin-top: 3px;
	}
	.mean-container .mean-nav {
		width: 100%;
		background: #65aadd;
		margin-top: 44px;
	}
	.mean-container .mean-nav ul {
		padding: 0;
		margin: 0;
		width: 100%;
		list-style-type: none;
	}
	.mean-container .mean-nav ul li {
		width: 100%;
	}
	.mean-container .mean-nav ul li a {
		padding: 1em 5%;
		text-align: left;
		color: #fff;
		border-top: 1px solid #fff;
		border-top: 1px solid rgba(255,255,255,0.5);
	}
	.mean-container .mean-nav ul li a:hover,
	.mean-container .mean-nav ul li.current_page_item a{
		color: #636363;
		background: #e9f2fb;
	}
	.mean-container .mean-bar, .mean-container .mean-bar * {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	.mean-remove {
		display: none !important;
	}

	/**-----------------メインコンテンツ**/
	#main-inner{
		width: 90%;
		padding: 20px 0;
	}
	.contents{
		width: 100%;
		float: none;
		padding-left: 0;
		margin-bottom: 60px;
	}
	.article_to_box .article{
		margin-bottom: 20px;
		padding: 20px;
	}
	.sub{
		width: 100%;
		max-width: 290px;
		float: none;
		margin: 0 auto;
	}
	.sub img{
		margin: 0 auto 20px;
	}

	/**----------------フッター**/
	footer{
		background-size: 81px 46px;
	}
	#footer-inner{
		width: 90%;
	}
	.footer_title img{
		height: auto;
	}
	.footer-links ul li{
		margin-bottom: 0.5em;
	}

	/**----------------トップページ**/
	.front_h2 {
	    padding-bottom: 0;
	    background-image: url(images/front_h2_bg1.png);
	}
		.news_date{
		float: none;
	}
	.news_title{
		padding-left: 0;
	}

	/**-----------------ピアノ科・ヴァイオリン科**/
	.class_target{
		float: none;
		display: block;
		margin-left: 22px;
	}

	/**-----------------ピアノ科・ヴァイオリン科**/
	.inquiry_left,.inquiry_right{
		float: none;
		width: 100%;
	}
}

/*------------------------------------------------------------------------------------------------------------------
	オプションに関する設定　使用しない場合は削除
-----------------------------------------------------------------------------------------------------------------*/

/**----------------サイドバーにサイト内検索を設置**/
.searchform{
	margin-bottom: 30px;
}
.searchfield{
	width: 75%;
}
.searchsubmit{
	text-align: center;
	font-size: 12px;
	padding: 7px 0;
	width: 20%;
}

/**----------------サイドバーにカレンダーを設置**/
#wp-calendar{
	margin-bottom: 30px;
}
#wp-calendar caption{
	margin: 5px 0;
}
#wp-calendar th, #wp-calendar td{
	font-size: 12px;
	padding: 10px 0;
	border: none;
}
#wp-calendar tfoot tr{
	border: none;
}
#wp-calendar tfoot td{
	border: none;
	background: transparent;
}

/*------------------------------------------------------------------------------------------------------------------
　　　印刷設定
-----------------------------------------------------------------------------------------------------------------*/
@media print{
	body{
		padding: 0 50px;
	}
}

/*------------------------------------------------------------------------------------------------------------------
　　　wordpressの必須クラス_消さないでね
-----------------------------------------------------------------------------------------------------------------*/
.wp-caption,
.gallery-caption{
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"]{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption .wp-caption-text{
	margin: 0.8075em 0;
}
.sticky{
	position: relative;
}
.post:not(.sticky) .icon-thumb-tack{
	display: none;
}
.sticky .icon-thumb-tack{
	display: block;
	height: 18px;
	left: -1.5em;
	position: absolute;
	top: 1.65em;
	width: 20px;
}
.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar{
	border: 1px solid #333;
	padding: 2px;
}
.alignleft{
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright{
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter{
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright{
	float: none;
	margin: 0;
}
.screen-reader-text{
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus{
	background-color: #f1f1f1;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */

@media only screen and  (max-width: 768px){
	.sticky .icon-thumb-tack{
		font-size: 32px;
		font-size: 2rem;
		height: 22px;
		left: -1.25em;
		top: 0.75em;
		width: 32px;
	}
	img.alignleft{
		float: left;
		margin-right: 1.5em;
	}
	img.alignright{
		float: right;
		margin-left: 1.5em;
	}
}