html {
 overflow-y: scroll;
scroll-behavior:smooth;
overflow-x: hidden;
}

body {
margin:0 auto;
padding:0;
font-family: 'M PLUS 1p', sans-serif;
}

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
margin:0 auto;
}

div:after,
ul:after {
 content: "";
display: block;
 clear: both;
}

ul{
 list-style: none;
 margin: 0px;
 padding: 0px;
}

a img {
    transition: opacity 0.1s linear;
}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/*汎用*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 992px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.tact{text-align:center;}
.talt{text-align:left;}
.tart{text-align:right;}

/*header*/

.headerOuter{}
.headerInner{
    max-width:1120px;
    margin:0 auto;
    padding:10px;
}

/*main*/

#roop {
    width: 100%;
    height:657px;
    background: url(images/main_back_s.jpg) repeat-x;
    background-position: 0 0;
    -webkit-animation: bgroop 60s linear infinite;
    animation: bgroop 60s linear infinite;
}
@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1300px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1300px 0;
    }
}

.mainimageInner{
    margin:0 auto;
    padding: 186px 15px;
    text-align: center;
}
.mainimageInner img{
    margin:0;
}

@media only screen and (max-width: 992px) {
#roop {
    width: 100%;
    height:auto;
    background-size:cover;
}
.mainimageInner{
    height:auto;
    padding:50px 15px;
}
}




