@charset "UTF-8";

button.active {
    background: #ffcdcd;
}

@font-face {
  font-family: 'mobo';
  src: url('../font/MOBO.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}

body{	
	background-image:none;
}

.shojigami img {	
	width: auto;
	max-width: 100%;
}

.shojigami {	
	font-family: 'mobo', sans-serif;
	background: #ECE9E3;
}

.shojigami .clarendon {	
	font-family: "clarendon-text-pro", serif;
	font-weight: 700;
	font-style: normal;
}

.shojigami .zenkaku {	
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.shojigami .notosans {	
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.shojigami .textBold {
	font-weight: bold;
}

.textBrown {
	color:#894D19;
}

.size14 {
	font-size: clamp(12px, 1vw, 14px);
}

.size16 {
	font-size: clamp(14px, 1.2vw, 16px);
}

.size18 {
	font-size: clamp(15px, 1.2vw, 18px);
}

.size20 {
	font-size: clamp(15px, 1.4vw, 20px);
}

.size22 {
	font-size: clamp(16px, 1.4vw, 22px);
}

.size24 {
	font-size: clamp(18px, 1.4vw, 24px);
}

.size26 {
	font-size: clamp(20px, 1.7vw, 26px);
}

.size28 {
	font-size: clamp(22px, 1.8vw, 28px);
}

.size32 {
	font-size: clamp(24px, 2vw, 32px);
}

.size45 {
	font-size: clamp(24px, 2.6vw, 45px);
}

.size48 {
	font-size: clamp(26px, 3vw, 48px);
}

.size60 {
	font-size: clamp(30px, 3.4vw, 60px);
}

.size64 {
	font-size: clamp(30px, 3.2vw, 64px);
}

.shojigami section {
	max-width: 1520px;
	width: 90%;
	margin: 0 auto;
}

h1,h2,h3,h3::after,h5,h4 {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	height: auto;
}

ul { 
	margin:0; 
	padding: 0;
	list-style: none;
}

#contents a:hover {
    text-decoration: none;
    opacity: 1;
}

#contents{
	width:100%;
	margin:0 auto;
	text-align:left;
	min-height:inherit;
	padding-bottom: 0;
	min-width: unset;
	color:#333;
	overflow: inherit;
}
.shojigami p {
	margin: 0;
	padding: 0;
}

#contents .inner {
    overflow: hidden;
}

.flexBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.flexBox.reflex {
	flex-flow: row-reverse;
}

.youtube {
    position: relative;
    width: 60%;
    padding: 33.75% 0 0 0;
    margin: 10px auto 80px;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.posi {
    position: relative;
}

.bgWhite {
	background: #fff;
}

h3.enTitle {
	position: relative;
	width: auto;
	display: inline-block;
	margin-bottom: 50px;
}

h3.enTitle:before {
	content:"";
	width: 80px;
	height: 1px;
	background: #894D19;
	position: absolute;
	top:50%;
	right: -95px;
	transform: translateY(-50%);
}

h2.secTitle {
	margin-bottom: 70px;
	
}

h2.secTitle span {
    padding: 0 10px;
	letter-spacing: 4px;
}


/*＝＝＝＝＝
#mainPhoto
＝＝＝＝＝*/

#mainPhoto {
	margin-bottom: 95px;
}

#mainPhoto img {
	width: 100%;
}

/*＝＝＝＝＝
#sec01
＝＝＝＝＝*/
.shojigami #sec01 {
	margin-bottom: 55px;
}

.leftArea {
    width: 48%;
}

#sec01 .leftArea .text {
	font-weight: bold;
	margin-bottom: 115px;
}

#sec01 .leftArea .photoList div {
	width: 48%;
	max-width: 345px;
}

#sec01 .leftArea img {
    border-radius: 40px;
}

#sec01 .leftArea .photoList div:last-child {
	margin-top: 130px;
}

.rightArea {
	width: 50%;
}

#sec01 .rightArea img {
	border-radius: 50px;
	margin-bottom: 85px;
}

#sec01 .rightArea .text {
	font-weight: bold;
	line-height: 2.4;
	margin-bottom: 40px;
}

/*＝＝＝＝＝
#sec02
＝＝＝＝＝*/

.bgWhite02 {
	background: #FBF9F5;
	border-radius: 40px;
	padding: 100px 160px 0;
	position: relative;
	margin-bottom: 160px;
}

h2.subTitle {
    position: absolute;
    top: -27px;
}

h3.underLine {
    text-align: center;
	margin-bottom: 80px;
}

h3.underLine .bgLine {
    background: linear-gradient(transparent 70%, #FDE7D5 0%);
	padding: 0 5px;
}

#sec02 .text {
	line-height: 2.4;
	margin-bottom: 100px;
}

