/*--------------------------------------------------------------
RESET
--------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0;}
table{border-collapse:collapse; border-spacing:0;}
fieldset, img, hr{border:0;}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}
ol, ul{list-style:none;}
caption, th{text-align:left;}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal;}
q:before, q:after{content:”;}
abbr, acronym{border:0;}
*{margin:0;padding:0;border:0;list-style-type:none;zoom:1;-webkit-text-size-adjust: none;}
*{font-style: normal;text-decoration:none;color: inherit;}


/*--------------------------------------------------------------
COMMON
--------------------------------------------------------------*/
:root{
	--base-width: min(100vw, 1120px);
/* 	--base-width: min(100lvw, 1120px); */
	--base-margin: 20px;
	--base-height: calc(var(--colmn1)*1.33);
	--base-lineheight: 1.875;

	--f-serif: "Times New Roman", "Zen Old Mincho", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	--f-sans-serif: "Roboto", "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	--f-size: 14px;
	--f-size-l: 16px;
	--f-size-s: 12px;
	--f-size-xs: 11px;
	
	--f-size-nav: 13px;
	
	--colmn1: calc((var(--base-width) - calc(var(--base-margin) * 6))/5);
	--colmn2: calc(calc(var(--colmn1)*2) + calc(var(--base-margin)*1));
	--colmn3: calc(calc(var(--colmn1)*3) + calc(var(--base-margin)*2));
	--colmn4: calc(calc(var(--colmn1)*4) + calc(var(--base-margin)*3));

	--common-color: #000;
	--common-color-gray: #666;
	--bg-color: #e5e3e4;
}



@media screen and (max-width: 767px){
	:root{		
		--sp-base-width: 767;
		--vw: calc(100vw / var(--sp-base-width));
		--vw: calc(100lvw / var(--sp-base-width));
		
		--base-width: 100vw;
		--base-width: 100lvw;
		--base-margin: calc(40 * var(--vw));
	
		--f-size: calc(28 * var(--vw));
		--f-size-l: calc(32 * var(--vw));
		--f-size-s: calc(24 * var(--vw));
		--f-size-xs: calc(20 * var(--vw));
		
		--colmn1: calc((var(--base-width) - calc(var(--base-margin) * 2))/3);
		--colmn2: calc(var(--colmn1)*2);
		--colmn3: calc(var(--colmn1)*3);
	}
}


*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

:hover, a{
	transition: .3s;
}

.hover:hover{
	opacity: 0.3;
}

.page_yh{
	opacity: 0.3;
	pointer-events: none;
	position: relative;
}

.page_yh_clickable{
	opacity: 0.3;
	position: relative;
}

body .page_yh:before,
body .page_yh_clickable:before{
	content: "";
    width: 0.3em;
    height: 0.3em;
    border-radius: 1em;
    background-color: currentColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -1em;
}

input:focus {
	border-color: var(--base-color-medium);
}

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

html {
}
		
html, body{
	color: var(--common-color);
	font-family: var(--f-sans-serif);
	font-weight: 350;
	font-size: var(--f-size);
	line-height: var(--base-lineheight);
	letter-spacing: 0.05em;
	word-break: break-word;
	font-feature-settings: "palt" 1;
	background: var(--bg-color);
}


body.no-scroll {
	position: fixed;
	width: 100%;
}

.link{
	
}

.link:hover{
	text-decoration: underline;
}

.sp{
	display: none;
	visibility: hidden;
}

.pc{
	display: block;
	visibility: visible;
}

@media screen and (max-width: 767px) {
	.sp{
		display: block !important;
		visibility: visible;
	}
	
	.pc{
		display: none !important;
		visibility: hidden;
	}

}


.mtharf{margin-top: calc(var(--base-margin)*.5);}
.mt1{margin-top: calc(var(--base-margin)*1);}
.mt2{margin-top: calc(var(--base-margin)*2);}
.mt3{margin-top: calc(var(--base-margin)*3);}
.mt4{margin-top: calc(var(--base-margin)*4);}
.mt5{margin-top: calc(var(--base-margin)*5);}

