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

/*==================================================
スライダーのためのcss
===================================*/
.slider {
	display: flex;
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	margin: 0;
	padding: 0;
}

.slider-top,
.slider-bottom {
	width: 50%;
    height: 100svh;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}

/*　背景画像設定　*/

.slider-item01 {
    background:url(../images/top/main_travel_img01.jpg);
}

.slider-item02 {
    background:url(../images/top/main_travel_img02.jpg);
}

.slider-item03 {
    background:url(../images/top/main_travel_img03.jpg);
}

.slider-item04 {
    background:url("../images/top/main_housing_img01.jpg");
}

.slider-item05 {
    background:url("../images/top/main_housing_img02.jpg");
}

.slider-item06 {
    background:url("../images/top/main_housing_img03.jpg");
}

.slider-item {
    width: 50%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100svh;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	margin: 0;
	padding: 0;
}
.slider ul {
	display: block;
	margin: 0;
	padding: 0;
}

.slide-text-travel {
	text-align: center;
	color: #fff;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 15%;
	transform: translate(-15%,-50%);
	margin: 0;
	padding: 0;
}
.slide-text-housing {
	text-align: center;
	color: #fff;
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 25%;
	transform: translate(50%,-50%);
	margin: 0;
	padding: 0;
}
.main-title {
	font-size: min(8vw, 80px);
	font-family: "Jost", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
	letter-spacing: 8px;
}
.sub-title {
	font-family: "Jost", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	letter-spacing: 5px;
}

/*wave*/
.slider .top-wave {
	overflow: hidden;
	display: block;
	width: 100%;
	position: absolute;
	bottom: -1px;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.beige-back {
	background-color: #f5f5f5;
	width: 100%;
}
.mb {
	padding: 0 0 100px 0;
}
.green-back {
	background-color: #116066;
	width: 100%;
	padding: 280px 0 0 0;
}
.top-message {
	text-align: center;
	max-width: 960px;
	margin: 0 auto;
	padding: 10% 0 0 0;
		background-image: url("../images/top/top_kirakira_pc.png");     /* 背景画像指定 */
    background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
    background-position: center 40%;          /* 背景の位置指定 */
	background-size: 80% auto;
}
.top-maincopy {
	font-size: 2rem;
	font-weight:bolder;
	color: #116066;
	margin: 3% 0 5% 0;
	letter-spacing: 2px;
	text-indent: 2px;
}
.top-message p {
	text-align: left;
	max-width: 700px;
	width: 80%;
	margin: 0 auto;
	line-height: 200%;
}
.top-message-illust {
	max-width: 960px;
	width: 100%;
	margin: 5% auto;
}

/*loop*/
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 40s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 0.8);
	margin: 0 5% 0 0;
}
.scroll-infinity__item>img {
  width: 100%;
}


/*top-news*/
.top-news {
	text-align: center;
	max-width: 1000px;
	width: 84%;
	margin: -400px auto 5% auto;
	padding: 3%;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
}
.top-news-box {
	margin: 5%;
}
.top-news-list {
	display: flex;
	align-items: center;
	padding: 3% 0;
	border-bottom: 1px solid #ededed;
}
.date-cate {
	display: flex;
	align-items: center;
}
.top-news-list .date {
	margin: 0 10px 0 0;
}
.top-news-list .media_cate {
	text-align: center;
	width: 100px;
	font-size: 0.8rem;
	color: #fff;
	background-color: #116066;
	border-radius: 5px;
	padding: 5px 0;
	margin: 0 5%;
}
.top-news-list .media_ttl {
	margin: 0;
}

/*NEWS*/
.newsConts {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	margin: 0 auto 30px;
}

.newsConts dt {
	color: #666666;
	flex-basis: 15%;
	margin: 0px;
	padding: 15px 0 ;
	border-bottom:1px solid #ebebeb;
}
.newsConts dd {
	flex-basis: 85%;
	margin: 0px;
	padding: 15px 0 ;
	border-bottom:1px solid #ebebeb;
}

