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

#title_sec .titleLead {text-align: center; font-weight: bold;}

.contents_ttl{text-align: center;margin: 30px auto 0;}
.contents_ttl > figure{max-width: 200px;/* text-align: center; */margin: 15px auto;}


@media screen and (max-width: 640px){
    #title_sec .titleLead {margin-bottom: 50px;}
}

/*--------------------------------------------------
announcement_wrap
---------------------------------------------------*/

.announcement_wrap {margin: 100px auto;}
.announcement_ttl {justify-content: center; margin-bottom: 30px; text-align: center;}
.announcement_ttl h3 {font-size: 26px; line-height: 1.5em; padding-left: 15px;}

.announcement_text {margin-bottom: 30px;}
.announcement_text p span.line {border-bottom: 1px solid #000; font-weight: bold;}
.announcement_text p span.color {color: #bf8239;}

.announcement_box {justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 20px;}
.announcement_box:last-child {margin-bottom: 0;}

.announcement_box_img {width: 45%;}
.announcement_box_text {width: 50%;}
.announcement_box_text h4 {font-size: 22px; line-height: 1.5; margin-bottom: 20px;}
.announcement_box_text h4 span {color: #bf8239; font-size: 120%;}

.announcement_box_text p span.icon1 {display: inline-block; vertical-align: middle;position: relative; line-height: 1; width: 2em; height: 2em;}
.announcement_box_text p span.icon1::before {content: url('../../img/pages/anniversary/vol100/icon1.svg');
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


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

@media screen and (max-width: 640px){
    .announcement_wrap {margin: 60px auto;}

    .announcement_ttl h3 {font-size: 18px; padding-left: 5px;}

    .announcement_box_img {width: 100%; margin-bottom: 15px;}
    .announcement_box_text {width: 100%;}

    .announcement_box_text h4 {font-size: 18px;}
}

/*--------------------------------------------------
anniversary_wrap
---------------------------------------------------*/

.anniversary_wrap {margin-bottom: 100px;}

.anniversary_inner {justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 15px;}
.anniversary_box {width: calc(100% / 2); padding: 5px;}

.anniversary_text {margin-bottom: 50px;}
.anniversary_text p {font-size: 12px;}
.anniversary_text p span.square-num {display: inline-flex; align-items: center; justify-content: center; line-height: 1; width: 1.3em; height: 1.3em; background: #000; color: #fff;}

.anniversary_inner2{justify-content: center; gap: 40px; align-items: center; flex-wrap: wrap; width: 100%; max-width: 700px; margin: 0 auto;}
.anniversary_box2:first-child{width: 300px; border-right: 1px solid #000; padding-right: 30px;}
.anniversary_box2:nth-child(2){width: calc(100% - 340px);}
.color_pageLink{max-width: 500px; width: 100%; margin: 0 auto;}
.color_pageLink a{display: block; background: #6bbe85; text-align: center;
    font-size: 20px; font-weight: 600; color: #fff; padding: 20px 5px;
    border-radius: 10px; box-shadow: 0 0 10px #ccc;
}


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

@media screen and (max-width: 640px){
    .anniversary_wrap {margin-bottom: 60px;}
    .anniversary_box {width: calc(100% / 1); padding: 0 0 5px 0;}
    .anniversary_text p {font-size: 10px;}

    .anniversary_inner2 {gap: 10px;}
    .anniversary_box2:first-child{width: 100%; max-width: 200px; border-right: none; padding-right: 0; text-align: center; margin: 0 0 20px;}
    .anniversary_box2:nth-child(2){width: 100%;}
}


/*--------------------------------------------------
present_sec
---------------------------------------------------*/

.present_sec .present_wrap {border: 2px solid #6bbe85;}
.present_sec .itemHead {position: absolute; top: 15px; left: 30px;}

.present_kigen {color: initial;}
.present_kigen span {background-color: #56986c;}


.present_wrap .box_left{width: 30%; justify-content: left; gap: 20px;}

.present_wrap .box_right{width: 70%;}
.box_right p span {color: #56986c; font-size: 16px;}

@media screen and (max-width: 640px){
    .present_sec .itemHead {top: 40px; left: 26px;}
    .present_wrap > h3 {text-align: right;}

    .present_wrap .box_left{justify-content: center;}
}


.announcement_onlyText{text-align: center; background: #fff1e0; margin-bottom: 20px;}
.announcement_onlyText p{font-size: 22px; font-weight: bold; padding: 20px 0; color: #bf8239;}
.announcement_onlyText p br{display: none;}

@media screen and (max-width: 640px){
    .announcement_onlyText p br{display: block;}
    .announcement_onlyText p{font-size: 18px;}
}