.darkmode_btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 60px; height: 60px; background: #fff; border: none; border-radius: 500px; border: 1px solid #ddd; color: #666; font-size: 20px; font-weight: 500; }
.dark-mode .darkmode_btn { background-color: #2a2a2a; border: 1px solid #444 !important; color: #e0e0e0; }
.darkmode_btn i { color: #5eaf49; font-size: 30px; font-weight:800; }

.wrap { position: relative; width: 560px; max-width: 100%; margin: 0 auto; }

/* head */
.head { position: fixed; top: 0px; left: calc(50% - 280px); z-index: 99; display: flex; flex-wrap: wrap; align-items: center; height: 50px; background: #fff; }
.dark-mode .head { background: #121212; }
.logo { display: inline-flex; margin-left: 2%; }
.logo a { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 40px; height: 40px; background: url('../image/top/logo_small.png') center left no-repeat; background-size: 40px auto; }
.dark-mode .logo a { background: url('../image/top/logo_wh.png') center left no-repeat; background-size: 40px; }

.head_sns { position: absolute; top: 0; right: 60px; height: 100%; display: flex; flex-wrap: wrap; align-items: center; }
.head_sns_list { display: flex; justify-content: flex-end; }
.head_sns_list li { margin: 0 5px;}
.head_sns_list li img{width:40px; height:40px;}

/*  BURGER */
.burger { position: absolute; top: 15px; right: 4%; z-index: 1000; text-align: center; margin-left: 0px; margin-top: 0px; background: transparent; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.burger.burger-close { display: none; }
.burger.burger-close.clicked { display:inline-block; right: 5%; }

.burger span { position: relative; margin-top: 9px; margin-bottom: 9px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.burger span, .burger span::before, .burger span::after { display: block; width: 25px; height: 3px; background-color: #000; outline: 1px solid transparent; border-radius: 3px;
	-webkit-transition-property: background-color, -webkit-transform;
	-moz-transition-property: background-color, -moz-transform;
	-o-transition-property: background-color, -o-transform;
	transition-property: background-color, transform;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.burger span::before, .burger span::after { position: absolute; content: ""; }
.burger span::before { top: -8px; width: 50%; }
.burger span::after { top: 8px; right: 0; width: 50%; }

.burger.clicked span { background-color: transparent; }

.burger.clicked span::before {
	-webkit-transform: translateY(9px) rotate(45deg);
	-moz-transform: translateY(9px) rotate(45deg);
	-ms-transform: translateY(9px) rotate(45deg);
	-o-transform: translateY(9px) rotate(45deg);
	transform: translateY(9px) rotate(45deg);
}

.burger.clicked span::after {
	-webkit-transform: translateY(-9px) rotate(-45deg);
	-moz-transform: translateY(-9px) rotate(-45deg);
	-ms-transform: translateY(-9px) rotate(-45deg);
	-o-transform: translateY(-9px) rotate(-45deg);
	transform: translateY(-9px) rotate(-45deg);
}

.burger.clicked span:before, .burger.clicked span:after { width: 100%; height: 3px; }
.burger.clicked span:before { top: -9px; }
.burger.clicked span:after { top: 9px; }
.burger:hover { cursor: pointer; }

/*  NAV
========================================== */

nav.allmenu { position: fixed; z-index: 9999; top: 0; right: calc(50% - 280px); max-width: 50%; width: 210px; height: auto; padding: 80px 0px 30px; background: #fff; border-radius: 10px 0 10px 10px; display: none; }

nav.allmenu.show { display: block; }
nav.allmenu.show ul.main li { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); opacity: 1; }
nav.allmenu.show ul.main li:nth-child(1) { transition-delay: 0.15s; }
nav.allmenu.show ul.main li:nth-child(2) { transition-delay: 0.3s; }
nav.allmenu.show ul.main li:nth-child(3) { transition-delay: 0.45s; }
nav.allmenu.show ul.main li:nth-child(4) { transition-delay: 0.6s; }
nav.allmenu.show ul.main li:nth-child(5) { transition-delay: 0.75s; }
nav.allmenu.show ul.main li:nth-child(6) { transition-delay: 0.9s; }
nav.allmenu.show ul.main li:nth-child(7) { transition-delay: 1.05s; }
nav.allmenu.show ul.main li:nth-child(8) { transition-delay: 1.2s; }
nav.allmenu.show ul.main li:nth-child(9) { transition-delay: 1.35s; }

nav.allmenu ul.main > li { margin-bottom: 20px; }
nav.allmenu ul.main > li > a { display: block; text-align: right; padding: 0 5%; font-size: 1.5em; font-weight: 800; }
nav.allmenu ul.main > li > a:before { content:'+'; display: inline-block; margin-right: 5px; }
nav.allmenu ul.main > li > a.active:before { content:'-'; }

.overlay { position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; transition: all 0.3s ease-in-out; background: #000; opacity: 0; visibility: hidden; }
.overlay.show { opacity: 0.6; visibility: visible; }

#accordian li.active ul { display: block; }

#accordian ul ul { display: none; margin-top: 10px; }
#accordian ul ul li { margin-bottom:10px; }
#accordian ul ul li:last-child { margin-bottom:0px; }
#accordian ul ul li a { display: block; text-align: right; padding: 0 5%; color: #444; font-size: 1.4em; font-weight: 500; text-decoration: none; transition: all 0.15s; }
#accordian ul ul li a:hover { text-decoration: underline; }

.sns_list { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 5% 0; padding-top: 20px; border-top: 1px solid #ddd; }
.sns_list li { flex: 1; }
.sns_list li a img { max-width: 100%; }

/* fixed_menu */
.fixed_menu { position: fixed; left: calc(50% - 280px); bottom: 0px; z-index: 99; width: 560px; height: 60px; background: #fff; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1); }
.dark-mode .fixed_menu { background: #222; }
.fixed_menu ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; }
.fixed_menu ul li { position: relative; flex:1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; height: 100%; }
.fixed_menu ul li:hover:after, .fixed_menu ul li.active:after {content:'';position: absolute;left: calc(50% - 5px);top: -5px;width: 10px;height: 10px;background: #5eaf49;border-radius: 10px;}
.fixed_menu ul li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; color: #aaa; font-size: 16px; font-weight: 600; }
.fixed_menu ul li a:hover, .fixed_menu ul li.active a { color: #222; }
.dark-mode .fixed_menu ul li a:hover, .dark-mode .fixed_menu ul li.active a { color: #fff; }

/* footer */
.footer { text-align: center; padding: 20px 0 50px; }
.ft_logo { margin-bottom: 15px; opacity: 0.5; }
.ft_logo a { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 72px; height: 35px; background: url('../image/footer/ft_logo.png') center left no-repeat; }
.dark-mode .ft_logo a { background: url('../image/footer/ft_logo_wh.png') center left no-repeat; }
.footer p { word-break: keep-all; opacity: 0.5; }

/* main */
.swiper { width: 100%; height: 100%; }
.swiper-slide { display: flex; justify-content: center; align-items: center; text-align: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.main_vis { position: relative; width: 100%; margin-top: 50px; }

.main_con {  }
.main_con_title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 10px 0; }
.main_con_title h3 { display: flex; flex-wrap: wrap; align-items: center; font-size: 20px; }
.main_con_title h3 img { margin-right: 10px; }
.main_con_title a.more { display: inline-flex; flex-wrap: wrap; align-items: center; color: #888; font-weight: 800; }
.main_con_title a.more i { margin-left: 10px; font-weight: bold; }

.main_con01_list { display: flex; flex-wrap: wrap; gap: 2%; }
.main_con01_inr { width: 32%;}

.main_con01_list .swiper-slide { overflow: hidden; }
.main_con01_list .empty_li {  }
.main_con01_list .swiper-slide:after { content: ""; display: block; padding-bottom: 100%; }
.main_con01_list .swiper-slide .lt_img { overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 0; width: 100%; height: 100%;}

/*.movie_lt01, .movie_lt02, .movie_lt03 { padding-bottom: 20px; }*/
.main_con01_inr .swiper-horizontal > .swiper-pagination-bullets, .main_con01_inr .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 0px; }

.main_con01_inr .swiper-pagination-bullet { width: 7px; height: 7px; background: #fff; }
.main_con01_inr .swiper-pagination-bullet-active { background: #fff; }

/* sub */
.sub_vis { position: relative; height: 120px; margin-bottom: 10px; background: #222; }

.sidebar { margin: 10px auto 20px; }
.sidebar_inr { display: flex; flex-wrap: wrap; border-bottom: 1px solid #ddd; }
.sidebar_inr li { position: relative; border: 1px solid #ddd; border-bottom: none; border-left: none; border-radius: 5px 5px 0 0; }
.sidebar_inr li:first-child { border-left: 1px solid #ddd; }
.sidebar_inr li.active:after { content:''; position: absolute; left: 0px; bottom: -1px; width: 100%; height: 1px; background: #fff; z-index: 96; }
.sidebar_inr li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; width: auto; height: 35px; padding: 0 15px; font-size: 1.1em; font-weight: 600; letter-spacing: -0.03em; opacity: 0.6; }
.sidebar_inr li.active a { opacity: 1; }

.sub_contents { padding: 0px 10px; line-height: 1.6; }

.sub_title { text-align: center; margin-bottom: 30px; }
.sub_title h2 { font-size: 2em; }

#sub_page h3 { position: relative; margin-bottom: 20px; padding-left: 15px; font-size: 1.5em; letter-spacing: -0.03em; line-height: 1; }
#sub_page h3:after { content:''; position: absolute; left: 0px; top: 0px; width: 7px; height: 7px; border-radius: 500px; background: #369244; }

.subpage_inr { margin-bottom: 50px; }
.subpage_inr:last-child { margin-bottom: 0px; }

.joyfulchurch_top { text-align: center; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ddd; }
.joyfulchurch_top h2 { margin-bottom: 20px; font-size: 2em; font-weight: 800; line-height: 1; }
.joyfulchurch_top h4 { margin-bottom: 20px; font-size: 1.5em; font-weight: 600; line-height: 1.3; word-break: keep-all; }
.joyfulchurch_top p { line-height: 1.7; word-break: keep-all; }

.people_list { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.people_list li { display: flex; flex-wrap: wrap; margin-bottom: 30px; }
.people_list.people_list_top li, .people_list li:last-child { margin-bottom: 0px; }
.people_list li .imgbox { width: 160px; }
.people_list li .imgbox img { max-width: 100%; border-radius: 5px; }
.people_list li .textbox { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; width: calc(100% - 160px); padding-left: 30px; }
.people_list li .textbox .name { text-align: center; margin-bottom: 15px; font-size: 1.3em; font-weight: 700; line-height: 1; }
.people_list li .textbox .name span { display: block; margin-top: 10px; font-size: 0.8em; font-weight: 400; }
.people_list li .textbox .people_info { text-align: center; margin-bottom: 10px; line-height: 1.3; }
.people_list li .textbox .people_info a { color: #369244; }
.people_text { text-align: center; margin-bottom: 50px; }

.place_table01 { border-top: 1px solid #369244; }
.place_table01 th, .place_table01 td { text-align: center; padding: 10px 10px; border-bottom: 1px solid rgba(67, 182, 73, 0.2); word-break: break-word; }
.place_table01 thead th { height: 50px; background: rgba(67, 182, 73, 0.1); }
.place_table01 tbody th {  }
.place_table01 tbody td {  }
.place_table01 a { color: #369244; }

.offering_inr { text-align: center; margin-bottom:20px; padding: 30px; background: rgba(67, 182, 73, 0.05); border: 1px solid rgba(67, 182, 73, 0.5); border-radius: 5px; }
.offering_inr:last-child { margin-bottom:0px; }
.offering_inr h4 { text-align: center; margin-bottom: 10px; font-size: 1.4em; font-weight: 500; }
.offering_inr h4 strong { color: rgb(67, 182, 73); font-weight: 700; }
.offering_inr .offering_textbox { text-align: center; margin-bottom: 20px; word-break: keep-all; }
.offering_inr .offering_btn { display: inline-flex; flex-wrap: wrap; margin-top: 20px; color: #ff6600; font-size: 1.1em; font-weight: 600; }
.offering_list li { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.offering_list li.align_L { justify-content: flex-start; text-align: left; }
.offering_list li strong { margin-right: 5px; }

.worship01_info { text-align: center; margin-top: 30px; }
.worship01_info .worship01_title { margin-bottom: 20px; font-size: 1.8em; font-weight: 300; }
.worship01_info .worship01_title strong { font-weight: 700; }
.worship01_info .worship01_timebox { margin-bottom: 20px; padding: 30px; background: rgba(67, 182, 73, 0.05); border: 1px solid rgba(67, 182, 73, 0.5); border-radius: 5px; font-size: 1.3em; font-weight: 300; }
.worship01_info .worship01_timebox .worship01_time { margin-top: 5px; font-size: 1.2em; letter-spacing: 0.02em; }
.worship01_info .worship01_timebox .worship01_time .stxt { font-size: 0.8em; opacity: 0.7; }
.worship01_info .youtube_btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 40px; padding: 0 20px; background: #ff0033; border: 1px solid #cf0029; border-radius: 3px; color: #fff; font-size: 1.1em; font-weight: 600; }
.worship01_info .youtube_btn i.xi-youtube-play { margin-right: 5px; font-size: 1.5em; }
.worship01_info p { margin-top: 20px; font-size: 1.1em; }
.worship01_info p a { color: #ff6600; font-weight: 600; }

.missionary_list { display: flex; flex-wrap: wrap; }
.missionary_list li { display: flex; flex-wrap: wrap; }
.missionary_list li .imgbox { width: 160px; }
.missionary_list li .imgbox img { max-width: 100%; border-radius: 5px; }
.missionary_list li .textbox { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; text-align: left; width: calc(100% - 160px); padding-left: 30px; }
.missionary_list li .textbox .name { margin-bottom: 15px; font-size: 1.3em; font-weight: 700; line-height: 1; }
.missionary_list li .textbox .name span { display: block; margin-top: 10px; font-size: 0.8em; font-weight: 400; }
.missionary_list li .textbox .people_info { margin-bottom: 10px; line-height: 1.3; }