@charset "UTF-8";
.pc { display: block; }
.sp { display: none; }
[data-color="orenge"]{ color: #ec6618; }
[data-ruby] { position: relative; }
[data-ruby]::before { content: attr(data-ruby); position: absolute;   top: -1.8em; left: 0.8em; right: 0; margin: auto; font-size: 0.5em; }

#event p { padding: 0!important; }
#event p.annotation { font-size: 14px; margin-bottom: 10px; line-height: 1.6; }
#event p.small { font-size: 11px; line-height: 1.5; }
#event p.head_line { font-size: 20px; padding:0 ; margin-bottom: 10px; text-align: center; }
#event h1 { position: relative; font-size: 30px; line-height: 1.3; margin-bottom: 30px; text-align: center; background: #fff4ed; padding: 20px; }
#event h1::after { position: absolute; content: ''; background: url("../images/event/hukidasi_himitsu.png")no-repeat; background-size: contain; width: 100px; height: 70px; top: -10px; transform: rotate(10deg); }
#event h2 { font-size: 55px; line-height: 1.3; margin-bottom: 10px; }
#event .h2_sub { font-size: 24px; line-height: 1.3; color: #009d8e; }
#event h3 { font-size: 28px; line-height: 1.3; margin-bottom: 15px;  }
#event .gmap iframe { width: 100%; height: 500px; }
#event .ttl_area ul { display: flex; flex-wrap: wrap; margin-bottom: 10px; justify-content: center; }
#event .ttl_area ul li { font-size: 13px; background: #009d8e; color: #fff; padding: 5px 15px; border-radius: 3px; }
#event .ttl_area ul li:not(:last-child) { margin-right: 5px; }
#event .ttl_area span.yoyaku { background: #ec6618; color: #fff; padding: 5px 10px; border-radius: 3px; font-size: 16px; vertical-align: 4px; margin-left: 10px; }
#event .date { font-size: 25px; font-weight: 700; border-bottom: 2px dotted #bbbbbb; display: inline-block; margin-bottom: 5px; }
#event .date span.yobi { font-size: 18px; }
#event .ttl_area { text-align: center; border-radius: 5px; margin-bottom: 30px; }
#event .ttl_area .map { background: #fff; padding: 10px; max-width: 550px; width: 100%; margin-top: 10px; }

#event .detail { position: relative; border: 2px solid #ec6618; padding: 50px; border-radius: 5px; background: #fff4ed; margin-bottom: 50px }
#event .detail .flex { display: flex; justify-content: space-between; align-items:center; flex-wrap: wrap; margin-bottom: 20px; }
#event .detail .main , #event .detail .madori { width: 48%; }
#event .detail .madori { display: flex; flex-direction: column; }
#event .detail .madori dl { display: flex; flex-wrap: wrap; margin: 10px 0 0; }
#event .detail .madori dl dt { width: 7em; }
#event .detail .madori dl dd { width: calc(100% - 7em); }
#event .detail .point_wrap { background: #fff; padding: 30px; }
#event .detail .point_wrap h4 { position: relative; padding: 0 0 0 38px;  font-size: 18px; font-weight: 600; color: #e89139; margin-bottom: 5px; }
#event .detail .point_wrap h4:after { content: ''; display: block; position: absolute; left: 20px; height: 0; width: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #ffca2c; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#event .detail .point_wrap h4:before { position: absolute; font-family: FontAwesome; content: "\f0eb"; background: #ffca2c; color: #fff; font-weight: 600; font-size: 15px; border-radius: 50%; left: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#event .detail .point_wrap ol { counter-reset: my-counter; list-style: none; padding: 0; margin-bottom: 10px; }
#event .detail .point_wrap li { font-size: 16px; line-height: 1.5; padding-left: 30px; position: relative; }
#event .detail .point_wrap li:before { content: counter(my-counter); counter-increment: my-counter; background-color: #e89139; border: 1px solid; border-radius: 50%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 22px; width: 22px; color: #ffffff; font-size: 85%; line-height: 1; position: absolute; top: 0; left: 0; }
#event .detail p.sub { font-size: 14px; }
#event .ribbon { display: inline-block; position: absolute; padding: 4px 0; right: -21px; top: 10px; width: 160px; text-align: center; font-size: 14px; background: #ec6618; color: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#event .ribbon:before, #event .ribbon:after { position: absolute; content: ""; border-top: 4px solid #A20002; border-left: 4px solid transparent; border-right: 4px solid transparent; bottom: -4px; }
#event .ribbon:before { left: 20px; }
#event .ribbon:after { right: 24px; }
#event .label_inner { position: absolute; top: -6px; left: -6px; width: 90px; height: 91px; overflow: hidden; }

#event .man_area { display: flex; justify-content: space-between; align-items: center; background: #e7e7e7; padding: 20px; margin-bottom: 20px; border-radius: 5px; }
#event .txt_wrap .txt_wrap { margin-right: 15px; }
#event .txt_wrap p.department { font-size: 13px; margin-bottom: 12px; }
#event .txt_wrap p.name { font-size: 20px; font-weight: 600; }
#event .txt_wrap span.old { font-size: 14px; }
#event .txt_wrap p.prof { font-size: 13px; line-height: 1.4; }
#event img.man { width: 200px; }
#event .note_area { border: 1px solid #333; padding: 20px; margin-bottom: 100px; clear: both; }
#event .note_area p.ttl { font-size: 18px; font-weight: 700; margin-bottom: 10px; border-bottom: 1px solid #c6c6c6; }
#event p.voice { position: relative; color: #5ab9ff; padding-left: 20px!important; }
#event p.voice:before { font-family: FontAwesome; content: "\f075"; font-weight: 900; position: absolute; font-size: 1em; left: 0; top: 0; color: #5ab9ff; }

#event .greeting { margin-bottom: 30px; }
#event .greeting h3 { text-align: center; }
#event .greeting .img_outer { margin-right: 15px; max-width: 180px; }
#event .greeting .flex { display: flex; }

#event .ura { padding: 50px; background: #f5f0e3; margin-bottom: 50px; }
#event .ura h3 { text-align: center; }
#event .ura_inner { display: flex; justify-content: space-between; align-items:flex-start; }
#event .greeting2 { display: flex; flex-direction: column; width: 60%; }
/*#event .sub_area { display: flex; justify-content: space-between; align-items: center; }*/
#event .greeting2 > p { margin-bottom: 20px; }
#event .sub_area { border: 2px solid #3e5294; padding: 20px; box-sizing: border-box; background: #fff; }
#event .sub_area .flex { display: flex; align-items: center; margin-bottom: 10px; }
#event .sub_area h4 { color: #3e5294; line-height: 1.5; margin-bottom: 10px; }
#event .sub_area .txt_wrap p { font-size: 14px; line-height: 1.5 }
#event .sub_area img.man { max-width: 70px; width: 100%; }

#event .right_area { width: 35%; }
#event .btn_area { margin-top: 30px; }
#event .btn_area .txt { margin-bottom: 5px; font-size: 12px; text-align: center; font-weight: 700; }
#event .btn_area .ttl { font-size: 20px; font-weight: 600; background: #e72418; box-sizing: border-box; color: #fff; border-radius: 3px; padding: 10px; text-decoration: none; width: 100%; display: block; text-align: center; }
#event .btn_area a.ttl span::before { position: absolute; content: ''; display: inline-block; background: url(../common/images/youtube.svg)no-repeat; background-size: contain; width: 20px; height: 20px; bottom: 0px; left: 0; }
#event .btn_area a.ttl span { position: relative; padding-left: 25px; }
#event .btn_area a.ttl:hover { opacity: .5; } 

/*#event .news_area { display: flex; justify-content: space-between; }*/
#event .news_bk p.ttl { font-weight: 700; text-align: center; font-size: 35px; margin-bottom: 20px; line-height: 1.5; }
#event .news_bk span.ttl_sub { font-size: 25px; }
#event .news_inner { display: flex; justify-content: space-around; align-items: flex-start; }
#event .news_bk { position: relative; padding: 40px 30px; border: 2px solid #4196df; border-radius: 5px; background: #f2f9ff; margin-bottom: 40px; }
#event .news_bk::before { content: 'お知らせ1'; position: absolute; width: 100px; height: 100px; background: #4196df; color: #fff; text-align: center; left: -20px; top: -20px; border-radius: 50px; display: flex; align-items: center; justify-content: center; transform: rotate(350deg); }
#event .news_bk:nth-child(2)::before { content: 'お知らせ2'; position: absolute; width: 100px; height: 100px; background: #4196df; color: #fff; text-align: center; left: -20px; top: -20px; border-radius: 50px; display: flex; align-items: center; justify-content: center; transform: rotate(350deg); }
#event .news_inner .txt_area { max-width: calc(100% - 300px); width: 100%; margin-left: 30px; }
#event .news_inner .info { margin-bottom: 20px; padding: 15px 30px; background: #ececec; }
#event .news_inner .info dl { display: flex; flex-wrap: wrap; margin: 10px 0 0; }
#event .news_inner .info dl dt { width: 5em; }
#event .news_inner .info dl dd { width: calc(100% - 5em); }
#event .news_inner p.price { text-align: center; color: #d82d2d; font-weight: 700; font-size:35px; }
#event .news_inner p.price span { font-size: 18px; margin-right: 10px; }
#event .news_inner dl.madori { display: flex; flex-wrap: wrap; margin: 30px 0; }
#event .news_inner dl.madori dt { width: 5em; background: #4196df; color: #fff; text-align: center; margin-bottom: 10px; margin-right: 10px; display: flex; align-items: center; justify-content: center; border-radius: 3px;}
#event .news_inner dl.madori dd { width: calc(95% - 5em); margin-bottom: 10px; }
#event .target { background: #fff; padding: 20px; margin-top: 20px; }
#event .target p.ttl { font-size: 20px; margin-bottom: 10px; font-weight: 700; color: #ec6618; }
#event .target span { display: block; text-align: center; }
#event .news_bk span.nohara { color: #fff; text-align: center; background: #ec6618; padding: 10px 20px; margin-right: 10px; border-radius: 3px; font-size: 18px; vertical-align: 4px; }
#event .target p.check { text-align: center; font-weight: 700; }
#event .target p.check::before { content: ''; display: inline-block; background: url("../images/event/check.png")no-repeat; background-size: contain; width: 17px; height: 17px; bottom: -2px; position: relative; }
#event .news_inner .news_img { width: 45%; }

#event .bnr { max-width: 800px; width: 100%; margin: 0 auto 50px; }
#event .contact_btn a { font-size: 20px; border-radius: 50px; padding: 10px; text-decoration: none; color: #fff; display: block; box-sizing: border-box; max-width: 300px; margin: 0 auto; text-align: center; background: #e89139; border: 2px solid #e89139; font-weight: 700;}
#event .contact_btn a:hover { color: #e89139; background: #fff; border: 2px solid #e89139; }
#event p.end { background: #000000; color: #fff; text-align:center; width: 100%; height: 50px; line-height: 50px; margin-bottom: 20px; font-size: 25px; font-weight: 700; }


@media screen and (max-width: 767px) {
	.pc { display: none; }
	.sp { display: block; }
	#event p.head_line { font-size: 15px; }
	#event h1 { font-size: 16px; padding: 15px 10px; }
	#event h1::after { width: 70px; height: 40px; right: 0; top: -28px; }
	#event h2 { font-size: 30px; }
	#event h3 { font-size: 20px; }
	#event .h2_sub { font-size: 18px; }
	#event .date { font-size: 20px; }
	#event .detail { padding: 45px 20px; }
	#event .detail .flex { display: block; }
	#event .detail .main, #event .detail .madori { width: 100%; margin-bottom: 30px; }
	#event .detail .madori img { margin-bottom: 20px; }
	#event .ura_inner { display: block; }
	#event .greeting2 { width: 100%; margin-bottom: 30px; }
	#event .right_area { width: 100%; }
	#event .mgnauto img { margin: 0 auto; display: block; }
	#event .sub_area .flex { margin-bottom: 20px; }
	#event .news_bk p.ttl { font-size: 20px; }
	#event .news_bk::before , #event .news_bk:nth-child(2)::before { width: 70px; height: 70px; font-size:13px; left: -10px; top: -30px; }
	#event .news_inner { display: block; }
	#event .news_inner .news_img { display: block; margin: 0 auto 20px; text-align: center; }
	#event .news_inner .txt_area { max-width: initial; margin-left: 0; }
	#event .news_inner p.price { font-size: 25px; }
	#event .news_bk span.ttl_sub { font-size: 18px; }
	#event .news_bk span.nohara { padding: 5px 10px; font-size: 12px; vertical-align: 3px; }
	#event .news_inner .info { margin-bottom: 9px; padding: 15px 20px; }
	#event .news_inner dl.madori { margin: 20px 0; }
	#event .news_bk { padding: 30px 20px; }
	#event .detail .point_wrap { padding: 15px; }
	#event .man_area { display: block; } 
	#event .man_area .txt_wrap { margin-bottom: 10px; }
	#event .greeting .flex { display: block; }
	#event .greeting .img_outer { margin: 0 auto 20px; }
	#event .note_area { padding: 15px; margin-bottom: 80px; }
	#event .ura { padding: 20px; }
	#event .detail p.sub { font-size: 11px; }
	#event .sub_area { padding: 15px; }
	
	#event p.end { font-size: 20px; }
}