/*==========================
	overwrite
============================*/


.bread .inner {
    max-width: 1200px;
}


/*==========================
	// note common
============================*/


.pink {
    color: #f03f3f;
}

.bg-gold {
    background: #9c7d4a;
}

li.indent-gold::before {
    content: '\25CF';
    color: #b29059;
    margin-right: 5px;
    font-size: 1.2rem;
    vertical-align: text-top;
}


/*==========================
	layout
============================*/
#contents h3 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
}

.green #contents h3 {
    color: #6bb775;
    border-bottom: #6bb775 1px solid;
}

.purple #contents h3 {
    color: #863daf;
    border-bottom: #863daf 1px solid;
}




/*==========================
	// id #title
============================*/

.title_bg {
    background: url("../img/title_bg.jpg") top left no-repeat;
    background-size: cover;
}

.title {
    max-width: 1200px;
    margin: auto;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.title img {
		max-width: 90%;
		margin: 0 5%;
	}
}


/*==========================
	// 下線が流れるアニメーション
============================*/

.line {
  display: block;
  position: relative;
}
.line::after {
  background: linear-gradient(to right, #ccc 0%,#000 50%,#ccc 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-active::after {
  width: 100%;
}

@media screen and (min-width: 640px) {

    .green .title_bg_top {
        background: url(../img/bg_title_1-8.png) top right no-repeat;
    }

    .green .title_bg_bottom {
        background: url(../img/bg_title_2-8.png) bottom left no-repeat;
    }

    .purple .title_bg_top {
        background: url(../img/purple/bg_title_1-8.png) top right no-repeat;
    }

    .purple .title_bg_bottom {
        background: url(../img/purple/bg_title_2-8.png) bottom left no-repeat;
    }
}



/*=================================
	// id #outline // class date-detal
===================================*/

.green .lv_02 {
    /* background: #6bb775; */
    background: #3b8044;
}

.purple .lv_02 {
    background: #863daf;
}

.lv_03 {
    background: #e3e0d7;
}

#outline {
    max-width: 1200px;
    margin: auto;
}


.outlinebox {
    background: #fff;
    /* margin-bottom: 30px; */
    overflow: hidden;
    /* padding: 45px 30px; */
}


/*=================================
	// id #theme
===================================*/

#theme h2 {
    font-size: 3.0rem;
    margin-bottom: 5px;
}

#theme h2 small {
    font-size: 2.4rem;
    display: block;
}

#theme p {
    font-size: 2.2rem;
}


#theme p.sub {
    font-size: 1.8rem;
    margin: auto auto 30px;
}



@media print,
screen and (max-width: 768px) {

    #theme {
        padding: 0 0 10px;
        text-align: center;
    }

    #theme h2 {
        font-size: 2.4rem;
    }

    #theme h2 small {
        font-size: 1.8rem;
        display: block;
    }

    #theme p {
        font-size: 1.6rem;
    }

    #theme p.sub {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.5rem;
    }



}

/*=================================
	// id #howto
===================================*/

#howto {
    width: 85%;
    padding: 15px 0;
    background: #f0ede5;
    text-align: center;
}

#howto h4.heading {
    font-size: 2.2rem;
    margin: 10px 0 15px;
    color: #603813;
    text-align: center;
    overflow: hidden;
}

#howto h4.heading span {
    display: inline-block;
    position: relative;
}

#howto h4.heading span:before,
#howto h4.heading span:after {
    content: "";
    border-bottom: 2px solid #603813;
    width: 45px;
    margin: 0 15px;
    position: absolute;
    bottom: 13px;
}

#howto h4.heading span:before {
    right: 100%;
}

#howto h4.heading span:after {
    left: 100%;
}

#howto figure {
    width: 90%;
    max-width: 600px;
    margin: auto auto 30px;
}

#howto p {
    font-size: 1.6rem;
}


#howto_pc {
    display: block;
}

#howto_mob {
    display: none;
}



@media print,
screen and (max-width: 768px) {
    #howto {
        padding: 10px 5%;
    }

    #howto h4.heading {
        font-size: 1.8rem;
    }

    #howto p {
        font-size: 1.5rem;
    }

    #howto_pc {
        display: none;
    }

    #howto_mob {
        display: block;
    }

    #howto figure {
        width: 100%;
        margin-bottom: 15px;
    }
}



/*=================================
	// id #date_detail
===================================*/


