@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {font-family: "Zen Old Mincho", serif;
 /* font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-size: 16px;
  line-height: 1;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased; /* Safari / Chrome / iOS */
  -moz-osx-font-smoothing: grayscale;  /* Firefox on macOS */
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  overflow-x: hidden;
  scroll-behavior: smooth;
text-align:center;
}


/* リストのマークを消す */
ul,
ol {
  list-style: none;
}

/* 見出しの初期リセット */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

/* フォーム要素のフォントを継承 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/*  */
button {
  cursor: pointer;
}

header {

  padding: 30px 0 0;

}
section{
padding:100px 0;
position:relative}
section.noPDG{
padding:0}
/* ロゴ */
#logo {
width:140px;
  display: block;
margin:auto;
}#logo img{
width:100%}


header nav {
font-size:1.125rem;
position: sticky;  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  top: 0;
  z-index: 100;
}
header nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
display:block;
padding: 3em;transition: all 0.3s ease;
}
header nav,
h1#mainK,
 #newsINDEX dt,
.btn a,
.btnMore a,
.en,
footer,
h2{
font-family: "Forum", serif;
  font-weight: 500;
}
.min,.catch{
font-family: "Zen Old Mincho", serif;
}

/*  */
main {

}



h2{

margin: 0 0 1em;
font-size:2.625rem}

h2, h3 , h4, h5, h6{
line-height: 1.6
}

p {
line-height:2
}

/* ---------------------------
   フッター
--------------------------- */
footer {
  background: #9FA0A0;
padding:100px 0;

}
footer img{
width:200px;
}
footer figcaption{
  color: #fff;
font-size:.75rem;
padding: 80px 0 0;
}

/**/
.Inner{
margin:auto}
/* */
a {
  color: inherit;
  text-decoration: none;
color:#333;
}

.btnMore{
padding-top:5em;
text-align:center}

.btnMore a{
font-size:1.125rem;
display:inline-block;
padding: .8em 4em;
position:relative;
border:1px solid #7CB4E9; transition: all 0.3s ease; 
}
.btnMore a::before,
.btnMore a::after{
  content: "";
top:54%;
  position: absolute;
background:#7CB4E9;
}

.btnMore a::after {
  right:-25px;
  width: 50px;
  height: 1px;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

/* 矢印の先端（三角形） */
.btnMore a::before {
right: -45px;

  width: 20px;
  height: 1px;
  transform: translateY(-50%) rotate(210deg);
  transform-origin: left center;
  transition: all 0.3s ease;
 
}

.btnMore a:hover{
  color: #006DD9;
}

.btnMore a:hover::after {
  right: -35px;
}

.btnMore a:hover::before {
  right: -55px;                 /* 矢印の先端も右へ移動 */
}

/**/
#mainVD{
	background:#000;
height:calc(100vh - 180px);
overflow:hidden;
position:relative;}
#mainVD h1{
position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
z-index:1;
}#mainVD video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  animation: fadeKV 15.12s linear infinite;
}
@keyframes fadeKV {
  0% { opacity: 0; }
  8% { opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  90% { opacity: .3;}
  100% { opacity: 0;}
}
#mainVD::after{
content:"";
position:absolute;
left:0;
right: 0;
top:0;
bottom:0;
background:rgba(0,0,0,.4);
z-index:0}

#pageTop{
position: fixed;
right: 30px;
bottom:100px;
z-index:50;
}
/**/
.breadcrumb ul {
  list-style: none;
  display: flex;
		justify-content:end;
  gap: 0.5em;
  padding: 4em 0;
width:1200px;
  margin: auto;
}

.breadcrumb ul li{
position:relative}

.breadcrumb li + li::before {
  content: "›"; 
  margin-right: 0.5em;
}

/**/

video{
margin:auto;
display:block;
width:100%}
/**/
#conceptINDEX{
background:#F4F8F9;


}

#conceptINDEX p{
line-height: 2.4em;
margin: 2.4em auto 0;
}
#conceptINDEX p.catch{
line-height: inherit;
font-size:1.875rem;
margin: 0 auto 3em}
#conceptINDEX figure img{
width:200px;
}

