@charset "UTF-8";

#contents {
    width: 100%;
    font-family: 'M PLUS 1p', sans-serif;
}

.seminar{}

.cover{
    padding:60px 3%;
    background:url(../img/stripe_green.jpg);
    background-size:120px;
}
.cover h2{
    width:100%;
    max-width:1040px;
    margin:0 auto;
}

.contents_inner{
    background-image:
        url(../img/back_l.png),
        url(../img/back_r.png);
        background-repeat:
	    repeat-y,
        repeat-y;
    background-position:
        left,
        right;
	background-size:
	    8%;
    padding-top:60px;
}

.contents_inner h3{
    background:none;
    border:none;
    padding:0;
    text-align:center;
    color:#E38B3F;
    font-size:36px;
    margin-top:40px;
}
.contents_inner h3 span{
    display:inline-block;
    font-size:36px;
    line-height:1.5em;
    font-weight:bold;
}


/*  */
.box01{
    width:94%;
    max-width:720px;
    margin:0 auto;
    display:flex;
    padding-bottom:30px;
}
.box01_img{
    width:20%;
}
.box01_text{
    width:82%;
    display:table;
    padding:8% 0 0 2%;
}
.box01_text .textbox{
    display:table-cell;
    vertical-align: middle;
}
.box01_text .textbox .text{
    background:#598696;
    color:#fff;
    padding:8%;
    border-radius:16px;
    font-size:180%;
    position:relative;
    line-height:1.6em;
    text-align:center;
}
.box01_text .textbox .text span{
    display:inline-block;
}
.box01_text .textbox .text:before {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 99%;
    height: 96%;
    border: 3px solid #5D5E62;
    content: '';
    border-radius: 16px;
}

.box02{
    width:94%;
    max-width:720px;
    margin:0 auto;
    display:flex;
    flex-direction:row-reverse;
    padding-bottom:60px;
}
.box02_img{
    width:20%;
}
.box02_text{
    width:82%;
    display:table;
    padding:8% 0 0 2%;
}
.box02_text .textbox{
    display:table-cell;
    vertical-align: middle;
}
.box02_text .textbox .text{
    background:#D19818;
    color:#fff;
    padding:8%;
    border-radius:16px;
    font-size:180%;
    position:relative;
    line-height:1.6em;
    text-align:center;
}
.box02_text .textbox .text span{
    display:inline-block;
}
.box02_text .textbox .text:before {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 99%;
    height: 96%;
    border: 3px solid #5D5E62;
    content: '';
    border-radius: 16px;
}

.box03{
    width:94%;
    max-width:960px;
    margin:0 auto;
    display:flex;
    padding-top:60px;
}
.box03_img{
    width:22%;
    z-index: 2;
    position:relative;
}
.box03_img img{
    position:absolute;
    bottom:0;
}
.box03_text{
    width:78%;
    display:table;
}
.box03_text .textbox{
    display:table-cell;
    vertical-align: middle;
    padding-bottom:6%;
}
.box03_text .textbox .text{
    background:#549A97;
    color:#fff;
    padding:6%;
    border-radius:16px;
    font-size:180%;
    position:relative;
    line-height:1.6em;
    text-align:center;
}
.box03_text .textbox .text span{
    display:inline-block;
}
.box03_text .textbox .text:before {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 99%;
    height: 96%;
    border: 3px solid #5D5E62;
    content: '';
    border-radius: 16px;
}

/*  */
.course{
    background: url(../img/stripe.png);
    background-size: 64px;
    padding: 60px 0;
}
.course h3{
    background:none;
    border:none;
    padding:0;
    text-align:center;
    color:#E38B3F;
    font-size:36px;
}
.course h3 span{
    display:inline-block;
    font-size:36px;
    line-height:1.5em;
    font-weight:bold;
}
.course_inner{
    width:94%;
    max-width:1200px;
    display:flex;
    margin:0 auto;
}
.course_inner a{
    text-decoration:none;
    transition:.3s;
}
.course_inner .left{
    width:50%;
    padding:2% 2% 0 8%;
    position:relative;
}
.course_inner .left img{
    position:absolute;
    left:0;
    bottom:-2px;
    display:block;
    width:30%;
}
.course_inner .left .course_title{
    color:#D19818;
    font-size:140%;
    padding-bottom:0.7em;
}
.course_inner .left .icon_price{
    color:#D19818;
    display:inline-block;
    border:solid 1px #D19818;
    padding:3px 1em;
}
.course_inner .left .course_btn{
    color:#fff;
    display:inline-block;
    background: #D19818;
    border:solid 1px #D19818;
    border-radius:5px;
    padding:3px 2em;
    margin-top:2em;
}

.course_inner .right{
    width:50%;
    padding:2% 2% 0 8%;
    position:relative;
}
.course_inner .right img{
    position:absolute;
    right:0;
    bottom:-2px;
    display:block;
    width:20%;
}
.course_inner .right .course_title{
    color:#598696;
    font-size:140%;
    padding-bottom:0.7em;
}
.course_inner .right .icon_price{
    color:#598696;
    display:inline-block;
    border:solid 1px #598696;
    padding:3px 1em;
}
.course_inner .right .course_btn{
    color:#fff;
    display:inline-block;
    background: #598696;
    border:solid 1px #598696;
    border-radius:5px;
    padding:3px 2em;
    margin-top:2em;
}