/*top-travel*/
.top-travel, .top-housing {
	text-align: center;
	padding: 5% 0 10% 0;
}
.top-tit02 {
	text-align: center;
	max-width: 980px;
	width: 80%;
	position: relative;
  	color: #ffffff;
  	background-color: #116066;/*背景色と合わせる*/
 background-image:
    linear-gradient(-45deg,#ddc537 25%, transparent 25%,transparent 50%, #ddc537 50%,#ddc537 75%, transparent 75%,transparent);
  	background-size: 10px 10px;
  	height: 0.5em;
	margin: 2% auto 0 auto;
}
.top-travel .top-tit02 span {
	text-align: center;
	font-size: min(4.2vw, 30px);
	font-family: "Jost", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
	letter-spacing: 8px;
	text-indent: 8px;
	position: absolute;
  	display: inline-block;
  	margin: -0.5em auto 0 -3em;
  	background: #116066;/*背景色と合わせる*/
  	padding: 0 10px;
}
.top-housing .top-tit02 span {
	text-align: center;
	font-size: min(4.2vw, 30px);
	font-family: "Jost", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
	letter-spacing: 8px;
	text-indent: 8px;
	position: absolute;
  	display: inline-block;
  	margin: -0.5em auto 0 -3.8em;
  	background: #116066;/*背景色と合わせる*/
  	padding: 0 10px;
}
.top-trabel-box {
	display: flex;
	max-width: 1250px;
	width: 90%;
	margin: 7% auto 0 auto;
}
.top-housing-box {
	display: flex;
	flex-direction:row-reverse;
	max-width: 1250px;
	width: 90%;
	margin: 7% auto 0 auto;
}
.top-th-photo {
	width: 55%;
}
.top-th-photo img {
	border-radius: 10px;
}
.top-trabel-box .top-th-box {
	text-align: left;
	line-height: 200%;
	background-color: #fff;
	width: 49%;
	padding: 3%;
	margin: 3% 0 0 -10%;
	border-radius: 10px;
}
.top-housing-box .top-th-box {
	text-align: left;
	line-height: 200%;
	background-color: #fff;
	width: 49%;
	padding: 3%;
	margin: 3% -10% 0 0;
	border-radius: 10px;
	z-index: 2;
}
.top-th-tag {
	font-size: 0.9rem;
	font-weight: bold;
	display: inline;
	color: #116066;
	background-color: #ddc537;
	padding: 2%;
	border-radius: 5px;
}
.top-th-midashi {
	color: #116066;
	font-size: 1.4rem;
	letter-spacing: 2px;
	margin: 5% 0 3% 0;
}
.btn-illust {
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 3% 0 0 0;
}
.btn-illust img {
	max-width: 225px;
	width: 40%;
}

/*動く文字*/
article{
  overflow: hidden;
}
.loop_wrap {
	position: absolute;
	z-index: -1;
	bottom:-5px;
    display: flex;
    width: 100%;
    overflow: hidden;
  }

.loop_wrap div {
	color: #287075;
	font-family: "Jost", sans-serif;
	font-weight: 600;
	font-size: min(20vw, 300px);
	line-height: 80%;
	letter-spacing: 20px;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
  }

.loop_wrap div:nth-child(odd) {
animation: loop 50s -25s linear infinite;
}

.loop_wrap div:nth-child(even) {
animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }

/*top-company*/
.top-company {
	text-align: center;
	padding: 7% 0 0 0;
}
.top-company-box {
	width: 100%;
	display: flex;
	margin: 5% 0 0 0;
}
.top-company-photo {
	width: 50%;
}
.top-company-photo img {
	border-radius: 0 10px 10px 0;
}
.top-company-info {
	font-size: 1rem;
	text-align: left;
	width: 40%;
	padding: 2% 5% 5% 5%;
	margin: 3% 0 0 -5%;
	background-color: #fff;
	z-index: 2;
	border-radius: 10px 10px 0 0;
}
.top-company-info a {
	color: #333;
}
.top-company-info dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.top-company-info dl dt {
	width: 25%;
	font-weight: bold;
	padding: 5% 0;
	border-bottom: 1px solid #f0f0f0;
}
.top-company-info dl dd {
	width: 75%;
	padding: 5% 0;
	border-bottom: 1px solid #f0f0f0;
}
.top-company-info .last {
	border: none;
}
.top-company-flex {
	display: flex;
}
.top-company-flex img {
	margin: 0 auto;
}

/*top-access*/
.top-access {
	background-color: #fff;
	padding: 10% 0 0 0;
	text-align: center;
}
.top-gmap {
	max-width: 1250px;
	width: 90%;
	margin: 5% auto 0 auto;
}
.top-map2 {
	background-image: url("../images/top/map_image.jpg");     /* 背景画像指定 */
    background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
    background-position: bottom center;          /* 背景の位置指定 */
	background-size: cover;
	padding: 5% 0 0 0;
}
.top-map2-box {
	max-width: 1250px;
	width: 90%;
	margin: 0 auto 5% auto;
	padding: 5% 0;
	background-color: #f0f5f6;
	border-radius: 10px;
}
.top-map-flex {
	width: 90%;
	display: flex;
	margin: 0 5% 3% 5%;
}
.top-map-flex img {
	width: 44%;
	max-width: 470px;
	margin: 0 auto;
}
.top-utsumi-text {
	color: #fff;
	font-size: min(6vw, 80px);
	font-family: "Jost", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
	letter-spacing: 6px;
	padding: 0 0 35% 0;
	margin: 0;
}

/*scroll-down*/
/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:50px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}


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

