@charset "UTF-8";
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');/*font-family: 'Noto Sans JP', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;600&display=swap');/*font-family: 'Noto Serif JP', serif;*/
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Sawarabi+Gothic&family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap" rel="stylesheet">
html, body{height: 100%;width: 100%;font-size: 62.5%;background-color: #FFFFFF;}/*font size 62.5%=10px 1.0rem=10px*/

/****************************************
Smart phone BASE 767
*****************************************/
.sp_view{display: none;}
.br_hide_sp {display: block;}
.br_hide_pc {display: none;}
.br_sp{display:block}
/*--------------------------
COMMON
--------------------------*/


/*fade-in START*/

body {
    animation: fadeIn 2s ease 0s 1 normal;
	background: #071521;
}

body.beige_mode * {
    color: #071521;
}

body.beige_mode {
  background-color: #DDD7C5;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*fade-in END*/

#wrapper {
   
}

#container {
	width:1200px;
	margin:0 auto;
	padding:0 30px 70px 30px ;
	}

#contents {
	}

p {
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.0rem;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;
}

.beige p {
	color: #071521;
}

h1 {
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.3rem;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;
	text-align: center;
	padding-bottom: 25px;
}

.beige h1 {
	color: #071521;
}

h1.pad_b100px {
	padding-bottom: 100px;
}

h2 {
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2rem;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 10px;
}

.beige h2 {
	color: #071521;
}

h3 {
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.8rem;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
	letter-spacing: 0.1em;
	line-height: 1.7em;
	text-align:justify;
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 25px;
}

.beige h3 {
	color: #071521;
}

h4 {
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.3rem;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;
	text-align: left;
	padding-bottom: 25px;
}

.beige h4 {
	color: #071521;
}

h5{
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.3rem;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;
	text-align: left;
	padding: 25px 0;
}

.ttl_pc {
	width: 1200px;
	text-align: center;
	padding: 0 0 40px 0;
	margin: 0 auto;
	font-family: Raleway , san-serif;
	font-weight: 100;
	font-size: 1.7rem;
	letter-spacing: 0.25em;
	color: #43679e;
}

.ttl_pc img {
width: 82%;
}

.readmore {
	width: 250px;
	font-family: "Almarai", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #FFFFFF;
	border-bottom: #FFFFFF 3px solid;
}

img.svg_black {
  filter: brightness(0) saturate(100%);
}

/*--------------------------
Top
--------------------------*/

#top_container_pc {
	position: relative;
}

#top_pc_keyvisual{
	width: 100%;
	padding-top: 0px;
	text-align:center;
	position: relative;
}

#top_video {

}

#top_video video {
  width: 100%;
  display: block;/*画像下の1pxの隙間を消す*/
}

#top_video .overlay {
  position: absolute;
  bottom: 0;       /* 下に固定 */
  left: 0;
  width: 100%;
  height: 50%;     /* 下半分だけ覆う */
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(7,21,33,1), /* 下を濃く */
    rgba(0,0,0,0)    /* 上は透明 */
  );
}
#top_pc_keyvisual img {
	display: block;/*画像下の1pxの隙間を消す*/
	margin: 0 auto;
	width: 100%;
}

#top_pc_keyvisual_inner {
	width: 100%;
	margin: 0 auto;
	/*max-width: 1800px;*/
}

.top_ttl {
    position: absolute;
	top:11%;
	left: 1.5%;
    width: 97%;
}

.top_ttl img {
	width: 100%;
}

.top_ttl_yoko {
    width: 100%;
}

.top_ttl_yoko img {
	width: 100%;
}


/*--------------------------
About
--------------------------*/
#about {
	width: 100%;
	padding: 0% 0 0 0;
	position: relative;
}

#about_ttl_pc {
	width: 7%;
	position: absolute;
	top:-5%;
	right: 6%;
	z-index: 999;
}

#about_ttl_pc img {
	width: 100%;
}

#about_photo {
	width: 90%;         /* 親幅に合わせて可変 */
	aspect-ratio: 16/7; 
	overflow: hidden;
	z-index: -999;
	margin: 10% 0 0 0 ;
	/*background: #CE2426;
	position: absolute;
	top:0;
	right: 0;*/
}

#about_photo img {
	width: 101%;
	position: static;
	left: 0%;               /* 中心基準 */
	transform: translateX(-0%); /* 左右中央寄せ */
}

.about_text  {
	width: 1080px;
	margin: 80px auto 80px auto;
	position: relative;
}