.typeList {
    width: 47%;
    max-width: 550px;
	margin-bottom: 125px;
}

.posi h4 {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #1E1E1E;
    height: 80px;
    width: 80%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	border-radius: 12px;
}

.posi h4 span {
	color:#fff;
	letter-spacing: 4px;
	line-height: 1.2;
}

.posi img {
	border-radius: 20px;
	box-shadow: 20px 20px 30px 0px rgb(30 30 30 / 8%);
	margin-bottom: 45px;
}

.typeList h5 {
	padding-bottom: 20px;
	border-bottom: 1px solid #894D19;
	margin-bottom: 35px;
}

ul.listStyle {
    padding-left: 16px;
}

ul.listStyle li {
    position: relative;
}

ul.listStyle li:before {
    position: absolute;
	content:"・";
	top:50%;
	left:-18px;
	transform: translateY(-50%);
}

/*＝＝＝＝＝
#sec03
＝＝＝＝＝*/
#sec03 .bgWhite02 {
	padding-bottom: 70px;
}

#sec03 h2.subTitle {
	right: 185px;
}

h4.bgLine {
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 20px;
}

h4.bgLine:before {
	position: absolute;
	content:"";
	width: 100%;
	height: 6px;
	background:url("../image/h4_bg.png") repeat-x 0 0;
	top:100%;
	left:0;
}

#sec03 .image {
    margin-bottom: 35px;
}

#sec03 table {
	margin: 0 0 15px;
	table-layout: fixed;
	width: 100%;
	border: none;
}

#sec03 table.table01 {
	margin: 0 0 10px;
}

#sec03 table.table02 tr {
	border: 2px solid #FDE7D5;
}

#sec03 table th {
	background: #894D19;
	text-align: center;
	color:#fff;
	border-top: none;
	border-bottom: none;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
	box-sizing: border-box;
}

#sec03 table th:first-child {
}

#sec03 table th:nth-child(2) {
}

#sec03 table th:last-child {
}

#sec03 table td {
	background: #F8F3E9;
	box-sizing: border-box;
	font-weight: 600;
}

#sec03 table.table01 td {
	border: 2px solid #FDE7D5;
	border-right: 2px solid #fff;
}

#sec03 table.table02 td {
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#sec03 table.table02 td:last-child {
	border-right: none;
}

#sec03 table.table02 tr:last-child td {
	border-bottom: none;
}

#sec03 .annotation {
	margin-top: 55px;
}

/*＝＝＝＝＝
#sec04
＝＝＝＝＝*/

#sec04 .text {
    line-height: 2.4;
    margin-bottom: 100px;
}

#sec04 .typeList {
    width: 30%;
    max-width: 350px;
    margin-bottom: 80px;
}

#sec04 .posi h4 {
    height: 60px;
	width: 85%;
    max-width: 300px;
	top: -30px;
}

#sec04 .typeList h5 {
    padding-bottom: 10px;
    border-bottom: 2px solid #894D19;
    margin-bottom: 15px;
}

#sec04 .typeList .text {
    line-height: 2;
    margin-bottom: 40px;
}

#sec04 ul.listStyle {
    padding-left: 20px;
	min-height: 11em;
}

#sec04 .typeList ul.listStyle:last-child {
	min-height: auto;
}


.conversion02 {
	margin-bottom: 130px;
}


/*＝＝＝＝＝
#sec05（絞り込み）
＝＝＝＝＝*/

#sec05 {
	margin-bottom: 230px;
}

#sec05 .rightArea img {
    border-radius: 50px;
}

#sec05 .flexBox {
	margin-bottom: 130px;
}

#sec05 h4.bgLine {
    margin-bottom: 40px;
}

#sec05 h4.bgLine:before {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

#sec05 .filter {
    justify-content: center;
	margin-bottom: 130px;
}

#sec05 .filter button,.resetArea button {
	border:none;
	background: #fff;
	padding: 0;
	width: 220px;
	height: 60px;
	margin: 0 8px;
	border-radius: 10px;
	font-weight: 800;
	cursor: pointer;
}

#sec05 .filter button:hover,.resetArea button:hover {
	background: #E2DAC8;
}

#sec05 .filter button.active {
    background: #E2DAC8;
}

#sec05 .resetArea {
	text-align: center;
	margin-bottom: 100px;
}

#sec05 .items.flexBox {
    justify-content: flex-start;
}

#sec05 .item {
    width: 16.88%;
    max-width: 264px;
	margin: 0 20px;
}

#sec05 .item .photo {
	margin-bottom: 35px;
	overflow: hidden;
    border-radius: 30px;
}

#sec05 .item .photo a:hover {
	opacity: 1;
}

#sec05 .item .photo img {
	border-radius: 30px;
	-webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

#sec05 .item .photo a:hover img {
	opacity: 1;
	scale:1.2;
	-webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transition:0.5s ease-out;
}

