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


/* Caution */
#caution-column { width: 100%; padding: 1.5em 0; background: #FFB90D; }

/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */
#caution-column p { font-size: 115%; line-height: 1.6; text-align: justify; width: 94%; max-width: 1340px; margin: 0 auto; }
/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */

#caution-column p a { text-decoration: underline; }

/* :::::::::::::::::::: 2020.10.4追加 :::::::::::::::::::: */
#caution-column p strong { color: #7F001B; }
/* :::::::::::::::::::: 2020.10.4追加 :::::::::::::::::::: */

@media only screen and (max-width: 768px) {
  #caution-column p { font-size: 100%; line-height: 1.4; }
  #caution-column p span:before { content: "\A"; white-space: pre; }
}
@media only screen and (max-width: 736px) {
  #caution-column { padding: .8em 0; }
}


/* Keyvisual */
#keyvisual { width: 100%; max-width: 1340px; margin: 0 auto; padding-top: 3em; position: relative; }
#keyvisual ul li { position: relative; }
#keyvisual ul li h1 { font-family: 'Maggies Headline'; font-size: 800%; line-height: 1.2; text-align: center; color: #FFF; width: 100%; margin-top: -.6em; position: absolute; top: 50%; }
#keyvisual .slick-prev { left: 20px; z-index: 2; }
#keyvisual .slick-next { right: 20px; z-index: 2; }
#keyvisual .slick-dots { bottom: 20px; z-index: 2; }
#keyvisual .slick-dots li button:before { font-size: 12px; color: #FFF; }
#keyvisual .slick-dots li.slick-active button:before { color: #FFF; opacity: .75; }
#keyvisual .slick-dotted.slick-slider { margin-bottom: 0; }
#keyvisual ul li img { width: 100%; height: auto; }
@media only screen and (max-width: 768px) and (orientation: portrait) {
  #keyvisual ul li h1 { font-size: 540%; line-height: 1.2; }
}
@media only screen and (max-width: 737px) {
  #keyvisual { padding-top: 1em; }
  #keyvisual ul li h1 { font-size: 400%; line-height: 1.2; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #keyvisual ul li { overflow: hidden; }
  #keyvisual ul li img { width: 180%; height: auto; margin-left: -40%; }
  #keyvisual ul li h1 { margin-top: -1em;  }
}


/* Common */


/* Outline */
#outline { width: 100%; max-width: 1340px; margin: 0 auto; background: #FFF; display: flex; }
#outline .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#outline h1 { font-family: 'Maggies Headline'; font-size: 265%; line-height: 1.2; }
#outline h2 { font-size: 123%; line-height: 1.2; color: #666; padding-bottom: 1em; }
#outline h3 { position: absolute; top: 2.5em; right: 5em; }
#outline h3 a { line-height: 1.2; text-align: center; width: 10em; padding: 1em 0; border: solid 1px #000; display: block; }
#outline h3 a:hover { color: #FFF; border-color: #C10358; background: #C10358; }

/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */
#outline .txt-box h4 { font-size: 105%; line-height: 1.6; font-weight: bold; text-align: justify; padding-bottom: .3em; }
#outline .txt-box p.read { margin-bottom: .5em; }
#outline .img-box { width: 34%; background: #D9D2C7; }
#outline .img-box a { text-decoration: underline; }
#outline .img-box dl { padding: 2.5em; }
#outline .img-box dl dt { font-size: 105%; line-height: 1.6; font-weight: bold; }
#outline .img-box dl dd ul.sub-list { padding-bottom: .5em; }
#outline .img-box dl dd ul.sub-list li { line-height: 1.4; text-indent: -1em; padding: .3em 0 0 1em; }
#outline .img-box dl dd ul.attention li { font-size: 93%; line-height: 1.4; text-indent: -1em; padding: .3em 0 0 1em; }
/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */

@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #outline { display: block; }
  #outline .txt-box { width: calc(100% - 6em); padding: 2em 3em; position: relative; }

/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */
  #outline .img-box { width: 100%; }
  #outline .img-box dl { padding: 2em 3em; }
/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */

  #outline h1 { font-size: 200%; line-height: 1.2; }
  #outline h3 { right: 3em; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #outline .txt-box { width: 94%; padding: 3% 3%; position: relative; }
  #outline h3 { margin-bottom: 1em; position: relative; top: 0; right: 0; }
  #outline h3 a { width: calc(100% - 2px); }

