@charset "utf-8";


/*===========初期設定============*/
*{
	box-sizing: border-box;
}
html{
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body{
	display:block; 
	color: #000;
	font-size: 1.4rem;
	line-height: 1.6;
	font-family:'游ゴシック体', YuGothic, 'Yu Gothic Medium', '游ゴシック Medium', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
img{
	vertical-align: bottom;
}
main{
	display:block; 
}

@media screen and (min-width:681px) and (max-width:1366px){
	body{
		width: 100%;
		font-size:1.5rem;	
	}
	main{
		width: 100%;
	}
}
@media screen and (max-width:680px){
	body{
		width: 100%;
		font-size:1.5rem;	
	}
	main{
		width: 100%;
	}
}

/*=============================*/



/*----------link-----------*/
a{
text-decoration: none;
}
a:hover{
	text-decoration: none;
}
a:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}


/*----------mainvisual-----------*/
.pcMv{
	width: 100%;
	height: auto;
}
.spMv{
	display: none;
	
}
@media screen and (min-width:681px) and (max-width:1366px){
	.pcMv{
		display: block;
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width:680px){
	.pcMv{
		display: none;
	}
	.spMv{
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
}




/*----------inner-----------*/

main{
	width: 1230px;
	margin: 0 auto;
}
.inner{
	width: 70%;
	margin: 0 auto;
}
.lead{
	margin: 30px 0;
}
.leadText{
	font-size: 1.6rem;
	line-height: 2.8;
	margin-bottom: 20px;
}
.btn01{
	text-align: center;
	width: 300px;
	margin: 10px auto;
	background-color: #182b53;
	border: 1px solid #182b53;
}
.btn01:hover{
	text-decoration: underline;
}
.btn01 a{
	display: block;
	width: 300px;
	color: #fff;
	font-size: 1.6rem;
	padding: 12px;
}
@media screen and (min-width:681px) and (max-width:1366px){
	main{
		width: 100%;
		padding: 0 15px;
	}
}
@media screen and (max-width:680px){
	main{
		width: 100%;
		padding: 0 15px;
	}
	.leadText{
		font-size: 1.5rem;
		line-height: 2.0;
	}
	.btn01{
		width: 250px;
	}
	.btn01 a{
		width: 250px;
	}
	.inner{
		width: 100%;
	}
}

/*----------productArea-----------*/
.productArea{
	margin: 50px 0;
}
.productArea h2{
	line-height: 1.8;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    border-left: unset;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    margin: 5% auto 2em auto;
    padding: 15px;
}

.flexBox01{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0;
}
.box01{
	text-align: center;
	width: 21%;
	margin-right: 5%;
}
.box01:nth-of-type(4n){
	margin-right: 0;
}
.productImage{
	width: 100%;
	height: auto;
}
.btn02{
	margin: 1em auto 0 auto;
	display: block;
	width: 80%;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border: 1px solid #a80050;
	background: #a80050;
	border-radius: 0px;
	transition: .4s;
}
.btn02:hover {
	background: #fff;
	color: #a80050;
}

.btn03{
	margin: 4em auto 4em auto;
    display: block;
    width: 50%;
    padding: 0.8em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border: 1px solid #333333;
    background: #333333;
    border-radius: 0px;
    transition: .4s;
}
.btn03:hover {
	background: #fff;
	color: #333333;
}


@media screen and (max-width:680px){
	.box01{
		width: 47%;
		margin-right: 5%;
		margin-bottom: 20px;
	}
	.box01:nth-of-type(2n){
		margin-right: 0;
	}
}