@charset "utf-8";

/* =============================================================================================================

スマートフォン用

=============================================================================================================  */

@media (max-width: 768px) {

/* ===================== 選択画面のレイアウトくくり ========================= */
#booking #choice{
 margin: 0;
 padding: 0;
}

/* ===================== セミナーリスト ========================= */
#booking #list{
	width: 100%;
	margin: 0 auto;
	padding: 14px 0 14px 0;
}
#booking #list .ltit{
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #333;
  text-align: center;
	padding: 0 0 12px 0;
}
#booking #list ul{
	margin: 0 2%;
}
#booking #list ul li{
	display: inline-block;
	width: 100%;
	border-bottom: #399A04 solid 2px;
	border-top: #399A04 solid 2px;
	list-style: none;
	margin-bottom: 4%;
	box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, .15);
}
#booking #list ul li .box1{
	width: 100%;
	padding: 14px 4% 14px 4%;
	box-shadow: inset 0 6px 6px 0 rgba(0, 0, 0, .06);
	background-color: #FFF;
}
#booking #list ul li .box1 .btit{
	width: 100%;
	font-size: 17px;
	font-weight: bold;
	color: #333;
	background: url("../images/point1.png") left top / 10px auto no-repeat;
	padding: 5px 0 10px 16px;
	margin: 0 0px 0 0;
	line-height: 1.3em;
	position: relative;
	word-wrap: break-word;
}
#booking #list ul li .box1 .btit span{display: inline-block;border: 1px solid orangered;text-align: center;border-radius: 4px;padding: 0px 5px;color: #666;/* position: absolute; */right: 0;top: 0;font-size: 14px;font-weight: normal;margin: 0 0 0 2%;}
#booking #list ul li .box1 .price{padding: 5px 0 10px 16px;font-size: 21px;text-align: right;}
#booking #list ul li .box1 .price span{margin-left: .5em;font-size: 14px;}
#booking #list ul li .box1 .txt2{
	width: 100%;
	font-size: 14px;
	color: #333;
	padding: 0 0 0 22px;
	margin: -2px 12px 0 0;
	line-height: 1.3em;
}
#booking #list ul li .box1 .btn1{
	width: 170px;
	margin: 0 auto;
}
#booking #list ul li .box1 .btn1 p.btn{
	display: inline-block;
	width: 170px;
	padding: 10px 0 8px 0;
	margin: 8px 0 2px 0;
	border-radius: 30px;
	border: #FFFFFF solid 2px;
	box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, .15);
	background: #35CA57 url("../images/yaji2.png") 90% center / 8px auto no-repeat;
	font-size: 17px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.3em;
	text-align: center;
}
#booking #list ul li .box1 .btn1 a:hover{
	background-color: #42F05C;
}


/* ===================== カレンダー ========================= */
#booking #calendar{
	width: 100%;
	margin: 0 auto;
	padding: 14px 0 14px 0;
}
#booking #calendar .ctit{
	width: 100%;
	font-size: 21px;
	font-weight: bold;
	color: #FFF;
	background: #629D69 url("../images/point2.png") 15px center / 9px auto no-repeat;
	border-bottom: #FFFFFF solid 2px;
	padding: 16px 0 15px 40px;
	margin: 0 12px 0 0;
	line-height: 1.3em;
	box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .1);
}
#booking #calendar .ctit2{
	text-align: center;
	width: 300px;
	margin: 0 auto;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	padding: 20px 0 12px 30px;
	background: url("../images/icon07.png") 10px 18px / 18px auto no-repeat;
}

#booking #calendar .waku{
	width: 96%;
	margin: 0 auto;
	background-color: #FFFFFF;
	border: #A0B6A7 solid 4px;
	padding: 12px;
	border-radius: 10px;
	box-shadow: 1px 3px 12px 2px rgba(0, 0, 0, .12);
}
#booking #calendar .nichiji{
	width: 100%;
	margin: 0;
	display: flex;
}
#booking #calendar .nichiji .mon{
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	color: #629D69;
	background: url("../images/point1.png") left top / 10px auto no-repeat;
	padding: 5px 0 10px 22px;
	margin: 0 12px 0 0;
	line-height: 1.3em;
}
#booking #calendar .nichiji .bnext{
	display: flex;
	padding: 2px 0 0 0;
}
#booking #calendar .nichiji .bnext a.bnextmae{
	display: inline-block;
	width: 50px;
	height: 38px;
	background:  url(../images/yaji3.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(250, 250, 250, 1), rgba(255, 255, 255, 1));
	border: #BBBBBB solid 2px;
	border-radius: 9px 0px 0px 9px;
}
#booking #calendar .nichiji .bnext a.bnextmae:hover{
	background:  url(../images/yaji3.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(255, 255, 191, 1), rgba(255, 255, 255, 1));
}
#booking #calendar .nichiji .bnext a.bnexttugi{
	display: inline-block;
	width: 48px;
	height: 38px;
	background:  url(../images/yaji4.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(250, 250, 250, 1), rgba(255, 255, 255, 1));
	border-top: #BBBBBB solid 2px;
	border-right: #BBBBBB solid 2px;
	border-bottom: #BBBBBB solid 2px;
	border-radius: 0px 9px 9px 0px;
}
#booking #calendar .nichiji .bnext a.bnexttugi:hover{
	background:  url(../images/yaji4.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(255, 255, 191, 1), rgba(255, 255, 255, 1));
}