/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */
  #outline .img-box dl { padding: 3% 3%; }
/* :::::::::::::::::::: 2020.10.4変更 :::::::::::::::::::: */
}


/* :::::::::::::::::::: 2020.10.4追加 :::::::::::::::::::: */
#index-access { background: #FFF; display: flex; }
#index-access .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#index-access .img-box { width: 34%; }
#index-access .img-box iframe { width: 100%; height: 100%; }
#index-access .txt-box dl { padding-top: .5em; }
#index-access .txt-box dl dt { font-size: 105%; line-height: 1.6; font-weight: bold; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #index-access { display: block; }
  #index-access .txt-box { width: calc(100% - 6em); padding: 2em 3em; position: relative; }
  #index-access .img-box { width: 100%; height: 15em; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #index-access .txt-box { width: 94%; padding: 3% 3%; position: relative; }
}
/* :::::::::::::::::::: 2020.10.4追加 :::::::::::::::::::: */


/* COVID-19 */
#covid19 { background: #FFB90D; }
#covid19 .inner-box { background: url("../images/index/home_icon.png") no-repeat right 5em center; }
#covid19 p { padding-bottom: 1em; }
#covid19 a { text-decoration: underline; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #covid19 .inner-box { background-position: right 3em center; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #covid19 .inner-box { background: none; }
}


/* Feature */
#feature { background: #FFF; }
#feature-box { display: flex; justify-content: space-between; }
#feature-box dl { width: 30%; }
#feature-box dl dt { font-size: 123%; line-height: 1.2; font-weight: bold; padding-bottom: .4em;}
#feature-box dl dd p.link-btn a { text-align: center; margin-top: .4em; padding: .8em 0; border: solid 1px #000; display: block; }
#feature-box dl dd p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #feature-box { display: block; }
  #feature-box dl { width: 100%; margin-top: 1em; padding-top: 1em; border-top: solid 1px #CCC; }
}


