@charset "UTF-8";
/* CSS Document */


/*header-top*/

#header-top {
	height:910px;
	width:100%;
	position:relative;
	text-align:center;
}

#header-top h1 {
	width:100%;
	position: absolute;
	left:0px;
	top:150px;
	text-align:center;
}

/* contents-top */

#contents-top {
	width: 100%;
}

/*contents01*/

.contents01 {
	width: 100%;
	background-image: url(top/images/contents02-back-pc.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top:110px;
	padding-bottom:110px;
}

.contents01-box {
	width: 850px;
	border: 1px solid #999;
}

.contents01-box .box {
	background-color:rgba(0,0,0,0.6);
	margin:25px;
	padding-top:20px;
}

.contents01-box h3 {
	font-family: "kozuka-gothic-pr6n", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 28px;
	line-height: 1.4;
	font-weight: 200;
	color: #FFF;
	background-image: url(common/images/midashi01.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 70px;
	padding-top: 40px;
	padding-bottom: 40px;
	margin-left: 35px;
}

.contents01-box p {
	font-size: 14px;
	line-height: 2;
	color: #FFF;
	padding-top: 0px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
}


/*contents02*/

.contents02 {
	width: 100%;
	background-image: url(top/images/contents02-back.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
}

.contents02 h3 {
	margin-bottom:30px;
}

.contents02 h3 img {
	height:33px;
	width:auto;
}

/*btn-news*/

.btn-news {
	width:465px;
}

.btn-news p {
	width:220px;
}

.btn-news img {
	width:100%;
	height:auto;
}

.btn-news a:hover {
	opacity:0.75;
}


/*news-box*/
.news-box {
	width: 700px;
}

.news-box .news {
	height: 200px;
	overflow: auto;
	clear: both;
	margin-bottom:40px;
}

.news-box .news div {
	clear: both;
	padding-right: 5px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #e6e6e6;
	padding-top:15px;
	padding-bottom:15px;
}


.news-box .news h5 {
	font-family: YuMincho, '游明朝', "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color: #FFF;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 14px;
	letter-spacing: 0.1em;
	width: 100px;
	vertical-align: top;
	display: inline-block;
	float: left;
	text-align: left;
}

.news-box .news p {
	text-align: left;
	font-size: 14px;
	width: 400px;
	line-height: 1.6em;
	color: #FFF;
	font-weight: bold;
	vertical-align: top;
	display: inline-block;
	float: left;
}

.calendar {
    width: 670px;
    padding: 70px 0px 80px;
}

.calendar p.calendar-title {
    text-align: center;
    color:#fff;
    font-family: "kozuka-gothic-pr6n", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 30px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: flex;
	justify-content: center;
	align-items: center;
}



p.calendar-title::before,
p.calendar-title::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #93278f;
}

p.calendar-title::before {
	margin-right: 20px;
}
p.calendar-title::after {
	margin-left: 20px;
}

p.comment{
    text-align: center;
    color:#fff;
    font-family: "kozuka-gothic-pr6n", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    margin-bottom: 30px;
    display: flex;
	justify-content: center;
	align-items: center;
}



.calendar .box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 60%;
}

.calendar .box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sp-view {
    display: none;
}

html, body {
    height: 100%;
}



@media screen and (min-width: 640px) {

	
.main-img-top {
	min-width: 1280px;
}

.contents-top {
}

	
}

@media screen and (max-width: 640px) {



/*header-top*/

#header-top {
	height: auto;
	width:100%;
	position:relative;
}

/*main-img-top*/

.main-img-top {
	width:100%;
	position:relative;
}

.main-img-top img {
	height: auto;
	width:100%;
}

.main-img-top h2 {
	width:100%;
	position: absolute;
	left:15px;
	bottom:5px;
	text-align:left;
}

.main-img-top h2 img {
	width:auto;
	height:150px;
}

#header-top h3 {
	width:100%;
	background-color:#231815;
	text-align:center;
	padding-top:15px;
	padding-bottom:12px;
}

#header-top h3 img {
	width:92%;
	height:auto;
}

/*contents01*/

.contents01 {
	width: 100%;
	padding-top:20px;
	padding-bottom:20px;
}

.contents01-box {
	width: 90%;
}

.contents01-box .box {
	margin:15px;
	padding-top:15px;
}

.contents01-box h3 {
	font-size: 20px;
	background-size:35px auto;
	padding-left: 40px;
	padding-top: 8px;
	padding-bottom: 15px;
	margin-left: 15px;
	margin-right: 15px;
}

.contents01-box p {
	line-height: 1.8;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}


/*contents02*/

.contents02 {
	padding-top:25px;
	padding-bottom:20px;
}

.contents02 h3 {
	margin-bottom:20px;
}

/*btn-news*/

.btn-news {
	width:70%;
}

.btn-news p {
	width:100%;
	margin-bottom:15px;
}


/*news-box*/
.news-box {
	width: 90%;
}

.news-box .news {
	height: 300px;
	margin-bottom:30px;
}

.news-box .news h5 {
	width: 100%;
	margin-bottom:5px;
}

.news-box .news p {
	width: 100%;
}


.calendar {
     width: 90%;
    padding: 50px 0px 70px;
    }

.calendar .box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 120%;
}
    
 
    p.calendar-title{
        font-size: 20px;
    }

p.comment{
    font-size:18px;
}


    .pc-view {
        display: none;
    }
    .sp-view {
        display: block;
    }

}
/* Main visual: shared logo artwork with localized, selectable copy. */
#header-top > h1.hero-message {
 display: flex; align-items: flex-end; justify-content: center; gap: 40px;
 position: absolute; top: 255px; left: 50%; transform: translateX(-50%);
 width: 1120px; max-width: calc(100% - 80px); margin: 0; text-align: left;
 box-sizing: border-box; z-index: 1;
}
#header-top .hero-logo { display: block; width: 40%; max-width: 440px; height: auto; flex: 0 0 auto; }
#header-top .hero-copy { display: block; flex: 1; min-width: 0; padding-bottom: 12px; }
#header-top .hero-tagline, #header-top .hero-feature {
 display: block; color: #fff; font-family: Arial, sans-serif; font-weight: normal;
 line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
#header-top .hero-tagline { font-size: 29px; margin-bottom: 8px; }
#header-top .hero-feature { font-size: 52px; }
html[lang="en"] #header-top .hero-tagline { font-size: 27px; }
html[lang="en"] #header-top .hero-feature { font-size: 45px; }
@media(max-width: 640px) {
 #header-top .main-img-top > img { width: 100%; height: 560px; object-fit: cover; object-position: 48% center; }
 #header-top > h1.hero-message { top: 105px; width: calc(100% - 40px); max-width: none; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
 #header-top .hero-logo { width: 230px; max-width: 72%; }
 #header-top .hero-copy { flex: none; width: 100%; padding: 0; }
 #header-top .hero-tagline, html[lang="en"] #header-top .hero-tagline { font-size: 18px; }
 #header-top .hero-feature, html[lang="en"] #header-top .hero-feature { font-size: 29px; }
}