/* ========= カレンダー表 ========== */
#booking #calendar #tbdr {
	width: 100%;
	margin: 10px 0 0 0;
	}
#booking #calendar #tbdr table{
	width: 100%;
	}
#booking #calendar #tbdr table,#tbdr td,#tbdr th {
	border-collapse: collapse;
	border:1px solid #999;
	font-size: 20px;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	}

#booking #calendar #tbdr table{
	width: 100%;
	margin: 0 0 0 0;
	}
	#booking #calendar #tbdr table .km2{
	height: 32px;
	background-color: #FDEFD7;
	color: #8C1330;
	font-size: 14px;
	text-align: center;
	vertical-align:middle;
}
#booking #calendar #tbdr table .km3{
	background-color: #E2EDF1;
	color: #4E5052;
	font-size: 14px;
}
#booking #calendar #tbdr table .km4{
	background-color: #FCBDAB;
	color: #8C1330;
	font-size: 14px;
}
#booking #calendar #tbdr table .km5{
	background-color: #FCBDAB;
	color: #8C1330;
	font-size: 14px;
}
#booking #calendar #tbdr table td {
	width: 14%;
	font-weight: 600;
	line-height: 1em;
	background-color: #FFF;
	position: relative;
	}
#booking #calendar #tbdr table td .day{
	position: absolute;
	top:5px;
	left:3px;
	font-size: 10px;
	line-height: 1em;
	color: #535353;
	}
#booking #calendar #tbdr table td .dayoff{
	position: absolute;
	top:5px;
	left:3px;
	font-size: 10px;
	line-height: 1em;
	color: #CECECE;
	}
#booking #calendar #tbdr table {
	margin: 0;
}
#booking #calendar #tbdr table a{
	display: inline-block;
	width: 100%;
	padding: 14px 0 10px 0;
}
#booking #calendar #tbdr table span{
	display: inline-block;
	width: 100%;
	padding: 14px 0 10px 0;
}
#booking #calendar #tbdr table td.off{
	background-color: #EEE;
	color: #B9B9B9;
	font-size: 22px;
}
#booking #calendar #tbdr table td.w2 {
	background-color: #FEF0EB;
	}
#booking #calendar #tbdr table td.w3 {
	background-color: #f0feea;
	}
#booking #calendar #tbdr table td.w4 {
	background-color: #FEF0EB;
	}

.case-list{
    margin: 14px auto;
    padding: 1.5em 1em;
    box-sizing: border-box;
    display: flex;
    background: #ddd;
}
.case-list ul{}
.case-list li{
    margin: 0 2em 0 0;
    position: relative;
    padding-left: 40px;
    line-height: 36px;
}
.case-list li span{
    margin: 0 .25em 0 0;
    line-height: 36px;
    font-size: 36px;
    position: absolute;
    left: 0;
    top: 0;
}
.case-list li.w1 span{
    color: #fff;
}
.case-list li.w2 span{}
.case-list li.w3 span{
    color: #f1feea;
}
.case-list li.w4 span{}
.case-list li .km1 span{}
.case-list li .km2 span{}
.case-list li .km3 span{}
.case-list li .km4 span{}
}

.slide-img{
	width: 100%;
	height: 150px;
	border: 1px solid #ccc;
	margin: 0 0 8% 0;
	box-sizing: border-box;
}

.slide-img img{
	width: auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	vertical-align: middle;
	margin:auto;
}