#sec05 .item .productName {
    margin-bottom: 40px;
    min-height: 3em;
}

#sec05 .item ul {
	justify-content: flex-start;
	margin-bottom: 80px;
}

#sec05 .item li {
	list-style: none;
	text-align: center;
	background: #fff;
	padding: 5px 10px;
	margin-right: 10px;
}

#sec05 button#loadMore {
	border-top:none;
	border-right: none;
	border-bottom: 2px solid #1E1E1E;
	border-left: none;
	background: none;
	position: relative;
	font-weight: 800;
	padding: 0 50px 15px 0;
    letter-spacing: 2px;
	cursor: pointer;
}

#sec05 button#loadMore:before {
	content:"";
	position: absolute;
	top: -5px;
	right: 0;
	width: 35px;
	height: 35px;
	background: #E2DAC8;
	border-radius: 50px;
	z-index: 1;
}

#sec05 button#loadMore:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 15px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #635A47;
    border-left: 1px solid #635A47;
    transform: translateY(-25%) rotate(135deg);
    z-index: 2;
}


/*＝＝＝＝＝
#sec06（タブ切り替え）
＝＝＝＝＝*/

#sec06 {
	margin-bottom: 200px;
}

#sec06 .flexBox.reflex {
	justify-content: flex-end;
	margin-bottom: 125px;
}

#sec06 .rightArea {
	margin-right: 160px;
}

#sec06 .rightArea img {
    border-radius: 50px;
}

.tabWrap,.tabWrap01 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tabLabel,.tabLabel01 {
	color: #1E1E1E;
	background: #E2DAC8;
	font-weight: bold;
	position: relative;
	z-index: 1;
	cursor: pointer;
	flex: 1;
	padding: 0;
    margin: 0 10px;
    text-align: center;
    border-radius: 20px 20px 0 0;
    max-width: 220px;
    line-height: 60px;
}

.tabLabel:hover,.tabLabel01:hover {
	opacity: 0.75;
	background: #E2DAC8;
}

.tabContent {
	flex: 100%;
	display: none;
	overflow: hidden;
}

input[name="tabBtn"],input[name="tabBtn01"] {
  display: none;
}

.tabWrap input:checked + .tabLabel,.tabWrap01 input:checked + .tabLabel01 {
  color: #894D19;
  background-color: #F8F3E9;
}

.tabWrap input:checked + .tabLabel::after,.tabWrap01 input:checked + .tabLabel01::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #F8F3E9 transparent transparent transparent;
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content,
#tab05:checked ~ #tab05_content,
#tab06:checked ~ #tab06_content,
#tab07:checked ~ #tab07_content {
	display: block;
	background: #F8F3E9;
	padding: 90px 75px 40px;
	border-radius: 50px;
}

.tabContent {
  position: relative;
  animation: fadeIn 1s ease;
}

.tabContent ul.flexBox {
	justify-content: flex-start;
	gap:55px;
}

.tabContent ul.flexBox li {
	width: 21%;
	max-width: 230px;
	margin-bottom: 50px;
}

.tabContent ul.flexBox li .photo {
	margin-bottom: 30px;
    overflow: hidden;
    border-radius: 30px;
}

.tabContent ul.flexBox li .photo img {
    border-radius: 30px;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.tabContent ul.flexBox li .photo a:hover img {
    opacity: 1;
    scale: 1.1;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.tabContent ul.flexBox li .productName {
	padding-bottom: 10px;
	border-bottom: 1px solid #894D19;
	margin-bottom: 10px;
	min-height: 3em;
}

.conversion03 {
    margin-bottom: 200px;
}

/*＝＝＝＝＝
#sec07
＝＝＝＝＝*/

#sec07 .rightArea img {
    border-radius: 50px;
}

#sec07 .flexBox {
	margin-bottom: 110px;
}

#sec07 .tabWrap01 {
	margin-bottom: 250px;
}

#sec07 h4 {
	margin-bottom: 70px;
}

#sec07 .tabContent .flexBox {
	justify-content: center;
	margin-bottom: 0;
	gap:50px;
}

#sec07 .tabContent .flexBox li {
	width: 30%;
	max-width: 415px;
	margin-bottom: 40px;
	display: flex;
    flex-direction: column;
}

#sec07 .tabContent .flexBox li:last-child {
	margin-right: 0;
}

#sec07 .tabContent .flexBox .bgWhite {
	padding: 40px 45px 60px;
	border-radius: 20px;
	flex-grow: 1;
}

#sec07 .tabContent .flexBox .number {
	background: #894D19;
	width: 46px;
	line-height: 46px;
	text-align: center;
	border-radius: 50px;
	color: #fff;
	position: absolute;
	top:-23px;
	left:50%;
	transform: translateX(-50%);
}