.mbharf{margin-bottom: calc(var(--base-margin)*.5);}
.mb1{margin-bottom: calc(var(--base-margin)*1);}
.mb2{margin-bottom: calc(var(--base-margin)*2);}
.mb3{margin-bottom: calc(var(--base-margin)*3);}
.mb4{margin-bottom: calc(var(--base-margin)*4);}
.mb5{margin-bottom: calc(var(--base-margin)*5);}

.ptharf{padding-top: calc(var(--base-margin)*.5);}
.pt1{padding-top: calc(var(--base-margin)*1);}
.pt2{padding-top: calc(var(--base-margin)*2);}
.pt3{padding-top: calc(var(--base-margin)*3);}
.pt4{padding-top: calc(var(--base-margin)*4);}
.pt5{padding-top: calc(var(--base-margin)*5);}

.pbharf{padding-bottom: calc(var(--base-margin)*.5);}
.pb1{padding-bottom: calc(var(--base-margin)*1);}
.pb2{padding-bottom: calc(var(--base-margin)*2);}
.pb3{padding-bottom: calc(var(--base-margin)*3);}
.pb4{padding-bottom: calc(var(--base-margin)*4);}
.pb5{padding-bottom: calc(var(--base-margin)*5);}

.align-center{text-align: center;}
.align-left{text-align: left;}
.align-right{text-align: right;}

.font-min{font-size: 0.8rem;line-height: 1.5em;}

strong{font-weight: bold;}


/*________Page_Layout_______*/
.page{
	
}

.page__layout{
	width: 100%;
	max-width: var(--base-width);
	margin: 0 auto;
	padding: 0 var(--base-margin);
	height: inherit;
	position: relative;
}


.pagenavi{
	display: flex;
	margin-top: calc(var(--base-height)/2);
    margin-left: calc(var(--colmn2) + var(--base-margin));
    font-size: var(--f-size-s);
}

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

.pagenavi > *{
	margin-right: 2rem;
}

.pagenavi .current{
	opacity: 0.3;
}

.pagenavi .no-link{
	display: none;
}


@media screen and (max-width: 767px) {
	.pagenavi{
	    margin-left: 0;
	    justify-content: center;
	}
}


/*________Header_______*/
.header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	margin: var(--base-margin) 0;
/* 	height: var(--base-height); */
	filter: invert(1);
	mix-blend-mode: difference;
}

.header__layout{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--base-margin);
}

.header__colmn{
	width: var(--colmn2);
	font-size: var(--f-size-xs);
}

.logo{
	width: var(--colmn1);
	display: flex;
    align-items: center;
    z-index: 100;
    transition: .3s;
}

.logo__img{
	width: calc(var(--colmn1) / 3);
}

/*___Hamburger button___*/
.header-btn{
	width: 3rem;
	height: 2rem;
	position: relative;
	cursor: pointer;
	position: fixed;
	top: var(--base-margin);
	right: var(--base-margin);
	z-index: 8888;
}

.header-btn,
.header-btn span {
	transition: all .3s;
}

.header-btn span {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 3rem;
	height: 1px;
	background-color: var(--common-color);	
}
.header-btn span:nth-of-type(1) {
	top: 0;
}
.header-btn span:nth-of-type(2) {
	top: calc(50% - 1px);
}
.header-btn span:nth-of-type(3) {
	bottom: 0;
}

.header-btn.is-difference span{
	background-color: #fff;
}

.header-btn.is-difference.is-active span{
	background-color: var(--common-color);
}

.header-btn.is-active span:nth-of-type(1) {
	-webkit-transform: translateY(1rem) rotate(-45deg);
	transform: translateY(1rem) rotate(-45deg);
}
.header-btn.is-active span:nth-of-type(2) {
	opacity: 0;
}
.header-btn.is-active span:nth-of-type(3) {
	-webkit-transform: translateY(calc(-1rem + 1px)) rotate(45deg);
	transform: translateY(calc(-1rem + 1px)) rotate(45deg);
}