/* ===================== スタッフリスト ========================= */
#booking #staff-list{
	width: 100%;
	margin: 0 auto;
	padding: 14px 0 14px 0;
}
#booking #staff-list .ltit{
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #333;
  text-align: center;
	padding: 0 0 12px 0;
}
#booking #staff-list ul{
	margin: 0 2%;
}
#booking #staff-list ul li{
	display: inline-block;
	width: 100%;
	/* border-bottom: #399A04 solid 2px; */
	/* border-top: #399A04 solid 2px; */
	background: #fff;
	list-style: none;
	margin-bottom: 4%;
	box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, .15);
}
#booking #staff-list ul li a{display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
#booking #staff-list ul li .box1{width: 100%;box-sizing: border-box;padding: 2% 2%;}
#booking #staff-list ul li .box1 .user-img{width: 50%;margin: auto;}
#booking #staff-list ul li .box1 .user-img img{width: 100%;}
#booking #staff-list ul li .box2{width: 100%;box-sizing: border-box;padding: 2% 2%;}
#booking #staff-list ul li .box2 p{
}
#booking #staff-list ul li .box2 .name{font-size: 20px;font-weight: bold;color: #587151;margin-bottom: 5px;}
#booking #staff-list ul li .box2 .career{padding: 0 0 0 10px;margin-bottom: 10px;}
#booking #staff-list ul li .box2 .career span{display: block;}
#booking #staff-list ul li .box2 .text1{padding: 0 0 0 10px;font-size: 15px;margin-bottom: 10px;}
#booking #staff-list ul li .box2 .strengths{
}
#booking #staff-list ul li .box2 .strengths p{color: #587151;margin-bottom: 5px;}
#booking #staff-list ul li .box2 .strengths ul.strengths-list{justify-content: flex-start;}
#booking #staff-list ul li .box2 .strengths ul.strengths-list li{margin: 0 1% 1% 1%;padding: 0;width: 30%;box-shadow: none;border: none;background: #92c79e;color: #fff;text-align: center;padding: 4px 4px;box-sizing: border-box;font-size: 12px;border-radius: 4px;}

/* =============================================================================================================

PC用

=============================================================================================================  */

@media (min-width: 768px) {

/* ===================== 選択画面のレイアウトくくり ========================= */
#booking #choice{
 margin: 0;
 /* padding: 15px; */
}

/* ===================== セミナーリスト ========================= */
#booking #list{
	/* float: left; */
	width: 90%;
	margin: 0 auto;
	padding: 14px 0 14px 0;
	max-width: 1200px;
}
#booking #list .ltit{
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #333;
  text-align: center;
	padding: 0 0 12px 0;
}
#booking #list ul{
	margin: 0;
}
#booking #list ul li{
	display: inline-block;
	width: 100%;
	border-bottom: #399A04 solid 2px;
	border-top: #399A04 solid 2px;
	list-style: none;
	box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, .15);
	margin-bottom: 20px;
}
#booking #list ul li .box1{
	width: 100%;
	padding: 24px 4% 24px 4%;
	box-shadow: inset 0 6px 6px 0 rgba(0, 0, 0, .06);
	background-color: #FFF;
	border-left: #A0B6A7 solid 1px;
	border-right: #A0B6A7 solid 1px;
	display: flex;
	flex-wrap: wrap;
}
#booking #list ul li .box1 .box2{width: calc(100% - 240px);position: relative;}
#booking #list ul li .box1 .box2.non-img{width: 100%;}
#booking #list ul li .box1 .btit{
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	background: url("../images/point1.png") left top / 10px auto no-repeat;
	background-size: 10px 100%;
	padding: 5px 0 5px 22px;
	margin: 0 12px 0 0;
	line-height: 1.3em;
	position: relative;
	word-break: break-all;
}
#booking #list ul li .box1 .btit span{display: inline-block;border: 1px solid orangered;text-align: center;border-radius: 4px;padding: 5px 5px;color: #666;/* position: absolute; */right: 0;top: 0;font-size: 14px;font-weight: normal;margin: 0 0 0 10px;}
#booking #list ul li .box1 .price{padding: 5px 0 5px 22px;font-size: 21px;}
#booking #list ul li .box1 .price span{margin-left: .5em;font-size: 14px;}
#booking #list ul li .box1 .txt2{
	width: 100%;
	font-size: 16px;
	color: #333;
	padding: 0 0 0 25px;
	margin: 10px 10px 0 0;
	line-height: 1.3em;
}
#booking #list ul li .box1 .btn1{
	width: 120px;
	/* position: absolute; */
	right: 0;
	bottom: 0;
	float: right;
}
#booking #list ul li .box1 .btn1 .btn{
	display: inline-block;
	width: 120px;
	padding: 5px 0 3px 0;
	margin: 8px 0 2px 0;
	border-radius: 30px;
	border: #FFFFFF solid 2px;
	box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, .15);
	background: #35CA57 url("../images/yaji2.png") 90% center / 8px auto no-repeat;
	font-size: 17px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.3em;
	text-align: center;
}
#booking #list ul li .box1 .btn1 a:hover{
	background-color: #42F05C;
}


