@charset "UTF-8";

*{margin: 0;padding: 0;}
html {font-family: 'Klee One';}
body {background-color:#fff;color: #000; margin: 0px;padding: 0px;position:relative;overflow-x: hidden;}
#anchor {position: fixed;width: 100%;right: 0px;display: block;bottom: 0px;z-index: 1;}
ul,li{margin: 0px;padding: 0px;list-style-type: none;}
main{display: block;}
.vertical{opacity: 0;transform: translate(0,60px); -webkit-transform: translate(0px,60px);transition: all 1.5s ease-in-out 0s;}
.vertical.dis{opacity: 1.0;transform: translate(0,0); -webkit-transform: translate(0,0);}

header .mv{background-image: url(../images/visual.jpg);background-size: cover;display: flex;align-items: center;justify-content: center;height: 100vh;background-position: center;position: relative;z-index: -1;overflow: hidden;}
header .mv::before{content: "";position: absolute;bottom: -85px;height: 100px;width: 200vw;z-index: -1;background-color: #fff;transform: rotate(-5deg);}
header .mv::after{content: "";position: absolute;bottom: -85px;height: 100px;width: 200vw;z-index: -1;background-color: #fff;transform: rotate(5deg);}
header .mv img{display: block;max-width: 500px;width:80%;height: auto;position: relative;top: -30%;}
header p{max-width: 1200px;margin:50px auto;font-size: 22px;line-height: 50px;text-align: center;}
header p{max-width: 1200px;margin:50px auto;font-size: 22px;line-height: 50px;text-align: center;}
main>section{max-width: 1200px;margin:50px auto 80px;}
main>section img{max-width: 100%;height: auto;display: block;margin: 0 auto 35px;}

article{display: flex;flex-direction: column;align-items: flex-start;}
article section{display: flex;align-items: flex-start;margin-bottom: 120px;}
article section figure{flex-basis: 50%;}
article section figure img{max-width: 100%;height: auto;display: block;margin: 0 auto 35px;}
article section p{font-size: 17px;line-height: 40px;margin: 50px auto 0;background-color: #fff;position: relative;left: -100px;padding: 40px;box-sizing: border-box;flex: 1;}
article section p b{display: table;font-size: 30px;margin-bottom: 50px;position: relative;}
article section p b::after{content: "";position: absolute;border-bottom: 2px solid #ddd;width: 100%;left: 0;bottom: -20px;}
article section p b::before{content: "";position: absolute;border-bottom: 2px solid #000;width: 30px;left: 0;bottom: -20px;z-index: 1;}


article section.od2 figure{order: 2;}
article section.od2 p{order: 1;left: 100px;}

ul.banner{max-width: 1200px;margin: auto;}
ul.banner li{width: 100%;display: flex;justify-content: center;}
ul.banner li a{display: block;}
ul.banner li a img{display: block;width: 100%;}
ul.banner li a:hover{opacity: 0.4;transition: 0.4s ease-in-out;}
#contact{margin: 100px auto 60px;max-width: 1200px;background-color: #f8f8f8;padding-top: 20px;padding-bottom: 60px;}
#contact .chead{margin: 60px auto;}
#contact .chead b{font-size: 30px;display: block;text-align: center;margin-bottom: 80px;}
#contact .chead span{font-size: 22px;display: block;text-align: center;position: relative;margin: auto;margin-bottom: 50px;background-color: #e4e4e4;width: 80%;color: #000;padding: 10px;border-radius: 100px;}
#contact .chead span::after{content: "";position: absolute;background: url("../images/bg.jpg");width: 80%;left: 0;right: 0;margin: auto;top: 50%;height: 40px;z-index: -1;}
#contact .chead a{display: table;margin: auto;text-decoration: none;color: #000;font-size: 45px;}
#contact .chead small{display: block;text-align: center;font-size: 22px;margin-bottom: 70px;}
#contact .privacy{width:50%;margin: auto;border: solid 1px #ccc;box-sizing: border-box;height: 200px;overflow: auto;font-size: 12px;line-height: 18px;padding: 15px;background: #fff;color: #666;}
#contact table.inputf {box-sizing: border-box;width: 80%;border-collapse: separate;border-spacing: 5px;margin:-10px auto 15px;}
#contact table.inputf th {padding: 8px 0px;text-align: left;vertical-align: top;}
#contact table.inputf th span.must {color:#ff0000;font-size: 12px;margin-right: 10px;background: #f8f8f8;box-shadow: none;float: none;display: inline;padding: 0;}
#contact table.inputf td {padding:5px 0px;}
#contact table.inputf td.select br{display: none;}
form#mailformpro input, form#mailformpro textarea {font-size: 16px !important;padding: 10px!important;background: #fff;border: none;}
form#mailformpro input{width: 100%;box-sizing: border-box;font-family: 'Klee One';}
form#mailformpro input[type="checkbox"]{width:inherit;margin: 0px 5px 0px 15px;}
form#mailformpro textarea{width: 100% !important;box-sizing: border-box;font-family: 'Klee One';}
form#mailformpro select {font-size: 16px !important;padding: 3px 5px;font-family: 'Klee One';}
form#mailformpro label.mfp_not_checked {border: none !important;}
#contact table.inputf td.textcen {text-align: center;padding:20px 0px;}
#contact table.inputf td.textcen button {font-size:16px;padding:5px 15px;background-color: #333;color: #fff;border: none;font-family: 'Klee One';}

table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {font-size: 14px !important;}	
div.mfp_buttons {padding: 30px 0px !important;}
div.mfp_buttons button{font-size: 16px !important;padding:5px 15px !important;background-color: #333 !important;color: #fff !important;border: none !important;font-family: 'Klee One' !important;}
div#mfp_overlay_inner {width: 80% !important;}
div#mfp_overlay_inner h4 {padding: 15px 0;}

ul.sns{display: flex;justify-content: center;max-width: 240px;align-items: center;margin:20px auto;}
ul.sns li{width: 33.33%;}
ul.sns li a{display: block;}
ul.sns li a img{display: block;height: auto;}
ul.sns li a :hover{opacity: 0.4;transition: 0.4s ease-in-out;}
footer{background: #000;width: 100%;padding-top:40px;color: #fff;font-size: 16px;line-height: 26px;}
footer img{display: block;margin: auto;height: auto;}
footer p{margin: 15px auto;text-align: center;width: 80%;}
footer p span{margin: 0px 10px;}
footer table{margin: auto;}
footer th{white-space: nowrap;text-align: left;}
footer td{white-space: nowrap;}
footer small{font-size: 10px;text-align: center;padding-bottom: 4px;display: block;}
#anchor a{width: 100%;display: block;}
#anchor a img{width: 100%;display: block;height: auto;}
#anchor a:hover{opacity: 0.4;transition: 0.4s ease-in-out;}

body.thanks header{background: #000;padding: 35px 0px 20px;}
body.thanks header img{display: block;width: inherit;margin: auto;}
body.thanks header p{color: #fff;font-size: 18px;text-align: center;margin: auto;}
body.thanks article{padding: 60px 0px;max-width: 1000px;margin: auto;width: 100%;min-height: 300px;}
body.thanks article b{font-size: 22px;text-align: center;display: block;margin-bottom: 15px;width: 100%;}
body.thanks article p{display: block;text-align: center;width: 100%;font-size: 16px;line-height: 40px;}
body.thanks ul.banner{margin-bottom: 60px;}


.event{margin: 40px auto;width: 80%;padding: 30px 30px  0;box-sizing: border-box;border-radius: 10px;background-color: #fff;}
.event h4{font-size: 40px;text-align: center;margin-bottom: 20px;}
.event h4 br{display: none;}
.event b{display: block;font-size: 22px;}
.event b span{display: table;margin: auto;background: #ddd;padding: 10px 15px;color: #000;}
.event dl{box-sizing: border-box;padding: 20px 0px;display: flex;justify-content: space-between;flex-wrap: wrap;font-size: 18px;}
.event dt{width: 15%;padding: 5px 0px;border-top: 1px dotted #ccc;}
.event dd{width: 85%;padding: 5px 0px;border-top: 1px dotted #ccc;}
.event dt:nth-of-type(1),.event dd:nth-of-type(1){border: none;}
.event p{font-size: 20px;clear: both;margin-bottom: 15px;font-weight: bold;}
.event iframe{margin-top: 15px;width: 107%;margin-left: -3.41%;border: none;display: block;}
.event a{float: right;margin: 0 0 0 40px;}
.event a img{width: 150px;height: auto;display: block;}
.event a img:hover{opacity: 0.4;transition: 0.4s ease-in-out;}
.event small{}

@media all and (max-width:880px) {
.event a{display: block;float: none;margin: auto;}
.event a img:hover{opacity: 1 !important;}
.event a img{max-width: 250px;width: 50%;height: auto;display: block;margin: auto;margin-top: 30px;}
}


@media all and (max-width:750px) {
*{}
header .mv{height: 75vh;}
header p{width: 90%;font-size: 16px;line-height: 32px;text-align: left;}
main>section{width: 100%;margin:40px auto 0px;}
main>section img{max-width: 70%;height: auto;display: block;margin: 0 auto 35px;}

article section{width: 100%;margin:40px auto 60px;display: block;margin-bottom: 0px;}

article section p{font-size: 14px;line-height: 26px;width: 86%;left: 0;padding: 0;}
article section p b{font-size: 22px;}
article section figure{}
article section figure img{}
article section p b::after{}
article section p b::before{}

article section.od2 figure{}
article section.od2 p{left:0px;}

ul.banner{display: flex;justify-content: space-between;width: 70%;margin: auto;flex-direction: column;margin-top: 60px;}
ul.banner li{width: 100%;margin-bottom: 25px;}
#contact{margin: 80px auto 0px;width: 100%;}
#contact .chead b{font-size: 24px;margin: auto;margin-bottom: 60px;width: 90%;}
#contact .chead span{font-size: 20px;margin-bottom: 40px;width: 90%;box-sizing: border-box;}
#contact .chead span::after{width: 90%;height: 30px;}
#contact .chead a{font-size: 32px;}
#contact .chead small{font-size: 16px;margin-bottom: 50px;}
#contact .privacy{width:80%;height: 120px;}
#contact table.inputf {width: 90%;}
#contact table.inputf th {display: block;}
#contact table.inputf th span.must {margin-right: 5px;}
#contact table.inputf td {display: block;}
#contact table.inputf td label {display: block;}
form#mailformpro input{width: 100%;box-sizing: border-box;}
form#mailformpro textarea{width: 100% !important;box-sizing: border-box;}
form#mailformpro select {font-size: 16px !important;padding: 3px 5px;}
#contact table.inputf td.select br{display:block;}
#contact table.inputf td.textcen {text-align: center;padding:20px 0px;}
#contact table.inputf td.textcen button {font-size:16px;padding:5px 10px;}

table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {font-size: 14px !important;display: block !important;width: 100% !important;box-sizing: border-box;}
table#mfp_confirm_table tr td{border-top: none !important;}
div.mfp_buttons {padding: 30px 0px !important;}
div.mfp_buttons button{font-size: 16px !important;padding: 5px 10px !important;}


footer{font-size: 14px;line-height: 24px;}
footer img{width: 90%;max-width: 300px;}
footer table{margin:0 auto 30px;}
footer th{white-space: nowrap;text-align: left;}
footer p{width: 90%;}
footer p span{display: block;margin-bottom: 10px;text-align: center;line-height: 18px;}
#anchor a:hover{opacity: 1;}


body.thanks header{padding: 25px 0px 10px;}
body.thanks header img{width: 90%;max-width: 300px;}
body.thanks header {font-size: 16px}
body.thanks article{padding: 60px 0px;margin: auto;width: 90%;min-height:inherit;}
body.thanks article b{font-size: 20px;text-align: left;}
body.thanks article p{display: block;text-align: left;font-size: 14px;line-height:26px;}
body.thanks ul.banner{margin-bottom: inherit;}


.event{width: 90%;border-radius: 10px;padding: 25px 25px 0;}
.event h4{font-size: 24px;font-weight: bold !important;}
.event h4 br{display: block;}
/*
.event b{font-size: 16px;font-weight: bold !important;padding: 15px;}
.event b span{display: table;font-weight: bold !important;padding: 8px;margin: auto;margin-bottom: 15px;}
.event dl{font-size: 16px;flex-direction: column;font-weight: bold !important;padding: 20px 0px;}
*/
.event b{font-size: 16px;padding: 0px;}
.event b span{display: table;padding: 8px;margin: auto;margin-bottom: 0px;}
.event a img:hover{opacity: 1 !important;}
.event dl{font-size: 16px;flex-direction: column;padding: 0px 0px 20px;}
.event dt{width: 100%;padding: 8px 0px 0px 0px;}
.event dd{width: 100%;padding: 0px 0px 8px 0px;border:none;}
.event dt:nth-of-type(1),.event dd:nth-of-type(1){border: none;}
.event p{font-size: 16px;}
.event iframe{margin-top: 15px;width: calc(100% + 50px);margin-left:-25px;border: none;display: block;}

}