/* Member */
#member { background: #FFF; }
#member-box { display: flex; flex-wrap: wrap; justify-content: space-between; }
#member-box dl { width: calc(100% / 6); }
#member-box dl a:hover { color: #000; }
#member-box dl a:hover img { box-shadow: 0 0 .5em 0 rgba(193,3,88,0.5); }
#member-box dl dt { text-align: center; padding-bottom: .5em; }
#member-box dl dt img { width: 70%; height: auto; border-radius: 50%; }
#member-box dl dd { text-align: center; }
#member-box dl dd strong { font-size: 105%; line-height: 1.2; display: block; }
.member-modal dl { margin-bottom: 1em; display: flex; align-items: flex-end; position: relative; }
.member-modal dl dt { width: 180px; }
.member-modal dl.wide dt { width: 270px; }
.member-modal dl dt img { width: 100%; height: auto; }
.member-modal dl dd { padding-left: 1em; }
.member-modal dl dd strong { font-size: 105%; line-height: 1.4; display: block; }
.member-modal dl dd ul { font-size: 85%; line-height: 1.3; padding-top: .4em; }
.member-modal dl dd ul li { padding: 0 0 .2em 1em; position: relative; }
.member-modal dl dd ul li:before { content: "・"; color: #999; position: absolute; left: 0; }
.member-modal .comment p { padding-bottom: 1.5em; }

.member-modal p.link-btn { position: absolute; top: 35px; right: 35px; }
.member-modal p.link-btn a { line-height: 1.2; text-align: center; width: 12em; padding: .8em; border: solid 1px #000; display: block; }
.member-modal p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }

.remodal-cancel { text-align: center; vertical-align: middle; color: #000; min-width: 10em; margin: 0; padding: .8em 0; border: solid 1px #000; background: #FFF; outline: 0; cursor: pointer; transition: .3s; }
.remodal-cancel:hover, .remodal-cancel:focus { color: #FFF; border-color: #C10358; background: #C10358; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #member-box { justify-content: flex-start; }
  #member-box dl { width: calc(100% / 3); padding-bottom: 2%; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #member-box dl { width: 50%; margin: 0 0 5% 0; }
  .remodal { padding: 1em; }
  .member-modal dl { display: block; }
  .member-modal dl dt { margin: 0 auto; }
  .member-modal dl dd { padding: .5em 0 0 0; }
  .member-modal dl dd p { text-align: center; }
  .member-modal dl dd ul { margin-top: .5em; padding: .5em 0 .3em 0; border-top: solid 1px #CCC; border-bottom: solid 1px #CCC; }
  .member-modal .comment p { font-size: 93%; line-height: 1.4; }
  .member-modal p.link-btn { margin-bottom: 1em; position: relative; top: 0; right: 0; }
  .member-modal p.link-btn a { width: calc(100% - 2px); padding: .8em 0; }
}


/* Schedule */
#schedule { background: #FFF; }
#schedule .inner-box { min-height: 20em; background: url("../images/index/calendar_icon.png") no-repeat right 10em center; }
#timetable { width: 60%; position: relative; }
#timetable p.link-btn { position: absolute; right: 0; top: -4em; }
#timetable p.link-btn a { line-height: 1.2; text-align: center; width: 15em; padding: .8em 0; border: solid 1px #000; display: block; }
#timetable p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#timetable ul { margin-bottom: 1em; border-top: solid 1px #000; border-bottom: solid 1px #000; }
#timetable ul li { line-height: 1.3; border-bottom: dotted 1px #000; position: relative; }
#timetable ul li:last-child { border-bottom: none; }
#timetable ul li a { font-weight: bold; color: #F50; padding: .8em 6em .8em 0; display: block; }
#timetable ul li a span { font-weight: normal; color: #000; position: absolute; right: 0; }
#timetable ul li a:hover { background: rgba(255,85,0,0.2); }
#timetable p.attention { line-height: 1.4; text-indent: -1em; padding: .4em 0 0 1em; }
#timetable p.contact { padding-top: 1em; }
#timetable p.contact strong { color: #F50; }
#timetable p.contact strong.mail { margin-left: 1em; }
#timetable p.contact a { text-decoration: underline; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #schedule .inner-box { background: none; }
  #timetable { width: 100%; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #schedule .inner-box { min-height: 20em; }
  #timetable ul { margin-bottom: .5em; }
  #timetable p.link-btn { margin-bottom: .5em; position: relative; left: 0; top: 0; }
  #timetable p.link-btn a { width: 100%; }
  #timetable p.contact strong.mail { margin-left: 0; }
  #timetable p.contact strong.mail:before { content: "\A"; white-space: pre; }
}


/* Stories */
#stories ul:after { content: ""; clear: both; display: block; }
#stories ul li { width: 49.25%; height: 250px; background: #FFF; float: left; }
#stories ul li:first-child { height: 520px; margin-right: 1.5%; }
#stories ul li:last-child { margin-top: 20px; }
#stories ul li:first-child div.stories-img { width: 100%; height: 300px; overflow: hidden; position: relative; }
#stories ul li:first-child div.stories-img img { width: 100%; height: auto; position: absolute; top: 50%; transform: translate(0,-50%); }
#stories ul li:first-child div.stories-txt { padding: 2em 5em; }
#stories ul li:nth-child(n+2) { display: flex; }
#stories ul li:nth-child(n+2) div.stories-img { width: 40%; overflow: hidden; position: relative; }
#stories ul li:nth-child(n+2) div.stories-img img { width: auto; height: 100%; position: absolute; left: 50%; transform: translate(-50%,0); }
#stories ul li:nth-child(n+2) div.stories-txt { width: calc(60% - 5em); padding: 2em 2.5em; }
#stories ul li div.stories-txt p { font-size: 135%; line-height: 1.6; text-align: justify; }
#stories ul li div.stories-txt p a { font-size: 75%; line-height: 1.2; text-align: center; width: 12em; margin-top: 1em; padding: .8em 0; border: solid 1px #000; display: block;  }
#stories ul li div.stories-txt p a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
@media only screen and (max-width: 1340px) {
  #stories h1 { margin-left: .5em; }
}
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #stories h1 { margin-left: 3%; }
  #stories ul li { width: 100%; height: 200px; margin-bottom: 1em; float: none; }
  #stories ul li:first-child { height: 200px; margin-right: 0; display: flex; }
  #stories ul li:first-child div.stories-img { width: 40%; height: auto; overflow: hidden; position: relative; }
  #stories ul li:first-child div.stories-img img, #stories ul li:nth-child(n+2) div.stories-img img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
  #stories ul li:first-child div.stories-txt, #stories ul li:nth-child(n+2) div.stories-txt { width: calc(60% - 3em); padding: 1em 1.5em; }
  #stories ul li:last-child { margin-top: 0; }
  #stories ul li div.stories-txt p { font-size: 115%; line-height: 1.6; }
  #stories ul li div.stories-txt p a { font-size: 90%; line-height: 1.2; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #stories ul li:first-child div.stories-txt, #stories ul li:nth-child(n+2) div.stories-txt { width: calc(60% - 2em); padding: 1em 1em; }
  #stories ul li div.stories-txt p { font-size: 100%; line-height: 1.6; }
  #stories ul li div.stories-txt p a { font-size: 100%; line-height: 1.2; width: calc(100% - 2px); }
}


/* :::::::::::::::::::: 2020.10.4追加 :::::::::::::::::::: */
#pre-stories { background: #FFF; display: flex; }
#pre-stories .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#pre-stories .txt-box p.link-btn { line-height: 1.2; text-align: center; width: 18em; margin-top: 1em; padding: 1em 0; border: solid 1px #000; }
#pre-stories .img-box { width: 34%; overflow: hidden; position: relative; }
#pre-stories .img-box img { width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #pre-stories .txt-box { width: calc(66% - 4em) !important; padding: 2em 2em; position: relative; }
  #pre-stories .txt-box p.link-btn { display: none; }
  #pre-stories .img-box img { width: 100%; height: auto; top: 50%; transform: translate(-50%,-50%); }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #pre-stories { margin: 0 auto 1em auto; display: block; }
  #pre-stories .txt-box { width: 94% !important; padding: 3% 3%; }
  #pre-stories .img-box { width: 100%; height: 8em !important; }
}
/* :::::::::::::::::::: 2020.10.4追加 :::::::::::::::::::: */