#sec07 .tabContent .flexBox .text {
	line-height: 2;
}

#sec07 .tabContent .flexBox .text a {
	color:inherit;
}

/*＝＝＝＝＝
#sec08
＝＝＝＝＝*/

#sec08 {
	margin-bottom: 240px;
}

#sec08 .rightArea img {
    border-radius: 50px;
}

#sec08 .flexBox.reflex {
	justify-content: flex-end;
	margin-bottom: 120px;
}

#sec08 .rightArea {
	margin-right: 120px;
}

#sec08 h3.enTitle {
    margin-bottom: 30px;
}

#sec08 .fukidashi {
	margin-left: -5px;
	margin-bottom: 10px;
}

#sec08 h2.secTitle {
    margin-bottom: 15px;
}

#sec08 .bgBrown {
	background: #F8F3E9;
	padding:  140px 80px 50px;
	border-radius: 50px;
}

#sec08 .typeList {
    width: 32%;
    max-width: 415px;
    margin-bottom: 50px;
	display: flex;
    flex-direction: column;
}

#sec08 .typeList h5 {
    padding-bottom: 10px;
    border-bottom: 2px solid #894D19;
    margin-bottom: 15px;
}

#sec08 .typeList .text {
    line-height: 2;
    margin-bottom: 50px;
	flex-grow: 1;
}

#sec08 .posi h4 {
    height: 60px;
    width: 70%;
}

#sec08 .posi h4 span {
    letter-spacing: 2px;
}

#sec08 .howtoBtn a {
	background: #fff;
	display: block;
	color:#1E1E1E;
	width: 100%;
	position: relative;
	text-align: center;
	border: 2px solid #CBCBCB;
	line-height: 60px;
	border-radius: 10px;
	margin-bottom: 50px;
}

#sec08 .howtoBtn a:before {
	content:"";
	background: url("../image/icon_link.svg") no-repeat 0 0;
	background-size: 100%;
	width: 18px;
	height: 18px;
	position: absolute;
	right: 20px;
	top:50%;
	transform: translateY(-50%);
}

#sec08 .howtoBtn a:hover {
	background: #E2DAC8;
	color:#635A47;
}



/*＝＝＝＝＝
#sec09
＝＝＝＝＝*/
#sec09 {
	margin-bottom: 60px;
}

#sec09 .rightArea img {
    border-radius: 50px;
}

#sec09 .flexBox {
	margin-bottom: 145px;
}

#sec09 h4.bgLine {
    margin-bottom: 45px;
	letter-spacing: 6px;
    margin-left: 6px;
}

#sec09 table {
	margin: 0 0 130px;
	width: 100%;
	background: #fff;
}

#sec09 .table02 {
	margin: 0 0 30px;
}

#sec09 table th,#sec09 table td {
	border: 2px solid #B2A1A1;
	align-items: center;
}

#sec09 table th {
	width: 20%;
	background: #E2DAC8;
	padding-left: 35px;
	line-height: 80px;
}

#sec09 table td {
	width: 80%;
	align-items: center;
	padding: 0 0 0 40px;
	line-height: 2;
}

#sec09 .annotation {
	margin: 0 0 130px;
}

/*＝＝＝＝＝
#sec10
＝＝＝＝＝*/

#sec10 {
	padding-bottom: 250px;
}

#sec10 .rightArea img {
    border-radius: 50px;
}

#sec10 .flexBox.reflex {
	justify-content: flex-end;
	margin-bottom: 160px;
}

#sec10 .rightArea {
	margin-right: 160px;
}


#sec10 input[type=checkbox] {
	display: none;
}

.accordion {
	max-width: 100%;
}

.toggle {
	display: none;
}

.faq {
	position: relative;
	margin-bottom: 1rem;
}

.question,.anser {
	transform: translateZ(0);
	transition: all 0.3s;
}

.question {
	background: #fff;
	padding: 8px 30px 8px 15px;
	border-radius: 0;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
}

.question:hover {
	background: #894D19;
	color:#fff;
}

.question:hover p {
	color:#fff;
}

.question .clarendon,.anser dt {
	width: 40px;
}

.question .text,.anser dd {
	width: calc(100% - 80px);
	padding-left: 30px;
	border-left: 1px solid #CBCBCB;
	line-height: 1.8;
	font-weight: 600;
}

.question:after,.question:before {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 2px;
	height: 15px;
	background-color: #130A43;
	transition: all 0.3s;
}

.question:after {
	transform: rotate(90deg);
}

.anser {
	max-height: 0;
	overflow: hidden;
	background: #fff;
}

.anser dl {
	justify-content: flex-start;
	align-items: center;
	padding: 8px 30px 8px 15px;
}

