@charset "UTF-8";
/* CSS Document */
* { 
  margin: 0;
  padding: 0; 
}
.inview.fadeup {
	opacity: 0;
	transition-duration: .8s;
	transform: translateY(10px);
}
.inview.fadeup.active {
	opacity: 1;
	transform: translateY(0px);
}
.cb{
  clear: both;
}
body{
    margin: 0px;
    font-family: Arial,sans-serif, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo;
    font-size: 14px;
    line-height: 1;
    width: 100%;
    position: relative;
margin-bottom: 50px;}
#main{
    width: 100%;
margin: 0px 0px 40px 0px;
background-color: #FFFFFF;}
#page{}
h1{
    font-weight: bold;
}
p{
    line-height: 1.8em;
    margin: 10px 0px 15px 0px;
}
img {
  max-width: 100%;
}
a,a:visited{
    text-decoration: none;
    color: inherit;
}
@media screen and (max-width: 768px) {.inner{
    width: 90%;
    align-items: center;
    margin: 0 auto;
    }}
.contentmin{
    text-align: center;
}
.content{
    float: left;
}


.inner{
    max-width: 900px;
    align-items: center;
    margin: 0 auto;
}
    .content{
    float: none;
}

#lesson{
    width: 100%;
    background-color: #dcdcdc;
    padding-bottom: 45px;
}
h3{
    color: #72e500;
    font-weight: bold;
    padding-top: 45px;
    padding-bottom: 20px;
    font-size: 1.5em;
}
#lesson h3{
    color: #000;
    font-weight: bold;
} 

.lineschool span{
    background-image: url("../img/qr-school.png");
    background-repeat: no-repeat;
}
.lineround span{
    background-image: url("../img/qr-round.png");
    background-repeat: no-repeat;
}
    .lineschool,.lineround{
        height: 180px;}
.lineschool,.lineround{
    margin: 15px;
    display: inline-flex;
}
.lineschool span,.lineround span{
    margin: 15px;
        background-size: 160px;
    background-position: top;
    min-width: 200px;
            padding-top: 160px;
}

@media screen and (max-width: 768px) {
.lineschool span,.lineround span{
    padding-top: 90px;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
        background-image: url("../img/go-line.png");
    background-repeat: no-repeat;
    margin: 15px;
        background-size: 80px;
    background-position: top;
    min-width: 80px;
    }
    }

#message{
    background-image: url("../img/back-message.jpg");
    background-repeat: no-repeat;
    padding: 0px;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: top;
    margin-bottom: 50px;
}
.messagein{
            padding: 80px 0px 0px 65px;
    }
#message p{
    padding: 0px 450px 0px 0px;
    color: #fff;
    text-shadow: 2px 2px 2px rgb(61 70 70);
}
    #message img{

    max-width: 250px;

}
.messagesp{
    display: none;
}

#message img{
    padding: 0px 0px 20px 10px;
    max-width: 200px;}

