@charset "utf-8";
/*
 * 佐世保日豪協会：今のサイト（style.css）の見た目をそのまま引き継いだスタイル。
 * 古いブラウザ向けの記述を整理し、WordPress で書いた記事（ブロック）用の指定を足しています。
 */

/* ---------- Reset (Eric Meyer) ---------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0}
caption,th,td{font-weight:normal;text-align:left}
blockquote:before,blockquote:after,q:before,q:after{content:""}
blockquote,q{quotes:"" ""}
a img{border:0}
figure{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}
strong,b{font-weight:bold}

body{
	color:#555;
	font-family:Lato,"Noto Sans JP","游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height:1.5;
	border-top:5px solid #66ae87;
	background:#fff;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}
html{background:#66ae87}

/* リンク */
a{color:#66ae87;text-decoration:none}
a:hover{color:#789632}
a:focus-visible,button:focus-visible{outline:2px solid #789632;outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:#333;padding:8px 14px}
.skip:focus{left:8px;top:8px}

/* 全体 */
#wrapper{margin:0 auto;padding:0 1%;width:98%;position:relative;display:flow-root}
.inner{margin:0 auto;width:100%}

/* ---------- ヘッダー ---------- */
#header{margin-top:-5px;overflow:hidden}
#header .logo{float:left;padding:24px 0 0}
#header .site-logo{font-size:11px;color:#444;line-height:0}
#header .site-logo img{width:230px;height:auto;max-width:100%}

/* メニュー（スマホのボタン） */
button.menu{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}

/* ---------- 本文の部品（今のサイトのまま） ---------- */
.gridWrapper{padding-bottom:20px;overflow:hidden}
.grid{float:left}
.grid p{padding:5px 0}
section.content{padding:10px 0;margin-bottom:20px;border-radius:6px;overflow:hidden;font-size:14px}
section.content p{margin-bottom:5px}
section.content img{max-width:90%;height:auto}
.alignleft{float:left;clear:left;margin:3px 10px 10px 0}
.alignright{float:right;clear:right;margin:3px 0 10px 10px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

.PAN{clear:both;font-size:15px;width:98%;min-height:25px;line-height:25px}
.TE2 p{clear:both;font-weight:normal;margin:3px 0 0;padding:0 10px 0 17px;font-size:15px;line-height:30px;overflow-wrap:anywhere}
.TE2 hr{clear:both;width:90%;height:10px;margin:0 0 8px 30px;border:0;border-bottom:1px dotted #ddd}
.TE p{font-size:12px;margin:0 0 10px;line-height:15px}
.TE2 img{float:left;margin:10px 0 10px 12px;max-width:100%;height:auto}
.TE2 iframe{max-width:100%}
.TI{font-size:17px;line-height:35px}
.PC{clear:both;width:100%;font-size:15px;text-align:center;margin:10px 0;font-weight:bold}
.TC{width:100%;min-height:30px;clear:both;font-size:15px;text-align:center;margin:0;padding:0}
.DI{float:left;padding:0 0 10px 10px;width:48%}
.IMG{float:left;width:46%;border:1px solid #ddd}
.IMG2{float:left;width:30%;border:1px solid #ddd}
.IMG3{float:left;margin:0 0 10px 13px;width:64%;border:1px solid #ddd}
.IMG4{float:left;margin:0 0 10px 10px;width:94%;border:1px solid #ddd}
.IMG5{float:left;margin:0 auto 10px;width:30%;border:1px solid #ddd}
.IMG6{float:left;margin:30px 0 10px 30px;width:95%;border:1px solid #ddd}
.IMG7{clear:both;float:left;width:200px;height:150px;margin:10px 0 20px;border:1px solid #ddd;object-fit:cover}
.IMG8{width:95%;border:1px solid #ddd;margin:0 auto}
.IMG9{clear:both;margin:0 auto 10px;width:30%;border:1px solid #ddd}
.IMG10{float:left;width:450px;max-width:100%;height:auto;margin:10px 0 10px 12px}
.IMG11{width:80%}
.IMGI{float:right;width:210px;margin:0;padding:0}
.TE2 img.IMG,.TE2 img.IMG2,.TE2 img.IMG5,.TE2 img.IMG9{margin:10px 0 10px 12px}
.YK1{clear:both;float:left;width:23%;margin:3px 0 0;padding:0 10px;font-size:15px;line-height:25px}
.YK2{float:left;width:25%;margin:3px 0 0;padding:0;font-size:15px;line-height:25px}
.YK3{float:left;width:69%;margin:3px 0 0;padding:0;font-size:15px;line-height:25px}
.YK4{float:left;width:44%;margin:3px 0 0 10px;padding:0;font-size:15px;line-height:25px}
.YK3 img{float:none;margin:10px 0}
.TE2 hr+.YK1,.TE2 .YK1+.YK3{margin-top:3px}
.RW{width:33%;float:left}
.RW img{width:90%}
.RW p{width:90%;font-size:12px;line-height:15px}
.S8T{clear:both;float:left;width:15%;font-size:15px;line-height:20px}
.S8P{float:left;width:84%;font-size:15px;margin:0 0 0 2px;line-height:20px}
.Dummy{clear:both;width:100%;height:100px}
.TE2::after,.entry::after,.record::after{content:"";display:block;clear:both}

/* ---------- フッター ---------- */
#footer{clear:both;padding:20px 0;overflow:hidden;background:#66ae87}
#footer hr{clear:both;width:100%;height:15px;margin:0 0 8px;border:0;border-bottom:1px dotted #fff}
#footer a{color:#fff}
#footer a:hover{color:#ccc}
#footer .grid{color:#fff;border:0;background:transparent}
#footer .grid p{padding:0}
#footer .copyright{font-size:13px}
#footer .copyright small{font-size:13px}
#footer .ft-name{font-size:35px}
#footer .ft-name-en{font-size:25px}
.ft-links{overflow:hidden}
.TF{float:left;min-height:30px;font-size:15px;margin:0 25px 0 0;padding:0;line-height:25px}

/* ---------- 追加：見出し・年の切り替え・編集リンクなど ---------- */
.TE2 .ttl{clear:both;min-height:40px;margin:0 0 1.5em;padding:.8em;border-top:3px double #66ae87;border-bottom:1px solid #66ae87;font-size:18px;font-weight:bold;line-height:40px;color:#555}
.TE2 p.ttl{padding:.8em;font-size:18px;line-height:40px}
.TE2 .ttl a{color:inherit}
.TE2 .ttl a:hover{color:#789632}
.TE2 h3,.TE2 .ttl3{clear:both;margin:30px 17px 10px 0;font-size:18px;border-bottom:1px solid #66ae87;border-left:10px solid #66ae87;padding:7px;line-height:30px;font-weight:normal;color:#555}
.TE2 .ttl3 a{color:#555}
.TE2 .ttl3 a:hover{color:#789632}
.TE2 h4{clear:both;font-size:16px;font-weight:bold;margin:20px 0 8px}
.TE2 h4.PC{font-size:15px}
.record{margin-bottom:10px}
.record .entry{display:flow-root}
.year-nav{clear:both;margin:30px 0 0!important;font-size:17px!important;text-align:left}
.year-nav span{margin:0 1em}
.TE2 p.back{margin-top:30px}
.TE2 p.edit{clear:both;font-size:13px;text-align:right}
.TE2 p.edit a{display:inline-block;padding:2px 10px;border:1px solid #66ae87;border-radius:3px}
.region-list{margin:0 0 20px 17px}
.region-list li{display:inline-block;margin:0 14px 8px 0;font-size:15px}
.post-list{margin:0 0 20px 17px}
.post-list li{padding:8px 0;border-bottom:1px dotted #ddd;font-size:15px}
.post-list time{display:inline-block;min-width:9em;color:#888}
.top-text .TI{display:block}
.top-text p.edit{font-size:13px;text-align:right}
.TE li.is-current a{font-weight:bold;color:#789632}

/* WordPress で書いた記事（ブロック・クラシック） */
.entry ul:not([class]),.entry ol:not([class]){margin:8px 0 8px 40px;font-size:15px;line-height:30px}
.entry ul:not([class]){list-style:disc}
.entry ol:not([class]){list-style:decimal}
.entry strong{font-weight:bold}
.entry figure,.entry .wp-block-image{clear:both;margin:10px 10px 10px 17px}
.entry figure img,.entry .wp-block-image img,.entry .wp-block-gallery img{float:none;margin:0}
.entry figcaption{font-size:13px;color:#777;text-align:center;margin-top:4px}
.entry .wp-block-gallery{margin:10px 10px 10px 17px}
.entry .wp-block-columns{margin:10px 10px 10px 17px}
.entry .wp-block-columns p{padding:0}
.entry .wp-block-file,.entry .wp-block-button{margin:10px 17px}
.entry table{border-collapse:collapse;margin:10px 17px;font-size:15px}
.entry td,.entry th{border:1px solid #66ae87;padding:5px 8px}
.entry .wp-block-embed iframe{float:none}

/* ---------- スライド（トップページ） ---------- */
.wideslider{position:relative;width:100%;overflow:hidden;background:#fff;touch-action:pan-y}
.ws-list{display:flex;margin:0;padding:0;will-change:transform}
.ws-list li{flex:0 0 auto;width:var(--ws-w,1000px);line-height:0}
.ws-list img{display:block;width:100%;height:auto;aspect-ratio:1000/350}
.wideslider:not(.is-ready) .ws-list{justify-content:center}
.wideslider:not(.is-ready) .ws-list li:not(:first-child){display:none}
.wideslider:not(.is-ready) .ws-list li{width:min(1000px,100%)}
.ws-side{position:absolute;top:0;bottom:0;z-index:100;cursor:pointer;border:0;padding:0;background:#fff no-repeat center;opacity:.5;transition:opacity .1s}
.ws-side:hover{opacity:.6}
.ws-prev{left:0;background-image:url(../img/prev.jpg);background-position:right center}
.ws-next{right:0;background-image:url(../img/next.jpg);background-position:left center}
.wideslider .pagination{position:absolute;bottom:10px;left:0;width:100%;height:15px;text-align:center;z-index:200;line-height:0}
.wideslider .pagination button{appearance:none;margin:0 5px;width:15px;height:15px;display:inline-block;padding:0;border:0;background:#333;opacity:.5;cursor:pointer;vertical-align:top}
.wideslider .pagination button:hover{opacity:1}
.wideslider .pagination button.active{opacity:1}

/* ---------- パソコン（960px 以上） ---------- */
@media only screen and (min-width:960px){
	#wrapper,.inner{width:940px;padding:0}
	#mainBanner{margin:0 auto 30px;padding:0;width:100%;line-height:0;border-top:3px solid #66ae87;border-bottom:3px solid #66ae87}
	#mainBanner .inner{position:relative}
	.main_en{font-size:13px;display:block;padding:5px 20px 5px 0;text-align:right;line-height:1.2;border-top:5px solid #66ae87}
	#wrapper{padding-bottom:20px}
	nav div.panel{display:block!important;float:right}
	button#menu{display:none}
	nav#mainNav ul{float:right;overflow:hidden}
	nav#mainNav ul li{float:left;text-align:center}
	nav#mainNav ul a{font-size:13px;display:block;padding:15px 10px 35px;line-height:1.2}
	nav#mainNav ul span{font-size:8px;color:#a5a5a5}
	nav#mainNav ul li.active a,nav#mainNav ul a:hover{background:#f5f5f5;color:#789632}
	.gridWrapper{clear:both;width:960px;margin:0 0 0 -20px}
	.grid{float:left;width:298px;margin-left:20px}
	#footer .grid{width:450px}
	.TE{clear:both;margin:20px 0 0;float:left;width:200px}
	.TE2{float:left;margin:20px 0 0 20px;width:700px}
	.TE2--wide{float:none;width:auto;margin:20px 0 0}
	.TE2 h3,.TE2 .ttl3{width:auto}
	.TE li{width:170px;min-height:40px;font-size:15px;padding:0 0 0 10px;border-left:1px solid #66ae87;border-right:1px solid #66ae87;border-bottom:1px solid #66ae87;line-height:40px}
	.TE ul{width:182px;border-top:1px solid #66ae87}
	.TE img{width:200px}
	.OTPT{clear:both;float:left;text-align:right;font-size:15px;font-weight:bold;width:25%;line-height:40px}
	.OTP{float:left;width:70%;font-size:15px;margin:0 0 0 20px;line-height:40px}
	.S2RA{width:71%;float:right;margin:0 0 10px}
	.IMGK{width:23%;float:left;margin:0 10px 10px 30px;padding:0}
	.IMGK img{width:100%;margin:0 0 8px}
	.TO{float:left;width:65%;margin:10px 0 0 30px;padding:0;font-size:15px;line-height:25px}
	.DII{float:left;width:28%;padding:0 10%;margin:20px auto}
	.DII img{width:100%;margin:0 auto 5px}
	.DII p{width:100%;margin:0;padding:0;font-size:13px;line-height:15px}
}

/* ---------- 959px 以下（タブレット・スマホ） ---------- */
@media only screen and (max-width:959px){
	*,*::before,*::after{box-sizing:border-box}
	#mainBanner{display:none}
	#header{padding:10px 0}
	#header .logo,#footer .logo{float:none;text-align:center;padding:10px 5px}
	.main_en{font-size:13px;display:block;padding:0 0 10px;text-align:center;line-height:1.2}
	nav#mainNav{clear:both;width:100%;margin:0 auto;padding:0;background:linear-gradient(to bottom,#789632 0%,#66ae87 100%)}
	nav#mainNav button.menu{width:100%;display:block;height:40px;line-height:40px;font-weight:bold;text-align:left;color:#fff}
	nav#mainNav button.menu span{padding-left:10px}
	nav#mainNav button.menu span::before{content:"→ "}
	nav#mainNav button.menu[aria-expanded=true] span::before{content:"↓ "}
	nav .panel{display:none;width:100%;position:relative;z-index:1}
	nav .panel.is-open{display:block}
	nav#mainNav ul li{float:none;clear:both;width:100%;line-height:1.2}
	nav#mainNav ul li a{display:block;padding:15px 10px;text-align:left;border-bottom:1px dashed #fff;color:#fff;background:#66ae87}
	nav#mainNav ul li a br{display:none}
	nav#mainNav ul li a span{padding-left:10px;font-size:12px}
	nav#mainNav ul li:first-child a{border-top:1px dashed #fff}
	nav#mainNav ul li:last-child a{border:0}
	nav#mainNav ul li.active a,nav#mainNav ul li a:hover{background:#789632}
	.grid{float:left;width:98%;margin:10px 2% 0 0}
	#footer .grid,#footer .grid p{float:none;width:100%;text-align:center;border:0}
	#footer .grid:last-child{padding-top:20px}
	.PAN{display:none}
	.TE{margin:15px 0 0}
	.TE ul{display:flex;flex-wrap:wrap;gap:4px 12px}
	.TE li{font-size:15px;margin:0;padding:0}
	.TE2 .ttl{margin:10px 0 0;padding:0;border-top:0;font-size:18px;line-height:40px}
	.TE2 h3,.TE2 .ttl3{margin:30px 0 10px;font-size:15px}
	.TE2 p{padding:0 4px 0 6px}
	.OTPT{clear:both;width:100%;font-size:15px;font-weight:bold;padding:0 0 0 20px;line-height:25px}
	.OTP{clear:both;width:100%;font-size:15px;padding:0 0 0 20px;line-height:25px}
	.IMGK{display:none}
	.TO{clear:both;width:95%;padding:10px;font-size:15px;line-height:25px}
	.DII{float:left;width:48%;padding:0 4%;margin:20px auto}
	.DII img{width:100%;margin:0 auto 5px}
	.DII p{width:100%;margin:0;padding:0;font-size:13px;line-height:15px}
	.YK1{width:100%;font-weight:bold;padding:0 6px}
	.YK2,.YK3{width:100%;padding:0 6px}
	.YK4{width:100%;margin:0 0 6px;padding:0 6px;color:#777}
	.S8T{width:22%}
	.S8P{width:76%}
	.TE2 img{margin:10px 0 10px 4px}
	.IMG,.IMG2,.IMG5{width:48%;margin-right:2%!important}
	.IMG3,.IMG6{width:96%;margin:10px 0}
	.region-list,.post-list{margin-left:6px}
	.entry figure,.entry .wp-block-image,.entry .wp-block-gallery,.entry .wp-block-columns{margin:10px 4px}
}
@media only screen and (max-width:768px){
	#header{padding-bottom:0}
	#header .logo{padding:10px 5px 20px}
}
@media only screen and (max-width:640px){
	.alignleft,.alignright{float:none;display:block;margin:0 auto 10px}
	.TF{margin-right:16px}
}
@media only screen and (max-width:480px){
	.DII{width:100%;padding:0 6%}
	.S8T{width:100%;font-weight:bold;margin-top:6px}
	.S8P{width:100%}
	#footer .ft-name{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
	.ws-list{transition:none!important}
}

/* ロゴを小さく（1.3.2） */
@media only screen and (max-width:959px){
	#header .site-logo img{width:200px}
}