@charset "UTF-8";
main > .flexBox {
max-width:880px;
width: 90%;
margin: 8rem auto 0;
}
main > .flexBox dl {
padding: 2rem;
background: #fff;
margin-bottom: 2rem;
width: 100%;
}

main > .flexBox .open + dd{
display: block;
}

main > .flexBox dl dt {
font-weight: 700;
display: block;
width: 100%;
position: relative;
cursor: pointer;
}

main > .flexBox dt:after {
position: absolute;
content: "OPEN";
right: 20px;
top: -2rem;
width: 20%;
max-width: 80px;
display: block;
background: #D01F1F;
color: #fff;
padding: .1rem;
text-align: center;
font-size: 70%;
font-weight: 600;
}

main > .flexBox dt.open:after {
content: "CLOSE";
}

main > .flexBox dl dt > span:first-of-type {
display: inline-block;
font-size: 80%;
padding:.3rem 1rem;
background: #0f0f0f;
color: #fff;
text-align: center;
border-radius: 20px;
font-weight: 400;
margin-right: 1rem;
}

main > .flexBox dl dd {
margin-top: 2rem;
padding: 0 2rem;
display: none;
}

@media screen and (max-width: 480px) {
main > .flexBox {
margin-top: 4rem;
}
main > .flexBox dl dt > span:first-of-type {
display: block;
width: 45%;
padding: .3rem;
margin-bottom: .8rem;
}
main > .flexBox dl dd {
padding: 0;
margin-top: .8rem;
}
}


/* =======================================
txtTtl
======================================= */
h2.txtTtl {
color: #f0d998;
}
main > section h2:first-child {
margin-bottom: 8vh;
}

/* =======================================
mainvisual タイトルetc
======================================= */
nav + section {
position: relative;
}

nav + section > div {
position: absolute;
max-width: 600px;
width: 90%;
left: 10%;
top: 18%;
z-index: 5;
background: #fff;
box-shadow: 0 0 10px #ddd;
border-radius: 15px;
}

nav + section > div div {
position: relative;
padding: 5rem;
}

nav + section > div.txtArea div:after {
content: "";
background: url("../img/common/frame-flower02.png") repeat-x;
width: 100%;
height: 50px;
display: block;
position: absolute;
bottom: 0;
left: 0;
}

nav + section > div.txtArea h2 {
color: #9CD8D8;
font-size: 2rem;
position: relative;
text-align: center;
}

nav + section > div.txtArea h2 span {
font-size:1rem;
display: block;
line-height: 100%;
}

nav + section > div.txtArea h2:after {
content: "";
display: block;
left: calc(50% - 25px);
position: absolute;
width: 50px;
height: 2px;
background: #9CD8D8;
bottom: -15%;
}

nav + section > div.txtArea {
text-align: center;
}
nav + section > div.txtArea p {
margin: 3rem auto 0;
display: inline-block;
text-align: left;
}

#sub #mainVisual:not(.width100) {
width: 70%;
margin:  0 0 0 auto !important;
position: relative;
}

#sub #mainVisual:not(.width100):after {
content: "";
background: linear-gradient(to right, #FFF, transparent);
width: 30%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1400px) {
nav + section > div div {
padding: 3rem 3rem 4rem;
}
nav + section > div  {
left: 2%;
margin-bottom: 5rem;
}
}

@media screen and (max-width: 1280px) {
nav + section {
height: auto;
}
nav + section > div {
max-width:500px;
left: 5%;
top: 10%;
}
#sub #mainVisual:after {
display: none;
}
nav + section > div {
max-width: none;
position: relative;
margin-top: -2rem;
}
nav + section > div {
width: 80%;
left: 10%;
}
nav + section > div.txtArea h2 {
color: #9CD8D8;
font-size: 1.5rem;
position: relative;
text-align: center;
}
#sub #mainVisual:not(.width100) {
width: 100%;
margin:  0 0 0 auto !important;
position: relative;
}

#sub #mainVisual:not(.width100):after {
display: none;
}
}

@media screen and (max-width: 812px){
#points .menuArea li figure img {
height: 225px;
}
#slider #mainSlider img {
height: 250px;
}
}

@media screen and (max-width: 480px){ 
nav + section {
margin-bottom: 1rem;
}
nav + section > div {
width: 96%;
left: 2%;
}
nav + section > div div {
padding: 2rem 2rem 2.5rem;
}
}

#shootingPlan li a:hover {
color: #f0d998;
}

/* =======================================
newsBlc
======================================= */
.trigger {
background: #caefd2;
padding: 8px 10px;
max-width: 325px;
min-width: 120px;
color: #fff;
font-size: 100%;
position: absolute;
right: 5%;
top: 0;
border: none;
cursor: pointer;
outline: 0;
}
.toggle {
display: block;
width: 100%;
}
#newsBlc {
max-width: 1280px;
width: 90%;
}

#newsBlc .newsList li {
padding: 50px 80px;
border: 4px solid #CAEFD2;
border-radius: 10px;
margin-bottom: 3%;
position: relative;
}

#newsBlc .newsList .contentsBlc {
display: flex;
align-items: flex-start;
overflow: hidden;
}
#newsBlc .newsList .newsContents {
border-top: 1px dashed #9cd8d8;
padding-top: 20px;
margin-top: 20px;
}
#newsBlc .newsList .dateNews {
background: #9CD8D8;
color: #fff;
text-align: center;
padding: 5px 1rem;
margin-right: 2rem;
position: relative;
width: 150px;
}
#newsBlc .newsList h3 {
color: #9CD8D8;
word-break: break-all;
position: relative;
width: 100%;
box-sizing: border-box;
}
#newsBlc .newsList img {
max-width: 70%;
margin: auto;
display: block;
}
#newsBlc .newsList p {
margin-bottom: 20px;
}
#newsBlc .newsList p:last-child {
margin-bottom: 0;
}

@media screen and (max-width: 768px){
#newsBlc .newsList li {
padding: 50px 30px;
}
}

@media screen and (max-width: 640px){
#newsBlc .newsList h3 {
width: 100%;
margin-left: 0;
}
}

@media screen and (max-width: 480px){
#newsBlc .newsList .contentsBlc {
flex-wrap: wrap;
}
#newsBlc .newsList li {
padding: 50px 20px 30px;
}
#newsBlc .newsList .dateNews {
width: 100%;
margin-right: 0;
}
#newsBlc .newsList .dateNews + h3 {
margin-top: 1rem;
}
.trigger {
right: 20px;
}
}