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

#contents {
padding-top: 0;
padding-bottom: 0;
}

/* 中身-モバイルファースト======================================================================================================== */
#movie{
position: fixed;
z-index: -10;
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
#movie #video {
position: absolute;
z-index: -2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}

#container{
padding-top: 100vh;
}
#contents{
background-color: #FFF;
}

#logo_100th{
background-color:rgba(255,255,255,0.7);
background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%);
background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%);
width: 100%;
height: 100vh;
position: relative;
}
#logo_100th .contents_size{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
margin: auto;
}
#logo_100th .contents_size .logo img{
width: 40vw;
}
#logo_100th .contents_size .text p{
margin-top: 20px;
}

#concept{
}
#concept .inner{
background-color: rgba(206,229,205,0.8);
padding: 10vw 0;
}
#concept .photo{
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
}
#concept .photo img{
}
#concept .text p{
color: #3ba042;
margin-bottom: 20px;
}




.common_title{
text-align: center;
margin-bottom: 20px;
}
.common_title img{
height: 20px;
}
.common_title span{
display: block;
font-size: 16px;
color: #3ba042;
margin-top: 5px;
}


#topics{
background-color: #EEE;
padding: 10vw 0;
}
#topics dl{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
#topics dl:first-child{
margin-top: 0px;
}
#topics dt{
display: inline-block;
color: #888;
border-bottom: 1px solid #888;
}
#topics dd{
height: 120px;
overflow: hidden;
}
#topics dd ul{
height: 120px;
overflow: auto;
}
#topics dd ul li{
margin: 0 0 20px;
}
#topics dd ul li em{
display: block;
font-weight: bold;
}
#topics dd ul li p{
}


#message{
overflow: hidden;
}
#message .photo{
width: 70%;
text-align: center;
margin: 0 auto 20px;
}
#message .text{
}
#message .text p{
color: #3ba042;
margin-bottom: 20px;
}


#history{
}
#history .common_title span{
color: #FFF;
}
#history .text{
background-color: #362317;
color: #FFF;
padding: 10vw 4vw;
}
#history .text p{
margin-bottom: 20px;
text-align: left;
}
#history .common_btn a{
color: #FFF;
border-color: #FFF;
}


#campaign{
background-image: url("../images/campaign_photo.jpg");
background-image: -webkit-image-set(url("../images/campaign_photo.jpg") 1x, url("../images/campaign_photo@2x.jpg") 2x);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 10vw 4vw;
}
#campaign .text{
padding: 10vw 4vw;
background-color: rgba(59,160,66,0.8);
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
}
#campaign .common_title img{
height: 60px;
}
#campaign .common_title span{
color: #FFF;
margin-top: 10px;
}
#campaign .text p{
color: #FFF;
margin-bottom: 20px;
text-align: left;
}
#campaign .common_btn a{
color: #FFF;
border-color: #FFF;
}

#gallery{
background-color: #111;
}
#gallery .inner{
background-image: url("../images/gallery_photo.jpg");
background-image: -webkit-image-set(url(../images/gallery_photo.jpg) 1x, url(../images/gallery_photo@2x.jpg) 2x);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 40vw 8vw;
}
#gallery em{
display: block;
margin-bottom: 20px;
}
#gallery .common_btn a{
color: #FFF;
border-color: #FFF;
}


/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#logo_100th img{
width: auto;
height: 200px;
}

#concept .inner{
padding: 5% 0;
}
#concept .contents_size{
display: flex;
flex-direction:row-reverse;
justify-content: space-between;
}
#concept .photo{
width: 60%;
margin-bottom: 0px;
}
#concept .photo img{
max-width: 100%;
height: auto;
}
#concept .text{
width: 40%;
}
#concept .text .common_title{
margin-bottom: 20px;
}
#concept .text p{
text-align: center;
}


.common_title{
margin-bottom: 40px;
}
.common_title img{
height: 30px;
}
.common_title span{
font-size: 24px;
margin-top: 20px;
}

#topics{
padding: 80px 0;
}
#topics .contents_size{
}
#topics dl{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
margin-top: 40px;
}
#topics dt{
width: 160px;
border-bottom: none;
text-align: right;
padding: 0 40px 0 0;
}
#topics dd{
width: 700px;
padding: 0 0 0 40px;
border-left: 1px solid #888;
}
#topics dd ul li{
display: flex;
}
#topics dd ul li em{
white-space: nowrap;
margin-right: 10px;
}
#topics dd ul li p{
flex: 1;
}

#message{
width: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
#message .photo{
width: auto;
margin: 0;
}
#message .text{
width: 320px;
margin-right: 40px;
}


#history .inner{
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
#history .photo{
flex: 1;
background-image: url("../images/history_photo.jpg");
background-image: -webkit-image-set(url("../images/history_photo.jpg") 1x, url("../images/history_photo@2x.jpg") 2x);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#history .photo img{
display: none;
}
#history .text{
width: 30%;
min-width: 400px;
padding: 100px 40px;
}

#campaign{
padding: 80px 0;
}
#campaign .text{
width: 700px;
margin: 0 auto;
padding: 40px;
background-color: rgba(59,160,66,0.8);
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
}
#campaign .common_title img{
height: 90px;
}
#campaign .common_title span{
margin-top: 20px;
}
#campaign .common_btn a:hover{
background-color: #FFF;
color: #3ba042;
}

#gallery .inner{
padding: 200px 0;
}
#gallery em{
margin-bottom: 60px;
}
#gallery em img{
height: 90px;
}
#gallery .common_btn a{
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
}



}


@media screen and (min-width:681px) {
	.sp9{
		display: none;
	}
}
@media screen and (max-width:680px) {
	.pc9{
		display: none;
	}
}