/* Donate */
#donate { background: #FFB90D; }
#donate p { padding-bottom: 1em; }
#donate p#npo-read { padding-bottom: 0; }
#donate p a { text-decoration: underline; }
#donate h2 { font-size: 105%; line-height: 1.2; font-weight: bold; text-align: justify; padding-bottom: .2em; }
#donate ul { padding: .5em 0 1em 0; display: flex; justify-content: space-between; }
#donate ul li { font-size: 115%; line-height: 1.2; width: 30%; }
#donate ul li a { text-align: center; padding: 1em 0; border: solid 1px #000; display: block; }
#donate ul li a:hover { color: #000; background: #FFF; }
#donate ul li p { font-size: 85%; line-height: 1.4; text-align: justify; padding-top: .4em; display: block; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #donate ul li { font-size: 100%; line-height: 1.2; width: 32%; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #donate h2 { font-size: 123%; line-height: 1.2; }
  #donate ul { display: block; }
  #donate ul li { width: 100%; margin-bottom: .2em; }
  #donate ul li:last-child { margin-bottom: 0; }
}


/* Other Donate */
#other-donate { position: relative; }
#other-donate .more-btn { line-height: 1.2; position: absolute; top: -.2em; right: 0; }
#other-donate .more-btn a { text-align: center; width: 10em; padding: .8em 0; border: solid 1px #000; background: #FFF; display: block; } 
#other-donate .more-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#other-donate ul { padding-bottom: 3em; }
#other-donate ul li dl { padding-bottom: 4em; background: #FFF; position: relative; }
#other-donate ul li dt {}
#other-donate ul li dt img { width: 100%; height: auto; }
#other-donate ul li dd { min-height: 8em; padding: 1.5em 2em; }
#other-donate ul li dd h3 { font-size: 115%; line-height: 1.2; font-weight: bold; padding-bottom: .5em; }
#other-donate ul li dd p a { line-height: 1.2; text-align: center; width: 12em; margin-top: 1em; padding: 1em 0; border: solid 1px #000; display: block; position: absolute; bottom: 2em; }
#other-donate ul li dd p a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#other-donate .slick-slide { margin: 0 35px; }
#other-donate .slick-list { margin: 0 -35px; }
#other-donate .slick-dots { bottom: -2.5em; z-index: 2; }
#other-donate .slick-dots li { background: none; }
#other-donate .slick-dots li button:before { font-size: 12px; color: #F50; }
#other-donate .slick-dots li.slick-active button:before { color: #F50; opacity: .75; }
#other-donate .slick-dotted.slick-slider { margin-bottom: 0; }
@media only screen and (max-width: 1340px) {
  #other-donate h1 { margin-left: .5em; }
}
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #other-donate h1 { margin-left: 3%; }
  #other-donate .slick-slide { margin: 0 10px; }
  #other-donate .slick-list { margin: 0 -10px; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #other-donate ul li dd { padding: 1em 1em; }
  #other-donate .more-btn { margin-bottom: 2em; position: relative; top: 0; right: 0; z-index: 2; }
  #other-donate .more-btn a { width: calc(94% - 2px); margin: 0 auto; }
  #other-donate ul li dd p a { bottom: 1em; }
}


