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

@font-face {
    font-family: 'Hannari';
    src: url('https://manyoterai.co.jp/fonts/Hannari.otf') format('opentype');
}

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	overflow-x: hidden;
	margin:0;
	padding:0;
	font-family:"Hannari";
	font-size:18px;
	line-height:1.6;
	font-weight:100;
}

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

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


.sp_none{
	display:block;
}

.pc_none{
	display:none;
}

.clearfix:after{
	content:".";
	display:block;
	height:0;
	font-size:0;
	visibility:hidden;
	clear:both;
}

img{
	width:100%;
}

.bold{
	font-weight:bold;
}

.font-kana{
	font-size: 60%;
}
/* ヘッダー全画面表示 */
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	position:relative;
	margin:0 auto;
}

.bg-slider2 {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	position:relative;
	margin:0 auto;
}

.top_image_area{
	padding:40px 20px 40px;
}	

.top_logo{
	text-align:left;
	width:30%;
	margin:0;
	
	}

.top_logo img{
	width:100%;
	transform: translate;
	display: none;
	z-index: 9999;
}

@media screen and (max-width: 900px) {
.sp_none{
	display:none;
}

.pc_none{
	display:block;
}

.top_logo{
	text-align:left;
	width:70%;
	margin:0px 10px 40px!important;
	}

.top_image_area{
	margin-top:20px;
padding:0px;
	color:#fff;
}

}

@media screen and  (min-width:700px) and (max-width:1024px) {
.top_logo{
	text-align:center;
	width:40%;
	margin:-60px auto 0;
	}
}


/* content＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ content・リード*/

.main_img_area{
	padding-bottom:50px;
}

.main_img{
	width: 50%;
	float: left;
}

.main_txt{
	width: 45%;
	float: right;
}



.textile_title{
	font-size: 180%;
	font-weight: bold;
	margin:180px 0 60px;
}

.textile_coment{
	text-align: left;
	margin-bottom:60px;
}

@media screen and (max-width: 900px) {
	.main_img{
	width: 100%;
	float: none;
}

.main_txt{
	width: 100%;
	float: none;
}
	
	.textile_title{
	font-size: 150%;
	font-weight: bold;
	margin:20px 0 30px;
}
	
	.textile_coment{
	text-align: left;
	margin-bottom:40px;
}

	.main_img_area{
	padding-bottom:30px;
}
	
}



.textile_price2023{
	text-align: left;
	margin: 10px;
}


.top_message_area{
	width:70%;
	margin:80px auto;
}

h1.title_message{
	text-align:center;
	font-weight:100;
	font-size:170%;
	margin-bottom:30px;
}

h1.title_message img{
	width:20%;
}

.top_message_link{
	text-align:right;
	margin-top:30px;
}
.top_message_link:last-child{
	margin-top:10px!Important;
}

.top_message_link a{
	color:#92b5a9;
	text-decoration:none;
}

.top_message_link a:hover{
	text-decoration:underline;
}

.top_message_link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0 0.1em 0.4em;
  border: 5px solid transparent;
  border-bottom: 0 solid transparent;
  border-top: 8px solid #92b5a9;
}

@media screen and (max-width: 900px) {
	.top_message_area{
	width:100%;
	margin:0px auto;
	
}

.top_message{
	width:80%;
	margin:0 auto;
	text-align:justify;
}

h1.title_message{
	font-size:130%!important;
	margin-top:40px;
	margin-bottom:30px;
}

.top_message_link{
	text-align:right;
	width:80%;
	margin:30px 0 30px 9%;
}

.top_message_link:last-child{
	margin:0px 0 30px 9% !important;
}
}

/* content＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ content・文様紹介*/

.style_area{
	background-color:#f5f5f5;
	padding:100px 8% 100px;
	text-align:center;
	border-bottom:solid 1px #ccc;
	position:relative;
}

.style_area:first-child{
	padding:50px 8% 100px;
}


.style_area:last-child{
	border-bottom:none;
}




.introduction_img{
	width:28%;
	margin-right:7%;
	float:left;
}

.intoroduction_txt_area{
	width:65%;
	float:left;
	text-align:left;
}

.intoroduction_txt{
	width:85%;
}

.price{
	margin-top:15px;
	font-weight:bold;
}

.color_area{
	width:30%;
	margin:0 0 0 70%;
}

.color_box{
	width:30%;
	float:left;
	margin-right:5%;
	text-align:center;
}

.color_box:last-child{
	margin-right:0;
}

.color_img {
	width:60%;
	margin:0 auto;
}

.color_name{
	font-size:90%;
	margin:10px 0 0 0;
}



