@charset "UTF-8";

/* # =================================================================
   # 共通タイトル
   # ================================================================= */

.head-title-box{
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	padding-top:200px;
}

.titleTop > * {
  color: var(--color-gray1);
  font-size:85px;
  line-height:100%;
  font-weight:Bold;
  text-transform:uppercase;
  /* etc. */
}

.titleTop > :last-child {
	transform: rotatex(180deg) translatey(15px);
	mask-image: linear-gradient(transparent 50%, white 90%);
	-webkit-mask-image: linear-gradient(transparent 50%, white 90%);
}

.titleTop-jp{
	font-size:16px;
	display: flex;
	align-items: center;
}

.titleTop-jp::before{
	content: '';
	width:25px;
	height: 1px;
	margin-right: 10px; 
	background: var(--color-bk);
}

.titleMain-en-span {
	display:flex;
	justify-content:start;
	align-items:baseline;
	flex-wrap:wrap;
}

.titleMain_en {
  display: inline-block;
  position: relative;
  height: 85px;
  overflow: hidden;
}

.titleMain_en2 {
  display: inline-block;
  position: relative;
  height: 175px;
  overflow: hidden;
}

  /* fadein. */
.fadeInImg{
	animation-name:fadeInImgAnime;
	animation-duration:8s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInImgAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 0.2;
  }
}


.sec-title{
	font-size:60px;
	line-height:3.3rem;
	text-transform:uppercase;
	margin-bottom:50px;
	font-weight:700;
}

.sec-title span{
	padding-top:15px;
	display:block;
	font-size:16px;
	line-height:1.5rem;
}


.catch-txt{
	font-size:60px;
	line-height:150%;
	font-weight:800;
	text-align:left;
	padding:5px 0 30px 0;
	margin-bottom:50px;
	position: relative;
}

.catch-txt:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 1px var(--color-gray1);
  bottom: -1px;
  width: 50px;
}

.catch-txt2{
	font-size:28px;
	line-height:150%;
	font-weight:800;
	text-align:left;
	padding:5px 0 30px 0;
	margin-bottom:50px;
	position: relative;
}

.catch-txt2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 1px var(--color-gray1);
  bottom: -1px;
  width: 50px;
}

.txt-box{
	line-height:200%;
	text-align:left;
}

.txt-box span{
	font-weight:Bold;
	color: var(--color-red);
}

.subtitle{
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 5px;
	position: relative;
	padding-left:15px;
	text-align:left;
	margin-bottom:20px;
}

.subtitle:before {
	position: absolute;
	background: var(--color-brown);
	content: "";
	height: 8px;
	width: 8px;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.ul-style1{
	list-style-type:square;
	padding-left:1em;
}


@media screen and (max-width:768px){
.head-title-box{padding-top:150px;}
.titleTop > * {font-size: 55px;}
.titleMain_en {height: 60px;}
.titleMain_en2 {height: 120px;}
.sec-title{font-size:30px;line-height:2rem;}
.sec-title span{padding-top:10px;font-size:14px;}
.catch-txt{font-size:40px;}
}



@media screen and (max-width:599px){
.head-title-box{padding-top:150px;}
.titleTop > * {font-size: 35px;}
.titleMain_en {height: 40px;}
.titleMain_en2 {height: 80px;}
}


/* # =================================================================
   # 共通画像
   # ================================================================= */

.subpage-img img{width:100%;}


/* # =================================================================
   # re design
   # ================================================================= */
   
#redesign-section .re-txt1{
font-size:24px;
font-weight:700;
line-height:2rem;
padding-bottom:30px;
}

.re_loop_wrap {
  display: flex;
  width: 100%;
  height: 35vw;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

@media screen and (max-width:900px){
#redesign-section .main-txt{width:100%;}
}

@media screen and (max-width: 768px) {
.re_loop_wrap {height: 80vw;}
}

/* # =================================================================
   # movie
   # ================================================================= */

.touroku-box{
	background-color:var(--color-yb);
	padding:25px 0 40px 0;
	text-align:center;
}

.touroku-box-img img{width:160px;}

.touroku-box-txt{
	line-height:200%;
	text-align:center;
	font-weight:700;
	margin-bottom:20px;
	color:var(--color-white);
}

.movie-btn{
	display:block;
	background-image: url(../img/yaji_wh.svg);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: right 15px center;
	font-size:16px;
	font-weight:Bold;
	text-align:center;
	padding:20px 30px 20px 15px;
	background-color: var(--color-gray1);
	color: var(--color-white);
	transition: all .5s;
	text-decoration:none;
	line-height:150%;
	width:400px;
	border-radius:50px;
	box-shadow: 5px 5px 5px rgba(0,0,0, 0.3);
}

.movie-btn:hover{
	background-image: url(../img/yaji_wh.svg);
	background-position: right 10px center;
	color: var(--color-white) !important;
	text-decoration:none;
}

#movie .flex{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	row-gap:40px;
}

#movie .flex-item{width:48.5%;}

#movie .movie-txt{
	font-size:14px;
	line-height:1.5rem;
	text-align:left;
	padding-top:15px;
}

#movie .movie-txt a{
	text-decoration:none;
	color: var(--color-bk);
}

#movie .movie-txt a:hover{
	text-decoration:underline;
	color: var(--color-bk);
}


/*-----------youtube--------------------------*/

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

@media screen and (max-width:599px){
.movie-btn{width:100%;}
#movie .flex-item{width:100%;}
}

/* # =================================================================
   # 会社概要
   # ================================================================= */

.gaiyou-bg{
	background-color:var(--color-gray6);
}


.gaiyo-ul{
	list-style: none;
}

