@charset "utf-8";

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

卒業袴ページ

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

/* --- SP ---------- */
@media print, screen and (max-width: 740px) {
	.hakama .main_body{
	}

	.hakama .chapter01{
		position: relative;
	}

	.hakama .chapter01 .photo_ir01{
		display: none;
	}

	.hakama .chapter01 .photo_ir02{
		display: none;
	}

	.hakama .chapter01 .chapter01_title{
		max-width: 750px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .chapter01 h3{
		text-align: center;
		margin: 8px 0;
		font-size: 140%;
	}

	.hakama .chapter01 p{
		text-align: center;
		line-height: 1.8;
	}

	.hakama .hakuoh_link{
		position: relative;
	}

	.hakama .hakuoh_link p{
		text-align: center;
		font-size: 120%;
		font-weight: bold;
		letter-spacing: 1.5px;
		margin: 0;
	}

	.hakama .hakuoh_link p a{
		color: #e67578;
	}
	.hakama .hakuoh_link p:before{
		content: url(../img_sp/hakama/hakama-ir03-l.png);
		width: 40px;
		position: relative;
		top: 15px;
		left: -10px;
	}

	.hakama .hakuoh_link p:after{
		content: url(../img_sp/hakama/hakama-ir03-r.png);
		width: 40px;
		position: relative;
		top: 15px;
		right: -10px;
	}

	.hakama .studio_box{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		 flex-wrap:  wrap;
		-webkit-justify-content: space-between;
		justify-content:  space-between;
		margin-bottom: 20px;
	}

	.hakama .studio_box .left{
		max-width: 500px;
		width: 90%;
		margin: 20px auto 10px;
	}

	.hakama .studio_box .right{
		max-width: 500px;
		width: 90%;
		margin: 0 auto;
	}

	.hakama .studio_box .right .title_box{
		width: 80%;
		margin: 0 auto;
	}

	.hakama .studio_box .right p{
		text-align: center;
	}

	.hakama .schedule_title{
		max-width: 480px;
		width: 100%;
		margin: 20px auto 0;
	}

	.hakama .chapter02 h3{
		text-align: center;
		margin: 0;
		font-size: 100%;
	}

	.hakama .chapter02 h4{
		text-align: center;
		font-size: 120%;
		color: #e67578;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.hakama .main_body .chapter02{
		padding-bottom: 30px;
	}

	.hakama .schedule_table{
		display: table;
		max-width: 1080px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .schedule_table .left{
		display: table-cell;
		width: 20%;
		background: #e67578;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #fff;
	}

	.hakama .schedule_table .right{
		display: table-cell;
		width: 80%;
		background: #fff;
		vertical-align: middle;
		border-bottom: 1px solid #e67578;
		border-top: 1px solid #e67578;
		border-right: 1px solid #e67578;
		box-sizing: border-box;
		padding: 0 20px;
	}

	.hakama .schedule_table .right.none,
	.hakama .schedule_table .left.none{
		border-top: none;
	}

	.hakama .hakuoh_box{
		background: #f9eded;
		max-width: 1400px;
		width: 90%;
		margin: 20px auto;
		box-sizing: border-box;
		padding: 10px;
	}

	.hakama .hakuoh_box .hakuoh_inner{
		box-sizing: border-box;
		border: 1px dotted #000;
		padding: 10px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_title{
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title{
		text-align: center;
		font-size: 140%;
		letter-spacing: 1.4px;
		margin-top: 0;
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title .marker{
		background: linear-gradient(transparent 60%, #ffff66 60%);
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title:before{
		display: none;
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title:after{
		display: none;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment{
		max-width: 1000px;
		width: 100%;
		margin: 10px auto;
		font-weight: bold;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left{
		width: 100%;
		text-align: center;
		vertical-align: middle;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .sub_title{
		font-size: 110%;
		letter-spacing: 1.3px;
		margin-bottom: 20px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .big{
		font-size: 150%;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .last_text{
		letter-spacing: 1.3px;
		line-height: 1.5;

	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .white_box{
		background: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 8px 15px;
		font-weight: bold;
		max-width: 600px;
		width: 100%;
		margin: 0 auto 20px;
		font-size: 90%;
	}


	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .point li{
		text-align: left;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .point li span.marker{
		background: linear-gradient(transparent 40%, #ffff66 60%);
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .right{
		max-width: 400px;
		width: 90%;
		margin: 0 auto;
	}

	.hakama .chapter03 h3{
		margin: 0;
		text-align: center;
		font-size: 100%;
	}

	.hakama .chapter03 h4{
		text-align: center;
		font-size: 120%;
		color: #e67578;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.hakama .coordinate_comment{
		text-align: center;
		font-size: 100%;
		font-weight: bold;
		letter-spacing: 1.3px;
		line-height: 1.5;
		width: 90%;
		margin: 0 auto;
	}

	.hakama .btn_black.btn_access a{
		background: #e67578;
		box-shadow: 6px 6px 0 #ffb6b6, 6px 8px 0 rgba(0,0,0,0.2);

	}

	.hakama .btn_black.btn_access a:hover{
		background: #e6878a;
		box-shadow: 6px 3px 0 #ffb6b6, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:active{
		background: #ffb6b6;
		box-shadow: 6px 3px 0 #ffb6b6, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .schedule_table .right a{
		color: #e67578;
		text-decoration: underline;
	}

	.hakama .btn-box .btn_black{
		margin: 15px auto;
	}
	.chapter02 .hakama .btn_black.orange{
		margin: 30px auto 20px;
	}

	.hakama .btn_black.orange a{
		background: #d9a401;
		box-shadow: 6px 6px 0 #e7c14e, 6px 8px 0 rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:hover{
		background: #d9a401;
		box-shadow: 6px 3px 0 #e7c14e, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:active{
		background: #eab309;
		box-shadow: 6px 3px 0 #e7c14e, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .hakuoh_box .hakuoh_inner .present-comment{
		text-align: center;
		padding: 10px 0;
	}

	.hakama .hakuoh_box .hakuoh_inner .present-comment .big{
		font-weight: bold;
		font-size: 100%;
		margin-bottom: 0;
		line-height: 1.4;
	}

	.hakama .hakuoh_box .hakuoh_inner .present-comment .big .pink{
		color: #e67578;
	}

}


/* --- PC ---------- */
@media print, screen and (min-width: 741px) {
	.hakama .main_body{
		padding-top: 100px;
	}

	.hakama .chapter01{
		position: relative;
	}

	.hakama .chapter01 .photo_ir01{
		position: absolute;
		width: 200px;
		height: 200px;
		top: 20px;
	}

	.hakama .chapter01 .photo_ir02{
		position: absolute;
		width: 150px;
		height: 150px;
		right: 0;
		top: 50px;
	}

	.hakama .chapter01 .chapter01_title{
		max-width: 750px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .chapter01 h3{
		text-align: center;
		margin: 8px 0;
		font-size: 160%;
		line-height: 1.7;
	}

	.hakama .chapter01 p{
		text-align: center;
		line-height: 1.8;
	}

	.hakama .hakuoh_link{
		position: relative;
	}

	.hakama .hakuoh_link p{
		text-align: center;
		font-size: 150%;
		font-weight: bold;
		letter-spacing: 1.5px;
	}

	.hakama .hakuoh_link p a{
		color: #e67578;
	}
	.hakama .hakuoh_link p:before{
		content: url(../img/hakama/hakama-ir03-l.png);
		width: 80px;
		position: relative;
		top: 15px;
		left: -15px;
	}

	.hakama .hakuoh_link p:after{
		content: url(../img/hakama/hakama-ir03-r.png);
		width: 80px;
		position: relative;
		top: 15px;
		right: -15px;
	}

	.hakama .studio_box{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		 flex-wrap:  wrap;
		-webkit-justify-content: space-between;
		justify-content:  space-between;
		margin-bottom: 50px;
	}

	.hakama .studio_box .left{
		width: 42%;
	}

	.hakama .studio_box .right{
		width: 48%;
	}

	.hakama .studio_box .right .title_box{
		max-width: 410px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .studio_box .right p{
		text-align: center;
	}

	.hakama .schedule_title{
		max-width: 480px;
		width: 100%;
		margin: 50px auto 0;
	}

	.hakama .chapter02 h3{
		text-align: center;
		margin: 0;
		font-size: 110%;
	}

	.hakama .chapter02 h4{
		text-align: center;
		font-size: 140%;
		color: #e67578;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.hakama .schedule_table{
		display: table;
		max-width: 1080px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .schedule_table .left{
		display: table-cell;
		width: 20%;
		background: #e67578;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #fff;
	}

	.hakama .schedule_table .right{
		display: table-cell;
		width: 80%;
		background: #fff;
		vertical-align: middle;
		border-bottom: 1px solid #e67578;
		border-top: 1px solid #e67578;
		border-right: 1px solid #e67578;
		box-sizing: boder-box;
		padding: 10px 30px;
	}

	.hakama .schedule_table .right.none,
	.hakama .schedule_table .left.none{
		border-top: none;
	}

	.hakama .hakuoh_box{
		background: #f9eded;
		max-width: 1400px;
		width: 90%;
		margin: 50px auto;
		box-sizing: border-box;
		padding: 20px;
	}

	.hakama .hakuoh_box .hakuoh_inner{
		box-sizing: border-box;
		border: 1px dotted #000;
		padding: 40px 80px 20px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_title{
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title{
		text-align: center;
		font-size: 160%;
		letter-spacing: 1.4px;
		margin-top: 0;
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title .marker{
		background: linear-gradient(transparent 60%, #ffff66 60%);
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title:before{
		content: url(../img/hakama/hakama-ir04-l.png);
		width: 80px;
		position: relative;
		top: 35px;
		left: -30px;
	}

	.hakama .hakuoh_box .hakuoh_inner .yoyaku_title:after{
		content: url(../img/hakama/hakama-ir04-l.png);
		width: 80px;
		position: relative;
		top: 15px;
		left: 30px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment{
		display: table;
		max-width: 1000px;
		width: 100%;
		margin: 80px auto 40px;
		font-weight: bold;
		border-spacing: 30px 0;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left{
		display: table-cell;
		width: 56%;
		text-align: center;
		vertical-align: top;
		padding-top: 50px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .sub_title{
		font-size: 130%;
		letter-spacing: 1.3px;
		margin-bottom: 20px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .big{
		font-size: 170%;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .last_text{
		letter-spacing: 1.3px;
		line-height: 1.7;

	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .white_box{
		background: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 8px 15px;
		font-weight: bold;
		max-width: 600px;
		width: 100%;
		margin: 0 auto 40px;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .point li span.marker{
		background: linear-gradient(transparent 40%, #ffff66 60%);
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left .point ul{
		text-align: left;
	}



	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .right{
		display: table-cell;
		width: 40%;
	}

	.hakama .hakuoh_box .hakuoh_inner .present-comment{
		text-align: center;
		padding: 40px 0;
	}

	.hakama .hakuoh_box .hakuoh_inner .present-comment .big{
		font-weight: bold;
		font-size: 170%;
		margin-bottom: 0;
		line-height: 1.6;
	}

	.hakama .hakuoh_box .hakuoh_inner .present-comment .big .pink{
		color: #e67578;
	}

	.hakama .chapter03 h3{
		margin: 0;
		text-align: center;
		font-size: 110%;
	}

	.hakama .chapter03 h4{
		text-align: center;
		font-size: 140%;
		color: #e67578;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.hakama .detail{
		width: 40%;
		margin: 0 auto;
	}



	.hakama .coordinate_comment{
		text-align: center;
		font-size: 140%;
		font-weight: bold;
		letter-spacing: 1.3px;
		line-height: 1.8;
		margin-bottom: 0;
	}

	.hakama .btn_black.btn_access{
		margin-top: 30px;
	}

	.hakama .btn_black.btn_access a{
		background: #e67578;
		box-shadow: 6px 6px 0 #ffb6b6, 6px 8px 0 rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:hover{
		background: #e6878a;
		box-shadow: 6px 3px 0 #ffb6b6, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:active{
		background: #ffb6b6;
		box-shadow: 6px 3px 0 #ffb6b6, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .schedule_table .right a{
		color: #e67578;
		text-decoration: underline;
	}

	.hakama .btn-box{
		max-width: 700px;
		width: 96%;
		margin: 30px auto;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content:  space-between
	}

	.hakama .btn-box .btn_black{
		margin: 0;
	}

	.chapter02 .hakama .btn_black.orange{
		margin: 30px auto 20px;
	}

	.hakama .btn_black.orange a{
		background: #d9a401;
		box-shadow: 6px 6px 0 #e7c14e, 6px 8px 0 rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:hover{
		background: #d9a401;
		box-shadow: 6px 3px 0 #e7c14e, 6px 6px 0px rgba(0,0,0,0.2);
	}

	.hakama .btn_black.btn_access a:active{
		background: #eab309;
		box-shadow: 6px 3px 0 #e7c14e, 6px 6px 0px rgba(0,0,0,0.2);
	}
}


@media print, screen and (min-width: 741px) and (max-width: 980px) {
	.hakama .studio_box{
		display: block;
	}

	.hakama .studio_box .left{
		max-width: 505px;
		width: 100%;
		margin: 0 auto 20px;
	}

	.hakama .studio_box .right{
		max-width: 505px;
		width: 100%;
		margin: 0 auto;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment{
		display: block;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .left{
		display: block;
		width: 100%;
		padding: 0;
	}

	.hakama .hakuoh_box .hakuoh_inner .hakuoh_comment .right{
		display: block;
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}
}