.toggle:checked + .question + .anser {
	max-height: 500px;
	transition: all 1.5s;
}

.toggle:checked + .question:before {
	transform: rotate(90deg) !important;
	background: #fff;
}

.toggle:checked + .question:after,.question:hover:after,.question:hover:before  {
	background: #fff;
}

.toggle:checked + .question {
	background: #894D19;
}

.toggle:checked + .question p {
	color:#fff;
}



@media screen and  (min-width: 320px) and (max-width: 768px) {
	
	.shojigami {
		overflow-x: hidden;
	}
	
	section p {
		margin: 0;
		font-size: 16px;
	}
	
	section li {
		margin: 0;
	}
	
	.inner {
		width:92%;
		margin: 0 auto;
		min-width: 92%;
	}
	
	.pc {
		display: none;
	}
		
	.youtube {
		width: 100%;
		padding: 56.25% 0 0 0;
		margin: 0 auto 40px;
	}
	
	#mainPhoto {
		margin-bottom: 60px;
	}	
	
	.leftArea {
		width: 100%;
	}
	
	h3.enTitle {
		margin-bottom: 25px;
	}
	
	h2.secTitle {
		margin-bottom: 50px;
	}	

	#sec01 .leftArea .text {
		margin-bottom: 50px;
	}
	
	#sec01 .leftArea .photoList div:last-child {
		margin-top: 60px;
		margin-bottom: 50px;
	}
	
	.rightArea {
		width: 100%;
	}

	#sec01 .rightArea img {
		border-radius: 25px;
		margin-bottom: 50px;
	}	
	
	#sec01 .rightArea .text {
		font-weight: 600;
		line-height: 2.1;
		margin-bottom: 30px;
	}
	
	.bgWhite02 {
		border-radius: 25px;
		padding: 50px 30px 0;
		margin-bottom: 70px;
	}
	
	h2.subTitle {
		top: -18px;
	}
	
	h3.underLine {
		margin-bottom: 40px;
	}	
	
	#sec02 .text {
		line-height: 2.1;
		margin-bottom: 80px;
	}
	
	.typeList {
		width: 100%;
		margin-bottom: 70px;
	}
	
	.posi h4 {
		height: 62px;
	}	
	
	.posi img {
		margin-bottom: 30px;
	}
	
	.typeList h5 {
		padding-bottom: 15px;
		margin-bottom: 25px;
	}
	
	.spTableWrap {
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	
	#sec03 .image,#sec03 table {
		width: 1000px;
	}  
	
	#sec03 table td,#sec03 table th {
		white-space: normal;
		font-size: 14px;
		padding: 10px 10px;
	}
	
	.spTableWrap p {
		margin-bottom: 10px;
	}
	
	#sec03 .annotation {
		margin-top: 30px;
	}	
	
	#sec04 .text {
		line-height: 2.1;
		margin-bottom: 80px;
	}	
	
	#sec04 .typeList {
		width: 100%;
		max-width: unset;
		margin-bottom: 40px;
	}
	
	#sec04 .typeList .text {
		line-height: 1.8;
		margin-bottom: 30px;
	}	
	
	#sec04 ul.listStyle {
		min-height: auto;
		margin-bottom: 30px;
	}	
	
	.conversion02 {
		margin-bottom: 60px;
	}	

	#sec05 {
		margin-bottom: 70px;
	}

	#sec05 .rightArea img {
		border-radius: 25px;
	}
	
	#sec05 .flexBox {
		margin-bottom: 50px;
	}
	
	#sec05 .filter button, .resetArea button {
		padding: 0;
		width: 40%;
		height: 50px;
		margin: 0 5px 10px;
	}
	
	#sec05 .filter {
		margin-bottom: 40px;
	}
	
	#sec05 .resetArea {
		margin-bottom: 50px;
	}	
	
	#sec05 .items.flexBox {
		gap: 0 2%;
		margin-bottom: 20px;
	}
	
	#sec05 .item {
		width: 32%;
		max-width: unset;
	}
	
	#sec05 .item .photo,#sec05 .item .photo img {
		border-radius: 20px;
	}	
	
	#sec05 .item .photo {
		margin-bottom: 15px;
	}
	
	#sec05 .item ul {
		margin-bottom: 30px;
	}
	
	#sec05 .item li {
		padding: 3px 8px;
		margin-right: 6px;
		margin-bottom: 5px;
		font-size: 8px;
	}	
	
	#sec05 .item .productName {
		margin-bottom: 15px;
		min-height: unset;
	}	
	
	#sec06 {
		margin-bottom: 70px;
	}
	
	#sec06 .rightArea {
		margin-right: 0;
	}
	
	#sec06 .rightArea img {
		border-radius: 25px;
	}
	
	.flexBox.reflex {
		flex-flow: wrap;
	}	
	
    #sec06 .flexBox.reflex {
        margin-bottom: 50px;
    }
	
	.tabLabel, .tabLabel01 {
		flex: none;
		padding: 0;
		margin: 0 0px;
		border-radius: 0px 0px 0px 0px;
		max-width: unset;
		line-height: 55px;
		width: 40%;
		display: block;
	}

	#tab01:checked ~ #tab01_content, #tab02:checked ~ #tab02_content, #tab03:checked ~ #tab03_content, #tab04:checked ~ #tab04_content, #tab05:checked ~ #tab05_content, #tab06:checked ~ #tab06_content, #tab07:checked ~ #tab07_content {
		border-radius: 25px;
		padding: 40px 30px 20px;
	}
	
	#sec06 .tabContent ul.flexBox {
        margin-bottom: 0;
        gap: 0 4%;
    }
	
	
	.tabContent ul.flexBox li {
		width: 48%;
		max-width: unset;
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.tabContent ul.flexBox li .photo {
		margin-bottom: 15px;
		border-radius: 20px;
	}
	
	.tabContent ul.flexBox li .photo img {
		border-radius: 20px;
	}
	
	.tabContent ul.flexBox li .productName {
		min-height: 2.8em;
	}
	
	.conversion03 {
		margin-bottom: 60px;
	}
		
	#sec07 .rightArea img {
		border-radius: 25px;
	}
	
	#sec07 h4 {
		margin-bottom: 50px;
	}
	
	#sec07 .tabWrap01 {
		margin-bottom: 70px;
	}
	
	#sec07 .flexBox {
		margin-bottom: 50px;
	}	
	
    .tabLabel01 {
        width: 75%;
    }
	
	#sec07 .tabContent .flexBox li {
		width: 100%;
		max-width: unset;
		margin-right: 0;
		margin-bottom: 35px;
	}
	
	#sec07 .tabContent .flexBox .bgWhite {
		padding: 40px 25px 40px;
	}
	
	#sec07 .right {
		text-align: left;
		margin-bottom: 20px;
	}
	
	#sec08 {
		margin-bottom: 70px;
	}
	
	#sec08 .fukidashi {
		width: 45%;
	}	
	
	#sec08 h2.secTitle {
		margin-bottom: 10px;
	}
	
	#sec08 h2.secTitle:last-child {
		margin-bottom: 50px;
	}
	
	#sec08 .rightArea img {
		border-radius: 25px;
	}	
	
	#sec08 .rightArea {
		margin-right: 0;
	}
	
	#sec08 .flexBox.reflex {
		margin-bottom: 50px;
	}
	
	#sec08 .bgBrown {
		border-radius: 25px;
		padding: 80px 30px 0;
	}	
	
	#sec08 .typeList {
		width: 100%;
		margin-bottom: 40px;
	}
	
	#sec08 .typeList .text {
		line-height: 2.1;
		margin-bottom: 25px;
	}
	
	#sec08 .howtoBtn a {
		margin-bottom: 15px;
	}
	
	#sec09 .rightArea img {
		border-radius: 25px;
	}
	
	#sec09 .flexBox {
		margin-bottom: 50px;
	}
	
	#sec09 h4.bgLine {
		margin-bottom: 40px;
	}
	
	#sec09 table {
		border-top: 2px solid #B2A1A1;
		border-right: 2px solid #B2A1A1;
		border-left: 2px solid #B2A1A1;
		border-bottom: none;
		margin: 0 0 70px;
	}
	
	#sec09 table th, #sec09 table td {
		border: none;
		align-items: center;
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
	
	#sec09 table th,#sec09 table td {
		border-bottom: 2px solid #B2A1A1;
	}
	
	#sec09 table th {
		line-height: 1.6;
	}
	
	#sec09 table td {
		padding: 15px;
		line-height: 1.6;
	}	
	
	#sec09 .annotation {
		margin: 0 0 70px;
	}	
	
	#sec10 .rightArea {
		margin-right: 0;
	}

	#sec10 {
		padding-bottom: 70px;
	}
	
	#sec10 .rightArea img {
		border-radius: 25px;
	}
	
	#sec10 .flexBox.reflex {
		margin-bottom: 50px;
	}

	
	
}