/**/

#brandINDEX h3{
text-align:right;}

#brandINDEX p{
text-align:left;
margin: 1em 0 0;
}

.swiper-wrapper {

  transition-timing-function: ease-in-out !important;
}
/* スライド全体 */
#brandINDEX .slide-item {
  position: relative;

}

/* 背景画像 */
#brandINDEX .slide-bg {
  width: auto;
  height: 100%;
  object-fit: cover; /* 画像を枠いっぱいに */
  display: block;
margin-left:80px;
}

/* オーバーレイBOX */
#brandINDEX .slide-overlay {
  background: rgba(244,2485,249,.9);

}

#brandINDEX .slide-overlay .btn{
text-align:right;
padding:3em 0 0;
}
#brandINDEX .slide-overlay .btn a{
display:inline-flex;
padding: .4em .8em .4em 1em;
background:#FFF;
}

#brandINDEX .slide-overlay p {
    font-size: .938rem;
line-height:2.2em;

  }


.swiper-button-next,
.swiper-button-prev {
pointer-events: auto; 
  top: 0;
  margin-top: 0;
  background: transparent;
  z-index: 200;
cursor:pointer;

}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px; /* 矢印のサイズ */
  position: absolute;
  top: 50%;color:#666;
  transform: translateY(-50%);
}


/**/
  #newsINDEX {
width:900px;
margin:auto;
padding-top:40px

  }

  #newsINDEX dl {
display:flex;
flex-wrap:wrap;
    margin: 0;
    padding: 0;
 border-bottom: 1px solid #ddd;
  }

  #newsINDEX dt,
  #newsINDEX dd {
    vertical-align: top;
    padding:1.2em 0;
line-height: 1.8em;
 
  }

  #newsINDEX dt {
    width: 20%;
    color: #444;
    border-top: 1px solid #6a0dad;

  }

  #newsINDEX dd {
 width: 80%;
text-align:left;
 position: relative;
padding-left:1.6em;
border-top: 1px solid #eee; 
  }

  #newsINDEX .readMore {
    display: none; /* jQueryのslideToggle対象なので最初は非表示 */
    margin-top: 8px;
    color: #666;
  }


  #newsINDEX button {
    position: absolute;
    right: 0;
    top: 1em;

    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #ccc;
  }

  #newsINDEX button:focus {
    outline: none;
  }

  #newsINDEX dd.open button {
    color: #6a0dad;
  }

/**/

h1#mainK{
background:url(../images/main_k.jpg) no-repeat center top;
color:#FFF;
font-size:2.75rem;
padding: 3em 0;
font-weight:normal;
}
/**/

#VisionCo section {
  display: flex;
  align-items: center;
  width: 100%;

justify-content:space-between;
}



#VisionCo section figure {

  margin: 0;
}
#VisionCo section figure img {
  width: 100%;
  height: auto;
  display: block;
}

#VisionCo section p{
margin: 2em 0 0;
line-height: 2.2em}

#VisionCo section p.catch{
font-size:1.5rem;
margin: 0}


#VisionCo section .txt {


text-align:left;
  box-sizing: border-box;
}

#VisionCo h2 {
  margin-bottom: 1rem;
}


/**/

.ju{
justify-content:space-between;}

.aRIGHT{
text-align:right}

.aCENTER{
text-align:center}


#aboutCo .Outline th,#aboutCo .Outline td{
text-align: left;
padding: .8em;
line-height: 1.6em;

}
/**/

#formCo .Inn{
margin: 2em auto;
display:inline-block;


}

#formCo table{
width:100%;
margin-top:3em
}

#formCo th,
#formCo td{
padding: 1em;

text-align:left}

#formCo th{
width:30%}
#formCo td input,
#formCo td textarea{
width:98%;
padding: .8em;
border: 1px solid #333;
}

#formCo .hissu{
font-size:.75rem;
color:#FF0000;
}