/* ===================== カレンダー ========================= */
#booking #calendar{/* float: left; */width: 100%;margin: 0 auto;padding: 14px 0 14px 0;}
#booking #calendar .ctit{
	width: 100%;
	font-size: 21px;
	font-weight: bold;
	color: #FFF;
	background: #629D69 url("../images/point2.png") 15px center / 9px auto no-repeat;
	border-bottom: #FFFFFF solid 2px;
	padding: 16px 0 15px 40px;
	margin: 32px 12px 0 0;
	line-height: 1.3em;
	box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .1);
}
#booking #calendar .ctit2{
	text-align: center;
	width: 300px;
	margin: 0 auto;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	padding: 20px 0 12px 30px;
	background: url("../images/icon07.png") 10px 18px / 18px auto no-repeat;
}

#booking #calendar .waku{
	width: 80%;
	max-width: 740px;
	margin: 0px auto;
	background-color: #FFFFFF;
	border: #A0B6A7 solid 4px;
	padding: 12px;
	border-radius: 10px;
	box-shadow: 1px 3px 12px 2px rgba(0, 0, 0, .12);
}
#booking #calendar .nichiji{
	width: 100%;
	margin: 0;
	display: flex;
}
#booking #calendar .nichiji .mon{
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	color: #629D69;
	background: url("../images/point1.png") left top / 10px auto no-repeat;
	padding: 5px 0 10px 22px;
	margin: 0 12px 0 0;
	line-height: 1.3em;
}
#booking #calendar .nichiji .bnext{
	display: flex;
	padding: 2px 0 0 0;
}
#booking #calendar .nichiji .bnext a.bnextmae{
	display: inline-block;
	width: 50px;
	height: 38px;
	background:  url(../images/yaji3.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(250, 250, 250, 1), rgba(255, 255, 255, 1));
	border: #BBBBBB solid 2px;
	border-radius: 9px 0px 0px 9px;
}
#booking #calendar .nichiji .bnext a.bnextmae:hover{
	background:  url(../images/yaji3.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(255, 255, 191, 1), rgba(255, 255, 255, 1));
}
#booking #calendar .nichiji .bnext a.bnexttugi{
	display: inline-block;
	width: 48px;
	height: 38px;
	background:  url(../images/yaji4.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(250, 250, 250, 1), rgba(255, 255, 255, 1));
	border-top: #BBBBBB solid 2px;
	border-right: #BBBBBB solid 2px;
	border-bottom: #BBBBBB solid 2px;
	border-radius: 0px 9px 9px 0px;
}
#booking #calendar .nichiji .bnext a.bnexttugi:hover{
	background:  url(../images/yaji4.png) center center / 11px auto no-repeat, linear-gradient( 0deg, rgba(255, 255, 191, 1), rgba(255, 255, 255, 1));
}

/* ========= カレンダー表 ========== */
#booking #calendar #tbdr {
	width: 100%;
	margin: 10px 0 0 0;
	}
#booking #calendar #tbdr table{
	width: 100%;
	}
#booking #calendar #tbdr table,#tbdr td,#tbdr th {
	border-collapse: collapse;
	border:1px solid #999;
	font-size: 20px;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	}

#booking #calendar #tbdr table{
	width: 100%;
	margin: 0 0 0 0;
	}
	#booking #calendar #tbdr table .km2{
	height: 32px;
	background-color: #FDEFD7;
	color: #8C1330;
	font-size: 14px;
	text-align: center;
	vertical-align:middle;
}
#booking #calendar #tbdr table .km3{
	background-color: #E2EDF1;
	color: #4E5052;
	font-size: 14px;
}
#booking #calendar #tbdr table .km4{
	background-color: #FCBDAB;
	color: #8C1330;
	font-size: 14px;
}
#booking #calendar #tbdr table td {
	width: 14%;
	font-weight: 600;
	line-height: 1em;
	background-color: #FFF;
	position: relative;
	}
#booking #calendar #tbdr table td .day{
	position: absolute;
	top:5px;
	left:3px;
	font-size: 10px;
	line-height: 1em;
	color: #535353;
	}
