@charset "UTF-8";


/* -----------------------------------------------------------
	top
----------------------------------------------------------- */
.swiper {
	width: 100%;
	height: 690px;
	margin: 0 auto;
	margin: -32px auto 0;/* WP時の対策 */
}
@media screen and (max-width : 568px ){
.swiper {
	height: 220px;
	margin: -50px auto 0;/* WP時の対策 */
}
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-slide div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  margin: 0;
}

.swiper-slide div.img01 {
  background-image: url("images/top_slide01.jpg");
}
.swiper-slide div.img02 {
  background-image: url("images/top_slide02.jpg");
}
.swiper-slide div.img03 {
  background-image: url("images/top_slide03.jpg");
}
.swiper-slide div.img04 {
  background-image: url("images/top_slide04.jpg");
}
.swiper-slide div.img05 {
  background-image: url("images/top_slide05.jpg");
}
.swiper-slide div.img06 {
  background-image: url("images/top_slide06.jpg");
}
.swiper-slide div.img07 {
  background-image: url("images/top_slide07.jpg");
}
.swiper-slide div.img08 {
  background-image: url("images/top_slide08.jpg");
}
.swiper-slide div.img09 {
  background-image: url("images/top_slide09.jpg");
}

/* -----------------------------------------------------------
	section00 TOP RENOVATION
----------------------------------------------------------- */
.sec00 {
	width: 100%;
	margin: 40px auto 0;
	padding: 40px 0;
	background: #fff;
}
@media screen and (max-width : 834px ){
.sec00 {
	margin: 25px auto 0;
	padding: 25px 0;
}
}

.sec00_box {
	max-width: 980px;
	width: 90%;
	height: auto;
	margin: 0 auto;
	display: table;
}
@media screen and (max-width : 834px ){
.sec00_box {
	min-width: 240px;
	width: 60%;
	display: block;
}
}

.sec00_left {
	max-width: 490px;
	width: 50%;
	height: auto;
	display: table-cell;
	vertical-align: top;
	overflow: hidden;
}

@media screen and (max-width : 834px ){
.sec00_left {
	width: 100%;
	height: auto;
	display: block;
}
}

.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide01 {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  width: 100%;
  height: 100%;
  text-align: center;
}

.swiper-slide01 img {
	width: 100%;
	height: auto;
}


.sec00_right {
	width: 490px;
	height: auto;
	display: table-cell;
	vertical-align: top;
	box-sizing: border-box;
	padding: 70px 0 0 75px;
}
@media screen and (max-width : 834px ){
.sec00_right {
	width: 100%;
	display: block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 25px 0 0 0;
}
}

.sec00_right a {
	font-weight: bold;
}

.link_wrap {
	width: fit-content;
	height: auto;
	overflow: hidden;
}

.link {
	width: fit-content;
	margin-bottom: 50px;
    cursor: pointer;
    font-size: 2.0em;
	font-weight: bold;
	letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap;
    color: var(--color-text);
}
@media screen and (max-width : 834px ){
.link {
	margin-bottom: 30px;
    cursor: pointer;
    font-size: 1.5em;
	letter-spacing: 0.1em;
	line-height: 2.2em;
	border-bottom: 1px solid #000;
}
}

.link::before {
    position: absolute;
    width: 200%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 100%;
    pointer-events: none;
}
.link::after {
    position: absolute;
    width: 200%;
    height: 1px;
    background: currentColor;
    top: 100%;
    right: 0%;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}

.link--io::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
}

.link--io:hover::before {
    transform-origin: -200% 200%;
    transform: scale3d(1, 1, 0);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}

.link--io::after {
    content: '';
    transform-origin: 50% 100%;
    transform: scale3d(0, 1, 1);
}

.link--io:hover::after {
    transform-origin: 300% -200%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
	transition: transform 0.7s 0.7s cubic-bezier(0.2, 1, 0.8, 1);
}

@media screen and (max-width : 834px ){
.link--io::before,
.link--io::after {
	display: none;
}
}

/* -----------------------------------------------------------
	section01 TOP
----------------------------------------------------------- */
.sec01 {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 0;
}
@media screen and (max-width : 834px ){
.sec01 {
	padding: 25px 0 0;
}
}

.top_works {
	max-width: 980px;
	width: 90%;
	margin: 30px auto 0;
}

.works_thumbs_wrap {
	max-width: 485px;
	width: 49.5%;
	position: relative;
	margin: 0 0.25% 0.5%;
}
@media screen and (max-width : 834px ){
.works_thumbs_wrap {
	max-width: 485px;
	width: 100%;
	margin: 0 auto 3%;
}
}

