@charset "utf-8";

#eventList article {
margin-bottom: 60px;
}
#eventList article img {
float: left;
border: 1px solid #ddd;
width: 27%;
height: 200px;
object-fit: cover;
font-family: 'object-fit: cover;'
}
#eventList article .date,
#eventList article h2,
#eventList article p,
#eventList article .bt {
width: 70%;
float: right;
text-align: left;
}
#eventList article .date {
color: #999;
font-size: 90%;
margin-bottom: 0;
font-weight: 600;
}
#eventList article h2 {
color: #ff7500;
font-weight: 600;
font-size: 130%;
line-height: 140%;
margin-bottom: 5px;
}
#eventList article p {
margin-bottom: 10px;
}
#main {
width: 100%;
margin-bottom: 60px;
}
#main h2.title {
font-weight: 500;
border-bottom: 2px dashed #ffc799;
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 200%;
line-height: 130%;
margin-bottom: 10px;
}
#main .date {
font-weight: 500;
margin-bottom: 10px;
color: #ff7500;
text-align: center;
font-size: 120%;
}
#main .subTitle {
font-weight: 500;
margin-top: 30px;
margin-bottom: 5px;
color: #ff7500;
font-size: 140%;
border-bottom: 1px solid #ddd;
}
#main .freeDetail img {
max-width: 1100px;
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
}
#main .summary {
margin-top: 30px;
margin-bottom: 50px;
}
#main .summary dl {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
margin-bottom: 1px;
}
#main .summary dt,
#main .summary dd {
padding: 5px 10px;
font-size: 90%;
}
#main .summary dt {
flex-basis: 20%;
text-align: left;
font-weight: 400;
background: #ffcda0;
max-width: 20%;
}
#main .summary dd {
flex-basis: 80%;
border-bottom: 1px solid #eee;
font-weight: 300;
max-width: 80%;
}
#pagenation {
text-align: center;
margin: 30px 0 60px;
}
#pagenation ul {}
#pagenation li {
display: inline-block;
margin: 0 0.1em;
}
#pagenation li.active {
padding: 0.2em 0.7em;
color: #333;
}
#pagenation li a {
font-weight: 400;
padding: 0.2em 0.7em;
background: #ddd;
color: #fff;
transition: all .4s;
border-radius: 3px;
}
#pagenation li a:hover {
background: #eee;
color: #ff7500;
text-decoration: none;
}
#pagenation li.prev a,
#pagenation li.next a {
color: #ff7500;
background: inherit;
font-weight: 800;
}
#pagenation li.prev a:hover,
#pagenation li.next a:hover {
background: transparent;
opacity: 0.6;
}
#entryForm {
background: url(/images/bg01.gif);
padding: 30px 0;
margin-bottom: 30px;
}
.mainTable dl {
display: flex;
justify-content: space-between;
align-items: stretch; margin-bottom: 3px;
}
.mainTable dt,
.mainTable dd {
padding: 15px 10px;
font-size: 90%;
}
.mainTable dt {
flex-basis: 30%;
max-width: 30%;
border-right: 2px solid #ffcda0;
text-align: right;
font-weight: 500;
padding: 20px 10px 10px;
}
.mainTable dd {
flex-basis: 70%;
max-width: 70%;
border-bottom: 1px solid #eee;
font-weight: 300;
}
.mainTable .required {
color: #fff;
background: #ff7500;
padding: 0.3em 0.4em;
font-size: 90%;
margin-right: 0.3em;
border-radius: 2px;
line-height: 100%;
display: inline-block;
;
}
.mainTable .memo {
font-size: 85%;
line-height: 140%;
color: #999;
}
.mainTable textarea {
height: 8em;
font-size: 130%;
}
.mainTable select,
.mainTable textarea,
.mainTable input[type="text"],
.mainTable input[type="tel"],
.mainTable input[type="email"],
.mainTable input[type="file"] {
border-radius: 5px;
padding: 0.7em 0.2em;
width: 90%;
border: 1px solid #ccc;
}
.mainTable select {
width: 40%;
}
.mainTable input[type="file"] {
margin-bottom: 5px;
padding: 0.7em;
cursor: pointer;
}
.mainTable input[type="checkbox"] {
padding-right: 0.2em;
}
.mainTable input[type="checkbox"] {
display: none;
}
.checkComment,
.wpcf7-list-item-label {
padding-left: 21px;
position: relative;
margin-right: 20px;
line-height: 120%;
font-weight: 400;
cursor: pointer;
}
.checkComment::before,
.wpcf7-list-item-label::before {
content: "";
display: block;
position: absolute;
top: 0.2em;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
background: #fff;
border-radius: 4px;
cursor: pointer;
}
.mainTable input[type="checkbox"]:checked~.checkComment,
.mainTable input[type="checkbox"]:checked~.wpcf7-list-item-label {
color: #ff7500;
}
.mainTable input[type="checkbox"]:checked~.checkComment::after,
.mainTable input[type="checkbox"]:checked~.wpcf7-list-item-label::after {
content: "";
display: block;
position: absolute;
top: -1px;
left: 6px;
width: 6px;
height: 13px;
transform: rotate(40deg);
border-bottom: 4px solid #ff7500;
border-right: 4px solid #ff7500;
cursor: pointer;
}
.mainTable input::-webkit-input-placeholder,
.mainTable textarea::-webkit-input-placeholder {
color: #ccc;
}
.mainTable input::-moz-placeholder,
.mainTable textarea::-moz-placeholder {
color: #ccc;
}
.mainTable input:-ms-input-placeholder .mainTable textarea:-ms-input-placeholder {
color: #ccc;
}
.mainTable button {
background: #ff7500;
padding: 10px 5px;
text-align: center;
width: 40%;
border-radius: 5px;
border: none;
color: #fff;
margin: 30px auto 20px;
display: block;
transition: all 0.3s;
cursor: pointer;
}
.mainTable button:hover {
opacity: 0.7;
}
#entryForm .comment02 {
margin-bottom: 20px;
color: #999;
font-size: 90%;
line-height: 140%;
font-weight: 300;
}
#line {
margin-bottom: 60px;
}
#line img {
width: 100%;
max-width: 1100px;
} @media screen and (max-width: 1000px) {
#eventList article img {
width: 30%;
height: 22vw;
}
#eventList article .date,
#eventList article h2,
#eventList article p,
#eventList article .bt {
width: 66%;
}
.mainTable dt {
flex-basis: 30%;
max-width: 30%;
}
.mainTable dd {
flex-basis: 70%;
max-width: 70%;
}
} @media screen and (max-width: 760px) {
#event article img {
width: 38%;
height: 27vw;
}
#eventList article .date,
#eventList article h2,
#eventList article p,
#eventList article .bt {
width: 58%;
}
#main .summary dt {
flex-basis: 100%;
max-width: 100%;
}
#main .summary dd {
flex-basis: 100%;
max-width: 100%;
}
.mainTable dt {
flex-basis: 100%;
max-width: 100%;
}
.mainTable dd {
flex-basis: 100%;
max-width: 100%;
}
} @media screen and (max-width: 600px) {
#eventList article {
margin-bottom: 60px;
}
#eventList article img {
float: none;
width: 100%;
margin: 0 auto;
display: block;
height: 50vw;
}
#eventList article .date {
float: none;
width: 100%;
}
#eventList article h2 {
float: none;
width: 100%;
font-size: 110%;
margin-bottom: 5px;
}
#eventList article p {
float: none;
width: 100%;
}
#eventList article .bt {
float: none;
width: 100%;
text-align: center;
}
#eventList article .bt a {
width: 100%;
}
#eventList article .bt a:hover {
opacity: 1
}
#main h2.title {
font-size: 140%;
margin-bottom: 10px;
}
#main .date {}
#main .freeDetail img {
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
height: auto;
float: nont;
}
#main .summary dl {
display: block;
margin-bottom: 10px;
}
#main .summary dt,
#main .summary dd {
padding: 1px 5px;
}
#main .summary dt {
font-weight: 500;
}
#main .summary dd {
border-bottom: none;
}
#pagenation li.active {
padding: 0.1em 0.3em;
}
#pagenation li a {
padding: 0.1em 0.6em;
}
#pagenation li a:hover {
background: #ddd;
color: #fff;
}
#pagenation li.prev a:hover,
#pagenation li.next a:hover {
opacity: 1;
}
.mainTable dl {
display: block;
margin-bottom: 10px;
}
.mainTable dt,
.mainTable dd {
text-align: left;
font-size: 90%;
}
.mainTable dt {
border-right: none;
text-align: left;
padding: 5px 5px;
margin-bottom: 5px;
background: #ffcda0;
}
.mainTable dd {
border-bottom: none;
padding: 2px 0 10px 0;
}
.mainTable select,
.mainTable textarea,
.mainTable input[type="text"],
.mainTable input[type="tel"],
.mainTable input[type="email"],
.mainTable input[type="file"] {
padding: 0.7em;
width: 100%;
}
.mainTable button {
width: 100%;
padding: 16px 0;
}
.mainTable button:hover {
opacity: 1;
}
} #sns .snsBox {
background: #f1f1f1;
border-radius: 10px;
border: 15px solid #f9f9f9;
position: relative;
padding-left: 30%;
display: flex;
margin-top: 150px;
justify-content: space-around;
padding: 15px 0px 15px 30%;
}
#sns .snsBox:after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: -10px;
width: 25%;
height: 180%;
bottom: 0;
background-image: url(/images/snsbox_bg.png);
background-repeat: no-repeat;
background-size: contain;
background-position: bottom left;
}
#sns .snsBox .baloon {
width: 93px;
position: absolute;
top: -80px;
left: 21%;
z-index: 99;
}
#sns .snsBox .text {
padding-right: 10px;
padding-top: 20px;
}
#sns .snsBox h1 {
font-size: 170%;
font-weight: 300;
color: #000;
margin-bottom: 0.4em;
}
#sns .snsBox h1 span {
font-weight: 600;
font-size: 150%;
margin-right: 0.1em;
}
#sns .snsBox p {
font-size: 90%;
font-weight: 300;
line-height: 140%;
}
#sns .snsBox ul {
flex-basis: 375px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#sns .snsBox ul li {
flex-basis: 178px;
width: 178px;
height: 51px;
margin-bottom: 5px;
}
#sns .snsBox ul li a {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
color: transparent;
font-size: 1px;
}
#sns .snsBox ul li a.line {
background-image: url(/images/snsbox_line.png);
}
#sns .snsBox ul li a.facebook {
background-image: url(/images/snsbox_fb.png);
}
#sns .snsBox ul li a.instagram {
background-image: url(/images/snsbox_instagram.png);
}
#sns .snsBox ul li a.youtube {
background-image: url(/images/snsbox_youtube.png);
}
@media screen and (max-width: 1000px) {
#sns .snsBox {
padding: 15px 0px 15px 25%;
}
#sns .snsBox:after {
width: 20%;
}
#sns .snsBox .baloon {
width: 9vw;
left: 15%;
top: -50px;
}
#sns .snsBox .text {
width: 48%;
}
#sns .snsBox ul {
flex-basis: 36vw;
}
#sns .snsBox ul li {
flex-basis: calc(17.5vw);
width: calc(17.5vw);
height: calc(5vw);
}
}
@media screen and (max-width: 760px) {
#sns .snsBox {
flex-wrap: wrap;
padding: 15px 0px 15px 42%;
border: 6px solid #f9f9f9;
}
#sns .snsBox:after {
width: 50%;
max-width: 220px;
background-image: url(/images/snsbox_bg_sp.png);
}
#sns .snsBox .baloon.pcBox {
display: none;
}
#sns .snsBox .baloon.spBox {
display: inherit;
}
#sns .snsBox .baloon {
width: 150px;
top: -70px;
left: 35%;
}
#sns .snsBox .text {
flex-basis: 100%;
padding: 0;
}
#sns .snsBox h1 {
font-size: 150%;
margin-bottom: 0.4em;
}
#sns .snsBox p {
margin-bottom: 1em;
}
#sns .snsBox ul {
flex-basis: 100%;
justify-content: flex-start;
z-index: 99;
}
#sns .snsBox ul li {
flex-basis: 6vw;
width: 6vw;
height: 6vw;
margin-right: 6px;
}
#sns .snsBox ul li a {
background-size: contain;
}
#sns .snsBox ul li a.line {
background-image: url(/images/snsbox_line_sp.png);
}
#sns .snsBox ul li a.facebook {
background-image: url(/images/snsbox_fb_sp.png);
}
#sns .snsBox ul li a.instagram {
background-image: url(/images/snsbox_instagram_sp.png);
}
#sns .snsBox ul li a.youtube {
background-image: url(/images/snsbox_youtube_sp.png);
}
}
@media screen and (max-width: 600px) {
#sns .snsBox ul li {
flex-basis: 10vw;
width: 10vw;
height: 10vw;
margin-right: 6px;
}
}