/* Architecture */
#architecture { width: 100%; max-width: 1340px; margin: 0 auto 3em auto; background: #FFF; display: flex; }
#architecture .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#architecture .txt-box p.link-btn { line-height: 1.2; margin-top: 1em; }
#architecture .txt-box p.link-btn a { text-align: center; width: 16em; padding: 1em 0; border: solid 1px #000; display: block; }
#architecture .txt-box p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#architecture .img-box { width: 34%; overflow: hidden; position: relative; }
#architecture .img-box img { width: auto; height: 100%; position: absolute; left: 50%; transform: translate(-50%,0); }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #architecture { display: block; }
  #architecture .txt-box { width: calc(100% - 6em); padding: 2em 3em; position: relative; }
  #architecture .img-box { width: 100%; height: 15em; }
  #architecture .img-box img { width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%,-40%); }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #architecture { margin: 0 auto 1em auto; }
  #architecture .txt-box { width: 94%; padding: 3% 3%; position: relative; }
  #architecture .txt-box p.link-btn a { width: calc(100% - 2px); }
  #architecture .img-box { height: 12em; }
}


/* News */
#news { position: relative; }
#news .more-btn { line-height: 1.2; position: absolute; top: -.2em; right: 0; }
#news .more-btn a { text-align: center; width: 10em; padding: .8em 0; border: solid 1px #000; background: #FFF; display: block; } 
#news .more-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#news ul { display: flex; justify-content: space-between; }
#news ul li { width: calc(24% - 4em); padding: 2em 2em 6em 2em; background: #FFB90D; position: relative; }
#news ul li h2 { color: #FFF; }
#news ul li h3 { font-size: 110%; line-height: 1.4; font-weight: bold; text-align: justify; padding: .2em 0 .5em 0; }
#news ul li p.link-btn { position: absolute; left: 50%; bottom: 2em; transform: translate(-50%,0); }
#news ul li p.link-btn a { line-height: 1.2; text-align: center; width: 10em; margin: 0 auto; padding: .8em 0; border: solid 1px #000; border-radius: 1.4em; display: block; }
#news ul li p.link-btn a:hover { color: #000; background: #FFF; }
@media only screen and (max-width: 1340px) {
  #news h1 { margin-left: .5em; }
}
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #news { width: 94%; margin: 0 auto; }
  #news h1 { margin-left: 0; }
  #news ul { flex-wrap: wrap; }
  #news ul li { width: calc(49% - 4em); margin-bottom: 2%; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #news ul { display: block; }
  #news ul li { width: calc(100% - 2em); padding: 1em 1em 4.5em 1em; margin-bottom: .5em; }
  #news ul li p.link-btn { bottom: 1em; }
  #news .more-btn { margin-bottom: 1em; position: relative; top: 0; right: 0; }
  #news .more-btn a { width: calc(100% - 2px); }
}