@media screen and  (min-width: 769px) and (max-width: 1024px) {
	
	.shojigami img {
		width: 100%;
	}	
	
	section  p,section  li {
		margin: 0;
		font-size: 16px;
		line-height: 1.8;
	}
	
	.sp {
		display: none;
	}
	
	#mainPhoto {
		margin-bottom: 60px;
	}	
	
	.leftArea {
		width: 100%;
	}
	
	h3.enTitle {
		margin-bottom: 25px;
	}
	
	h2.secTitle {
		margin-bottom: 50px;
	}	

	#sec01 .leftArea .text {
		margin-bottom: 50px;
	}
	
	#sec01 .leftArea .photoList div:last-child {
		margin-top: 60px;
		margin-bottom: 50px;
	}
	
	.rightArea {
		width: 100%;
	}

	#sec01 .rightArea img {
		border-radius: 25px;
		margin-bottom: 50px;
		width: 100%;
	}	
	
	#sec01 .rightArea .text {
		font-weight: 600;
		line-height: 2.1;
		margin-bottom: 30px;
	}
	
	.bgWhite02 {
		border-radius: 25px;
		padding: 50px 30px 0;
		margin-bottom: 70px;
	}
	
	h2.subTitle {
		top: -18px;
	}
	
	h3.underLine {
		margin-bottom: 40px;
	}	
	
	#sec02 .text {
		line-height: 2.1;
		margin-bottom: 80px;
	}
	
	.typeList {
		width: 100%;
		margin-bottom: 70px;
		max-width: unset;
	}
	
	.posi h4 {
		height: 62px;
	}	
	
	.posi img {
		margin-bottom: 30px;
	}
	
	.typeList h5 {
		padding-bottom: 15px;
		margin-bottom: 25px;
	}
	
	.spTableWrap {
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	
	#sec03 .image,#sec03 table {
		width: 1000px;
	}  
	
	#sec03 table td,#sec03 table th {
		white-space: normal;
		font-size: 14px;
		padding: 10px 10px;
	}
	
	.spTableWrap p {
		margin-bottom: 10px;
	}
	
	#sec03 .annotation {
		margin-top: 30px;
	}	
	
	#sec04 .text {
		line-height: 2.1;
		margin-bottom: 80px;
	}	
	
	#sec04 .typeList {
		width: 48%;
		max-width: unset;
		margin-bottom: 40px;
	}
	
	#sec04 .typeList .text {
		line-height: 1.8;
		margin-bottom: 30px;
	}	
	
	#sec04 ul.listStyle {
		min-height: auto;
		margin-bottom: 30px;
	}	
	
	.conversion02 {
		margin-bottom: 60px;
	}	

	#sec05 {
		margin-bottom: 70px;
	}

	#sec05 .rightArea img {
		border-radius: 25px;
	}
	
	#sec05 .flexBox {
		margin-bottom: 50px;
	}
	
	#sec05 .filter button, .resetArea button {
		padding: 0;
		width: 40%;
		height: 50px;
		margin: 0 5px 10px;
	}
	
	#sec05 .filter {
		margin-bottom: 40px;
	}
	
	#sec05 .resetArea {
		margin-bottom: 50px;
	}	
	
	#sec05 .items.flexBox {
		gap: 0 2%;
		margin-bottom: 20px;
	}
	
	#sec05 .item {
		width: 32%;
		max-width: unset;
	}
	
	#sec05 .item .photo,#sec05 .item .photo img {
		border-radius: 20px;
	}	
	
	#sec05 .item .photo {
		margin-bottom: 15px;
	}
	
	#sec05 .item ul {
		margin-bottom: 30px;
	}
	
	#sec05 .item li {
		padding: 3px 8px;
		margin-right: 6px;
		margin-bottom: 5px;
		font-size: 8px;
	}	
	
	#sec05 .item .productName {
		margin-bottom: 15px;
		min-height: unset;
	}	
	
	#sec06 {
		margin-bottom: 70px;
	}
	
	#sec06 .rightArea {
		margin-right: 0;
	}
	
	#sec06 .rightArea img {
		border-radius: 25px;
	}
	
	.flexBox.reflex {
		flex-flow: wrap;
	}	
	
    #sec06 .flexBox.reflex {
        margin-bottom: 50px;
    }
	
	.tabLabel, .tabLabel01 {
		flex: none;
		padding: 0;
		margin: 0 0px;
		border-radius: 0px 0px 0px 0px;
		max-width: unset;
		line-height: 55px;
		width: 40%;
		display: block;
	}

	#tab01:checked ~ #tab01_content, #tab02:checked ~ #tab02_content, #tab03:checked ~ #tab03_content, #tab04:checked ~ #tab04_content, #tab05:checked ~ #tab05_content, #tab06:checked ~ #tab06_content, #tab07:checked ~ #tab07_content {
		border-radius: 25px;
		padding: 40px 30px 20px;
	}
	
	#sec06 .tabContent ul.flexBox {
        margin-bottom: 0;
        gap: 0 4%;
    }
	
	
	.tabContent ul.flexBox li {
		width: 48%;
		max-width: unset;
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.tabContent ul.flexBox li .photo {
		margin-bottom: 15px;
		border-radius: 20px;
	}
	
	.tabContent ul.flexBox li .photo img {
		border-radius: 20px;
	}
	
	.tabContent ul.flexBox li .productName {
		min-height: 2.8em;
	}
	
	.conversion03 {
		margin-bottom: 60px;
	}
		
	#sec07 .rightArea img {
		border-radius: 25px;
	}
	
	#sec07 h4 {
		margin-bottom: 50px;
	}
	
	#sec07 .tabWrap01 {
		margin-bottom: 70px;
	}
	
	#sec07 .flexBox {
		margin-bottom: 50px;
	}	
	
    .tabLabel01 {
        width: 28%;
    }
	
	#sec07 .tabContent .flexBox li {
		width: 100%;
		max-width: unset;
		margin-right: 0;
		margin-bottom: 35px;
	}
	
	#sec07 .tabContent .flexBox .bgWhite {
		padding: 40px 25px 40px;
	}
	
	#sec07 .right {
		text-align: left;
		margin-bottom: 20px;
	}
	
	#sec08 {
		margin-bottom: 70px;
	}
	
	#sec08 .fukidashi {
		width: 45%;
	}	
	
	#sec08 h2.secTitle {
		margin-bottom: 10px;
	}
	
	#sec08 h2.secTitle:last-child {
		margin-bottom: 50px;
	}
	
	#sec08 .rightArea img {
		border-radius: 25px;
	}	
	
	#sec08 .rightArea {
		margin-right: 0;
	}
	
	#sec08 .flexBox.reflex {
		margin-bottom: 50px;
	}
	
	#sec08 .bgBrown {
		border-radius: 25px;
		padding: 80px 30px 0;
	}	
	
	#sec08 .typeList {
		width: 100%;
		margin-bottom: 40px;
	}
	
	#sec08 .typeList .text {
		line-height: 2.1;
		margin-bottom: 25px;
	}
	
	#sec08 .howtoBtn a {
		margin-bottom: 15px;
	}
	
	#sec09 .rightArea img {
		border-radius: 25px;
	}
	
	#sec09 .flexBox {
		margin-bottom: 50px;
	}
	
	#sec09 h4.bgLine {
		margin-bottom: 40px;
	}
	
	#sec09 table {
		border-top: 2px solid #B2A1A1;
		border-right: 2px solid #B2A1A1;
		border-left: 2px solid #B2A1A1;
		border-bottom: none;
		margin: 0 0 70px;
	}
	
	#sec09 table th, #sec09 table td {
		border: none;
		align-items: center;
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
	
	#sec09 table th,#sec09 table td {
		border-bottom: 2px solid #B2A1A1;
	}
	
	#sec09 table th {
		line-height: 1.6;
	}
	
	#sec09 table td {
		padding: 15px;
		line-height: 1.6;
	}	
	
	#sec09 .annotation {
		margin: 0 0 70px;
	}	
	
	#sec10 .rightArea {
		margin-right: 0;
	}

	#sec10 {
		padding-bottom: 70px;
	}
	
	#sec10 .rightArea img {
		border-radius: 25px;
	}
	
	#sec10 .flexBox.reflex {
		margin-bottom: 50px;
	}

	

}

