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

/******************************************
フォント読み込み
******************************************/
/* google fonts Alegreya系 読み込み */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700;800;900&display=swap');



/****************************************** 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
******************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{ 
	display: block;
}

nav ul{
	list-style: none;
}

blockquote, q{
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after{
	content:'';
	content:none;
}

a{
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* change colours to suit your needs */
ins{
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark{
	background-color: #ff9;
	color: #000; 
	font-style: italic;
	font-weight: bold;
}

del{
	text-decoration: line-through;
}

abbr[title], dfn[title]{
	border-bottom: 1px dotted;
	cursor: help;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr{
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

input, select{
	vertical-align: middle;
}



/******************************************
SP・全体表示
******************************************/
#bousai{
	margin: 0 auto 150px;
	padding: 0;
	color: #473933;
	font-size: 15px;
	line-height: 1.8em;
	letter-spacing: 0.03em;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana,Geneva, sans-serif;
	font-weight: normal;
	box-sizing: border-box;
}
#bousai img{
	max-width: 100%;
	max-height: 100%;
	border: none;
	vertical-align: top;
}
#bousai img.imgmax{
	max-width: 100%;
	height: auto;
}
#bousai a, a:hover, a:visited{
	text-decoration: underline;
	color: inherit;
}
#bousai p{
	margin: 0;
}
#bousai ul, #bousai li{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* メイン画像 */
#bousai .ctmain{
	position: relative;
	width: 100%;
	margin: 30px auto 0;
}
#bousai h1{
	font-weight: bold;
}
#bousai .catch{
	position: absolute;
	width: 100%;
	margin: 0;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 23px;
	line-height: 38px;
	text-align: center;
	letter-spacing: 0.1em;
}

/* メインタイトル */
#bousai .ttl_main{
	width: 95%;
	margin: 50px auto 60px;
	text-align: center;
}
#bousai .bousai_logo{
	margin: 0 0 30px;
}
#bousai .bousai_logo img{
	width: 36px;
	height: auto;
}
#bousai .h2_sub{
	margin: 0 auto 30px;
	font-size: 16px;
	line-height: 1.7em;
	letter-spacing: 0.1em;
	font-weight: bold;
}
#bousai .h2_under{
	display: inline-block;
	margin: 0 auto;
	padding: 0 0.3em 0.3em;
	font-size: 18px;
	letter-spacing: 0.05em;
	border-bottom: 1px solid #473933;
	font-weight: bold;
}

/* 導入文 */
#bousai .txt_main{
	width: 90%;
	margin: 0 auto 100px;
	text-align: left;
	font-size: 16px;
	line-height: 27px;
	letter-spacing: 0.02em;
	font-weight: 500;
}

