@charset "utf-8";
/* =======================================

	CSS
	Last Up Date 17/11/24

------------------------------------------

		1.Reset
		2.Structure
		3.Header
		4.Article
		5.Footer
※type01 = bk.white h.pink
　type02 = bk.white h.yellow (Elephant)
　type03 = bk.offwhite h.pink

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


/*	1.Reset
========================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
//	font: inherit;
//	font-size: 100%;
	vertical-align: baseline;
}

html {	line-height: 1;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ol, ul {	list-style: none;}

q, blockquote {	quotes: none;}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}

a {
	margin:0;
	padding:0;
	border:0;
	outline: none;
// 	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
a:focus {	outline:none;}

fieldset, img {	border: 0;}
img {	max-width: 100%; width: 100%; height: auto; vertical-align: top;}

h1,h2,h3,h4,h5,h6 {	
	clear: both; 
//	font-size: 100%; 
//	font-weight: normal;}

strong {
	font-weight: bold;
    color: #111;
}


/*	2.Structure
========================================== */

body {
    font-family: Helvetica,Verdana,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
    line-height: 1.6;
    color: #333;
/*	    
	font-family: "Meiryo", "メイリオ", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Helvetica, Arial, Verdana, sans-serif;
    color: #2f251e;*/
	text-align: center;
//	font-size: 14px;
	background-color: #fff;
}


.fzSS  { font-size:  72% !important;}/* base 14px -> 10px */
.fzS   { font-size:  86% !important;}/* base 14px -> 12px */
.fzM   { font-size: 100% !important;}
.fzL   { font-size: 115% !important;}/* base 14px -> 16px */
.fzLL  { font-size: 129% !important;}/* base 14px -> 18px */
.fzLLL { font-size: 136% !important;}
.fzLLLL { font-size: 143% !important;}/* base 14px -> 20px */

.mb0 {  margin-bottom: 0 !important;}
.mb10 {  margin-bottom: 10px !important;}
.mb20 {  margin-bottom: 20px !important;}
.mb30 {  margin-bottom: 30px !important;}
.mb40 {  margin-bottom: 40px !important;}
.mb50 {  margin-bottom: 50px !important;}
.mb60 {  margin-bottom: 60px !important;}
.mb70 {  margin-bottom: 70px !important;}
.mb80 {  margin-bottom: 80px !important;}
.mb90 {  margin-bottom: 90px !important;}
.mb100 {  margin-bottom: 100px !important;}

.w600{	max-width: 600px; margin: auto;}

.text-left {	text-align: left !important;}
.text-center {	text-align: center !important;}
.text-right {	text-align: right !important;}


