@charset "utf-8";
/* レイアウト/レスポンシブ用CSS */

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

*{outline:1px solid pin;}

*{-webkit-box-sizing: border-box;box-sizing: border-box;}

body{
    font-family:'Helvetica Neue', 'Yu Gothic Medium' , YuGothic , Verdana , Meiryo , sans-serif;
    letter-spacing:0.1em;
	line-height:1.85;
	word-wrap: break-word;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	text-decoration: none;
    outline: none;
}

img{
    max-width: 100%;
    height: auto;
	vertical-align: bottom;
}

iframe {
	max-width: 100%;
	vertical-align: bottom;
}

/*-------------------共通定義------------------------*/
.sec-back {
	background: #1D1280;
}

.sec-title {
	color: #fff;
	text-align: center;
	padding: 20px 0;
	font-size: 2rem;
}

/*========メインカラー
#1D1280 rgba(29,18,128,1)　80%　86%
background: linear-gradient(#0f0c29, #302b63, #302b63);
#DCD9F9 rgba(220,217,249,1)
=====================*/



/*====================header=================*/

/*gnavi→move-css記載*/

#header{
	font-family: serif;
	width:100%;
	background:#fff;
	color:#333;
	text-align: center;
	padding: 5px;
  }



/*====================main=================*/

#wrapper {
	max-width: 1200px;
	margin: 0 auto;
	font-family: serif;
}

#web-department {
	max-width: 1200px;
	margin: 0 auto;
	background: #eee;
}

.web-department-right img {
	max-width: 300px;
}

.contact-button img {
	max-width: 200px;
}

.contact-button {
	text-align: center;
}

/* -------------concept ----------------*/

#concept {
	max-width: 1200px;
	margin: 0 auto;
	background-image: url(/img/about-back.jpg?2023-04-25);
}

.concept-box {
	max-width: 1000px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px;
}

.concept-right img {
	max-width: 500px;
}

.concept-left {
	padding: 30px;
}

.concept-txt {
	font-size: 2rem;
	line-height: 2.5;
}


/* -----------introduction-------------*/

#introduction {
	max-width: 1200px;
	margin: 0 auto;
	background: #eee;
	padding-bottom: 20px;
}

.main-under-conts {
	margin: 20px auto;
	max-width: 956px;
}

.menu-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
	
.menu-list-item {
	margin: 15px;
	border: 2px solid #1D1280;
	background: #fff;
	width: 210px;
	height: 80px;
	padding: 15px;
}


.menu-list-item p {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	font-family: serif;
}



/* -----------company-info-------------*/

#company-info {
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 100px;
}

.line2 {
	background: -webkit-gradient(linear, left top, left bottom, from(#ADA996), color-stop(#F2F2F2), to(#302b63));
	background: linear-gradient(#ADA996, #F2F2F2, #302b63);
}

.line{
  max-width: 500px;
  text-align: center;
  margin:20px auto;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

.info-tytle {
	margin: 0;
	color: #302b63;
}

.ja {
	margin: 0;
	color: #fff;
}


.table-inner {
	max-width: 1000px;
	margin: 0 auto;
}


table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  font-weight: bold;
}

table tr{
  border-bottom: solid 2px #fff;
}

table tr:last-child{
  border-bottom: none;
}

table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #1D1280;
  color: white;
  text-align: center;
  padding: 10px 0;
}

table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #1D1280;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table td{
  width: 70%;
  text-align: center;
  background-color: #eee;
  padding: 10px ;
}


.align-left {
	text-align: left;
	padding-left: 40px;
}


/* -----------contact-------------*/

#contact {
	max-width: 1200px;
	margin: 0 auto;
	background: #eee;
	padding-bottom: 50px;
}

.contact-box {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
}



.access {
	font-weight: bold;
	padding: 20px 0;
}



.name {
	font-size: 2rem;
}

.tel, .address {
	font-size: 1.6rem;
}

.address {
	margin: 30px 0;
}