h1.title_message{
	text-align:center;
	font-weight:100;
	font-size:170%;
	margin-bottom:50px;
}


/* 2022awより追加＿＿＿＿＿＿＿ イメージカット下のコメントエリア*/

.textile_coment_area{
	width:70%;
	margin:70px auto 0;
	text-align:left;
	font-size: 110%;
}

h2.textile_title {
  position: relative;
  padding: 0 65px;
  text-align: center;
  margin:80px auto 40px; 
	font-size:130%;
}

h2.textile_title:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #bbb;
}

h2.textile_title span {
  position: relative;
  padding: 0 2em;
  background: #f5f5f5;
  font-size:95%;
}

.textile_price{
	margin:0px 0 50px;
	text-align:right;
	font-weight:bold;
	font-size:90%;

}

.textile_slider {
  width: 112%;
  height: auto;
  position:absolute;
  left:-12%;
}

.textile_slider img {
  width: 100%;
  object-fit: cover;
}

h1.season_title{
	text-align:center;
	font-weight:100;
	font-size:200%;
	padding:0px 0 30px;
}


@media screen and (max-width: 900px) {
	.textile_coment_area{
	width:100%;
	margin:30px auto 0;
	text-align:left;
	font-size: 100%;
}

h2.textile_title{
	text-align:center;
	padding:0;
	margin-bottom:30px;
	margin-top:0px;
}
	
h2.textile_title span {
  position: relative;
  padding: 0 1em;
  background: #f5f5f5;
  font-size:90%;
}
	


h1.season_title{
	font-size:150%!important;
	margin-bottom:40px;
	padding:30px 0 0px;
	}
	
	.textile_price{
	margin:20px 0 0px;
	text-align:left;
	font-weight:bold;

}
}

/* 2022awより追加＿＿＿＿＿＿＿ 新色追加*/

.new_color_area{
	text-align:left;
}


h2.newcolor_title{
	text-align:center;
	padding:0;
	margin-bottom:40px;
	margin-top:10px;
}

.new_color{
	width:44%;
	float:left;
	margin-right:4%;
}

.old_color{
	width:52%;
	float:right;
}

.new_color_box{
	width:100%;
	background:#fcfcfc;
}


.new_color_box_img{
	background:#fcfcfc;
	padding:20px 30px;
}

.new_color_box_img img{
	width:100%;
}

.new_color_box_img ul,.new_color_box_img li{
	padding:0;
	margin:0;
	line-height: 0;
}


.old_color_box{
	width:30%;
	float:right;
	margin-left:5%;

}

.old_color_box:last-child{
	margin-left:0%;
}

.old_color_box_color_name{
	text-align:center;
	font-weight:bold;
	font-size:90%;
}



@media screen and (max-width: 900px) {
	.old_color{
	width:100%;
	float:none;
}
}

/* 2022awより追加＿＿＿＿＿＿＿ 新色追加*/


/* 2022awより追加＿＿＿＿＿＿＿ イメージカット下のコメントエリア*/


.coordinate_area{
	margin:50px 0 0;
}


.corrdinate_box{
	width:32%;
	float:left;
	margin-right:2%;
	background:#fcfcfc;
}
.corrdinate_box:last-child{
	margin-right:0;
}

.coordinate_box_img{
	background:#fcfcfc;
	padding:30px 30px 20px;
}

.coordinate_box_img ul,.coordinate_box_img li{
	padding:0;
	margin:0;
	line-height: 0;
}

.coordinate_box_txt{
	text-align:left;
	font-size:105%;
	width:80%;
	margin:-10px auto 30px !important;
}

.coordinate_box_color_name{
	text-align:center;
	font-weight:bold;
}

.coordinate_box_color_txt{
	font-size:95%;
	text-align:left;
	height:4.8em;
	
}


.caption{
	line-height:1.6em;
	font-size:95%;
}

.caption_area{
	width:75%;
	margin:30px 0% 30px 25%;
	text-align:left;
	line-height:1.6em;
	font-size:88%;
}



@media screen and (max-width: 900px) {
	.style_area{
	padding:30px 8% 40px;
}

	
	.style_area:first-child{
	padding:20px 8% 40px;
}
	
	
	
	.introduction_img,.intoroduction_txt_area{
		width:100%;
		margin:0 auto;
		float:none;
	}
	
	.intoroduction_txt{
	width:100%;
}

h2.intoroduction_title{
	text-align:center;
}

.color_area{
	width:50%;
	margin: 15px 0 0 50%;
}

.corrdinate_box{
	width:100%;
	float:none;
	margin-right:0%;
}

.coordinate_box_img{
	background:#fcfcfc;
	padding:20px 20px 10px;
}

.coordinate_box_color_xtx{
	margin-bottom:40px;
}
	
.coordinate_box_color_name{
	font-size:110%;

}


.caption_area{
	width:100%;
	margin:20px auto;
	text-align:left;
	line-height:1.6em;
	font-size:88%;
}
}