.about_text  p {
	margin: 0 0 4% 0;
}


/*--------------------------
Fabrics
--------------------------*/
#fabrics {
	width: 100%;
	/*background: url("../img/bg_pattern_pink.jpg") repeat;
	background-size: 200px 200px;*/
	padding: 6% 0 0 0;
	position: relative;
}

#fabrics_ttl_pc {
	width: 8.5%;
	position: absolute;
	bottom:0%;
	left: 0%;
	z-index: 999;
}

#fabrics_ttl_pc img {
	width: 100%;
}

#fabrics_photo {
	width: 100%;         /* 親幅に合わせて可変 */
	aspect-ratio: 16/7; 
	overflow: hidden;
	z-index: -999;
	margin: 0 ;
	/*background: #CE2426;
	position: absolute;
	top:0;
	right: 0;*/
}

#fabrics_photo img {
	width: 101%;
	position: static;
	left: 50%;               /* 中心基準 */
	transform: translateX(0%); /* 左右中央寄せ */
}

.fabrics_text {
	width: 64%;
	margin: 80px 0 0 6%;
	padding: 0 0 0 20%;
	position: relative;
}

.fabrics_text  p {
	margin: 0 0 4% 0;
}

/*--------------------------
Homewear
--------------------------*/
#homewear {
	width: 100%;
	/*background: url("../img/bg_pattern_pink.jpg") repeat;
	background-size: 200px 200px;*/
	padding: 0% 0 0 0;
	position: relative;
}

#homewear_ttl_pc {
	width: 7%;
	position: absolute;
	bottom:0%;
	right: 8%;
	z-index: 999;
}

#homewear_ttl_pc img {
	width: 100%;
}

#homewear_photo {
	width: 90%;         /* 親幅に合わせて可変 */
	aspect-ratio: 16/7; 
	overflow: hidden;
	z-index: -999;
	margin: 10% 0 0 0 ;
	/*background: #CE2426;
	position: absolute;
	top:0;
	right: 0;*/
}

#homewear_photo img {
	width: 101%;
	transform: translateX(0%); /* 左右中央寄せ */
}


/*--------------------------
Watanosato Kuwanohome
--------------------------*/
#watanosato_kuwanohome {
	width: 100%;
	margin: 80px 0;
}

.watanosato_kuwanohome_inner {
	width: 1080px;
	display: flex;
	flex-direction: row; /*子要素の並ぶ向き...縦配置column*/
	flex-wrap: wrap; /*子要素の折り返し*/
	justify-content: space-between; /*水平方向の揃え flex-end center space-between space-around*/
	list-style-type: none;
	margin: 85px auto 20px auto;
}


.watanosato_kuwanohome_flex {
	width: 44%;
	margin:0 0 0 0 ;
}

.watanosato_kuwanohome_flex img {
	width: 100%;
}

.watanosato_kuwanohome_txt {
	width: 100%;
	color: #008E97;
	
}

.watanosato_kuwanohome_txt p {
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.8rem;
	margin-bottom: 20px;
}


.watanosato_kuwanohome_ttl {
	height: 28px;
	margin: 50px 0 10px 0;
}

.watanosato_kuwanohome_ttl img {
	height: 100%;
}



.online {
	font-family: "Almarai", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #FFFFFF;
	text-align: center
}

.sns_icon {
	width: 30px;
	margin: 0 auto;
}

.sns_icon img {
	width: 100%;
}


/*--------------------------
Footer
--------------------------*/

#footer_container {
	width: 100%;
	padding: 20px 0;
	position: relative;
	border-top: #FFFFFF solid 1px;
}

.beige_border {
	border-top: #000000 solid 1px !important;
}

#footer_logo {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

#footer_logo p {
	font-size: 0.8rem;
	color: #FFFFFF;
	text-align: center;
}

.beige_txt {
	color: #000000 !important;
}

#footer_logo img {
    width: 100%;
}

.footer_sns_01, .footer_sns_02 {
	width: 30px;
	position: absolute;
	top: 30%;
}

.footer_sns_01 {
	right: 7.2%;
}

.footer_sns_02 {
	right: 4%;
}

.footer_sns_01 img, .footer_sns_02 img {
	width: 100%;
	height: 100%;
}

.footer_inner {

}

.footer_col {
	width: 25%;
}

.footer_col img {
	width: 100%;
}