.btn-tel{
	position: relative;
	display: block;
	border-radius: 50px;
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background: #302b63;
	padding: 5px 0;
	margin: 20px auto;
	max-width: 250px;
  }
  
  .btn-tel::after{
	content: "";
	background: url(/img/icon-tel.png?2023-04-25?2023-03-19) no-repeat center;
	background-size: contain;
	width: 25px;
	height: 30px;
	position: absolute;
	top: calc(45% - 12px);
	left: 17px;
  }

/* -----------footer-------------*/

#footer {
	max-width: 1200px;
	margin: 0 auto;
	font-family:serif;
	background: #333;
	padding: 15px;
}

.footer-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #fff;
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}

.copyright {
	margin-top: 20px;
}



/*===================================================================
☆web-productionのページ★
====================================================*/

/*=========共通定義=============*/
.production-title {
	font-size: 3rem;
	color: #e8475a;
	text-align: center;
}

.sub-title {
	font-size: 2rem;
	text-align: center;
}

.banner-description {
	font-size: 1.7rem;
	font-weight: bold;
	text-align: center;
	
}


#container {
	max-width: 1200px;
	margin: 0 auto;
	background:#fff9f6;
	font-family: serif;
}

/*========= header動画設定のCSS ===============*/

/*header設定*/
#web-header{
	max-width: 1200px;
	margin: 0 auto;
} 

div.vid_contents {
	width: 100%;
	text-align: center;
	margin: auto;
	padding-top: 1%;
	background: #fff;
}

	video.vid_main {
	width: 100%;
	max-width: 1200px;/*PC版での最大幅*/
	max-height: 650px;
	background:rgba(241,37,99,0.7);
}

/*==================top-slider====================*/

#room {
	max-width: 1055px;
	margin: 10px auto  10px auto ;
}

.room-txt, .service-txt {
	background:#F4EEE8;
	padding: 50px;
	font-size: 1.7rem;
}

/*==================================================
スライダーのためのcss
===================================*/
.room-slider img {
    width:100%;
    height:auto;
}


.room-slider .slick-slide {
    margin: 15px 10px;
}



	
/*==================survice====================*/


#survice {
	max-width: 1200px;
	margin: 30px auto;
	background:#fff9f6;
}

.survice-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 50px;
}

.survive-ul{
	display: flex;
	justify-content: center;
}

.survive-ul li {
	margin: 0 5px 10px 5px;
	border: #e8475a solid 1px;
}



/*================example====================*/

#example {
	max-width: 1200px;
	margin: 0 auto;
}

.example-inner, .banner-inner {
	max-width: 1040px;
	margin: 0 auto;
}

.works-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.works-item li {
	padding: 10px;
}


.works-item li a:hover{ 
	opacity:0.4;
	transition:0.3s;
}

 
.banner-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}







/*===================================================================
☆sp/tb--RWD=最大幅1040px/768px/520px以下の指定★
====================================================*/

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

/*=========web-productionページ========*/

	.works-item img, .banner-box img {
		max-width: 350px;
	}
}



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

	/* header*/ 
	.header-logo {
		font-size: 1.5rem;
		text-align: left;
		padding-left: 10px;
		padding-top: 5px;
	}


	/*----------concept-------*/	
	.concept-box {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	.concept-right img {
	max-width: 320px;
	}
	
	.concept-right, .concept-left {
		text-align: center;
	}
	
	.concept-left {
		padding: 20px;
	}
	
	.concept-txt {
		font-size: 1.5rem;
		text-align: left;
	}

	/*----------contact-------*/
	.contact-box {
		flex-direction: column;
	}

	.map, .access {
		text-align: center;
	}


	/*---footer----*/
	.footer-inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

/*=========web-productionページ========*/

	.survice-inner {
		padding: 10px;
	}

	
	.banner-description {
		font-size: 1.2rem;
	}
	


}


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

/*=========web-productionページ========*/
	.banner-box {
		text-align: center;
	}

	.production-title {
		font-size: 2.5rem;
	}

	.banner-description {
		font-size: 1.2rem;
		text-align: left;
		padding-left: 30px;
	}

}