/* メニュー */
#bousai .menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto 200px;
}
#bousai .menu_li{
	width: calc( (100% - 20px) / 2 );
	margin-bottom: 20px;
	text-align: center;
}
#bousai .menu_li:nth-child(2n){
	margin-left: 20px;
}
#bousai .menu_li:last-child{
	margin: auto;
}
#bousai .menu_mds{
	margin: 10px auto;
	font-size: 21px;
	font-weight: bold;
}
#bousai .menu_txt{
	text-align: left;
	font-size: 14px;
	line-height: 22px;
}
#bousai .menu_img{
	position: relative;
	width: 100%;
	transition-property: opacity;
	transition-duration: 0.3s;
}
#bousai .menu_img p{
	position: absolute;
	width: 100%;
	margin: 0;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 19px;
	line-height: 27px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-shadow: 0px 0px 7px rgb(140 130 117 / 70%);
}
#bousai .menu_img::before, #bousai .menu_img::after{
	position:absolute;
    content:"";
    width:12px;
    height:12px;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    transform:rotate(225deg);
    left:calc(100% / 2 - 6px);
    visibility:inherit;
    transition:0.3s;
}
#bousai .menu_img::before{
    bottom:20px;
}
#bousai .menu_img::after{
    bottom:15px;
}
#bousai .menu_img:hover{
	opacity: 0.7;
}
#bousai .menu_img:hover::before{
	bottom:15px;
}
#bousai .menu_img:hover::after{
	bottom:10px;
}
#bousai .menu_img img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Q and A */
#bousai .qa{
	background: #F5F2EA;
	margin: 0 auto 200px;
	padding: 30px;
	text-align: center;
}
#bousai .qa_ttl{
	margin: 30px auto 20px;
	font-size: 18px;
	line-height: 1.8em;
}
#bousai .qa ol{
	text-align: left;
}
#bousai .qa ol li{
	counter-increment: cnt;
	margin: 0 auto 30px;
	padding: 30px;
	background: #fff;
	border-radius: 15px;
}
#bousai .qa ol li:last-child{
	margin: 0 auto;
}
#bousai .qa ol li dl{
	margin: 0 0 -30px;
}
#bousai .qa ol li h4{
	content: "Q" counter(cnt) ". ";
	padding: 0 40px 0 0;
	font-size: 16px;
	line-height: 1.6em;
}
#bousai .qa ol li h4::before{
	content: "Q" counter(cnt) ". ";
}
#bousai .qa ol li h5, #bousai .qa ol li h6{
	font-weight: normal;
}
#bousai .qa ol li dd{
	margin: 10px 0 0;
	padding: 20px 0 0;
	text-align: center;
	border-top: 1px dashed #473933;
}
#bousai .qa ol li dd .qa_img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 0 15px;
}
#bousai .qa ol li dd .qa_answer h5{
	font-size: 16px;
	line-height: 1.6em;
	font-weight: bold;
}
#bousai .qa ol li dd .qa_answer h5::after{
	content: "";
	display: block;
	width: 50px;
	margin: 15px auto;
	border-bottom: 1px solid #473933;
}
#bousai .qa ol li dd .qa_answer h6{
	font-size: 15px;
	text-align: left;
}
/* 開閉 */
#bousai .l-accordion input {
	display: none;
}
#bousai .l-accordion .l-accordion-inside {
	height: 0;
	opacity: 0;
	transition: 0.5s;
}
#bousai .l-accordion input:checked~.l-accordion-inside {
	height: auto;
	opacity: 1;
	padding-bottom: 30px;
}
#bousai .l-accordion .l-accordion-switch {
	position: relative;
	display: block;
	font-weight: bold;
	cursor: pointer;
}
#bousai .l-accordion .l-accordion-switch::before,
#bousai .l-accordion .l-accordion-switch::after {
	content: '';
	position: absolute;
	display: block;
	width: 14px;
	height: 3px;
	background: #555;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}
#bousai .l-accordion .l-accordion-switch::after {
	transform: translateY(-50%) rotate(90deg);
	transition: 0.5s;
}
#bousai .l-accordion input:checked~.l-accordion-switch::after {
	transform: rotate(0);
	transition: 0.5s;
}

/* 商品紹介 */
#bousai .list{
	width: 90%;
	margin: 0 auto 200px;
	text-align: center;
}
#bousai .list h3.list_ttl{
	margin: 0 auto 30px;
	font-size: 25px;
	line-height: 1.8em;
	font-weight: normal;
}
#bousai .list h4.list_txt{
	margin: 30px auto 0;
	text-align: left;
	font-size: 15px;
	line-height: 1.8em;
	font-weight: normal;
}
#bousai .list .item{
	margin: 100px auto 0;
}
#bousai .list .item_img{
	margin: 0 auto 20px;
}
#bousai .list .item_img img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
}
#bousai .list h5.item_name{
	margin: 0 auto 15px;
	text-align: left;
	font-size: 17px;
	line-height: 1.7em;
}
#bousai .list h6.item_txt{
	margin: 0 auto 15px;
	font-size: 15px;
	text-align: left;
	font-weight: normal;
}
#bousai .list .goto{
    position: relative;
    display: inline-block;
    margin: 10px auto 0;
    padding: 10px 15px;
    font-size: 16px;
    border: 1px #473933 solid;
    border-radius: 10px;
}
#bousai .list .goto::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.2em;
    border-top: 3px solid #473933;
    border-right: 3px solid #473933;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    transform: rotate(45deg);
    pointer-events: none;
}
#bousai .list .goto a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/******************************************
PC表示
******************************************/
@media screen and (min-width:768px){
/* メイン画像 */
#bousai{
	width: 1000px;
}
#bousai .ctmain{
	width: 1000px;
}
#bousai .catch{
	font-size: 35px;
	line-height: 52px;
}