#booking #calendar #tbdr table td .dayoff{
	position: absolute;
	top:5px;
	left:3px;
	font-size: 10px;
	line-height: 1em;
	color: #CECECE;
	}
#booking #calendar #tbdr table {
	margin: 0;
}
#booking #calendar #tbdr table a{
	display: inline-block;
	width: 100%;
	padding: 14px 0 10px 0;
}
#booking #calendar #tbdr table a:hover{
	background: #FFFCC4;
}
#booking #calendar #tbdr table span{
	display: inline-block;
	width: 100%;
	padding: 14px 0 10px 0;
}
#booking #calendar #tbdr table td.off{
	background-color: #EEE;
	color: #B9B9B9;
	font-size: 22px;
}
#booking #calendar #tbdr table td.w2 {
	background-color: #FEF0EB;
	}
#booking #calendar #tbdr table td.w3 {
	background-color: #f2feeb;
	}
#booking #calendar #tbdr table td.w4 {
	background-color: #FEF0EB;
	}

.case-list{
    margin: 14px auto;
    padding: 1.5em 1em;
    box-sizing: border-box;
    display: flex;
    background: #ddd;
}
.case-list ul{}
.case-list li{
    margin: 0 2em 0 0;
    position: relative;
    padding-left: 40px;
    line-height: 36px;
}
.case-list li span{
    margin: 0 .25em 0 0;
    line-height: 36px;
    font-size: 36px;
    position: absolute;
    left: 0;
    top: 0;
}
.case-list li.w1 span{
    color: #fff;
}
.case-list li.w2 span{}
.case-list li.w3 span{
    color: #f1feea;
}
.case-list li.w4 span{}
.case-list li .km1 span{}
.case-list li .km2 span{}
.case-list li .km3 span{}
.case-list li .km4 span{}

.slide-img{
    width: 200px;
    height: 150px;
    border: 1px solid #ccc;
    margin: 0 40px 0 0;
    box-sizing: border-box;
}
.slide-img img{
	margin: auto;
	width: auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	vertical-align: middle;
}

/* ===================== スタッフリスト ========================= */
#booking #staff-list{
	/* float: left; */
	width: 90%;
	margin: 0 auto;
	padding: 14px 0 14px 0;
	max-width: 1200px;
}
#booking #staff-list .ltit{
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #333;
  text-align: center;
	padding: 0 0 12px 0;
}
#booking #staff-list ul{
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#booking #staff-list ul li{
	width: 100%;
	/* border-bottom: #399A04 solid 2px; */
	/* border-top: #399A04 solid 2px; */
	list-style: none;
	box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, .15);
	margin-bottom: 20px;
	display: flex;
	background: #fff;
}
#booking #staff-list ul li a{display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
#booking #staff-list ul li .box1{width: 20%;box-sizing: border-box;padding: 2% 2%;}
#booking #staff-list ul li .box1 .user-img{width: 100%;}
#booking #staff-list ul li .box1 .user-img img{width: 100%;}
#booking #staff-list ul li .box2{width: 80%;box-sizing: border-box;padding: 2% 2%;}
#booking #staff-list ul li .box2 p{
}
#booking #staff-list ul li .box2 .name{font-size: 20px;font-weight: bold;color: #587151;margin-bottom: 5px;display: inline-block;}
#booking #staff-list ul li .box2 .career{padding: 0 0 0 10px;margin-bottom: 10px;display: inline-block;}
#booking #staff-list ul li .box2 .career span{display: inline-block;margin: 0 10px 0 0;}
#booking #staff-list ul li .box2 .text1{padding: 0 0 0 10px;font-size: 15px;margin-bottom: 20px;}
#booking #staff-list ul li .box2 .strengths{
}
#booking #staff-list ul li .box2 .strengths p{color: #587151;margin-bottom: 5px;}
#booking #staff-list ul li .box2 .strengths ul.strengths-list{justify-content: flex-start;}
#booking #staff-list ul li .box2 .strengths ul.strengths-list li{margin: 0 1% 1% 1%;padding: 0;width: 30%;box-shadow: none;border: none;background: #92c79e;color: #fff;text-align: center;padding: 6px 4px;box-sizing: border-box;font-size: 13px;border-radius: 4px;text-align: center;display: block;}

/* --- pc用 --- */

}
#booking.headless {
	overflow: hidden;
}
#booking.headless #calendar
{
	padding: 0;
}
#booking.headless #calendar .waku {
	width: 100%;
	max-width: 100%;
	border-radius: unset;
	box-shadow: none;
	border: none;
}
#booking.headless .bback {
	display: none;
}