@media screen and  (min-width: 1025px) and (max-width: 1300px) {

	.bgWhite02 {
		padding: 70px 80px 0;
	}

	.typeList {
		margin-bottom: 80px;
	}	
	
	#sec05 {
		margin-bottom: 120px;
	}
	
	#sec05 .item {
		max-width: unset;
        margin: 0 1%;
		width: 18%;
		margin-right: 1%;
	}	
	
	#sec05 .flexBox {
		margin-bottom: 60px;
	}	
	
	.tabContent ul.flexBox li {
		width: 17.6%;
		margin-right: 3%;
	}	
	
	#tab01:checked ~ #tab01_content, #tab02:checked ~ #tab02_content, #tab03:checked ~ #tab03_content, #tab04:checked ~ #tab04_content, #tab05:checked ~ #tab05_content, #tab06:checked ~ #tab06_content, #tab07:checked ~ #tab07_content {
		padding: 60px 45px 10px;
	}
	
	#sec07 .tabContent .flexBox {
		gap: 2%;
	}	
	
	#sec07 .tabContent .flexBox li {
		width: 30%;
		max-width: unset;
	}	
	
	#sec08 .howtoBtn a {
		margin-bottom: 25px;
	}
	
	#sec09 table th {
		padding: 20px;
		line-height: 1.8;
	}	
	


}



#pageTop {
    display: none;
    position: fixed;
    bottom: 35px;
    right: 20px;
    text-decoration: none;
    z-index: 1000;
    text-align: center;
    padding: 12px;
    background: #894D19;
    font-weight: bold;
    font-size: 90%;
    width: 30px;
    height: 30px;
    border-radius: 50px;
}

#pageTop a:hover {
	text-decoration: none;
}

#pageTop a img {
	width: 100%;
}