@media screen and  (min-width:700px) and (max-width:1024px) {
.coordinate_box_img{
	background:#fff;
	padding:20px 20%;
}
}

/* material＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ material・素材202403追加*/
.material{
	padding-bottom: 30px;

}

.material_img{
	width:30%;
	float:left;
}

.material_txt_area{
	width:65%;
	float:right;
}



.material_txt{
	font-size: 90%;
}

.material_name{
	font-size: 130%;
}

@media screen and (max-width: 900px) {
.material_name{
	font-size: 100%;
}
}


/* content＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ content・プロフィール*/
.profile_area{
	width:60%;
	margin:80px auto;
}

.title_profile{
	text-align:center;
	font-size:140%;
	margin-bottom:10px;
}

.title_profile img{
	width:22%;
}

.profile_txt{
	margin-bottom:20px;
}

.profile_txt a,.attention a{
	color:#92b5a9;
	text-decoration:none;
}

.profile_txt a:hover{
	text-decoration:underline;
}

.toggle-company-box{
	display:none;
}

.button_company_area{
	text-align:center;
}

.button_company_area a{
	color:#92b5a9;
	text-decoration:none;
}

.button_company_area a:hover{
	text-decoration:underline;
}

.button_company_area::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0 0.1em 0.4em;
  border: 5px solid transparent;
  border-bottom: 0 solid transparent;
  border-top: 8px solid #92b5a9;
}

@media screen and (max-width: 900px) {
	
	.profile_area{
	width:80%;
	margin:50px auto;
}
	
	.title_profile img{
	width:55%;
}
}


/* content＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ content・会社概要*/

.company_area table{
	border-collapse:  collapse;
	margin:20px 0;
	width:100%;
	text-align:left;
	font-size:95%;
}

.company_area table,th,td {
    border: solid 1px #bbb;              /* 枠線指定 */
	padding:10px 10px 10px 15px;
	line-height:1.3;
}

th{
	background:#eee;
}

.company_area table th{
	width:20%;
	font-weight:bold;
}

.company_area table td{
	width:80%;
}


@media screen and (max-width: 900px) {
	.company_area table th{
	width:25%;
	font-weight:bold;
}

.company_area table td{
	width:75%;
}
}

/* footer＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ footer*/

.attention{
	width:80%;
	margin:0 auto;
	text-align:center;
	font-size:80%;
	padding:20px 10% 0;
}

.inquiry_area{
	background-color:#f5f5f5;
	padding-top:30px;
	padding-bottom:50px;
	text-align:center;	
}

.inquiry_area p{
	margin:0;
	padding:0;
}

h4.title_inquiry{
	font-size:140%;
	margin-bottom:10px;
}

h5.taitle_company_name{
	font-size:120%;
	margin:30px 0 0 ;
	padding:0;
}

.copy{
	text-align:center;
	font-size:85%;
	padding:15px;
}

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

.inquiry_area{
	background-color:#f5f5f5;
	width:86%;
	padding:10px 7% 10%;
	text-align:center;	
}

.attention{
	text-align:left;
}

}

/* shoplist＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 取り扱い店舗一覧*/

.shop_area{
	padding:50px 20%;
	text-align:left;
	border-bottom:solid 1px #ccc;
}
	
	
	.shop_area a{
		color:#000;
	}
	
.shop_list_box{
	border-bottom:solid 1px #ccc;
	padding:20px 0;
}

.shop_list_box:last-child{
	border-bottom:none;
}

.shop_name{
	float:left;
	width:40%;
}

.shop_spec{
	float:left;
	width:60%;
}


h1.title_shop_area{
	text-align:center;
	font-size:140%;
	font-weight:bold;
	margin-bottom:0;
}

h1.title_shop_area a{
	text-decoration:none;
	border-bottom:solid 1px #000;
	padding-bottom:5px;
}

h1.title_shop_area a:hover{
	opacity:0.5;
}

h3.title_shop_area{
	text-align:left;
	font-size:120%;
	margin-top:50px;
}

@media screen and (max-width: 900px) {
	.shop_area{
	padding:50px 5%;
	text-align:left;
	border-bottom:solid 1px #ccc;
}
	
}