/* News更新用 */
#news2 { position: relative; }
#news2 h1.title-ja { font-family: Arial; }
#news2 .more-btn { line-height: 1.2; position: absolute; top: -.2em; right: 0; }
#news2 .more-btn a { text-align: center; width: 10em; padding: .8em 0; border: solid 1px #000; background: #FFF; display: block; } 
#news2 .more-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#news2 ul li { width: 54%; margin-bottom: 1%; background: #FFF; float: left; }
#news2 ul li dl { display: flex; }
#news2 ul li dl dt { width: 50%; padding-top: 26.25%; background: url("../images/index/news_blank.jpg") center center no-repeat; background-size: cover; position: relative; overflow: hidden; }
#news2 ul li dl dt img { width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#news2 ul li dl dd { width: calc(50% - 2em); padding: .5em 1em; position: relative; }
#news2 ul li dl dd h3 { font-size: 105%; line-height: 1.3; font-weight: bold; color: #F50; }
#news2 ul li dl dd h2 { font-size: 93%; line-height: 1.2; color: #9F918E; padding: .2em 0 .6em 0; }
#news2 ul li dl dd p { font-size: 93%; line-height: 1.4; }
#news2 ul li dl dd p.link-btn { position: absolute; bottom: 1em; }
#news2 ul li dl dd p.link-btn a { line-height: 1.2; text-align: center; width: 12em; padding: .6em 0; border: solid 1px #000; display: block; }

#news2 ul li:last-child dl dd h3 { color: #C10358; }
#news2 ul li:last-child dl dd p.link-btn a { font-weight: bold; color: #FFF; background: #F50; border-color: #F50; }
#news2 ul li dl dd p.link-btn a:hover { color: #FFF; background: #C10358; border: solid 1px #C10358; }

#news2 ul li:first-child { width: 44%; margin-right: 2%; }
#news2 ul li:first-child dl { flex-direction: column; }
#news2 ul li:first-child dl dt { width: 100%; padding-top: 52.5%; }
#news2 ul li:first-child dl dd { width: 100%; padding: 48.75% 0 0 0; }
#news2 ul li:first-child dl dd div { padding: 0 2em; position: absolute; top: 1em; }
#news2 ul li:first-child dl dd div p.link-btn { margin-top: 1em; position: relative; bottom: 0; }
@media only screen and (max-width: 1340px) {
  #news2 h1 { margin-left: .5em; }
}
@media only screen and (max-width: 1200px) {
  #news2 { width: 96%; margin: 0 auto; }
  #news2 h1 { margin-left: 3%; }
  #news2 ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
  #news2 ul li, #news2 ul li:first-child { width: 49%; margin-right: 0; float: none; }
  #news2 ul li dl { flex-direction: column; }
  #news2 ul li dl dt { width: 100%; padding-top: 52.5%; }
  #news2 ul li dl dd, #news2 ul li:first-child dl dd { width: calc(100% - 2em); padding: 1em; }
  #news2 ul li:first-child dl dd div { padding: 0; position: relative; top: 0; }
  #news2 ul li dl dd p.link-btn { margin-top: 1em; position: relative; bottom: 0; }
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
  #news2 { width: 100%; }
  #news2 ul li, #news2 ul li:first-child { width: 100%; float: none; }
  #news2 ul li { margin-bottom: 4%; }
  #news2 ul li dl dd, #news2 ul li:first-child dl dd { width: calc(100% - 2em); padding: .5em 1em; }  
  #news2 .more-btn { margin-bottom: 1em; position: relative; top: 0; right: 0; }
  #news2 .more-btn a { width: calc(94% - 2px); margin: 0 auto; }
}


/* HUG */
#hug { width: 100%; max-width: 1340px; margin: 0 auto 3em auto; background: #FFF; display: flex; }
#hug .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#hug .txt-box p.link-btn { line-height: 1.2; margin-top: 1em; }
#hug .txt-box p.link-btn a { text-align: center; width: 12em; padding: 1em 0; border: solid 1px #000; display: block; }
#hug .txt-box p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#hug .img-box { width: 34%; overflow: hidden; position: relative; }
#hug .img-box img { width: auto; height: 100%; position: absolute; left: 50%; transform: translate(-50%,0); }
#hug .img-box a:hover img { opacity: .8; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #hug { display: block; }
  #hug .txt-box { width: calc(100% - 6em); padding: 2em 3em; position: relative; }
  #hug .img-box { width: 100%; height: 18em; }
  #hug .img-box img { width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #hug { margin: 0 auto 1em auto; }
  #hug .txt-box { width: 94%; padding: 3% 3%; position: relative; }
  #hug .txt-box p.link-btn a { width: calc(100% - 2px); }
  #hug .img-box { height: 10em; }
}


