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

html { scroll-behavior: smooth;}
html,body{
	font-family: 'Noto Sans JP', sans-serif;
	font-size:16px;
	font-weight: 400;
	line-height: 2.3em;
	padding:0;
	margin: 0;
	background: #ffffff;
}
.scroll-offset{
	scroll-margin-top: 150px; /* 固定ヘッダーの高さ分 */
}
#page_top{
	width:38px;
	height:38px;
	position: fixed;
	right: 20px;
	bottom:-38px;
	z-index: 1000;
}
img{
	max-width: 100%;
}
li{
	list-style-type: none;
}
.hero{
	width:100%;
	margin:0;
	padding:0;
}
.hero img{
	object-fit: cover;
	width:100%;
	
}
.gothic{font-family: 'Noto Sans JP', sans-serif;}
.mincho{font-family: 'Noto Serif JP', serif;}
.pc{
	display: block;
}
.pcs{
	display: inline;
}
.sp{
	display: none;
}
.spflex{
	display: none;
}
.centertxt{
	text-align: center;
}
.righttxt{
	text-align: right;
}
.centerimg{
	display: block;
	margin: 0 auto;
}
a{
	color:#000;
	text-decoration: none;
}
a:hover{
	opacity: 0.7;
	color:#195067;
	text-decoration: underline;
}
a:visited{
	color:#000;
	text-decoration: none;
}
.bgarea a,footer a{
    color:#000;
}
.bgarea a:visited,footer a:visited{
    color:#000;
}
header a{
	color:#000;
	text-decoration: none;
}
header a:hover{
	color:#195067;
	text-decoration: underline;
}
header a:visit{
	color:#000;
	text-decoration: none;
}
footer a{
	color:#000;
	text-decoration: none;
}
footer a:hover{
	color:#195067;
	text-decoration: underline;
}
footer a:visit{
	color:#000;
	text-decoration: none;
}

.fw600{
	font-weight:600;
}
header{
	width:100%;
	height:100px;
	background:#ffffff;
	z-index: 999;
	top:0;
	margin:0;
	padding:0;
	position: fixed;
}
header .flex{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:30px;
}
.flex{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap:20px;
	flex-wrap: wrap;
}
.sbox{
	width:230px;
}
.title{
	font-size:29px;
	font-weight: 600;
	letter-spacing: 8px;
}
.logo{
	width:90px;
}
footer{
	position: relative;
	width:100%;
	height:162px;
	background:#e3eaed;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footlogo{
	display: flex;
	align-items:center;
	justify-content: flex-start;
	gap:40px;
}
.base{
	margin:100px 0 0;
}
.basecolor{
	color:#195067;
}
.f20{
	font-size:20px;
}
.f25{
	font-size:25px;
}
.gray{
	background:#e3eaed;
}
.graygold{
	background:#fcfcfc;
}
h1{
	font-size:20px;
	font-weight: 600;
	color:#000000;
	border-left: 5px solid #195067;
	line-height: 40px;
	padding-left: 12px;
	letter-spacing: 10px;
}
h2{
	font-size:20px;
	font-weight: 600;
	color:#195067;
	border-bottom: 2px solid #BACAD1;
	margin-bottom: 10px;
}
h3{
	font-size:20px;
	font-weight: 400;
	color:#195067;
	line-height: 50px;
}
h3.prd{
	margin:-10px 0 0 35px;
    font-weight: 400;
	letter-spacing: 5px;
	width:100%;
	line-height: 50px;
}
h4{
	font-size:22px;
	font-weight: 600;
	letter-spacing: 5px;
}