.date_detail h4 {
    /*font-weight: normal;*/
    display: inline-block;
	width: 90%;
}

.date_detail h4 span {
    width: 100%;
    margin-bottom: 0.5em;
    padding: 0.2em 1em 0.2em;
    color: #b29059;
    background: #f1e7d7;
    font-size: 1.6rem;
    text-align: center;
    display: block;
}

@media print,
screen and (min-width: 769px) {
    .date_detail h4 {
        /*width: 50%;*/
    }
}


/*===============================
        // id #date 
=================================*/

#advance_notice {
    padding: 15px;
    border-top: #b29059 thin solid;
    border-bottom: #b29059 thin solid;
}

#advance_notice p {
    text-align: center;
}

@media print,
screen and (max-width:640px) {
    #advance_notice p {
        font-size: 1.4rem;
    }
}


/*===============================
        // id #fee 
=================================*/

#fee .audience {
    border: #aaa thin dotted;
}

@media print,
screen and (max-width: 1024px) {
	#fee dt:after {
		content: '▼';
		text-align: center;
		display: block;
	}
}

/*===============================
        // id #fee .program
=================================*/

#fee .program {
    font-weight: normal;
    margin: 60px auto 15px;
    padding: 15px 30px 5px;
    display: inline-block;
    display: block;
    border: #aaa thin solid;
}


#fee .program h5 {
    font-size: 1.6rem;
    margin-bottom: .5em;
    padding-bottom: .25em;
    color: #b29059;
    border-bottom: #b29059 thin solid;
}

#fee .program p {
    font-size: 1.4rem;
}

#fee .program ul {
    font-size: 1.4rem;
}

#fee .program li {
    margin-left: 2em;
    list-style: disc;
    list-style-position: outside;
}


@media screen and (max-width: 768px) {

    #fee .program ul {
        margin-left: 2em;
    }


}


/*===============================
        // id #person
=================================*/


#person ul {
    font-size: 1.6rem;
}


/*==============================
        // id #apply-closing
================================*/

#apply-closing .detail-txt span {
    display: block;
}



/*=====================================
        // id #participant
======================================*/


#participant .inside {
    padding-top: 15px;
}


#participant .past_theme h4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

#participant .past_theme h4 .period {
    font-family: 'Noto Serif JP', serif;
}

#participant .past_theme h4 .theme {
    font-size: 2.2rem;
    display: block;
}

#participant .row {
    width: 90%;
    margin: auto;
}


#participant .box {
    margin-bottom: 15px;
    /* text-align: left; */
    background: #f0ede5;
}

#participant .row .box p {
    padding: 15px;
}




/*====================================================
        // id #program
=====================================================*/


#program dl {
    width: 90%;
    margin: auto;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: center;
}



@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, #program dl {
        font-size: 1.6rem;
        font-family: "ヒラギノ角ゴ Pro W3",
            "Hiragino Kaku Gothic Pro",
            "メイリオ",
            Meiryo,
            Osaka,
            "ＭＳ Ｐゴシック",
            "MS PGothic",
            "sans-serif";
    }

    /* IE11 */
}


@media print,
screen and (max-width: 768px) {
    #program dl {
        font-size: 1.5rem;
    }
}




/*====================================================
        // id #inq 
=====================================================*/

address {
    font-style: normal;
}


.inqbtn a {
    color: #fff;
    text-align: center;
    padding: 30px 0;
    display: block;
    background: #9c7d4a;
    position: relative;
    overflow: hidden;
    border-radius: 4em;
}


#inq .tel_link a {
    color: #000;
}


.inqbtn .end {
    text-align: center;
    background: #eee;
    color: #666;
    width: 80%;
    margin: auto;
    padding: 1em 0;
    font-size: 1.6rem;
}


#inq .notice {
    width: 70%;
    margin: auto auto 30px;
    text-align: left;
}

#inq .notice ul {
    padding: 15px 30px;
    border: #c6c6c6 thin dotted;
    border-left: none;
    border-right: none;
}

#inq .notice li {
    margin-bottom: 1em;
}

#inq .notice li::before {
    content: '\203B';
    /*※印*/
    color: #f00;
    font-weight: bold;
    margin-right: 5px;
}




/*====================================================
      .advance_notice
=====================================================*/

.advance_notice {
    height: 50vh;
    padding: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.advance_notice p {
    text-align: center;
}

.advance_notice .advance_notice_logo img {
    max-width: 200px !important;
}