.header-nav{	
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	padding: var(--base-margin);
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: nowrap;
	
	transition: all .3s;
	-webkit-transition: transform all 3s;
	-webkit-transition: -webkit-transform all 3s;
	transform: translateX(100%);
	background: var(--bg-color);
	z-index: 50;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.header-nav.is-active{
	transform: translateX(0);
}

.header-nav__list{
	margin-top: var(--base-height);
	margin-left: var(--colmn1);
	font-size: var(--f-size-l);
}

.header-nav__item{
	margin-bottom: 1.5em;
}

.header-nav__item:nth-child(3){
	margin-bottom: 3em;
}

.header-nav__link{
	position: relative;
}

.header-nav__link:before{
	content: "";
	width: 0.5em;
	height: 1px;
	background-color: currentColor;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -1em;
}

.header-nav__information p{
	font-size: var(--f-size-xs);
}


@media screen and (max-width: 767px){	
				
	.logo__img{
		width: calc(var(--colmn1) / 2);
	}
}

/*________Nav_______*/
.nav{
	width: var(--colmn1);
	position: sticky;
	top: calc(var(--base-height) + calc(var(--base-margin)*2));
	font-size: var(--f-size-nav);
}

.nav__item{
	height: calc(var(--f-size) * 2.5);
}

.nav__link:hover{
	text-decoration: underline;
}




/*________Btn_______*/
.btn{
	display: block;
	cursor: pointer;
	transition: .25s;
}

.btn-common{
	display: inline-block;
	white-space: nowrap;
	background: var(--common-color);
	color: #fff;
	letter-spacing: 0.075em;
	padding: 0.5rem 1.5rem;
	border-radius: 1rem;
	width: var(--colmn1);
	min-width: fit-content;
	text-align: center;
	font-size: 1rem;
}

.btn-common:hover{
	opacity: 0.3;
}

.btn-area{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}


.btn-back{
	font-size: var(--f-size-s);
	margin-top: calc(var(--base-height) / 2);
	width: var(--colmn1);
}

.btn-back:hover{
	text-decoration: underline;
}

.btn-header-nav{
	background: var(--base-color-deep);
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: 0.075em;
	font-weight: bold;
	width: 300px;
	max-width: 80%;
	padding: calc(var(--base-margin)/2);
	border-radius: 10px;
	margin: 0 auto;
}

.btn-header-nav:hover{
	color: var(--base-color-deep);
	background: var(--base-color);
}

@media screen and (max-width: 767px){	
	.btn-area{
		width: 100%;
	}

	.btn-area > *{
		width: 100%;
	}
					
	.btn-common{
		width: 100%;
	}
	
	.btn-back{
		width: auto;
	}
}


/*________Footer_______*/
.footer{
	margin: var(--base-margin) 0;
	font-size: var(--f-size-xs);
}

.footer__layout{
	display: flex;
	border-top: solid 1px #bbb;
	padding-top: var(--base-margin);
	gap: var(--base-margin);
}

.footer__ttl{
	width: var(--colmn1);
	font-size: var(--f-size-s);
}

.footer__list{
	width: var(--colmn2);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	
}

.footer__item{
	display: flex;
	align-items: center;
}

.footer__item:after{
	content: "";
	display: inline-block;
	background: #000;
    width: 1px;
    height: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

.footer__item:last-child:after{
	display: none;
}

.footer__link{
	display: inline-block;
}

.footer__link:hover{
	text-decoration: underline;
}

.footer__link:before{
	display: none;
}

.copyright{
	color: var(--common-color-gray);
}

@media screen and (max-width: 767px){	
				
	.footer__layout{
		flex-direction: column;
	}
	
	.footer__list{
		margin-right: 0;
		margin-bottom: var(--base-margin);
		width: var(--colmn3);
	}
}


/*--------------------------------------------------------------
LAYOUT
--------------------------------------------------------------*/
.dl{
	clear: both;	
}

.dt{
	width: 20%;
	float: left;
}

.dd{
	width: 100%;
	padding-left: 20%;
}

.dl--venue{
	flex-direction: column;
	padding-left: 0;
}

.dt--venue{
	margin-bottom: calc(var(--base-height) * 0.5);
	font-family: var(--f-sans-serif);
	font-weight: var(--f-bold);
	font-size: var(--f-size-s);
	letter-spacing: 0.1em;
}

.dl--detail{
	border-top: solid 1px var(--border-color);
	display: block;
}

.dt--detail{
	width: 30%;
	float: left;
	padding: calc(var(--base-height) * 0.25) 0;
}

.dd--detail{
	border-bottom: solid 1px var(--border-color);
	width: 100%;
	padding: calc(var(--base-height) * 0.25) 0;
	padding-left: 30%;
}

@media screen and (max-width: 767px) {
	.dl--venue{
		margin-bottom: calc(var(--base-height) * 1);
	}
	.dt--venue{
		margin-bottom: 0;
	}
}




/*--------------------------------------------------------------
CONTENTS
--------------------------------------------------------------*/
.contents{
	margin-top: calc(var(--base-height) + calc(var(--base-margin) * 2));
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--base-margin);
}

.main{
	width: var(--colmn4);
	margin-bottom: var(--base-height);
}

.heading{
	position: relative;
	margin-bottom: var(--base-margin);
	font-size: var(--f-size-s);
	width: var(--colmn1);
}


@media screen and (max-width: 767px){	
	.main{
		width: 100%;
	}	
	
	
	.heading{
	
	}
				
	.heading:before{
		position: relative;
		content: "";
		width: calc(var(--base-margin)*0.5);
		height: 1px;
		background-color: currentColor;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: calc(var(--base-margin)*-1);	
	}
}




/*--------------------------------------------------------------
PAGE
--------------------------------------------------------------*/

/* ============================================ */
/* TOP */
/* ============================================ */
.cover{
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--base-height);
}