h1.normal{
	border-bottom:#183759 1px solid;
	padding-bottom: 15px;
	color:#183759;
	font-size:32px;
	letter-spacing: 5px;
}
h1.normal::first-letter{
	background:url("../images/point_blue.webp");
	background-repeat: no-repeat;
	padding-left: 13px;
	padding-top: 10px;
}
h1.gold{
	border-bottom:#A2791B 1px solid;
	padding-bottom: 15px;
	color:#A2791B;
}
h1.gold::first-letter{
	background:url("../images/point_gold.webp");
	background-repeat: no-repeat;
	padding-left: 13px;
	padding-top: 10px;
}
.f32{
	font-size:32px;
}
.f16{
	font-size:16px;
}
.colored{
	color:#183759;
}
.red{
	color:#ff0000;
}
/*スマホ用メニューここから*/
.spclose{
	display: none;
}
.hamburger{
	display: none;
}
.sp_wrap{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:auto;
	/*overflow-x: hidden!important;*/
}
.globalMenuSp{
	display: none;
}
/*スマホ用メニューここまで*/
.menu {
	font-size:14px;
	background:#195067;
	color:#ffffff;
	height:50px;
	position:fixed;
	width:100%;
	top:100px;
}
.menu a{
	color:#fff;
}
.menu a:hover{
	color:#A0AEED;
}
.container{
	width:1200px;
	position: relative;
	height:auto;
	overflow: hidden;
	margin: 0 auto;
}

.menu .container{
	display: flex;
	justify-content: space-around;
	align-items: center;
	height:100%;
}
.main{
	width:735px;
	margin:0 auto;
	height:auto;
	overflow: hidden;
}
.head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:1300px;
	margin:0 auto;
	height:100px;
	font-size:14px;
	padding:0 20px;
}
.head a img{
	display: block;
}
.picarea{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:40px;
	flex-wrap: wrap;
}
.mainmenu{
	width:700px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style-type: none;
	font-weight: 700;
	padding:0;
}
.footermenu{
	float:right;
	margin-right: 150px;
	width:300px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style-type: none;
	padding:0;
}
.fmbox{
	line-height: 1.8em;
}
.line {
	display: flex;
	align-items: center;
}
.line::before,
.line::after {
	content: "";
	height:1px;
	flex-grow: 1;
	background-color:#183759;
}
.line:before {
	margin-right: 20px;
}
.line:after {
	margin-left: 20px;
}
.linewh {
	display: flex;
	align-items: center;
}
.linewh::before,
.linewh::after {
	content: "";
	height:1px;
	flex-grow: 1;
	background-color:#fff;
}
.linewh:before {
	margin-right: 20px;
}
.linewh:after {
	margin-left: 20px;
}
.spacer10{
	height:10px;
}
.spacer40{
	height:40px;
}
.spacer150{
	height:150px;
}
.newsarea{
	width:100%;
	height:auto;
	overflow:hidden;
	background:url("../images/back_news.webp");
	margin:0;
	padding:0;
}
dl.news{
	width:600px;
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	justify-content: flex-start;
	align-items: flex-start;
	list-style-type: none;
	font-family: 'Noto Serif JP', serif;
	}
