@charset "utf-8";

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

    Index

01. Common & Reset
02. Header
03. Order
04. Section
    4-1. Section01
    4-2. Section02 & Section04
    4-3. Section03 Voice
    4-4. Section05

05. Footer

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


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

    01. Common & Reset

========================= */
body { background: url("images/body_bg.png") left top repeat-x; }
@media screen and (max-width: 667px) {
    body {
        background: url("images/body_bg_sp.png") right top no-repeat;
        background-size: 100%;
    }
}

header, .innerBox, .sec03 ul {
    width: 980px;
    margin: 0 auto;
}
@media screen and (max-width: 667px) {
    header, .innerBox, .sec03 ul { width: 94%; }
}

section { padding: 60px 0 30px; }
@media screen and (max-width: 667px) {
    section { padding: 3rem 0 2rem; }
}
    
h2, h3, h4, p, li, th, td, dt, dd {
    color: #333;
}

h2 {
    margin: 0 0 40px;
    font-size: 4rem;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: normal;
    text-align: center;
    line-height: 1.5;
}
@media screen and (max-width: 667px) {
    h2 {
        margin: 0 0 2rem;
        font-size: 3rem;
    }
}

h3, h4 {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

p, li, th, td, dt, dd {
    font-size: 1.8rem;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    line-height: 1.7;
}
@media screen and (max-width: 667px) {
    p, li, th, td, dt, dd { font-size: 1.6rem; }
}

p { margin: 0 0 30px; }

li { list-style: none; }

.f28, .sec03 h3, .benefit p, .profile h3 { font-size: 2.8rem; }
@media screen and (max-width: 667px) {
    .f28, .sec03 h3, .benefit p, .profile h3 { font-size: 2.4rem; }
}

.f24, .sec05 h3 { font-size: 2.4rem; }
@media screen and (max-width: 667px) {
    .f24, .sec05 h3 { font-size: 2rem; }
}

.f20, .sec05 h4, .card li { font-size: 2rem; }
@media screen and (max-width: 667px) {
    .f20, .sec05 h4, .card li { font-size: 1.8rem; }
}

.org { color: #ff8800; }


@media screen and (max-width: 667px) {
    img { width: 100%; height: auto; }
    .pc { display: none; }
}



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

    02. Header

========================= */
header {
    padding: 30px 0 0 ;
    background: url("images/header_bg.png") right 45px no-repeat;
}
@media screen and (max-width: 667px) {
    header {
        padding: 0;
        background: none;
    }
}

header h1 { margin: 0 0 60px; }
@media screen and (max-width: 667px) {
    header h1 { margin: 0 0 2rem; }
}

.headerOrder {
    width: 700px;
    padding: 0 40px 10px;
    background-color: rgba(255,255,255,0.9);
    border: 1px solid #aa8866;
    border-radius: 10px;
}
@media screen and (max-width: 667px) {
    .headerOrder {
        width: 100%;
        padding: 1.5rem;
    }
}

.hd_od_tit {
    margin: 0 auto 20px;
    text-align: center;
}

.hd_od_tit picture {
    display: block;
}

.hd_od_tit picture:first-child {
    position: relative;
    top: -15px;
    margin: 0 0 20px;
}
@media screen and (max-width: 667px) {
    .hd_od_tit picture:first-child {
        top: -33px;
        margin: 0;
    }
    .hd_od_bf {
        margin: 0;
    }
}



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

    03. Order

========================= */
.order {
    margin: 0;
    text-align: center;
}
@media screen and (max-width: 667px) {
    .order { text-align: left; }
}

.order img {
    margin: 0 0 15px;
}

.order a {
    width: 620px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    color: #fff;
    font-size: 2.8rem;
    font-weight: bold;
    text-decoration: none;
    background: linear-gradient(0deg, #ff8800, #ffbb00);
    border-radius: 10px;
}
@media screen and (max-width: 667px) {
    .order a {
        width: 100%;
        padding: 1.5rem 0 1.2rem 1.5rem;
        font-size: 2.2rem;
    }
}

.order a:hover {
    background: linear-gradient(0deg, #ffbb00, #ff8800);
}

.order span {
    display: block;
    background: url("images/order_arrow.png") 560px center no-repeat;
}
@media screen and (max-width: 667px) {
    .order span { background-position: 96% 30%; }
}

.arrow {
    margin: 0 0 40px;
    padding: 0 0 35px;
    text-align: center;
    background: url("images/arrow_bt.png") center bottom no-repeat;
}
@media screen and (max-width: 667px) {
    .arrow {
        margin: 0 0 2.4rem;
        padding: 0 0 2.4rem;
        font-size: 2.2rem;
        background-size: 100%;
    }
}




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

    04. Section

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

/* ----- 4-1. Section01 ----- */
.sec01 .innerBox {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
@media screen and (max-width: 667px) {
    .sec01 .innerBox { flex-direction: column; }
}

.sec01 h2 {
    font-size: 2.4rem;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: bold;
    text-align: left;
}

.sec01 picture {
    margin: 0 40px 0 0;
}
@media screen and (max-width: 667px) {
    .sec01 picture {
        display: block;
        width: 80%;
        margin: 0 auto 3rem;
    }
}


/* ----- 4-2. Section02 & Section04 ----- */
.sec02, .sec04 {
    padding: 0 0 30px;
}
@media screen and (max-width: 667px) {
    .sec02, .sec04 { padding: 3rem 0; }
}

.sec02 { background-color: #f8f8f8; }

.sec02 .innerBox { background: url("images/sec02_bg.png") right top no-repeat; }
.sec04 .innerBox { background: url("images/sec04_bg.png") right top no-repeat; }
@media screen and (max-width: 667px) {
    .sec02 .innerBox, .sec04 .innerBox {
        background-image: none;
    }
}

.sec02 p, .sec02 ul, .sec04 p, .sec04 ul {
    width: 640px;
}
@media screen and (max-width: 667px) {
    .sec02 p, .sec02 ul, .sec04 p, .sec04 ul { width: 100%; }
}

.sec02 ul, .sec04 ul {
    margin: 0 0 40px;
    padding: 40px;
    border-radius: 10px;
}
@media screen and (max-width: 667px) {
    .sec02 ul, .sec04 ul {
        margin: 0 auto 3rem;
        padding: 2rem 4%;
    }
}

.sec02 ul { background-color: #fff; }
.sec04 ul { background-color: #f8f8f8; }

.sec02 li, .sec04 li {
    padding: 10px 10px 10px 50px;
    background: url("images/check_grn.png") 20px 16px no-repeat;
    border-bottom: 1px dashed #ccc;
}
@media screen and (max-width: 667px) {
    .sec02 li, .sec04 li {
        padding: 1rem 1rem 0.5rem 2.5rem;
        background-position: 0 14px;
    }
}

.sec02 li:first-child, .sec04 li:first-child {
    border-top: 1px dashed #ccc;
}


/* ----- 4-3. Section03 Voice ----- */
.sec03 {
    padding: 60px 0;
    background: url("images/sec03_bg.png") left top repeat;
}
@media screen and (max-width: 667px) {
    .sec03 { padding: 3rem 0; }
}

.sec03 li {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin: 0 0 20px;
    padding: 40px;
}
@media screen and (max-width: 667px) {
    .sec03 li {
        flex-direction: column;
        padding: 2rem;
    }
}

.sec03 li:nth-child(odd) { background-color: #fff; }
.sec03 li:nth-child(even) { background-color: #ffffe5; }

.sec03 h3 {
    margin: 0 0 30px;
    padding: 0 0 10px;
    color: #886644;
    font-weight: normal;
    line-height: 1.3;
    border-bottom: 1px dashed #886644;
}

.sec03 h3:before {
    content: url("images/ic_voice.png");
    display: block;
}

.sec03 li p:last-child { margin-bottom: 0; }
@media screen and (max-width: 667px) {
    .sec03 .voiceTxt p:last-child { margin-bottom: 3rem; }
}

.voicePhoto {
    width: 240px;
    margin: 0 40px 0 0;
    text-align: center;
}
@media screen and (max-width: 667px) {
    .voicePhoto { margin: 0 auto; }
}



/* --- 4-4. Section05 Detail --- */
.sec05 {
    background: url("images/sec05_bg.png") left top repeat;
}

.sec05 .innerBox {
    padding: 60px;
    background-color: #fff;
    border: 1px solid #33aa99;
}
@media screen and (max-width: 667px) {
    .sec05 .innerBox { padding: 2rem; }
}

.detail { margin: 0 0 0 60px; }
@media screen and (max-width: 667px) {
    .detail { margin: 0; }
}

.sec05 h3 {
    margin: 0 0 40px;
    padding: 20px 0;
    font-weight: normal;
    background: url("images/sec05_h3_bg01.png") repeat;
}
@media screen and (max-width: 667px) {
    .sec05 h3 { margin: 0 0 3rem; }
}

.sec05 h3 span {
    padding: 0 0 0 60px;
    background: url("images/sec05_h3_bg02.png") left center no-repeat;
}
@media screen and (max-width: 667px) {
    .sec05 h3 span { padding: 0 0 0 4.5rem; }
}

.sec05 h4 { margin-bottom: 30px; }

.sec05 table {
    display: block;
    width: 800px;
    margin: 0 0 40px;
    border-right: 1px solid #ccc;
}

.day, .time { width: 240px; }
.lecturer, .capacity { width: 160px; }

.sec05 th, .sec05 td {
    padding: 10px 0;
}
@media screen and (max-width: 667px) {
    .sec05 th, .sec05 td { padding: 1rem 1rem 0.8rem; }
}

.sec05 thead th {
    font-weight: normal;
    text-align: center;
    background-color: #eee;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.sec05 tbody th, .sec05 td {
    text-align: center;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
@media screen and (max-width: 667px) {
    .sec05 table {
        width: auto;
        border: none;
    }
    .sec05 thead {
        display: none;
    }
    .sec05 tbody {
        display: block;
    }
    .sec05 tbody tr{
        display: block;
        margin-bottom: 1.5em;
    }
    .sec05 tbody th {
        font-weight: bold;
        background-color: #eee;
    }
    .sec05 tbody th,
    .sec05 tbody td{
        display: list-item;
        border: none;
        list-style-type: none;
        text-align: left;
    }
    .sec05 tbody td:nth-of-type(1):before { content: "［テーマ］"; }
    .sec05 tbody td:nth-of-type(2):before { content: "［講師］"; }
    .sec05 tbody td:nth-of-type(3):before { content: "［定員］"; }
}

.pay {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card li:before {
    content: "●";
    color: #85ccc2;
}

.cardAttention { margin-bottom: 30px; }

.cardAttention li {
    padding-left: 1em;
    text-indent: -1em;
}

.cardAttention li:before { content: "※"; }

.benefit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 60px 0 40px;
    padding: 58px;
    background: url("images/sec03_bg.png") repeat;
    border: 1px solid #aa8866;
    border-radius: 10px;
    position: relative;
}
@media screen and (max-width: 667px) {
    .benefit {
        margin: 3rem 0;
        padding: 4% 4% 2rem;
    }
}

.benefit h3 {
    width: 740px;
    height: 90px;
    padding: 26px 0 28px;
    color: #fff;
    font-size: 3.2rem;
    font-weight: bold;
    text-align: center;
    background: url("images/sec05_bg_ribbon.png") center top no-repeat;
    position: absolute;
    top: -50px;
}
@media screen and (max-width: 667px) {
    .benefit h3 {
        width: 100%;
        height: auto;
        padding: 2.4rem 0 2rem;
        font-size: 2.8rem;
        background: url("images/sec05_bg_ribbon_sp.png") center 20px no-repeat;
        background-size: 100%;
    }
}

.benefit p {
    color: #aa8866;
    text-align: center;
    font-weight: bold;
}
@media screen and (max-width: 667px) {
    .benefit p {
        margin: 2rem 0;
        font-size: 2rem;
        text-align: left;
    }
}

.benefit figure { margin-right: 30px; }
@media screen and (max-width: 667px) {
    .benefit figure { margin: 0 auto 2rem; }
}

.benefit li {
    width: 430px;
    padding: 10px 0 10px 1.5em;
    text-indent: -1.5em;
    line-height: 1.5;
    border-bottom: 1px dashed #aa8866;
}
@media screen and (max-width: 667px) {
    .benefit li {
        width: auto;
    }
}

.benefit li:first-child { border-top: 1px dashed #aa8866;}

.benefit li:nth-child(1):before { content: "1）"; }
.benefit li:nth-child(2):before { content: "2）"; }
.benefit li:nth-child(3):before { content: "3）"; }
.benefit li:nth-child(4):before { content: "4）"; }


/* --- 4-5. Section06 Lecturer --- */
.sec06 {
    padding: 46px 0 80px;
    background: url("images/sec06_bg.png") repeat;
}
@media screen and (max-width: 667px) {
    .sec06 { padding: 3rem 0 7rem; }
}

.sec06 .boxInner {
    width: 940px;
    display: flex;
    flex-direction: row-reverse;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    box-shadow: 0px 0px 0px 10px #eaf6f5, 0px 0px 0px 11px #fff, 0px 0px 0px 20px #fff;
}
@media screen and (max-width: 667px) {
    .sec06 .boxInner {
        width: 84%;
        flex-direction: column;
        padding: 2rem;
    }
}
        

.profile h3 {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ddd;
}

.profile h3 span {
    color: #ddd;
    font-size: 1.8rem;
    font-weight: normal;
}

.profile p:last-child { margin: 0;}
@media screen and (max-width: 667px) {
    .profile p:last-child { margin: 0 0 3rem;}
}

.sec06 figure {
    margin: 0 40px 0 0;
}
@media screen and (max-width: 667px) {
    .sec06 figure { margin: 0 auto; }
}




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

    05. Footer

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

footer {
    padding: 40px 0;
    background-color: #eaf6f5;
}

footer ul {
    display: flex;
    justify-content: center;
    margin: 0 auto 10px;
}
@media screen and (max-width: 667px) {
    footer ul {
        margin:  0 auto 2rem;
        display: block;
    }
}

footer li {
    padding: 0 2em;
    border-left: 1px solid #bbb;
}

footer li:last-child {
    border-right: 1px solid #bbb;
}
@media screen and (max-width: 667px) {
    footer li, footer li:last-child {
        border: none;
    }
}

footer li a {
    color: #333;
    font-size: 1.6rem;
}

footer p {
    margin: 0;
    color: #33aa99;
    font-size: 1.2rem;
    text-align: center;
}