.cover__img{
	width: var(--colmn2);
	aspect-ratio: 3 / 4;
	object-fit: cover;
}


@media screen and (max-width: 767px){	
	.cover{
		flex-direction: column;
	}
	
	.cover__img{
		width: var(--colmn3);
	}
}

/* ============================================ */
/* NEWS */
/* ============================================ */
.news{
}


.news__item{
	margin-bottom: var(--base-margin);
	display: flex;
	justify-content: space-between;
}

.news__item--archive{
	margin-bottom: var(--base-height);
}

.news__heading{
	width: var(--colmn2);
}

.news__date{
	color: var(--common-color-gray);
	font-size: var(--f-size-xs);
}

.news__link{
}

.news__link:hover{
	text-decoration: underline;
}

.news__ttl{
	font-family: var(--f-serif);
}

.news__content{
	width: var(--colmn2);
	font-family: var(--f-serif);
	font-size: var(--f-size-l);
}



@media screen and (max-width: 767px){	
	.news--top{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	.news__list{
		width: var(--colmn3);
	}
	
	.news__list--top{
		width: var(--colmn2);
	}
	
	.news__item{
		display: block;
	}
	
	.news__item--top:nth-child(2){
		display: none;
	}
	
	.news__heading{
		width: 100%;
		margin-bottom: calc(var(--base-margin)*2);
	}
	
	.news__content{
		font-size: var(--f-size-l);
		width: var(--colmn3);
	}
	
}

/* ============================================ */
/* ABOUT */
/* ============================================ */
.about{
	margin-left: calc(var(--colmn1) + var(--base-margin));
}

.about__heading{
	font-size: var(--f-size-l);
	font-family: var(--f-serif);
	margin-bottom: calc(var(--base-height)/2);
}

.about__img{
	width: var(--colmn2);
	height: var(--base-height);
	object-fit: cover;
	background: #999;
	margin-bottom: var(--base-margin);
}

.about__txt{
	font-family: var(--f-serif);
	font-size: var(--f-size-l);
}


@media screen and (max-width: 767px){
	.about{
		margin-left: 0;
	}	
	
	.about__heading{
		margin-bottom: var(--base-margin);
	}
}

/* ============================================ */
/* PRODUCT */
/* ============================================ */

.product{
}

.product-cat{
	height: auto;
	min-height: calc(var(--base-height)/2);
	display: flex;
}

.product-cat__ttl{
	font-size: var(--f-size-xs);
	color: var(--common-color-gray);
	width: var(--colmn1);
	margin-right: var(--base-margin);
}

.product-cat__list{
	width: var(--colmn3);
	display: flex;
	flex-wrap: wrap;
	height: fit-content;
}

.product-cat__item{
	width: calc(var(--colmn1)/2);
	font-size: var(--f-size-s);
	margin-bottom: var(--base-margin);
}

.product-cat__item:nth-child(2),
.product-cat__item:nth-child(4),
.product-cat__item:nth-child(8),
.product-cat__item:nth-child(10),
.product-cat__item:nth-child(14),
.product-cat__item:nth-child(16),
.product-cat__item:nth-child(20),
.product-cat__item:nth-child(22){
	margin-right: var(--base-margin);
}

.product__list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--base-margin);
	flex: 1;
}