.new{
	background:#183759;
	color:#fff;
	line-height: 1em;
	width:fit-content;
	padding:0 10px;
}
.btn_list{
	width:830px;
	height:55px;
	border:#000 solid 1px;
	display:flex;
	justify-content: center;
	align-items: center;
	margin:40px auto;
}
.btn_link{
	width:180px;
	height:50px;
	border:#000 solid 1px;
	display:flex;
	justify-content: center;
	align-items: center;
	margin:40px auto;
}
.wh{
	color:#fff;
}
.bgarea{
	background:url("../images/back01_tile.webp");
	background-repeat: repeat;
}
.aboutlink{
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:40px;
	flex-wrap: wrap;
}
.linkbox{
	color:#fff;
	font-size:22px;
}
.product1{
	display: flex;
	justify-content: space-between;
}
.product2{
	display: flex;
	justify-content: space-around;
}
.prdbox{
	width:500px;
}
.prdinfo{
	margin:20px 0 0 35px;
	line-height: 1.8em;
	font-weight:400;
}
.omamori{
	width:600px;
}
.csrlink{
	display:flex;
	justify-content: center;
	gap:40px;
	flex-wrap: wrap;
}
.csrbox{
	width:450px;
	color:#fff;
	font-weight: 400;
}
.csrbox p{
	line-height: 1.8em;
}
.kodawari{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.kodawari2{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.kodawaribox{
	width:610px;
	height:auto;
	overflow: hidden;
}
.csrarea{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.csrpic{
	width:500px;
	height:auto;
	overflow: hidden;
}
.csrinfo{
	width:800px;
	height:auto;
	overflow: hidden;
	/*line-height: 1.6em;*/
}

h3.kodawaritit{
	color:rgba(162,121,27,1.00);
	border-bottom:1px solid #A2791B;
	border-image:linear-gradient(to right,#A2791B,transparent)1;
	padding-bottom: 10px;
    margin-bottom: 0;
	font-size:24px;
	letter-spacing: 5px;
}
h3.csrtit{
	color:#003771;
    font-weight: 400;
	font-size:24px;
	letter-spacing: 2px;
}
.csrpp{
	font-size:12px;
	vertical-align: top;
}
.aisatsu{
	display:flex;
	justify-content: space-between;
	gap:30px;
}
.signwrap{
	text-align: right;
}
.signature{
	width:fit-content;
	display: inline-block;
	text-align: left;
	line-height: 1.8em;
}
.rinen{
	text-align: center;
}
table.cominfo{
	width:100%;
	max-width: 100%;
	margin:50px auto;
	border-spacing: 0;
}
table.cominfo tr{
	height:60px;
}
table.cominfo th{
	width:200px;
    padding-bottom: 2px;
	text-align:left;
	color:#195067;
	border-bottom: 2px solid #BACAD1;
}
table.cominfo tr:last-child th{
	border-bottom: none;
}
table.cominfo td{
    padding-bottom: 2px;
	text-align:left;
	border-bottom: 2px solid #BACAD1;
}
table.cominfo tr:last-child td{
	border-bottom: none;
}
.justify {
  display: flex;
  justify-content: space-between; /* 両端揃え */
  width: 100%;
}
dl.contact{
	width:750px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
dl.contact dt{
	width:200px;
	font-size:16px;
	margin:0 0 20px;
}
dl.contact dd{
	width:550px;
	font-size:16px;
	margin:0 0 20px;
}
.req{
	background:#183759;
	color:#fff;
	font-size:16px;
	width:3em;
	height:18px;
	float:left;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px 20px 0 0;
	line-height: 0;
}
.fre{
	background:transparent;
	border: #183759 1px solid;
	color:#183759;
	font-size:16px;
	width:3em;
	height:18px;
	float:left;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px 20px 0 0;
	line-height: 0;
}
.products{
	width:1300px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
    flex-wrap: wrap;
	gap:73px;
}
.prd{
	width:160px;
	height: auto;
	overflow: hidden;
}
.prd p{
	margin:-10px 0 0;
}
.p-postal-code{
	width:220px;
}
.p-region{
	width:220px;
	margin:0 0 0 20px;
	padding:0;
}
.productlogo{
	margin-bottom: 10px;
}
.listarea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap:40px 0;
}
.listbox{
	color:#195067;
	width:350px;
	max-width: 100%;
}
hr.base{
	background: #BACAD1;
	height:2px;
	margin: 0;
	border:none;
}
input[type='text']{
	border:1px solid #cccccc;
	width:500px;
}
textarea{
	border:1px solid #cccccc;
	width:500px;
}
.button{
	height:35px;
	border:2px solid #195067;
	padding:0 10px;
	color:#195067;
	font-weight: 600;
	line-height: 30px;
}
.buttonarea{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:40px;
}

@media screen and (max-width: 1300px) {
	html,body{
		font-size:13px;
		font-weight: 400;
		line-height: 2.3em;
		padding:0;
		margin: 0;
		background: #ffffff;
	}	
	h1{
		font-size:24;
	}
	h1.normal{
		font-size:24px;
		padding-bottom: 8px;
	}
	h3{
		font-size:20px;
	}
	h3.prd{
		margin:-10px 0 0 10px;
		font-weight: 400;
	}
	h3.kodawaritit{
		padding-bottom: 5px;
	}
	h4{
		font-size:20px;
	}
	.linkbox{
		font-size:14px;
	}

	.productlogo{
		width:66px;
		margin-bottom: 10px;
	}
	.prdinfo{
		margin:10px 10px 0 10px;
	}
	.base{
		margin:60px 0 0;
	}
	.pc,.pcs{
		display: none;
	}
	.sp{
		display: block;
	}
	.mainmenu{
		display: none;
/*		width:calc(100% - 120px);
		max-width: 400px;
		padding:0 10px;
		align-items: flex-start;
		line-height: 1.2em;
*/
	}
	.mainmenu li{
		-ms-writing-mode: tb-rl;
  		writing-mode: vertical-rl;
	}

	.container{
		width:100%;
		padding:0 10px;
	}
	.head{
		width:100%;
		height:60px;
	}
	.offset{
		height:90px;
	}
	.submenu{
		display: none;
	}
	.submenu li{
		display: flex;
		flex-flow: row;
		justify-content: center;
	}
	.submenusp{
		background:#ffffff;
		display: flex;
		color:#ffffff;
		justify-content:space-around;
		align-items: center;
		
		position: fixed;
		bottom:0px;
		width:100%;
		height:50px;
		box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
		z-index: 9999;
		list-style: none;
		font-family: 'Noto Serif JP', serif;
	}
	.submenusp li{
		background: #793E94;
		padding:2px 15px;
		line-height: 20px;
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.submenusp a{
		color:#ffffff;
	}
	.bnarea {
		display: flex;
		justify-content: center;
		gap:20px;
		height: auto;
		flex-wrap: wrap;
	}
	.csline{
		line-height: 1.5em;
	}
	.caution {
		width:calc(100% - 10px);
	}
	.product1{
		display: flex;
		justify-content: center;
		flex-wrap: wrap-reverse;
		gap:20px;
		padding:0 0px;
	}
	.product2{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		flex-flow: wrap;
		padding:0 10px;
	}
	.btn_list{
		width:80%;
	}
	.kodawari{
		justify-content: center;
		flex-wrap: wrap;
		padding: 0 0px;
	}	
	.kodawari2{
		justify-content: center;
		flex-wrap: wrap-reverse;
		padding: 0 10px;
	}
	.aisatsu{
		display:flex;
		justify-content: center;
		flex-wrap: wrap;
		gap:30px;
		padding:0 0px;
	}
	.rinen{
		padding:0 10px;
	}
	dl.contact{
		width:80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	dl.contact dt{
		width:100%;
		font-size:16px;
		margin:0 0 5px;
	}
	dl.contact dd{
		width:100%;
		font-size:16px;
		margin:0 0 20px;
	}
	input[type='text']{
		border:1px solid #cccccc;
		width:100%;
	}
	textarea{
		border:1px solid #cccccc;
		width:100%;
	}

    .products{
        width:100%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
        gap:10px;
    }
	.p-postal-code{
		width:100%;
	}
	.p-region{
		width:100%;
		margin:20px 0 0;
		padding:0;
	}
	.footlogo{
		display: flex;
		align-items:center;
		justify-content: center;
		gap:40px;
		margin:0 auto;
	}

	.footermenu{
		display: none;
	}
}
@media screen and (max-width: 800px){
	table.cominfo{
		width:100%;
		max-width: 100%;
		margin:50px auto;
	}
	table.cominfo th{
		width:30%;
	}
	table.cominfo td{
		background-size: 5px 1px;
		padding-bottom: 0px;
	}
	.f16sp{
		font-size:16px;
	}
	.f32{
		font-size:24px;
	}
	.main{
		width:100%;
		padding:0 10px;
	}
	.picarea{
		justify-content: center;
	}


}
@media screen and (max-width: 600px){
	dl.news{
		width:100%;
		padding:0 10px;
	}
	.bgarea{
		padding:0 10px;
	}
	.csrarea{
		padding:0 10px;
		justify-content: center;
	}
	.spflex{
		display: flex;
	}
}
@media screen and (max-width: 500px) {
	header{
		width:100%;
		height:70px;
		background:#ffffff;
		z-index: 999;
		top:0;
		margin:0;
		padding:0;
	}
	.spacer150{
		height:70px;
	}
	.scroll-offset{
		scroll-margin-top: 70px; /* 固定ヘッダーの高さ分 */
	}
	.menu{
		display: none;
	}
	.logo{
		width:60px;
	}
	.title{
		font-size:20px;
	}

	.footermenu{
		display: none;
	}
	.footermenu li{
		-ms-writing-mode: tb-rl;
  		writing-mode: vertical-rl;
	}
	dl.news dt{
		width:100%;
		margin:0 0 0px;
	}
	dl.news dd{
		width:100%;
		margin:20px 0 0;
	}
	.flex{
		justify-content: center;
	}

}