.thumbs {
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.thumbs::before {
	content: "";
	display: block;
	padding-top: 63.6%;
}

.thumbs img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	object-fit: cover;
	transition: transform .7s ease;
}

.thumbs:hover img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}

.top_concept_box {
	max-width: 980px;
	width: 90%;
	height: 300px;
}

.top_img_wrap {
	max-width: 980px;
	width: 100%;
	height: 300px;
	margin: 0 auto;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}
@media screen and (max-width : 834px ){
.top_img_wrap {
	width: 100%;
	min-height: 120px;
	height: auto;
}
}

.top_img_wrap img {
	width: 100%;
	height: auto;
}


.thumbs01 {
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.thumbs01::before {
	content: "";
	display: block;
	padding-top: 30.6%;
}

.thumbs01 img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	object-fit: cover;
	transition: transform .7s ease;
}
@media screen and (max-width : 568px ){
.thumbs01 img {
	bottom: 0;
}
}

.thumbs01:hover img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}

h2.top_title01 {
	font-size: 4.6em;
	letter-spacing: 0.1em;
	font-weight: bold;
	color: #fff;
	position: absolute;
	z-index: 1;
	top: 40%;
	left: 7%;
}
@media screen and (max-width : 834px ){
h2.top_title01 {
	font-size: 2.5em;
	top: 35%;
}
}

.top_value_wrap {
	width: 840px;
	height: 560px;
	position: relative;
	margin: 100px auto 100px;
}

.btn100 {
  width: 840px;
  height: 560px;
  border: 8px solid #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  transition: .7s;
  box-sizing: border-box;
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	margin: 0;
}
.btn100:hover {
	width: 750px;
	height: 500px;
}

.btn100::before,
.btn100::after {
  position: absolute;
  background: #f7f6f5;
  z-index: -1;
  transition: .7s;
  content: '';
}

.btn100::before {
  height: 562px;
  width: 722px;
}

.btn100::after {
  width: 842px;
  height: 442px;
}

.btn100:hover::before {
  height: 502px;
  width: 632px;
  background: #f7f6f5;
  transition: .7s;
}

.btn100:hover::after {
  width: 752px;
  height: 382px;
  background: #f7f6f5;
  transition: .7s;
}
.btn100:hover {
	width: 750px;
	height: 500px;
}
.btn100:hover {
  background: #f7f6f5;
}

.top_value01 {
	width: 736px;
	height: 486px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	margin: 0;
}

.top_value02 {
	width: 736px;
	height: 486px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

.thumbs02 {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.thumbs02::before {
	content: "";
	display: block;
	padding-top: 66.66%;
}

.thumbs02 img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	object-fit: cover;
	transition: transform .7s ease;
}

.thumbs02:hover img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}

h2.top_title02 {
	font-size: 4.6em;
	letter-spacing: 0.1em;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	margin: 0;
}
@media screen and (max-width : 834px ){
h2.top_title02 {
	font-size: 2.5em;
}
}

.top_value_wrap_sp {
	width: 90%;
	height: auto;
	position: relative;
	margin: 50px auto;
	background: #f7f6f5;
}
.top_value_wrap_sp img {
	width: 100%;
	height: auto;
	background: #f7f6f5;
}

h2.top_title03 {
	font-size: 3.0em;
	letter-spacing: 0.1em;
	font-weight: bold;
	color: #fff;
	position: absolute;
	z-index: 1;
	top: 35%;
	right: 7%;
}
@media screen and (max-width : 834px ){
h2.top_title03 {
	font-size: 2.5em;
	line-height: 1.0em;
	top: 30%;
}
}

h2.top_title03 span {
	font-size: 0.63em;
}

.top_sozo {
    width: 100%;
	height: 180px;
	margin: 100px auto 40px;
    position: relative;
	overflow: hidden;
}
@media screen and (max-width : 834px ){
.top_sozo {
    width: 100%;
	height: 240px;
	margin: 50px auto;
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;
}
}

.top_sozo::before {
    position: absolute;
    width: 200%;
    height: 3px;
    background: currentColor;
    top: 0;
    left: 100%;
    pointer-events: none;
	z-index: 1;
}

.top_sozo::after {
    position: absolute;
    width: 200%;
    height: 3px;
    background: currentColor;
    top: 0;
    right: 0%;
    pointer-events: none;
	z-index: 1;
}

