@charset "utf-8";
html {
font-size: 62.5%;
height: 100%;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
font-size: 1.6em;
font-family: "Noto Sans JP";
width: 100%;
height: 100%;
}

.wrapper{
	min-height: 100vh;
    position: relative;←相対位置
}

.header{
background-color: #ffbfca;
padding:1% 2%;
width: 100%;
display: flex;
align-items: center;
}

.header-home{
background-color: #ffbfca;
padding:1% 2%;
text-align: center;
}

nav{
width: 50%;
display: flex;
text-align:right;
justify-content:flex-end;
}

nav a{
color: #fff;
margin-right:5%;
display: inline-block;
text-decoration: none;
}

nav a:last-child{
margin-right:0;
}

.productName{
font-family: 'Open Sans Condensed', sans-serif;
color: #fff;
width: 50%;
}

.productName-home{
font-family: 'Open Sans Condensed', sans-serif;
color: #fff;
text-align:center;
}

#wrap{
background-image: url(../img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
height: 100%;
position: relative;
}

#wrapPro{
background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(42deg, transparent, transparent 8px, rgba(1, 78, 255, 0.09) 8px, rgba(1, 78, 255, 0.09) 9px );
}

#wrapTerms{
background-image: url(../img/terms_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
height: 90%;
}

.productName a{
color: #fff;
text-decoration: none;
}

.mainTerms{
background-image: url(../img/terms_bg.jpg);
background-size: cover;
width: 100%;
height: 100%;
}

.txt-area{
width: 60%;
margin: 0 auto;
padding: 2%;
background-color:rgba(255,255,255,0.6);
}

.txt-title{
border:1px #000 solid;
padding:2%;
margin-bottom: 2%;
text-align:center;
}

.txt-title h2{
line-height: 2.4rem;
}

.read{
font-size: small;
}

.info-txt p{
font-size: 1.4rem;
line-height: 2rem;
}

h3{
font-size: 1.8rem;
margin: 2% 0 0;
}


/*index.html対応部分*/
.left-side{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
padding: 5%;
width: 50%;
}

.left-sideLink{
display: block;
width: 50%;
margin: 0 auto 20px;
border:1px solid #4E4D4F;
text-decoration: none;
text-align: center;
padding:3%;
color: #4E4D4F;
transition: all .3s ease;
}

.left-side .left-sideLink:last-child{
	margin-bottom: 0;
}

.left-sideLink:hover{
	background-color: #4E4D4F;
	color: #fff;
}
/*index.html対応部分ここまで*/

/*フッター共通*/
#footer{
text-align:center;
background-color: #ffbfca;
width: 100%;
color: #fff;
font-size: small;
}

.fixedFooter{
	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

/*category.html*/
.main{
	width: 90%;
	margin: 0 auto;
}

.afiTitle{
	font-family:"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.2rem;
}

.categoryFlex{
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	margin: 2% auto;
}

.categoryItem{
display: block;
width: 31%;
border:1px solid #4E4D4F;
text-decoration: none;
text-align: center;
padding:1%;
color: #4E4D4F;
transition: all .3s ease;
margin-right: 1%;
}

.categoryItem:hover{
	background-color: #4E4D4F;
	color: #fff;
}

/*メディアクエリ*/
@media screen and (max-width:767px) {
nav{
	display: none;
}
.main,.mainPro,.mainTerms{
background-color:rgba(255,255,255,1);
background-blend-mode:lighten;
	}

#wrap{
background-color:rgba(255,255,255,1);
background-blend-mode:lighten;
	}

.left-side{
width: 100%;
padding: 2%;
background-color: #fff;
background-image: none;
top: 30%;
}
.left-sideLink{
width: 80%;
padding:3%;
}
.txt-area{
	width: 100%;
}

.categoryFlex .categoryItem:last-child{
	margin-bottom: 0;
}

.categoryItem{
	width: 100%;
	margin-bottom: 2%;
	padding: 2%;
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {

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

}
/*メディアクエリ*/