/* 強調 */
.fb{	font-weight: bold;}
.fc{	color: #ff5d94;}
.fline{	text-decoration: underline;}
.price{
	font-size: 86%;
	font-weight: bold;
	line-height: 1.2;
}
.marker01{	background: linear-gradient(transparent 80%, #f5f500 50%);}
.marker02{	background: linear-gradient(transparent 40%, #ffa 60%);}
.marker03{	background: linear-gradient(transparent 60%, #ffa 60%);}
.marker04{	background: linear-gradient(transparent 0%, #ffa 90%);}

/* 背景色 */
body#type01 ,body#type21{	background: #fff;}
body#type03 header ,body#type03 article ,body#type03 aside{	background: #fff;}


header ,footer ,article{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

article .content ,article aside{
	margin: 0 3.125%;
	padding-bottom: 5%;
}

body#type01 a{	color: #ff5d94;}
body#type02 a{	color: #0c378b;}
//body#type03 a{	color: #ff5d94;}
a:hover ,a:focus{}

body#type02 h1 ,body#type03 h1{
	font-size: 22px;
	line-height: 1.1;
	margin: 6% 0 3%;
    color: #111;
    text-align: center;
}
h2{
	font-size: 129%;
    font-weight: bold;
    color: #111;
	margin-bottom: 5%;
	line-height: 1.3;
}
body#type01 h2{    border-bottom: solid 3px #e5007f;}
body#type02 h2{    border-bottom: solid 3px #e6d117;}
body#type03 h2{    border-bottom: solid 3px #299eac;}

h3{
	margin-bottom: 5%;
    padding-bottom:1%;
//	font-size: 115%;
	line-height: 1.3;
    color:#299eac;
//	font-weight:bold;
	border-bottom:solid 1px #299eac;
}
.reviewCard h3{}

h4{
//	font-weight: bold;
	text-decoration: underline;
//	font-size: 115%;
}

small{	font-size: 58%;}
figure{	margin-bottom: 5%;}

/*	3.Header
========================================== */
header{	padding-bottom: 5%;
}
#sitename{
	border-bottom: solid 1px #ccc;
	padding: 3px 0;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
	#sitename img{
		max-width: 100px;	/*800pxより小さい画像の場合に指定*/
	}
	/*body#type03 #sitename img{	max-width: 800px;}　GRINロゴのため*/

.utilities{
	font-size: 86%;
	text-align: left;
	padding: 2%;
	margin-bottom: 1%;
//	border-bottom: solid 1px #ccc;
    color: #aaa;
}


/*	4.Article
========================================== */
.content{
	line-height: 1.6;
	font-size: 100%;
	text-align: left;
}

.content p{	margin-bottom: 5%;}
	.content p img{}

.content .read{
	font-size: 86%;
	color: #333;
	line-height: 1.3;
	margin-top: -3%;
}

.content blockquote{
	padding: 1%;
    margin-bottom: 3%;
}
	.content blockquote.bqgi{
		background: #ebebeb;
		font-style: italic;
        font-size:85%;
	}
	.content blockquote.bqp{
		background: #FCF6F6;
	}

.content ul{
	list-style: disc;
	margin-left: 16px;
	margin-bottom: 5%;
}

/* 冒頭まとめ*/
.content ul.matome{
    margin:30px auto 15px;
    padding:15px 0 12px;
    width: 97%;
    border:solid 1px #777;
    border-radius: 5px;
    list-style:none;
  position: relative;
}
.content ul.matome:before{
  position: absolute;
  top:-10px;
  left:10px;
  background-color:#299eac;
  border-radius: 3px;
  padding:3px 7px;
  font-size:65%;
  content:"この記事のまとめ";
  color:#fff;
  font-weight:bold;
}
.content ul.matome li{
  font-size:90%;
    margin:8px 10px;
    padding-bottom:3px;
    border-bottom: solid 1px #eee;
}
.content ul.matome li:before{
  font-family: "Font Awesome 5 Free";
  content: '\f058';
  color:#299eac;
  margin:0 3px;
  font-size:80%;
}


aside{
	font-size: 72%;
	text-align: left;
	line-height: 1.5;
}
	aside p{	margin-bottom: 3%;}

video{
	width: 100%;
	margin-bottom: 5%;
}


/* 口コミ用カード */
.reviewCard{
	color: #666;
	border-top: 3px solid #FFC5D8;
	box-shadow: 0 5px 10px 0px #ccc;
	margin: 0 3% 5%;
	padding: 3%;
}
.record{
	border: 1px solid #666;
	margin: 0 3%;
	padding: 3%;
}
ul.record {	padding-left: 32px;}



/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 15px;
  border-radius: 3px;
    border: solid 1px #ccc;
  color: #333;
  background-color: #fff;
  margin:40px 0 25px 70px;    /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -70px;
  top: -30px;
    z-index: 0;
}
/* 三角アイコン */
.balloon1:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 10px;
  border-right: 15px solid #ccc;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
    z-index: 10;
}
.balloon1:after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 10px;
  border-right: 15px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
    z-index: 10;
}
/* 吹き出し本体 */
.icon img{
    width:60px;
}
.balloon2{
  position: relative;
  padding: 15px;
  border-radius: 3px;
    border: solid 1px #eef;
  color: #333;
  background-color: #eef;
  margin:40px 70px 25px 0px;    /* 左に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  top: -30px;
    z-index: 0;
  right: -70px;
}
/* 三角アイコン */
.balloon2:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 10px;
  border-left: 15px solid #eef;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
    z-index: 10;
}
.balloon2:after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -12px;
  top: 10px;
  border-left: 15px solid #eef;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
    z-index: 10;    
}



/*	5.Footer
========================================== */
footer{		overflow: hidden;}
footer.black{		background: #000;}
footer.pink{		background: url(../images/footer_bg.gif) repeat-y;}
footer ul{		margin: 3.125%;}
footer li{	margin-bottom: 2%;
	font-size: 86%;
color: #fff;}
footer li a{	margin-bottom: 2%;
	font-size: 86%;
color: #fff;}
.copylight{
	color: #fff;
	font-size: 86%;
	margin-bottom: 3%;
}




/*	案1
========================================== */
aside#recomend1{
	font-size: 86%;
	max-width: 800px;
	margin: auto;
	overflow: hidden;
}
aside#recomend1 nav{
	margin: 0 3.125%;
}
		aside#recomend1 nav a{	color: #000;}

		aside#recomend1 nav li{
			background: url(../images/bgico.png) no-repeat 100% 35%;
			margin: 0 0 3.125%;
			padding-bottom:  3.125%;
			width: 48%;
			border-bottom: 1px solid #ccc;
		}
		aside#recomend1 nav li:nth-child(2n-1) {	float: left;}
		aside#recomend1 nav li:nth-child(2n) {	float: right;}
		aside#recomend1 nav figure{
			height: 72px;
			overflow: hidden;
			line-height: 1.3;
			margin: 0 20px 0 0;
		}
		aside#recomend1 nav figure img {
			width: 120px;
//			border-radius: 50%;
			margin-right: 3.125%;
			float: left;
		}
		aside#recomend1 nav figcaption{
			display: table-cell;
			vertical-align: middle;
			height: 72px;
		}
@media screen and (max-width:680px){
		aside#recomend1 nav li{	width: 100%;}
		aside#recomend1 nav li:nth-child(2n-1)  ,
		aside#recomend1 nav li:nth-child(2n) {	float: none;}
		aside#recomend1 nav li:last-child {	border: none;}
}




/*	案2
========================================== */
.uenavi header{	margin-top: 36px;} /*bodyタグにclass指定　reco.html*/
aside#recomend2{
	font-size: 100%;
	width: 800px;
	margin: auto;
}
aside#recomend2 nav{
	background: #000;
	max-width: 800px;
	width: 100%;
	position: absolute;
	top: 0;
}
		aside#recomend2 nav p{
			margin: 0;
			padding: 6px 3.125%;
		}
			aside#recomend2 nav p a{	color: #fff;}
		aside#recomend2 nav ul{
			display: none;
			background: #fff;
			overflow: hidden;
			padding: 0 3.125%;
		}
		aside#recomend2 nav li{
			margin: 3.125% 0;
			width: 49%;
		}
		aside#recomend2 nav p:hover + ul ,aside#recomend2 nav p + ul:hover{
			display: block;
		}
		aside#recomend2 nav li:nth-child(2n-1) {	float: left;}
		aside#recomend2 nav li:nth-child(2n) {	float: right;}
		aside#recomend2 nav figure{
			height: 80px;
			overflow: hidden;
			line-height: 1.3;
			margin: 0;
		}
		aside#recomend2 nav figure img {
			width: 100px;
			border-radius: 50%;
			margin-right: 3.125%;
			float: left;
		}
		aside#recomend2 nav figcaption{
			display: table-cell;
			vertical-align: middle;
			height: 80px;
		}
@media screen and (max-width:600px){
		aside#recomend2 nav li{	width: 100%;}
		aside#recomend2 nav li:nth-child(2n-1)  ,
		aside#recomend2 nav li:nth-child(2n) {
			float: none;
		}
}