.top_sozo::after,
.top_sozo::before {
    content: '';
    /* show by default */
}

.top_sozo--io::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

.top_sozo--io:hover::before {
    transform-origin: -200% 200%;
    transform: scale3d(1, 1, 0);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}

.top_sozo--io::after {
    transform-origin: 50% 100%;
    transform: scale3d(0, 1, 1);
}

.top_sozo--io:hover::after {
    transform-origin: 300% -200%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
	transition: transform 2.4s 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

.top_sozo02 {
    width: 100%;
	height: 180px;
	margin: 0 auto;
    position: relative;
}

.top_sozo02::before {
    position: absolute;
    width: 200%;
    height: 3px;
    background: currentColor;
    bottom: 0;
    right: 100%;
    pointer-events: none;
	z-index: 1;
}

.top_sozo02::after {
    position: absolute;
    width: 200%;
    height: 3px;
    background: currentColor;
    bottom: 0;
    left: 0%;
    pointer-events: none;
	z-index: 1;
}

.top_sozo02::after,
.top_sozo02::before {
    content: '';
    /* show by default */
}

.top_sozo02--io::before {
    transform-origin: 50% 100%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

.top_sozo02--io:hover::before {
    transform-origin: 200% -200%;
    transform: scale3d(1, 1, 0);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}

.top_sozo02--io::after {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
}

.top_sozo02--io:hover::after {
    transform-origin: -200% 300%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
	transition: transform 2.4s 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

@media screen and (max-width : 834px ){
.top_sozo02:before,
.top_sozo02:after,
.top_sozo:before,
.top_sozo:after {
    display: none;
}
}

.top_sozo_innner01,
.top_sozo_innner {
	width: 50%;
	height: 180px;
	position: relative;
	white-space: nowrap;
	float: left;
}
@media screen and (max-width : 834px ){
.top_sozo_innner01 {
	width: 100%;
	height: 120px;
	float: none;
	overflow: hidden;
}
.top_sozo_innner {
	width: 100%;
	height: 120px;
	float: none;
}
}

.thumbs03 {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.thumbs03::before {
	content: "";
	display: block;
	padding-top: 62.00%;
}

.thumbs03 img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -35%;
	object-fit: cover;
	transition: transform .7s ease;
}

.top_sozo:hover img,
.thumbs03:hover img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}
@media screen and (max-width : 834px ){
.top_sozo:hover img,
.thumbs03:hover img {
  transform: scale(1.0);
}
}

h2.top_title04 {
	font-size: 4.6em;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 1.0em;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	margin: 0;
}
@media screen and (max-width : 834px ){
h2.top_title04 {
	font-size: 2.5em;
}
}

h2.top_title04 span {
	font-size: 0.5em;
}

.top_movies {
	max-width: 980px;
	width: 90%;
	margin: 30px auto 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.top_movies01 {
	max-width: 750px;
	width: 90%;
	margin: 30px auto 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.movies_thumbs_wrap {
	max-width: 485px;
	width: 49.5%;
	position: relative;
	margin: 0 0.25% 0.5%;
	overflow: hidden;
}
@media screen and (max-width : 834px ){
.movies_thumbs_wrap {
	max-width: 485px;
	width: 100%;
	margin: 0 auto 3%;
}
}

.movies_thumbs_wrap01 {
	max-width: 750px;
	width: 100%;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.movie_pic {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 1;
}
.movie_pic img {
	width: 102%;
	height: auto;
}

.thumbs_mov {
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.thumbs_mov::before {
	content: "";
	display: block;
	padding-top: 63.6%;
}

.thumbs_mov img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	object-fit: cover;
	transition: transform .7s ease;
}

.movies_thumbs_wrap01:hover .thumbs_mov img,
.movies_thumbs_wrap:hover .thumbs_mov img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}

.thumbs_txt {
	width: fit-content;
	height: fit-content;
	font-size: 4.6em;
	line-height: 1.3em;
	text-align: center;
	bottom: 8%;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	color: #fff;
	z-index: 1;
}
@media screen and (max-width : 834px ){
.thumbs_txt {
	font-size: 2.3em;
	line-height: 1.3em;
	bottom: 8%;
}
}


/* -----------------------------------------------------------
	section02 TOP BLOG
----------------------------------------------------------- */
.sec02 {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
}
@media screen and (max-width : 834px ){
.sec02 {
	padding: 25px 0;
}
}

h2.top_title05 {
	margin: 30px auto 0;
	font-size: 3.8em;
	letter-spacing: 0.1em;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width : 834px ){
h2.top_title05 {
	font-size: 2.5em;
	letter-spacing: 0.1em;
}
}

h2.top_title05 a {
	font-weight: bold;
}

.top_blog_wrap {
	max-width: 800px;
	width: 90%;
	margin: 50px auto 0;
	border-top: 1px dashed #000;
}
@media screen and (max-width : 834px ){
.top_blog_wrap {
	margin: 30px auto 0;
}
}

.top_blog_box {
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
	border-bottom: 1px dashed #000;
	font-size: 1.5em;
	letter-spacing: 0.2em;
	display: table;
}
@media screen and (max-width : 834px ){
.top_blog_box {
	font-size: 1.3em;
	display: block;
}
}

.top_blog_date {
	width: 130px;
	padding: 22px 0;
	vertical-align: top;
	display: table-cell;
}
@media screen and (max-width : 834px ){
.top_blog_date {
	width: 100%;
	display: block;
	padding: 20px 0 0 0;
}
}

.top_blog_title {
	padding: 22px 0;
	vertical-align: top;
	display: table-cell;
}
@media screen and (max-width : 834px ){
.top_blog_title {
	display: block;
	padding: 5px 0 20px 0;
}
}


/* -----------------------------------------------------------
	section03 TOP EVENT
----------------------------------------------------------- */
.sec03 {
	width: 100%;
	margin: 0 auto;
	padding: 50px 0 0;
}

.sec03_box_wrap {
	max-width: 980px;
	width: 90%;
	margin: 0 auto;
}

h2.top_title06 {
	margin: 0 auto 5px;
	font-size: 2.8em;
	letter-spacing: 0.1em;
	font-weight: bold;
}
@media screen and (max-width : 834px ){
h2.top_title06 {
	font-size: 2.5em;
	letter-spacing: 0.1em;
}
}

.top_event_wrap {
	width: 670px;
	margin: 0 auto;
}
@media screen and (max-width : 834px ){
.top_event_wrap {
	max-width: 325px;
	width: 90%;
}
}
@media screen and (max-width : 568px ){
.top_event_wrap {
	max-width: initial;
	width: 100%;
}
}

.top_event_box {
	width: 325px;
	margin-bottom: 30px;
	overflow: hidden;
}
@media screen and (max-width : 568px ){
.top_event_box {
	width: 100%;
	margin: 0 auto 30px;
}
}

.top_event_box p {
	font-size: 1.5em;
	letter-spacing: 0.1em;
	padding-top: 5px;
}

.top_event_title {
	font-size: 2.0em;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.2em;
}
@media screen and (max-width : 834px ){
.top_event_title {
	font-size: 1.8em;
}
}

.top_event_img {
	width: 325px;
	height: 260px;
	overflow: hidden;
}
@media screen and (max-width : 568px ){
.top_event_img {
	width: 100%;
	height: auto;
}
}

.thumbs04 {
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.thumbs04::before {
	content: "";
	display: block;
	padding-top: 80.0%;
}

.thumbs04 img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	object-fit: cover;
	transition: transform .7s ease;
}

.thumbs04:hover img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}

.top_comre_wrap {
	width: 290px;
	margin: 0 auto;
}
@media screen and (max-width : 568px ){
.top_comre_wrap {
	width: 100%;
}
}

.top_company_box {
	width: 100%;
	margin-bottom: 20px;
}

.top_comre_img {
	width: 290px;
	height: 150px;
	overflow: hidden;
}
@media screen and (max-width : 568px ){
.top_comre_img {
	width: 100%;
	height: auto;
}
}

.thumbs05 {
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.thumbs05::before {
	content: "";
	display: block;
	padding-top: 51.72%;
}

.thumbs05 img {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	object-fit: cover;
	transition: transform .7s ease;
	background: #000;
}

.thumbs05:hover img {
  transform: scale(1.1);
  cursor: pointer;
  /*opacity: 0.8;*/
}


/****************************************************************************************************** Media Queries */
.for-pc { display:block; }
.for-sp { display:none; }


@media screen and (max-width : 834px ){
.for-pc { display:none; }
.for-sp { display:block; }




}/**********************************************************************************834px  Media Queries   end */


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

.for-smart { display:block; }


}/**********************************************************************************568px  Media Queries   end */


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






}/**********************************************************************************375px  Media Queries   end */

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









}/**********************************************************************************320px  Media Queries   end */