.mainmenuOuter{
background: rgb(247,190,130);
background: -moz-linear-gradient(left,  rgba(247,190,130,1) 0%, rgba(230,40,109,1) 100%);
background: -webkit-linear-gradient(left,  rgba(247,190,130,1) 0%,rgba(230,40,109,1) 100%);
background: linear-gradient(to right,  rgba(247,190,130,1) 0%,rgba(230,40,109,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7be82', endColorstr='#e6286d',GradientType=1 );
}
.mainmenuOuter ul{
    max-width:1120px;
    margin:0 auto;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.mainmenuOuter li{
    width:calc(100% / 3);
    text-align:center;
}
.mainmenuOuter li a{
    color:#fff;
    font-family: 'M PLUS 1p', sans-serif;
    font-size:30px;
    display:block;
    position:relative;
    padding:10px 0 30px;
    border-left:1px dotted #fff;
    background-color: rgba(255,255,255,0);
    transition: all 0.2s linear;
}
.mainmenuOuter li:last-child a{
    border-right:1px dotted #fff;
}
.mainmenuOuter li a:hover{
    text-decoration:none;
    background-color: rgba(255,255,255,0.2);
}
.mainmenuOuter li a:after{
    content:url(images/item_arrow_b.png);
    position: absolute;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
}

@media only screen and (max-width: 868px) {
.mainmenuOuter li a{
    font-size:21px;
}
}
@media only screen and (max-width: 568px) {
.mainmenuOuter li a{
    font-size:16px;
}
}
@media only screen and (max-width: 468px) {
.mainmenuOuter li{
    width:100%;
}
.mainmenuOuter li a{
    font-size:16px;
    border-left:none;
    border-bottom:1px dotted #fff;
}
.mainmenuOuter li:last-child a{
    border-right:none;
    border-bottom:none;
}
}




.outerWhite{
    padding:15px 0 60px;
    background-color:#fff;
}
.outerColor{
    padding:15px 0 60px;
    background-color: #fdefe8;
}
.prelude{
    text-align:center;
    padding:30px 0;
}
.prelude p{
    margin:10px auto;
    display: inline-block;
    text-align: left;
}
.introFirst{
    font-size: 32px;
    font-weight: bold;
    padding: 10px 0 30px;
}

.baseImage{
    text-align:center;
}


.baseTitle{
    text-align: center;
    padding: 60px 0 30px;
}
.baseTitle h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    color: #754c24;
    margin:0;
    font-size: 30px;
    padding:7px;
    border-bottom: 1px solid #754c24;
}
/*
.baseTitle h3:before,
.baseTitle h3:after {
    content: "";
    height:1px;
    flex:1 0 auto;
    background-color:#754c24;
}
.baseTitle h3:before {
    margin-right: 1rem;
}
.baseTitle h3:after {
    margin-left: 1rem;
}*/

.calendarImages{}
.calendarImages ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.calendarImages ul li{
    width:calc(100% / 4);
}
.calendarImages ul li img{
    max-width:calc(350px);
    width: 100%;
}
@media only screen and (max-width: 678px) {
.calendarImages ul li{
    width:calc(100% / 2);
}
}

.themeList{
    margin-top: 30px;
}
.themeList dl{
    display: flex;
    flex-wrap: wrap;
}
.themeList dt{
    background: #8c6239;
    color:#fff;
    width:180px;
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border-radius:20px;
    margin-top: 10px;
}
.themeList dd{
    width:calc(100% - 180px);
    padding: 15px;
}
.themeList ul{
    margin:0 0 0 0;
}
.themeList li{
    padding:5px;
    margin:0 0 0 1em;
    text-indent:-1em;
}
.entryDate{
    font-size:1.5em;
    font-weight:bold;
}

@media only screen and (max-width: 568px) {
.themeList dt{
    width:100%;
}
.themeList dd{
    width:100%;
}
}


.privacyOuter h4{
    font-size:21px;
    text-align:center;s
}
.pBoxOuter{
    background-color:#fff;
    border:1px solid #b3b3b3;
    padding:35px;
    margin-bottom:20px;
}
.pBoxInner{
    background-color:#fff;
    border:1px solid #b3b3b3;
    padding:35px;
}

.pBoxInner ul{
    margin:0 0 0 0;
}
.pBoxInner li{
    padding:5px;
    margin:0 0 0 1em;
    text-indent:-1em;
}

@media only screen and (max-width: 768px) {
.pBoxOuter,
.pBoxInner{
    padding:17px;
}
}

.toForm{
    text-align:center;
}
.toForm dl{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.toForm dt{
    width: 50px;
}
.toForm dt input{
    transform: scale(3);
    padding:10px;
}
.toForm dd{
    width: calc(100% - 50px);
    color:#4d4d4d;
    font-size:24px;
    margin:0;
    text-align:left;
}

.toForm input[type="submit"]{
background: rgb(247,190,130);
background: -moz-linear-gradient(left,  rgba(247,190,130,1) 0%, rgba(230,40,109,1) 100%);
background: -webkit-linear-gradient(left,  rgba(247,190,130,1) 0%,rgba(230,40,109,1) 100%);
background: linear-gradient(to right,  rgba(247,190,130,1) 0%,rgba(230,40,109,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7be82', endColorstr='#e6286d',GradientType=1 );

    color: #fff;
    border: none;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    font-size: 36px;
    font-weight: BOLD;
    padding: 13px 35px;
    border-radius: 20px;
    transition: all 0.2s linear;
}
.toForm input[type="submit"]:disabled {
    background: rgb(145,145,145);
    background: -moz-linear-gradient(left, rgba(145,145,145,1) 0%, rgba(94,94,94,1) 100%);
    background: -webkit-linear-gradient(left, rgba(145,145,145,1) 0%,rgba(94,94,94,1) 100%);
    background: linear-gradient(to right, rgba(145,145,145,1) 0%,rgba(94,94,94,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#5e5e5e',GradientType=1 );
}


.footerInfo{
    text-align:center;
}
.footerInfo h4{
    font-size:24px;
    color:#4d4d4d;
    font-weight:bold;
    margin-bottom:20px;
}
.footerInfo p{
    font-size:18px;
    color:#4d4d4d;
}
.footerInfo ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom:20px;
}
.footerInfo li{
    padding:15px;
}

.outerGrada{
    background: rgb(76,76,76);
}
.copyright span{
    color:#fff;
    display: BLOCK;
    width:100%;
    padding:15px 0;
}

.footerLogo{
    text-align:right;
    padding:15px 0;
}
@media only screen and (max-width: 992px) {
.copyright span{
    text-align:center;
}

.footerLogo{
    text-align:center;
}
}


/*form*/
.formTitle h2{
    color:#fff;
    font-size:42px;
    padding:20px;
    text-align:center;
    font-weight:bold;
}

@media only screen and (max-width: 992px) {
.formTitle h2{
    font-size: 5vw;
}
}

.formHead{
    text-align:center;
    padding:50px 0;
}
.formHead .need{
    color:red;
}

.formName{
    background-color:#cfdee2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 47px;
    margin-bottom: 10px;
    padding:0 15px;
    border-radius:6px;
    position:relative;
}
.formName h3{
    font-size:18px;
    margin:0;
}
.formName .need{
    color:red;
    position:absolute;
    right:10px;
}

.inputArea{
    margin-bottom: 10px;
}
.inputArea textarea,
.inputArea input[type="text"]{
    border:1px solid #cfdee2;
    border-radius:6px;
    width:100%;
    padding: 10.5px;
}
.inputArea select{
    border:1px solid #cfdee2;
    border-radius:6px;
    width:100%;
    padding: 10.5px;
}
.inputArea input[type="button"]{
    border:1px solid #cfdee2;
    border-radius:6px;
    width:100%;
    padding: 10.5px;
}

.inputTips{
    margin-bottom: 10px;
    font-size:14px;
}
.inputTips span{}
.inputTips p{
    margin:0;
}


@media only screen and (max-width: 992px) {
.formName{
    margin-top:15px;
}
}




/*end*/
.endMessage{
    background-color: #fff;
    max-width: 650px;
    margin: 45px auto 0;
    text-align: center;
    line-height: 2em;
    padding: 30px 5px;
    border: dashed 1px #754c24;
}
@media only screen and (max-width: 678px) {
.endMessage{
    margin: 45px 10px 0;
}
}



/*result*/

.resultInner{
    padding:30px 15px;
}
.resultComment{
    max-width:1080px;
    margin:0 auto;
    padding:30px;
    line-height:2.3em;
}
.resultBoxOuter{
    padding:0 15px;
}
.resultHead{
    text-align:center;
    margin-top:60px;
}
.resultBox{
    border:1px solid #808080;
    padding:10px;
    max-width:1120px;
    margin:0 auto 30px;
    text-align:center;
}
.resultBox h3{
    margin:10px 0;
    font-size: 28px;
}
.resultBox p{
    margin:0 0 10px;
    font-size: 21px;
}

@media only screen and (max-width: 992px) {
.resultBox h3{
    font-size: 21px;
}
.resultBox p{
    font-size: 16px;
}
}

.btn-primary {
    color: #000!important;
    background-color: #cccccc!important;
    border-color: #cccccc!important;
}