.gaiyo-ul li{
	text-align:left;
	font-weight:400;
	padding:10px 0;
	border-top:solid 1px var(--color-gray4);
}

.gaiyo-ul li:first-child{
	border: none;
}

.gaiyo-content{
	display:block;
	line-height:180%;
	text-align:left;
	margin-left:180px;
}  
.gaiyo-name{float:left;}


.gaiyo-ol{
	list-style: none;
}

.gaiyo-ol li{
	text-align:left;
	line-height:180%;
	padding:10px 0;
	border-top:solid 1px var(--color-gray4);
}

.gaiyo-ol li p{
	padding-left:1.5em;
	text-indent:-1.5em;
}

.gaiyo-ol li:first-child{
	border: none;
}

@media screen and (max-width:768px){
.gaiyo-content{margin-left:110px;}  
}

/* # =================================================================
   # ACCESS
   # ================================================================= */

.ifram-map{
   transition: all 0.7s ease;
   width:100%;
}

/* # =================================================================
   # faq
   # ================================================================= */

.faq-block{
border-bottom:dotted 1px var(--color-gray3);
padding-bottom:5px;
margin-bottom:5px;
}

#faq .table__list-label span, #faq .answer span{
 font-size: 28px;
 font-weight: 600;
 margin-right: 0.5em;
}

#faq .table__list-label span{color: var(--color-gold);}
#faq .answer span{color: var(--color-red);}


#faq .quest{
	text-indent: -1.8em;
	padding-left:2em;
	padding-right:40px;
	padding-bottom:10px;
	padding-top:10px;
	font-size:18px;
	line-height:150%;
	text-align:left;
	font-weight: 600;
	letter-spacing:2px;
}

#faq .answer{
	font-family: 'Inter', 'Noto Sans JP', sans-serif;
	text-indent: -2em;
	font-size:18px;
	text-align:left;
	font-weight: 600;
	padding: 25px 25px 25px 60px;
	line-height:180%;
	letter-spacing:2px;
	color:var(--color-red);
}



/* # =================================================================
   # FAQ アコーディオン設定
   # ================================================================= */

.table__list-check{
    display: none;
}

/*カラム見出し */
.table__list-label {
	width: 100%;
	display: block;
	padding: 10px;
	color: var(--color-gray1);
	font-display: swap;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
}


.table__list-label:after{
    content: '';
    display: block;
    line-height: 16px;
    padding: 0;
    position: absolute;
    right: 20px;
   top: 30%;
   transform: translateY(-40%);
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
	border-bottom: solid 1px var(--color-brown);
	border-right: solid 1px var(--color-brown);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
}
.table__list-content {
	width: 100%;
    display: block;
    height: 0;
    opacity: 0;
	margin-top: 0px;
 	margin-bottom: 0px;
   padding: 0px 0 0px 0;
    transition: .5s;
    visibility: hidden;
}
.table__list-check:checked + .table__list-label:after{
    content: '×';
    position: absolute;
    right: 25px;
    top: 30%;
   transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    font-size: 30px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-brown);
	border-bottom: none;
	border-right: none;
}
.table__list-check:checked + .table__list-label + .table__list-content{
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
}


/* # =================================================================
   # flow
   # ================================================================= */

.flow-bg{background-color: var(--color-gray6);}


.flow-flex{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: space-between;
}

.flow-flex-item1{width:150px;}
.flow-flex-item2{width:200px;}
.flow-flex-item2 img{height:80px;}
.flow-flex-item3{flex:1;}

.flow-arrow {
	position: relative;
	border-bottom: 1px solid var(--color-gray1);
	background: var(--color-gray6);
	color: var(--color-gray1);
	text-align: center;
	font-size: 24px;
	padding: 30px 0 10px;
	margin: 0;
}
.flow-arrow:before{
	content: "";
	position: absolute;
	bottom: -44px;
	left: 45%;
	margin-left: -2px;
	border: 22px solid transparent;
	border-top: 22px solid var(--color-gray6);
	z-index: 1;
}
.flow-arrow:after {
	position: absolute;
	border: 24px solid transparent;
	border-top-color: var(--color-gray1);
	border-bottom-width: 0;
	bottom: -25px;
	content: "";
	left: 45%;
}

.flow-no{
	font-size:30px;
	font-weight:Bold;
	text-align:left;
	text-transform:uppercase;
	color:var(--color-gold);
}
.flow-no span{
	font-size:50px;
}

.flow-txt {
	line-height:180%;
	text-align:left;
}

.flow-txt span{
	display:block;
	font-size:20px;
	font-weight:Bold;
	padding-bottom:15px;
}

.flow-last-img img{width:150px;}
.flow-last-txt{
	font-size:35px;
	font-weight:Bold;
	line-height:130%;
	color:var(--color-gold);
}

@media screen and (max-width:768px){
.flow-flex-item1{width:100%;padding-bottom:20px;}
.flow-flex-item2{width:100%;padding-bottom:20px;}
.flow-flex-item3{width:100%;}
.flow-no{text-align:center;}
.flow-last-txt{font-size:30px;}
}

	
/* # =================================================================
   # policy
   # ================================================================= */

.poricy-title{
	font-size:18px;
	font-weight:700;
	line-height:180%;
	text-align:left;
	padding:30px 0 15px 0;
}

.poricy-ul{
	list-style: square;
	text-align:left;
	padding-left:20px;
	margin-top:10px;
}

.poricy-ol{
	list-style-type: decimal;
	text-align:left;
	padding-left:20px;
	margin-top:10px;
}
.poricy-ul li{padding-bottom:5px;}
.poricy-ol li{padding-bottom:5px;}