/* メインタイトル */
#bousai .h2_sub{
	width: 800px;
	font-size: 17px;
	line-height: 26px;
}
#bousai .h2_under{
	font-size: 23px;
}
/* 導入文 */
#bousai .txt_main{
	width: 800px;
}
/* メニュー */
#bousai .menu{
	width: 800px;
}
#bousai .menu_li{
	width: 220px;
	margin: 0;
	/*vertical-align: top;*/
}
#bousai .menu_li:nth-child(2n){
	margin: 0 auto;
}
#bousai .menu_li:last-child{
	margin: 0;
}
#bousai .menu_mds{
	margin: 40px auto 10px;
	font-size: 23px;
}
#bousai .menu_txt{
	font-size: 15px;
	line-height: 23px;
}

/* QandA */
#bousai .qa{
	padding: 60px;
}
#bousai .qa_ttl{
	margin: 60px auto 50px;
	font-size: 21px;
	line-height: 33px;
}
#bousai .qa ol li h4{
	font-size: 19px;
}
#bousai .qa ol li dd{
	display: flex;
}
#bousai .qa ol li dd .qa_img{
	width: 340px;
	height: 340px;
	margin: 0 30px 0 0
}
#bousai .qa ol li dd .qa_answer{
	width: 450px;
}
#bousai .qa ol li dd .qa_answer h5{
	font-size: 19px;
}
#bousai .qa ol li dd .qa_answer h5::after{
	margin: 20px auto;
}
#bousai .qa ol li dd .qa_answer h6{
	font-size: 14px;
	line-height: 24px;
}

/* 商品紹介 */
#bousai .list h3.list_ttl{
	font-size: 30px;
}
#bousai .list h4.list_txt{
	width: 800px;
}
#bousai .list{
	width: 1000px;
	padding: 0;
}
#bousai .list .item{
	display: flex;
	width: 1000px;
	text-align: left;
}
#bousai .list .item:nth-child(2n){
	flex-direction: row;
}
#bousai .list .item:nth-child(2n-1){
	flex-direction: row-reverse;
}
#bousai .list .item:nth-child(2n) .item_img{
	width: 400px;
	margin: 0 50px 0 0;
}
#bousai .list .item:nth-child(2n-1) .item_img{
	width: 400px;
	margin: 0 0 0 50px;
}
#bousai .list .item_info{
	width: 550px;
}
#bousai .list .item_name{
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 30px
}
#bousai .list .item_txt{
	margin: 0 0 30px;
	font-size: 14px;
	line-height: 27px;
}
}



/******************************************
PC・SPの表示・非表示
******************************************/
/*------------------------------------- SPで非表示・PCで表示 */
#bousai .pc{display: none;}
@media screen and (min-width:768px){
#bousai .pc{display: block;}
}
/*------------------------------------- SPで表示・PCで非表示 */
#bousai .sp{display: block;}
@media screen and (min-width:768px){
#bousai .sp{display: none;}
}



/******************************************
フォント・装飾
******************************************/
#bousai .Mincho{
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}
#bousai .Alegreya{
	font-family:'Alegreya', serif;
}
#bousai .AlegreyaSC{
	font-family:'Alegreya SC', serif;
}
#bousai .AlegreyaSans{
	font-family:'Alegreya Sans', sans-serif;
}
#bousai .AlegreyaSansSC{
	font-family:'Alegreya Sans SC', sans-serif;
}
#bousai .white{
	color: #fff;
}