@charset "UTF-8";
/* CSS Document */

h2{
font-weight: 600;
}

/*---------------
#course
---------------*/
#course h2{
text-align: center;
}
/*---------------
#course-p
---------------*/
#course-p .movie{
width: 100%;
}
#course-p table th{
vertical-align :top;
}
/*---------------
#form
---------------*/
/*-----reset-----*/
input[type="text"],
input[type="email"] {
padding: 0;
border: none;
border-radius: 0;
outline: none;
background: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
background: transparent;
}
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
padding: 0;
border: 0;
outline: none;
background: transparent;
}
button,
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: transparent;
}
#form .soy_inquiry_message{
padding-bottom: 20px;
}
#form dl {
border-bottom: 1px solid #ddd;
width: 100%;
}
#form dl dt span {
display: inline-block;
text-align: center;
background: #bd2828;
color: #fff !important;
border-radius: 6px;
line-height: 1;
width: 48px;
padding: 5px 0;
font-size: 1.2rem;
}
#form dl dt {
border-top: 1px solid #ddd;
letter-spacing: 0.05em;
font-weight: 500;
}
#form dl dd {
box-sizing: border-box;
}
#form dl dd input[type="text"], 
#form dl dd input[type="email"], 
#form dl dd textarea {
border: 1px solid #ddd;
border-radius: 6px;
background: #eaedf2;
width: calc(100% - 2em);
padding: 0.7em 1em;
font-size: 1.6rem;
}
#reserve input[type="submit"] {
background-color: rgb(102, 102, 102);
display: block;
color: #fff;
font-weight: 600;
margin: 0 auto;
border-style: none;
padding: 10px;
font-size: 1.6rem;
}
/*---------------
#viewing
---------------*/
#viewing .box > ul > li h3{
font-weight: 500;
padding-bottom: 10px;
}
#viewing .box > ul > li h3:before{
display: inline-block;
content: "◆";
padding-right: 5px;
}
#viewing .box > ul > li h4{
font-weight: 500;
font-size: 1.6rem;
padding-bottom: 10px;
}
#viewing .box > ul > li p{
line-height: 1.8;
}

#viewing .box > ul > li li{
padding-bottom: 10px;
}
#viewing .box > ul > li li:last-of-type{
padding-bottom: 0;
}

#viewing .box > ul li:first-of-type li:before,
#viewing .box > ul li:last-of-type > ul li:last-of-type li:before{
display: inline-block;
content: "・";
padding-right: 0px;
}
#viewing .box ol{
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
#viewing .box > ul li:last-of-type > ul li:nth-child(2) li:before {
counter-increment: item;
content: counter(item)')';
padding-right: .5em;
font-weight: 500;
}
#viewing .box a{
background: #333;
color: #fff;
padding: 5px;
display: block;
text-align: center;
border-radius: 10px;
margin-top: 15px;
}

@media (max-width: 560px){
main{
padding-top: 60px;
}
section{
padding-bottom: 40px;
}
h2{
font-size: 2.0rem;
padding: 20px 0;
}
/*---------------
#course
---------------*/
#course ul li{
margin-bottom: 20px;
}
#course ul li:last-of-type{
margin-bottom: 0;
}
/*---------------
#course-p
---------------*/
#course-p .movie{
margin-bottom: 30px;
}
#course-p table th{
display: block;
border-bottom: solid 1px #999;
width: calc(100% - 20px) ;
padding: 10px 10px;
background-color: #efefef;
}
#course-p table td{
display: block;
border-bottom: solid 1px #999;
width: calc(100% - 20px) ;
padding: 10px 10px;
}
#course-p table tr:last-of-type th,
#course-p table tr:last-of-type td{
border-bottom: none;
}
/*---------------
#form
---------------*/
#form dl dt {
font-size: 1.6rem;
padding: 10px 0;
}
#form dl dt span {
margin-left: 10px;
}
#form dl dd {
padding-bottom: 15px;
}
#form dl dd textarea {
height: 150px;
}
#reserve input[type="submit"] {
width: 70%;
margin-top: 30px;
}
/*---------------
#viewing
---------------*/
#viewing .box > ul > li{
padding-bottom: 30px;
}
#viewing .box > ul > li h3{
font-size: 1.8rem;
}
#viewing .box .list > li{
padding-bottom: 20px;
}
}

@media (min-width: 561px){
main{
padding-top: 90px;
}
section{
padding-bottom: 60px;
}
h2{
font-size: 2.6rem;
padding: 30px 0;
}
/*---------------
#course
---------------*/
#course ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#course ul li{
border: solid 1px #999;
width: calc(48% - 2px);
margin-right: 4%;
margin-bottom: 30px;
overflow :hidden; 
transition: .3s;
}
#course ul li:nth-of-type(2n){
margin-right: 0;
}
#course ul li:nth-last-child(-n+2){
margin-bottom: 0;
}
#course ul li:nth-last-child(-n+X){
margin-bottom: 0;
}
#course ul li img{
transition: .6s;
}
#course ul li img:hover{
transform:scale(1.1,1.1);
opacity: 0.5;
transition: .6s;
}
/*---------------
#course-p
---------------*/
#course-p table th{
display: inline-block;
border-bottom: solid 1px #999;
width: 200px;
padding: 20px 10px;
}
#course-p table td{
display: inline-block;
border-bottom: solid 1px #999;
width: calc(100% - 242px) ;
padding: 20px 10px;
}
#course-p table tr:last-of-type th,
#course-p table tr:last-of-type td{
border-bottom: none;
}
/*---------------
#form
---------------*/	
#form{
max-width: 800px;
}
#form dl {
display: flex;
flex-wrap: wrap;
}
#form dl dt {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.8rem;
width: 30%;
}
#form dl dd {
border-top: 1px solid #ddd;
padding: 20px 0 20px 20px;
width: 70%;
}
#form dl dd textarea {
height: 150px;
}
#reserve input[type="submit"] {
width: 30%;
margin-top: 40px;
}
/*---------------
#viewing
---------------*/
#viewing .box > ul > li{
padding-bottom: 40px;
}
#viewing .box > ul > li:last-of-type{
padding-bottom: 0;
}
#viewing .box > ul > li h3{
font-size: 2.0rem;
}
#viewing .box .list > li{
padding-bottom: 30px;
}
#viewing .box .list > li:last-of-type{
padding-bottom: 0;
}
#viewing .box a{
width: 400px;
}
}

@media(min-width: 561px) and (max-width: 768px){
/*---------------

---------------*/
}
@media (min-width: 561px) and (max-width: 1024px){
/*---------------
#course
---------------*/
/*---------------
#course-p
---------------*/
#course-p .movie{
margin-bottom: 30px;
}
}
@media screen and (min-width: 1025px){
/*---------------
#course
---------------*/
/*---------------
#course-p
---------------*/
#course-p .movie{
margin-bottom: 50px;
}
}