#formCo .btnSend{
padding: 3em 0 0;
text-align:center}


#formCo .btnSend input{
background:#000;
color:#FFF;
border:0;
padding: 1em 3em;
cursor:pointer;
}
#privacyCo{
	overflow-x:hidden;
	border:1px solid #CCC;
	padding: 2em;
	background:#f6f6f6;
	margin:3em auto;
	overflow-y:scroll;
	height:14em;
	text-align:left;
}

 
#privacyCo h3{
	text-align:center;
	padding: 0 0 1em;
	margin:0 0 1em;
	border-bottom:1px solid #000;
}


#privacyCo h4{
	margin: 2em 0 1em;
}

/**/

#companiesCo .Intro p+p{
	margin-top:2em}
#companiesCo .swiper-slide{
	margin-top:6em;
}
#aboutCo .Outline th,
#aboutCo .Outline td{vertical-align:top}

	#aboutCo .Outline th{
		white-space:nowrap}

@media screen and (min-width: 768px) {
.sp,
#menu-toggle {
  display: none;
}
header nav ul{
display:flex;
justify-content: center;
}
.Inner{
width:1200px;
}
/**/

#conceptINDEX .conceptTOP{
text-align:
center}

#conceptINDEX .conceptTOP .Inn{
display: inline-block}
#conceptINDEX .conceptTOP p{
text-align:left;
}

#conceptINDEX p.catch{
text-align:center;
width:auto}
#conceptINDEX p.catch br{
display:none}



#brandINDEX {
margin:auto;
width:1400px;
}
#brandINDEX .slide-item {
  position: relative;

  height: 530px;
  overflow: hidden;
}/* オーバーレイBOX */
#brandINDEX .slide-overlay {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  padding: 40px 30px;
width:550px;
}

#brandINDEX h3 img{width: 300px;}
/**/

#VisionCo {
padding: 0 0 60px;
}
#VisionCo section{
	min-width:1100px;
	align-items:flex-start;

padding: 60px 0;
}

	
#VisionCo section:nth-child(even) {
  flex-direction: row-reverse;
}



#VisionCo section p.catch br{
	display: none;
}
#VisionCo section figure{
	width:46%;}
#VisionCo section figure:nth-of-type(2){
	width:56%;}

	#VisionCo section .txt{		padding:0 1em;
			width:50%}
	
#VisionCo section figure:nth-of-type(2) .txt{

		width:42%}
/**/





#aboutCo .Intro {
display:flex;
justify-content:center;
align-items:center;
}

#aboutCo .Outline{
display:flex;
}

#aboutCo .Outline table{
	margin:auto}
#aboutCo .Intro .txt p{
font-size:1.375rem}
#aboutCo .Intro .txt{
padding-left:3em;
text-align:left;}
/**/
#formCo table{
width:800px;
}
/**/
#companiesCo .Intro{
	padding-top:0}
	
	#companiesCo #brandINDEX .swiper-slide:nth-of-type(2) .slide-overlay{
		right:auto; left:5%;
	}
	
	#companiesCo #brandINDEX .swiper-slide:nth-of-type(2) img.slide-bg{
		margin:0 80px 0 auto;
	}
	
	/**/

	#aboutCo .Outline th, #aboutCo .Outline td{
		font-size:1rem;}
		/**/
		
#privacyCo{
	width:900px;
}
}
@media screen and (min-width:768px) and (max-width:1300px) {
	#brandINDEX .slide-overlay {
		right:24%}
		
		
		#VisionCo #VisionCo section figure#VisionCo section figure{
			flex:0 0 42%;
		}
		
	}

@media screen and (min-width:768px) and (max-width:1260px) {
	#VisionCo section p br{	display:none}
}

@media screen and (min-width:17608px){
	#VisionCo section p.catch br{
		display:inherit}
}
/**/
.iPad #wrapper{
	min-width:1240px;
	width:100%;
	overflow:hidden}
.iPad #brandINDEX .slide-overlay{
	right:6%}

.iPad #brandINDEX{
	width:1200px;
}