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

/* #topmain 編集
----------------------------------------- */
#topmain .btn_wrap {
	position: absolute;
	bottom: 10rem;/* 編集 */
	right: 50%;/* 編集 */
	transform: translateX(50%);/* 加筆 */
	z-index: 2;
}
#topmain .btn_wrap.btn_center .btn {
    border-radius: 2rem;/* 編集 */
    background-color: rgba(0,65,5,0.70);
    width: 25rem;
    height: 10rem;/* 編集 */
}
#topmain .btn_wrap .btn:hover {
    background-color: rgba(68,41,30,1.00);
}
#topmain .btn_wrap.btn_center .btn .icon {/* 削除 */
    margin-left: 5rem;
	display: none;/* 編集 */
}

@media only screen and (max-width: 768px) {
	#topmain .btn_wrap.btn_center {
		bottom: 8rem;/* 編集 */
	}
	#topmain .btn_wrap .btn {
		width: 15rem;
		height: 9rem;
	}
	#topmain .btn_wrap.btn_center .btn .icon {/* 削除 */
		margin-left: 1rem;
	}
}


/* #bg_movie_star　加筆
----------------------------------------- */
#topmain .starcopy_wrap {
	position: absolute;
	top: 25%;
	left: 1rem;
	right: 1rem;
	z-index: 2;
}

@media only screen and (min-width: 768px) {
	#topmain .starcopy_wrap {
		top: 35%;
		left: calc((100vw - 660px) / 2);
		right: calc((100vw - 660px) / 2);
	}
}

#bg_movie_star {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#bg_movie_star::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.00);
    position: absolute;
    top: 0;
    left: 0;
}

#bg_movie_star .video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/* #about 編集
----------------------------------------- */
#about {
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}

#about .inner {
	padding-top: 12rem;
}

#about h1 {
    font-size: 2.0rem;/* 編集 */
    letter-spacing: 0.2em;
    line-height: 4.8rem;/* 編集 */
    font-weight: bold;
    text-align: center;
}
body.en #about h1 {
    letter-spacing: 0.05em;
}
#about h2 {/* 加筆 */
	margin-top: 10rem;
    font-size: 2.0rem;
    letter-spacing: 0.05em;
    line-height: calc(49/28);
    font-weight: bold;
    text-align: center;
}

#about .txt_wrap {
    line-height: calc(40/16);
    letter-spacing: 0.3em;
    text-align: center;
    margin-top: 6rem;
}
body.en #about .txt_wrap {
    letter-spacing: 0.05em;
}

#about .movie_wrap {
    width: 100%;
    max-width: 105rem;/* 編集 */
    margin: auto;
    margin-top: 6rem;
}
#about .movie_wrap .img_wrap {
    width: 100%;
    height: 59rem;/* 編集 */
    background-position: center center;
    background-size: cover;
    border-radius: 0;/* 編集時に消す */
    position: relative;
    transition: all .6s;
}
#about .movie_wrap .img_wrap::before {
    content: '';
    display: block;
    width: 11.7rem;
    height: 11.7rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    background: url("../images/play.svg") no-repeat center center;
    background-size: contain;
}
#about .movie_wrap .img_wrap:hover {
    opacity: .6;
}

#top .modal-video {
    background-color: rgba(0,0,0,0.75);
}

#top .modal-video-close-btn {
    top: 0;
    right: 0;
	transform: translate(30%, -6rem);
}

#top .modal-video-close-btn:before,
#top .modal-video-close-btn:after {
    height: 1px;
}

#top .modal-video-body {
    max-width: 140rem;
}

#about .btn_layout {
    width: 100%;
    max-width: 97rem;
    margin: auto;
    margin-top: 8rem;
    justify-content: center;
}
#about .btn_wrap {
    width: 100%;
    max-width: 30rem;
}
#about .btn_wrap .btn {
    width: 100%;
    height: 10rem;
    position: relative;
}
#about .btn_wrap .btn .txt {
    margin-left: -3rem;
}
#about .btn_wrap .btn .txt span {
    font-size: 1.8rem;
    font-weight: 500;
}
#about .btn_wrap .btn.en .txt span {
    font-size: 2rem;
}
#about .btn_wrap .btn .icon {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0,-50%);
}

#about [class^="about_row"]{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 14rem;
}
#about .about_row_reverse{
	flex-direction: row-reverse;
}
#about [class^="about_col"]{
	width: 50%;
}
#about .about_col_text h3,
#about .about_col_text p{
	width: 100%;
	padding: 0 2rem;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
