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

html { font-size: 62.5%;}

body {
font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
margin: 0;
padding: 0;
font-size: 1.8rem;
line-height: 1.8em;
color: #333;
font-weight: 500;
background: #FCFCFC;
}

a {
color:#303030; text-decoration:none; outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

a:visited { text-decoration:none; outline: none;}

body { font-family: 'Noto Sans JP', sans-serif; font-weight: 400;}

img { width: 100%; height: auto;}

a figure img,
a:hover figure img {
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
}


/*PC*/
@media print, screen and (min-width: 769px) {

.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;

	box-shadow:0px 0px 5px 0px #dcdcdc;
	-moz-box-shadow:0px 0px 5px 0px #dcdcdc;
	-webkit-box-shadow:0px 0px 5px 0px #dcdcdc;
	background: #FFF;
}

.sp { display: none;}
.pc { display: block;}


header { margin: 0 -0.9% 30px;}
header h1 { margin: 0 auto 30px; padding: 0;}

.txt1 { text-align: center; margin: 40px auto;}

.txt2 { padding: 10px 10px 10px 90px; border: 1px solid #C00; margin: auto auto 30px; width: 90%; font-size: 1.4rem; box-sizing: border-box; background: rgba(255,0,0,0.03); line-height: 160%; position: relative;}
.txt2::before { font-family: FontAwesome; content: "\f071"; font-size: 5rem; position: absolute; top: 15px; left: 20px; margin: auto; color: #C00; line-height: normal;}

ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
ul li { width: calc(100% / 3 - 60px); margin: 0 30px 50px 0;}
ul li:nth-child(3n+3) { margin-right: 0;}
ul li a { display: block;}
ul li figure { width: 100%; margin: 0; padding: 0; overflow: hidden; display: block;}
ul li figure img { width: 100%; height: auto;}
ul li a:hover figure img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);}
ul li p { margin: 0; padding: 0; text-align: center; font-size: 1.8rem; line-height: normal;}

footer { border-top: #CCC dotted 1px; text-align: center; padding: 30px 0; font-size: 1.4rem; line-height: 140%;}





}

/*sp*/
@media only screen and (max-width: 768px) {

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 92.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;

	box-shadow:0px 0px 5px 0px #dcdcdc;
	-moz-box-shadow:0px 0px 5px 0px #dcdcdc;
	-webkit-box-shadow:0px 0px 5px 0px #dcdcdc;
	background: #FFF;
}

.sp { display: block;}
.pc { display: none;}


header { margin: 0 -0.9% 30px;}
header h1 { margin: 0 auto 10%; padding: 0;}

.txt1 { text-align: center; margin: 20% auto;}

.txt2 { padding: 10px 10px 10px 60px; border: 1px solid #C00; margin: auto auto 30px; width: 90%; font-size: 1.4rem; box-sizing: border-box; background: rgba(255,0,0,0.03); line-height: 160%; position: relative;}
.txt2::before { font-family: FontAwesome; content: "\f071"; font-size: 3rem; position: absolute; top: 15px; left: 15px; margin: auto; color: #C00; line-height: normal;}

ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
ul li { width: 80%; margin: 0 0 50px 0;}
ul li:nth-child(3n+3) { margin-right: 0;}
ul li a { display: block;}
ul li figure { width: 100%; margin: 0; padding: 0; overflow: hidden; display: block;}
ul li figure img { width: 100%; height: auto;}
ul li a:hover figure img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);}
ul li p { margin: 0; padding: 0; text-align: center; font-size: 1.8rem; line-height: normal;}

footer { border-top: #CCC dotted 1px; text-align: center; padding: 30px 0; font-size: 1.4rem; line-height: 140%;}




}