@charset "UTF-8";

/*=============================================
 * reset
 *=============================================*/

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: none;
}
img {
	border: 0;
}
img, input {
	vertical-align: middle;
}
h1, h2, h3, h4, h5, h6, address {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}
table {
	border-spacing: 0;
	border-collapse: collapse;
}
table, caption, th, td {
	font-style: normal;
	font-weight: normal;
}
hr {
	margin: 0;
	padding: 0;
}
iframe {
	margin: 0;
	padding: 0;
	border: 0;
}
form, fieldset, input, button, select, optgroup, option, textarea, label, legend {
	margin: 0;
	padding: 0;
	outline: none;
}
span, em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym, q, br, ins, del, a, img, object {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: inherit;
}



:before,
:after {
	pointer-events: none;
}
* {
	max-height: 1000000px;
}
*:first-child + html img,
* html img {
	vertical-align: top;
}
html,
body {
	color: #010101;
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	font-size: 15px;
	line-height: 1.5em;
	letter-spacing: .05em;
	word-spacing: normal;
	background: #fff;
	background-attachment: fixed;
	min-width: 320px;
	min-height: 100%;
	max-height: 100%;
	text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	/* -webkit-overflow-scrolling: touch; */
}
body > * {
	clear: both;
	position: relative;
}

input,
button,
select,
optgroup,
option,
textarea,
label {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
select,
button,
input:button,
input:submit,
input:reset {
	cursor: pointer;
}
option:disabled {
	display: none;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}
small {
	font-size: smaller;
}
del {
	text-decoration: line-through;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}



/*=============================================
 * .clearfix
 *=============================================*/

.clearfix {
	zoom: 1 !important;
}
.clearfix:after {
	content: "." !important;
	clear: both !important;
	display: block !important;
	height: 0 !important;
	visibility: hidden !important;
}



/*=============================================
 * 
 *=============================================*/

body{
margin:0;
font-family:serif;
color:#000;
background:#F5F2ED;
line-height:1.8;
}


/* container */

.container{
max-width:1100px;
margin:auto;
padding:0 20px;
}


/* header */

.header{
background:#fff;
border-bottom:1px solid #ddd;
}

.header-inner{
max-width:1200px;
margin:auto;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo a{
font-size:26px;
text-decoration:none;
color:#000;
}


/* nav */

.nav ul{
display:flex;
gap:30px;
list-style:none;
padding:0;
margin:0;
}

.nav a{
text-decoration:none;
color:#000;
font-size:14px;
}


/* hamburger */

.hamburger{
display:none;
background:none;
border:none;
width:30px;
cursor:pointer;
position:relative;
z-index:1100;
}

.hamburger span{
display:block;
height:2px;
background:#000;
margin:6px 0;
}


/* page title */

.page-title{
background:#D8D2C8;
padding:120px 20px;
text-align:center;
background: url("../img/kv.jpg") no-repeat center center/cover;
}

.page-title h2{
font-size:36px;
letter-spacing:4px;
color:#fff;
}


/* news list */

.news{
padding:80px 0;
}

.news-card{
display:flex;
gap:30px;
padding:40px 0;
border-bottom:1px solid #ddd;
text-decoration:none;
color:#000;
}

.news-card:hover img{
transform:scale(1.05);
}

.news-img img{
width:260px;
height:170px;
object-fit:cover;

transition:0.4s;
}

.news-body h3{
margin:10px 0;
font-size:20px;
}

.news-body p{
color:#555;
}


/* detail */

.news-detail{
padding:80px 0;
}

.detail-header{
text-align:center;
margin-bottom:40px;
}

.detail-header h1{
font-size:32px;
}

.detail-img img{
width:100%;
max-width:900px;
display:block;
margin:auto;
}

.detail-text{
max-width:700px;
margin:40px auto;
}


/* footer */

.footer{
text-align:center;
padding:40px;
border-top:1px solid #ddd;
}


/* responsive */

@media (max-width:768px){

    .nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#F5F2ED;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:0.3s;
    z-index:1000;
    }

    .nav ul{
    flex-direction:column;
    gap:30px;
    text-align:center;
    }

    .nav a{
    font-size:22px;
    }

    .nav.active{
    opacity:1;
    visibility:visible;
    }

    .hamburger{
    display:block;
    }

    .hamburger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2){
    opacity:0;
    }

    .hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
    }

    .news-card{
    flex-direction:column;
    }

    .news-img img{
    width:100%;
    height:200px;
    }

    .page-title{
    padding:80px 20px;
    }

}



/* news back */

.news-back{
text-align:center;
margin:80px 0 20px;
}

.back-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 28px;
border:1px solid #000;
text-decoration:none;
color:#000;
font-size:14px;
letter-spacing:1px;
transition:0.3s;
}

.back-btn:hover{
background:#000;
color:#fff;
}


/* arrow */
.back-btn .arrow{font-size:16px;transition:0.3s;}
.back-btn:hover .arrow{transform:translateX(-5px);}


.arrow-line{
width:18px;
height:1px;
background:#000;
position:relative;
}

.arrow-line:before{
content:"";
position:absolute;
left:0;
top:-4px;
width:8px;
height:8px;
border-left:1px solid #000;
border-bottom:1px solid #000;
transform:rotate(45deg);
}

.back-btn:hover .arrow-line{background:#fff;}
.back-btn:hover .arrow-line:before{border-left:1px solid #fff; border-bottom:1px solid #fff;}


/* responsive */

@media (max-width:768px){

    .news-back{
    margin:60px 0;
    }

    .back-btn{
    width:100%;
    max-width:280px;
    justify-content:center;
    }

}