.product__item{
	width: var(--colmn2);
	display: flex;
	justify-content: space-between;
}

.product__link{
	width: var(--colmn1);
	background: #ddd;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.product__link:hover{
	opacity: 0.6;	
}

.product__link > img{
	display: block;
	width: 100%;
	object-fit: cover;
}

.product__caption{
	width: var(--colmn1);
	display: flex;
	font-family: var(--f-serif);
	flex-direction: column;
	justify-content: flex-end;
}

.product__main{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--base-margin);
	margin-bottom: calc(var(--base-height)/2);
}

.product__heading{
	width: var(--colmn2);
}

.product__ttl{
	width: var(--colmn1);
	margin-bottom: var(--base-margin);
	height: var(--base-height);
	font-family: var(--f-serif);
	font-size: var(--f-size-l);
}

.product__information{
	font-size: var(--f-size-s);
}
.product__information .dt{
	font-family: var(--f-sans-serif);
	color: var(--common-color-gray);	
}

.product__information .dd{
	font-family: var(--f-serif);	
}

.product__imgarea{
	width: var(--colmn2);
/* 	background: #ddd; */
	aspect-ratio: 3 / 4;
}

.product__content{
    margin-left: calc(var(--colmn1) + var(--base-margin));
    display: flex;
    flex-direction: column;
    align-items: self-end;
}

.product__txt{
	font-size: var(--f-size-l);
	font-family: var(--f-serif);
	margin-bottom: calc(var(--base-margin)*2);
}


/*Swiper*/
.swiper img{
	aspect-ratio: 3 / 4;
    object-fit: contain;
}

.swiper-container{
	position: relative;
}

.swiper-slide{
	height: auto;
}

.swiper-wrapper{
	align-items: center;
	height: auto;
}

.swiper-horizontal{
	touch-action: auto;
}

.swiper-pagination-bullet {
	width: 0.4rem;
	height: 0.4rem;
	background: #fff;
}

.swiper-pagination-bullet-active{
	background: #fff;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0.5rem;
}

.swiper-pagination-fraction{
	font-family: var(--f-sans-serif);
	font-size: var(--f-size-s);
	text-align: right;
	margin-right:  var(--base-margin);
	bottom: 0;
	position: relative;
}


.swiper-area-l, .swiper-area-r{
	position: absolute;
	top: 0;
	display: block;
	width: 50%;
	height: 100%;
	cursor: pointer;
	z-index: 5;
}

.swiper-area-l{
	left: 0;
}


.swiper-area-r{
	right: 0;
}

.swiper-button-next, .swiper-button-prev{
    width: 1.2rem;
    height: 1.2rem;
    color: #fff;
    opacity: 0;
    transition: .2s;
}

.swiper-area-r:hover .swiper-button-next,
.swiper-area-l:hover .swiper-button-prev {
    opacity: 1;
}

.swiper-button-next{
	right: calc(var(--base-margin)/2) !important;
}

.swiper-button-prev{
	left: calc(var(--base-margin)/2) !important;
}

/*
.swiper-button-next:after, .swiper-button-prev:after {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	border: solid 1px #fff;
	border-left: 0;
	border-bottom: 0;
}

.swiper-button-next:after{
	transform: rotate(45deg);
}

.swiper-button-prev:after{
	transform: rotate(225deg);
}
*/