/*--------------------------
NAVIGATION
--------------------------*/
#nav_container_pc {
	width: 100%;
	letter-spacing: 0.2rem;
	position: fixed;
	z-index: 99999;
	padding:  0;
	margin: 0 auto ;
}

#nav_container_pc ul {
	height: 75px;
	display: flex;
	flex-flow: row;
	align-items: baseline;
	justify-content: center;
	margin: 0;
	list-style-type: none;

}


#nav_container_pc ul li {
	margin: 0 0;
	border-right: #FFFFFF solid 1px;
	border-bottom: #FFFFFF solid 1px;
	background: rgba(0, 0, 0, 0.35); /* Semi-transparent background */
	backdrop-filter: blur(5px) saturate(180%); /* Frosted glass blur */
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3); /* Outer and inner shadows */
}

.nav1 {
	width: 22.246% ;
}
.nav2 {
	width: 16.392%;
}
.nav3 {
	width: 16.392%;
}
.nav4 {
	width: 16.392%;
}
.nav5 {
	width: 16.392%;
}
.nav6 {
	width: 12.1%;
}

#nav_container_pc ul li:nth-of-type(2n) {
	margin: 0 0;
}

#nav_container_pc ul li img {
	width: 100%;
}

#nav_container_pc ul li.nav_news {
	margin: 0  ;
}

#nav_container_pc ul li.nav_news:nth-child(2) {
	margin-left: 0px  ;
}

#nav_container_pc ul li a:link, #nav_container_pc ul li a:visited{
	color:#6F6A58;
	text-decoration:none;
}
#nav_container_pc ul li a,
#nav_container_pc ul li a::before,
#nav_container_pc ul li a::after{
	transition: all .3s;
	}


#nav_container_logo img {
	width: 100%;
	height: 100%;
}

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

#nav_container_logo {
	height: 27%;
	position: absolute;
	left: 0%;
	top: 40%;
}
	
}

.nav_sns_01 {
	height: 60%;
	position: absolute;
	right: 7.2%;
	top: 18%;
}

.nav_sns_01 img {
	width: 100%;
	height: 100%;
}

.nav_sns_02 {
	height: 60%;
	position: absolute;
	right: 4%;
	top: 18%;
}

.nav_sns_02 img {
	width: 100%;
	height: 100%;
}


/*--------------------------
Link Animation
--------------------------*/
.word{
	
  position: relative;
  display: inline-flex;
  isolation: isolate;         /* a のスタッキング文脈を独立させる */
  pointer-events: auto !important;
  z-index: 10;
  cursor: pointer;
  font-size: 0.8rem;
  
  letter-spacing: .05em;
  font-family: "Almarai", sans-serif; /* 可変幅フォントOK */
  white-space: pre;
  text-decoration: none;
	
	color: #fff;
  -webkit-tap-highlight-color: transparent;
}

.border {
	border-bottom: 2px solid #FFFFFF;
	padding-bottom: 15px;
	width: 250px;
	font-weight: 700;
}

.online {
	font-size: 0.8rem;
	font-weight: 400;
}

.word {
  color: #fff;        /* 本体の色 */
  text-decoration: none;
}

.word * {
  color: #fff;        /* 子要素(front, back)にも強制 */
}

/* ★ 子はクリック不可：a 本体にイベントを通す */
.word *{ pointer-events: none !important; }

.word{ z-index: 999; position: relative; }

/* 1文字コンテナ（ここに幅をpxで固定する） */
.word .ch{
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
}

/* 上レイヤー＝フローに残す（幅の基準） */
.word .front{
  position: relative;
  display: block;
  line-height: 1em;
  transform: translateY(0);
  transition: transform .4s ease;
  transition-delay: calc(var(--i)*.08s);
}

/* 下レイヤー＝重ねる */
.word .back{
  position: absolute;
  inset: 0;
  line-height: 1em;
  transform: translateY(100%);
  transition: transform .4s ease;
  transition-delay: calc(var(--i)*.08s + .4s);
}

/* 再生状態 */
.word.animate .front{ transform: translateY(-100%); }
.word.animate .back { transform: translateY(0); }

/* リセット（瞬間戻し） */
.word.reset .front,
.word.reset .back{ transition: none; }
.word.reset .front{ transform: translateY(0); }
.word.reset .back { transform: translateY(100%); }

p.navy_txt {
	color: #E11F23;
}


/*---------------
About - Secound
---------------*/

#top_pc_keyvisual_about {
	width: 100%;
	position: relative;
	aspect-ratio: 16/10.5; 
	overflow: hidden;
	margin: 0 ;
}