@media screen and (max-width: 769px) {
   .messagein{
            padding: 0px 0px 0px 0px;
    }
#message p{
    padding: 0px 0px 0px 0px;
    color: #000;
    text-shadow: 0px 0px 0px rgb(61 70 70);
} 
    #message{
    background-image: none;
    background-repeat: no-repeat;
    padding: 0px;
    width: 100%;
    height: auto;
    background-size: contain;
    background-position: bottom;
}
    #message img{

      width: 100%;

}
    .messagesp{
    display: block;
}
    #message img{

    width: 100%;
        max-width: 100%;
        padding: 15px 0px 0px 0px;

}
    .messagepc{
    display: none;
}
}
.att{
      border: solid 2px #72e500;
    padding: 35px;
}
h4{
    line-height: 1.6em;
}
/* Carousel */

	.carousel {
		position: relative;
		overflow: hidden;
		padding:20px 30px;
		margin: 0px;
		text-align: center;

	}

		.carousel .forward, .carousel .backward {
			position: absolute;
			top: 50%;
			width: 6em;
			height: 12em;
			margin-top: -6em;
			cursor: pointer;
		}

			.carousel .forward:before, .carousel .backward:before {
				content: '';
				display: block;
				width: 6em;
				height: 6em;
				border-radius: 100%;
				background-color: rgba(75, 75, 75, 0.5);
				position: absolute;
				top: 50%;
				margin-top: -3em;
				-moz-transition: background-color 0.35s ease-in-out;
				-webkit-transition: background-color 0.35s ease-in-out;
				-o-transition: background-color 0.35s ease-in-out;
				-ms-transition: background-color 0.35s ease-in-out;
				transition: background-color 0.35s ease-in-out;
				-webkit-backface-visibility: hidden;
			}

			.carousel .forward:after, .carousel .backward:after {
				content: '';
				width: 3em;
				height: 3em;
				position: absolute;
				top: 50%;
				margin: -1.5em 0 0 0;
				background: url("../img/arrow.svg") no-repeat center center;
			}

			.carousel .forward:hover:before, .carousel .backward:hover:before {
				background-color: rgba(11,229, 0, 0.75);
			}

		.carousel .forward {
			right: 0px;
		}

			.carousel .forward:before {
				right: -3em;
			}

			.carousel .forward:after {
				right: -0.25em;
			}

		.carousel .backward {
              left: 0px;
		}

			.carousel .backward:before {
				left: -3em;
			}

			.carousel .backward:after {
				left: -0.25em;
				-moz-transform: scaleX(-1);
				-webkit-transform: scaleX(-1);
				-ms-transform: scaleX(-1);
				transform: scaleX(-1);
			}

		.carousel .reel {
			white-space: nowrap;
			position: relative;
			-webkit-overflow-scrolling: touch;
			margin: 0 auto 0 auto;
		}

		.carousel article {
			display: inline-block;
			vertical-align: top;
			width: 45%;
			background: #fff;
			text-align: left;
			margin: 1em;
            padding: 30px 20px;
			white-space: normal;
			opacity: 1.0;
			-moz-transition: opacity 0.75s ease-in-out;
			-webkit-transition: opacity 0.75s ease-in-out;
			-ms-transition: opacity 0.75s ease-in-out;
			transition: opacity 0.75s ease-in-out;
            border: solid 1px #fff;
            background-color: #FFFFFF;
            border-radius: 15px;
            box-shadow: 0px 0px 8px rgb(61 70 70);
		}
.carousel article:last-child{
    padding-right: 30px;
}

			.carousel article.loading {
				opacity: 0;
			}

			.carousel article .imagefeatured{
				position: relative;
				max-width: 100%;
				margin-bottom: 3em;
				margin: 0 1.25em 0 0;
			}
.carousel article h2.voice {
	margin-top: 8px;
	font-size: 18px;
	line-height: 180%;
	font-weight: bold;
	color: #FFFFFF;
	text-align: left;
	background-color: #0066CC;
	margin-bottom: 10px;
	border: 0px solid #083090;
	white-space: normal;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

			.carousel article p {
				text-align: left;
				padding: 0px;
				padding-bottom: 0px;
				margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
    .carousel article {
			width: 65%;
			margin: 0.7em;
    }}
.les{
    display: flex;
    align-items: stretch;
    column-count: 2;
    column-gap:2em;
}
.box{
    width: 48%;
    float: right;
column-gap: 2em;
    padding-right: 2%;
        padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
    .les{
    display: block;
    align-items: stretch;
    column-count: 1;
    column-gap:0;
}
.box{
    width: 100%;
    float: none;
column-gap: 0px;
    padding-right: 0px;

}
    .box:last-child{
    padding-right: 0px;
}
    td{
        width: 80%;
    }
}
.box:last-child{
    padding-right: 15px;
}
.lesbox{
    padding: 30px 30px 45px 30px;
    background-color: #FFFFFF;
}
.lesin-school{
   background-color: #FFFFFF;
}
.lesin-man{
       background-color: #FFFFFF;
}
#lesson h2{
    border: solid 1px #000000;
    border-radius: 10px;
    font-size: 1.8em;
    padding: 15px;
    margin-bottom: 15px;
}
p.barline{
    border-bottom: solid 1px #000000;
    padding-bottom: 12px;
}
th{
    font-style: normal;
    font-weight: normal;
    white-space:nowrap;
}
table{
        border-spacing: 0px;
}
table.profile{
    width: 100%;
}
table.profile{
    border-top: solid 1px #000000;
    border-left: solid 1px #000000;
}
table.profile th,table.profile td{
    border-bottom: solid 1px #000000;
    border-right: solid 1px #000000;
    padding: 8px;
}
table.hyo{
width: 100%;
}
table.hyo tr:nth-child(odd) th,table.hyo tr:nth-child(odd) td{
    background-color: #e6e6e6;
}
table.hyo th{
    border-right: solid 1px #000000;
}
table.hyo th,table.hyo td{
    padding: 8px;
}
.profileimg{
background-image: url("../img/profileback.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 80%;
}
.profilephoto{
        margin-left: -10%;
    padding-top: 20px;
}
h1.profile{
    font-size: 3em;
    padding-bottom: 10px;
}
h2.profile{
    font-size: 1.2em;
}
.contentmin a,.contentmin a:visited{
    color: #535353;
}