@media screen and (max-width: 767px){
	.product--top{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	
	.product-cat{
		display: block;
		margin-bottom: calc(var(--base-margin)*2);
	}
	
	.product-cat__ttl{
		margin-bottom: var(--base-margin);
	}
	
	.product-cat__list{
		width: 100%;
	}
	
	.product-cat__item{
		width: 50%;
		margin-right: 0 !important;
	}
	
	
	.product__list{
		gap: calc(var(--base-margin) * 2) var(--base-margin);
	}
		
	.product__item{
		width: calc(50% - calc(var(--base-margin)/2));
		flex-direction: column;
	}
	
	.product__item--top{
		width: var(--colmn2);
	}
	
	.product__link{
		width: 100%;
	}
	
	.product__caption{
		width: 100%;
	}
	
	.product__main{
		flex-direction: column-reverse;
	}
	
	.product__heading{
		width: 100%;
	}
	
	.product__ttl{
		height: auto;
	}
	
	.product__imgarea{
		width: 100%;
	}
	
	.product__content{
		width: 100%;
		margin-left: 0;
	}

	.swiper{	
		width: calc(100% + var(--base-margin)*2));
/* 		margin: 0 calc(var(--base-margin)*-1); */
	}
	
	.swiper-area-l, .swiper-area-r{display: contents;}
	
	.swiper-button-next, .swiper-button-prev{
		opacity: 1;
	}
}

/* ============================================ */
/* CONTACT */
/* ============================================ */
.contact{

}

.contact__info{
	margin-left: calc(var(--colmn1) + var(--base-margin));
	margin-bottom: calc(var(--base-height) / 2);
}

#product_form{
	display: flex;
	margin-bottom: var(--base-margin);
}

.product_form__inner{
	display: flex;
	gap: var(--base-margin);
	justify-content: flex-end;
}

.product_form__heading{
	width: var(--colmn1);
}

.product_form__product{
	width: var(--colmn2);
	display: flex;
	gap: var(--base-margin);
    padding: 0.5rem 1rem;
    border: 1px solid #b2b2b2;
    border-radius: 5px;
/*     background: #fff;	 */
}


.product_form__ttl{
	width: var(--colmn1);
	font-family: var(--f-serif);
	font-size: var(--f-size-l);
}

.product_form__thumb{
	width: var(--colmn1);
}


/*________CONTACT_______*/
.input-area{
	display: flex;
	margin: 0 auto;
	height: auto;
	/* border-bottom: solid 1px var(--border-color); */
	gap: var(--base-margin);
	margin-bottom: var(--base-margin);
	justify-content: flex-end;
}

.input-head {
	display: flex;
	align-items: flex-start;
/*
	padding: 0.5rem;
	padding-left: 0;
*/
	width: 30%;
	width: var(--colmn1);
}

.input-head__required {
    background: #c04545;
    font-size: 0.75em;
    line-height: 1em;
    color: #fff;
    padding: 4px 6px;
    margin-left: 0.5rem;
    display: inline-block;
    border-radius: 0.2rem;
    font-size: var(--f-size-s);
}

.input-data {
/* 	padding: 0.5rem; */
	width: 70%;
	width: var(--colmn2);
}

.input-data input, .input-data textarea, .input-data select {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #b2b2b2;
    border-radius: 5px;
    line-height: 1.5em;
    box-sizing: border-box;
/*     margin: 0.5rem 0; */
    font-size: 1.125rem;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}


.screen-reader-response{
/*
    border: solid 1px red;
    padding: 1rem;
*/
    color: red;
    border-radius: 0.5rem;
    font-size: var(--f-size-s);
    display: none;
}

.wpcf7-not-valid{
	background: #ffe7e7;
}

.wpcf7-not-valid-tip{
	font-size: var(--f-size-s);
	color: red;
}

.wpcf7-response-output{
	font-size: var(--f-size-s);
	color: red;
	margin-top: calc( var(--base-height) * 0.5);
	margin-left: 30%;
}


@media screen and (max-width: 767px) {
	.contact__info{
		margin-left: 0;
	}
	
	
	.product_info__product{
		flex-direction: column;
        gap: unset;
        padding: 0;
        border: none;
	}

	.product_info__ttl{
		width: 100%;
	}
	
	.product_info__thumb{
		width: 100%;
	}
	
	
	.input-area{
		flex-direction: column;
		gap: unset;
	}
	
	.input-head {
		width: 100%;
		padding: 0.25rem;
	}

	.input-data {
		width: 100%;
		padding: 0.25rem;
	}

	.input-data input, .input-data textarea, .input-data select {
	    margin: 0;
	}

	.wpcf7-response-output{
		margin-left: 0;
	}

}