#about .about_col_text h3{
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 2rem;
}
#about .about_col_text p{
	margin-bottom: 1rem;
}
#about .about_col_text .qu{
	color: #707070;
	font-weight: 700;
}
#about .about_col_img img{
	width: 100%;
	height: 640px;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

@media screen and (max-width: 1280px) {
	#about [class^="about_row"]{
		margin-top: 10rem;
	}
	#about .about_col_img img{
		height: 426px;
	}
}

@media screen and (max-width: 768px) {
	#about {
	}
	#about .inner {
		padding-top: 11rem;/* 編集 */
	}
	#about h1{
    	font-size: 1.8rem;
	}
	#about h2{
		font-size: 1.8rem;
		margin-top: 4rem;
	}
	#about .txt_wrap {
    	font-size: 1.2rem;
    	letter-spacing: 0.1em;
    	margin-top: 4rem;
		text-align: left;
	}
    
	#about .movie_wrap {
    	margin-top: 3rem;
	}
	#about .movie_wrap .img_wrap {
    	width: 100%;
    	height: 22rem;
    	background-position: center center;
    	background-size: cover;
    	border-radius: 0;/* 編集時に消す */
	}
	#about .movie_wrap .img_wrap::before {
    	width: 8rem;
    	height: 8rem;
	}
    
	#about .btn_layout {
    	width: 100%;
    	margin-top: 4rem;
	}
	#about .btn_wrap {
    	width: 100%;
    	max-width: 40rem;
	}
	#about .btn_wrap .btn {
    	height: 10rem;
	}
	#about .btn_wrap .btn:first-child {
    	margin-bottom: 3rem;
	}
	#about .btn_wrap .btn span {
    	font-size: 1.8rem;
	}
	#about .btn_wrap .btn.en .txt span {
    	font-size: 2rem;
	}
	#about .btn_wrap .btn .icon {
    	position: absolute;
    	top: 50%;
    	right: 2rem;
    	transform: translate(0,-50%);
	}

	#about [class^="about_row"]{
		display: block;
		max-width: 33rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(100vw * .1);
	}
	#about [class^="about_col"]{
		width: 100%;
	}
	#about .about_col_text{
		margin-top: calc(100vw * .1);
	}
	#about .about_col_text h3{
    	font-size: 1.8rem;		
	}
	#about .about_col_img img{
		height: auto;
		aspect-ratio: auto;
	}
	#about .about_col_text .qu{
		font-size: 1.6rem;
	}
}


/* #news 編集
----------------------------------------- */
#news .inner {
    max-width: 96rem;
	padding-top: 8rem;
}
#news h2 {/* h1 → h2 */
    font-size: 2.0rem;
    letter-spacing: 0;
    line-height: 1;
    font-weight: 700;
	text-align: center;/* 追加 */
}
#news .news_layout {
    width: 100%;
    border-top: none;/* 編集時に消す */
    border-bottom: none;/* 編集時に消す */
}
#news .news_layout > li {
    padding: 3rem 0;
}
#news .news_layout > li.ttl {
    width: 100%;/* 編集時に消す */
    display: block;/* 編集時に消す */
    align-items: center;/* 編集時に消す */
    padding-left: 0;/* 編集時に消す */
}
#news .news_layout > li.con {
    width: 100%;/* 編集時に消す */
}
#news .txt_wrap p{
	margin-bottom: 2rem;
}
#news .news_line_entry{
	margin-top: 10rem;
	text-align: center;
}
#news .news_line_entry h3{
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 2rem;
	text-align: center;
}
#news .news_line_entry a[href*="lin.ee"]{
	display: block;
	margin-top: 10rem;
}

@media only screen and (max-width: 768px) {
	#news {
		
	}
	#news .inner {
    	padding-top: 4rem;
	}
	#news h2{/* h1 → h2 */
    	font-size: 2.0rem;
	}
	#news .news_layout > li {
    	padding: 2.5rem 0;
	}
	#news .news_layout > li.ttl {
    	width: 100%;/* 編集時に消す */
    	padding-left: 0;/* 編集時に消す */
    	padding-bottom: 0;/* 編集時に消す */
	}
	#news .news_layout > li.con {
    	width: 100%;/* 編集時に消す */
	}
	#news .news_line_entry{
		margin-top: 8rem;
	}
	#news .news_line_entry h3{
		font-size: 1.8rem;
		text-align: left;
	}
	#news .news_line_entry a[href*="lin.ee"]{
		margin-top: 2rem;
	}
}