#top_pc_keyvisual_about img {
	width: 100%;
}



#top_ttl_secound {
	position: absolute;
	top: 12%;
	left: 50%;                /* 親の幅の中央に配置 */
	transform: translateX(-50%); /* 自身の幅の半分だけ戻す */
	width: 100%;

}

#top_ttl_secound img{
    height: 127px;

}
/* 背景や全体の雰囲気 */


.secound_text_about {
	width: 80%;
	margin: 0 auto;
	padding: 0 0 80px 0;
	position: relative;
}

.secound_text_about  p {
	margin: 0 0 4% 0;
	text-align: center;
}

.company-spec {
  font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.0rem;
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #000000;
	font-feature-settings: "palt"; /* 約物の詰め調整 */
}
.spec-inner {
  margin: auto;
}

/* 定義リストを表レイアウトに */
.spec {
  display: grid;
  gap: 20px 56px;                 /* 行・列の余白 */
}
.spec > div {
  display: grid;
  grid-template-columns: 8em 1fr; /* 左固定幅／右可変 */
  align-items: start;
  column-gap: 56px;
}

/* 項目（左） */
.spec dt {
  white-space: nowrap;
}

/* 値（右） */
.spec dd {
  margin: 0;
  color: #000000;
  overflow-wrap: anywhere;
}

/* フォントサイズ調整 */

@media (min-width: 1024px) {
  /*.company-spec { font-size: 20px; }*/
}

/* スマホ時は縦並びに */
@media (max-width: 640px) {
  .spec > div {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  /*.spec dt {
    opacity: .85;
  }*/
}

/*--------------------------
Secound
--------------------------*/
#secound {
	width: 100%;
	/*background: url("../img/bg_pattern_pink.jpg") repeat;
	background-size: 200px 200px;*/
	padding: 100px 0 0 0;
	position: relative;
}

.secound_photo {
	width: 100%;         /* 親幅に合わせて可変 */
	aspect-ratio: 16/5; 
	overflow: hidden;
	z-index: -999;
	margin: 0 0 70px 0 ;
}

.secound_photo img {
	width: 100%;
	/*object-fit: cover;*/
	position: relative;
	top: -300px;  /* 上に300px移動 */
}

.secound_photo_s {
	width: 80%;         /* 親幅に合わせて可変 */
	aspect-ratio: 16/8; 
	overflow: hidden;
	z-index: -999;
	margin: 0 auto 70px auto;
}

.secound_photo_s img {
	width: 100%;
	/*object-fit: cover;*/
	position: relative;
}

.secound_photo_s img.b_30 {
	top: -30px;  /* 上に300px移動 */
}

.secound_photo_s img.b_100 {
	top: -100px;  /* 上に300px移動 */
}

.secound_text {
	width: 70%;
	margin: 0 auto;
	padding: 50px 0 80px 0;
	position: relative;
}

.secound_text  p {
	margin: 0 0 4% 0;
	text-align: center;
}

.secound_text_hidari {
	width: 600px;
	margin: 150px auto 0 auto;
	padding: 0 0 10px 0;
	position: relative;
}

.secound_text_hidari  p {
	margin: 0 0 4% 0;
	text-align: left;
}

.secound_text_flex {
	width: 600px;
	display: flex;
	flex-direction: row; /*子要素の並ぶ向き...縦配置column*/
	flex-wrap: wrap; /*子要素の折り返し*/
	justify-content: space-between; /*水平方向の揃え flex-end center space-between space-around*/
	list-style-type: none;
	margin: 10px auto 150px auto;
	text-decoration: none;

}

.secound_text_flex .flex_left {
	width: 30%;
}

.secound_text_flex .flex_right {
	width: 65%;
}


.contact_flex {
	width: 1100px;
	display: flex;
	flex-direction: row; /*子要素の並ぶ向き...縦配置column*/
	flex-wrap: wrap; /*子要素の折り返し*/
	justify-content: space-between; /*水平方向の揃え flex-end center space-between space-around*/
	list-style-type: none;
	margin: 10px auto 150px auto;
	text-decoration: none;
}

.contact_flex .flex_left {
	width: 35%;
}

.contact_flex .flex_right {
	width: 55%;
}

.flex_left h2 {
	font-size: 2.0rem;
	text-align: left;
}

.ttl_sec {
	width: 100%;
	text-align: center;
	padding:　0;
	margin: 150px 0 0 0;
}

.ttl_sec img {
	width: 20%;
}