/*top-th*/
.top-trabel-box, .top-housing-box {
	display: block;
	background-color: #fff;
	border-radius: 10px;
}
.top-th-photo {
	width: 100%;
	margin: 0 auto;
}
.top-th-photo img {
	border-radius: 10px 10px 0 0;
	margin: 0;
}
.top-trabel-box .top-th-box {
	text-align: left;
	line-height: 200%;
	background-color: #fff;
	width: 90%;
	padding: 5%;
	margin: 0;
	border-radius: 10px;
}
.top-housing-box .top-th-box {
	text-align: left;
	line-height: 200%;
	background-color: #fff;
	width: 90%;
	padding: 5%;
	margin: 0;
	border-radius: 10px;
}
.top-th-tag {
	font-size: 0.9rem;
	font-weight: bold;
	display: inline;
	color: #116066;
	background-color: #ddc537;
	padding: 2%;
	border-radius: 5px;
}
.top-th-midashi {
	color: #116066;
	font-size: 1.3rem;
	letter-spacing: 1px;
	margin: 5% 0 3% 0;
}
.btn-illust {
	display: block;
	text-align: center;
}
.btn-illust img {
	max-width: 225px;
	width: 80%;
	margin: 5% 0 0 0;
}

/*top-company*/
.top-company {
	text-align: center;
	padding: 7% 0 0 0;
}
.top-company-box {
	width: 90%;
	display: block;
	background-color: #fff;
	margin: 5% auto 0 auto;
}
.top-company-photo {
	width: 100%;
}
.top-company-photo img {
	border-radius: 10px 10px 0 0;
}
.top-company-info {
	width: 90%;
	padding: 5%;
	margin: 0;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
}

	
}

@media screen and (max-width: 728px) {
/*==================================================
スライダーのためのcss
===================================*/
.mb {
	padding: 0 0 130px 0;
}
	
.slider {
	display: block;
    position:relative;
	z-index: 1;
	top: 0;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 90svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	padding: 10svh 0 0 0;
}

.slider-top,
.slider-bottom {
	width: 100%;
    height: 50%;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}
.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:45svh;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
	
.top-maincopy {
	font-size: 1.6rem;
	line-height: 180%;
	}
.sub-title {
	width: 100%;
	font-size: 0.8rem;
}
	

/*news*/
.top-news-list {
	text-align: left;
	display: block;
	padding: 5% 0;
}
.top-news-list .media_ttl {
	margin: 3% 0 0 0;
}
.top-news-list .media_cate {
	font-size: 0.7rem;
	padding: 2px;
	margin: 0 2%;
}

.top-trabel-box, .top-housing-box {
	margin: 10% auto 0 auto;
}

	
.top-travel .top-tit02 span {
	font-size: min(5.2vw, 30px);
	letter-spacing: 6px;
	text-indent: 6px;
  	margin: -0.5em auto 0 -3.1em;
}
	
.top-housing .top-tit02 span {
	font-size: min(5.2vw, 30px);
	letter-spacing: 6px;
	text-indent: 6px;
  	margin: -0.5em auto 0 -3.7em;
}
	
.slide-text-travel {
	text-align: center;
	color: #fff;
	position: absolute;
	z-index: 2;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-30%);
	margin: 0;
	padding: 0;
}
.slide-text-housing {
	width: 100%;
	text-align: center;
	color: #fff;
	position: absolute;
	z-index: 2;
	top: 80%;
	left: 50%;
	transform: translate(-50%,-80%);
	margin: 0;
	padding: 0;
}

/*loop*/
.scroll-infinity__item {
  width: calc(100vw / 0.6);
}
	
/*top-company-info*/
.top-company-info {
	font-size: 0.8rem;
}

.loop_wrap {
	bottom:-2px;
}

/*top-map*/
.top-utsumi-text {
	margin: 10% 0 0 0;
	padding: 0 0 400px 0;
	letter-spacing: 2px;
	text-indent: 2px;
}
.top-map-flex {
	display: block;
}
.top-map-flex img {
	width: 90%;
	margin: 3% auto;
}
.top-map2-box {
	font-size: 0.8rem;
}
	
	
/*スクロールダウン全体の場所*/
.scrolldown2{
	bottom:20px;
}

}