.course_box{
    border:solid 2px #5D5E62;
    background:#fff;
    padding:8% 6%;
    border-radius:12px;
    text-align:center;
}
.course_inner a:hover .course_box{
    background:#FEFFF8;
}


/*  */
.map{
    width:100%;
    background:#6CACAC;
}
.map h4{
    background:#569B9B;
    padding:8px;
    text-align:center;
    font-size:24px;
    color:#fff;
}
.map_inner{
    width:94%;
    max-width:1200px;
    padding:40px 0;
    margin:0 auto;
    display:flex;
}

.map_inner .left,
.map_inner .right{
    width:50%;
    padding:0 2%;
}
.map_inner h5{
    border-bottom:none;
    border-left:solid 2px #fff;
    padding-left:0.5em;
    color:#fff;
    font-weight:normal;
}
.map_inner h5 span{
    font-size:75%;
}


/*----------------
 メールフォーム 
----------------*/
.contact {
    background: url(../img/stripe.png);
    background-size: 64px;
    padding: 80px 0;
    margin: -30px 0 0;
}

.contact_title {
    color: cadetblue;
    font-size: 35px;
    text-align: center;
}

.contact_form {
    width: 94%;
    max-width: 960px;
    padding: 30px;
    border: solid 1px #ddd;
    background: #fff;
    margin: 2em auto 0;
}

.pt30 {
    padding-top: 30px;
}

.pt60 {
    padding-top: 60px;
}


/* ポップアップ */
.popup{
    padding:10%;
}
.popup h2{
    text-align:center;
    padding:0;
    font-size:24px;
    color:#569B9B;
}
.time{
    text-align:center;
    font-weight:bold;
}
.popup .text{
    padding-botton:1em;
}

@media only screen and (max-width: 768px) {
    .contact_title {
        font-size: 20px;
        margin-top: 40px;
    }

    .pt60 {
        padding-top: 30px;
    }

    .cover{
        padding:30px 3%;
    }

    .contents_inner{
        background-image:
            url(../img/back_l.png),
            url(../img/back_r.png);
            background-repeat:
            repeat-y,
            repeat-y;
        background-position:
            left,
            right;
        background-size:
            16%;
        padding-top:60px;
    }

    .contents_inner h3{
        font-size:20px;
    }
    .contents_inner h3 span{
        display:inline-block;
        font-size:20px;
    }

    /*  */
    .box01_text .textbox .text{
        font-size:16px;
    }
    .box01_text .textbox .text span{
        display:inline-block;
    }
    .box01_text .textbox .text:before {
        position: absolute;
        top: -8px;
        left: -8px;
        width: 99%;
        height: 96%;
        border: 2px solid #5D5E62;
        content: '';
        border-radius: 16px;
    }
    
    .box02_text .textbox .text{
        font-size:16px;
    }
    .box02_text .textbox .text:before {
        position: absolute;
        top: -8px;
        left: -8px;
        width: 99%;
        height: 96%;
        border: 2px solid #5D5E62;
        content: '';
        border-radius: 16px;
    }
    
    .box03{
        padding-top:30px;
    }

    .box03_img{
        width:30%;
        position:relative;
    }
    .box03_img img{
        position:absolute;
        bottom:0;
        left:0;
    }
    .box03_text .textbox .text{
        font-size:16px;
    }
    .box03_text .textbox .text span{
        display:inline-block;
    }
    .box03_text .textbox .text:before {
        position: absolute;
        top: -8px;
        left: -8px;
        width: 99%;
        height: 96%;
        border: 2px solid #5D5E62;
        content: '';
        border-radius: 16px;
    }

    .course h3{
        font-size:20px;
    }
    .course h3 span{
        display:inline-block;
        font-size:20px;
    }
    .course_inner{
        display:block;
    }

    .course_inner .left{
        width:100%;
    }

    .course_inner .right{
        width:100%;
        padding:12% 2% 0 8%;
    }

    .map h4{
        font-size:20px;
    }
    .map_inner{
        display:block;
    }
    
    .map_inner .left,
    .map_inner .right{
        width:100%;
        padding:0 2% 20px;;
    }
    .map_inner h5{
        border-bottom:none;
        border-left:solid 2px #fff;
        padding-left:0.5em;
        color:#fff;
        font-weight:normal;
    }
    .map_inner h5 span{
        font-size:75%;
    }

    .contact {
        padding: 30px 0 60px;
        margin: -30px 0 0;
    }
 
    .footer_inner p a{
        display:inline-block;
        margin-top:30px;
        padding:8px 2em;
        background:#1f7f7c;
        color:#fff;
        text-decoration:none;
        border-radius:5px;
    }

}


/* フェードイン --------------------------------------------------------------- */

/* 左から右へ */
.an-faderight {
    animation-name: faderight;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes faderight {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
transform: translateX(0);
}
}

/* 右から左へ */
.an-fadeleft {
    animation-name: fadeleft;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes fadeleft {
from {
    opacity: 0;
     transform: translateX(20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

/* 下から上へ */
.an-fadeup {
    animation-name: fadeup;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes fadeup {
from {
    opacity: 0;
     transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* スクロールでフェードイン ----------------------------------------------------- */
.fadein01 {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
.fadein02 {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
.fadein03 {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
.fadein04 {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
.fadein05 {
  opacity : 0;
  transform: translateX(-20px);
  transition: all 1s;
}
.fadein06 {
  opacity : 0;
  transform: translateX(20px);
  transition: all 1s;
}