@charset "utf-8";

/* ---------------------------------------------------
   File: family.css
   Version: 1.0.0
   Update: 2021-02-08
   Author: https://flowlab.co.jp

   (c)2007-2021 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */




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

   WIDE DESKTOP LAYOUT

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




/* ====================================================
		Header
==================================================== */

/* -------------------------------
		Page Title
------------------------------- */
#pageTitle {
	background: url("../family/images/ph_head.jpg") no-repeat right top;
	background-size: 1100px 320px;
}


/* ====================================================
		Contents
==================================================== */

/* -------------------------------
		ComBtn
------------------------------- */
.comBtn {
	padding-top: 40px;
}

/* -------------------------------
		Image
------------------------------- */
#contentsBox .mainImage {
	padding-bottom: 10px;
}

/* -------------------------------
		FAQ
------------------------------- */
/* Content Box */
#faq .contentBox {
	border-bottom: solid 1px #f0f0f0;
}
#faq .contentBox:nth-of-type(1) {
	border-top: solid 1px #f0f0f0;
}
#faq .contentBox:nth-last-of-type(1) {
	margin-bottom: 30px;
}

/* Title Slide */
#faq .contentBox .tit_slide {
	padding: 40px 60px 40px 50px;
	margin: 0;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	position: relative;
	line-height: 1.5em;
}
#faq .contentBox .tit_slide::before {
	content: "Q.";
	display: inline-block;
	color: #3a5b52;
	font-size: 1.3em;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: 900;
	margin-right: 0.5em;
	position: absolute;
	top: 40px;
	left: 15px;
}
#faq .contentBox .tit_slide:hover {
	cursor: pointer;
}

/* Detail */
#faq .contentBox .detail {
	display: none;
	clear: both;
	padding-left: 50px;
	font-size: 1em;
	letter-spacing: 0.1em;
  line-height: 2em;
	margin: -10px 0 40px;
}

/* Icon Plus */
#faq .iconPlus,
#faq .iconPlus span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#faq .iconPlus {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 45px;
	right: 20px;
}
#faq .iconPlus span {
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #ababab;
}
#faq .iconPlus span:nth-of-type(1) {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
#faq .iconPlus span:nth-of-type(2) {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

#faq .iconPlus.active span:nth-of-type(1) {
	display:none;
}
#faq .iconPlus.active span:nth-of-type(2) {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}






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

   TABLET - LARGE

============================================================================================================================================= */
@media screen and (min-width: 992px) and (max-width: 1199px) {

	
/* ====================================================
		Contents
==================================================== */


  
}
  
  
 


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

   TABLET

============================================================================================================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {

	
/* ====================================================
		Contents
==================================================== */


}





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

   MOBILE

============================================================================================================================================= */
@media screen and (max-width: 767px) {

  
  
/* ====================================================
		Header
==================================================== */

/* -------------------------------
		Menu
------------------------------- */
#gHeader .menuBox nav .naviList01 li:nth-child(2) a span {
	border-bottom: none;
	padding-bottom: 0;
}
	
/* -------------------------------
		Page Title
------------------------------- */
#pageTitle {
	background: url("../family/images/ph_head.jpg") no-repeat center top;
	background-size: 757px 220px;
}
	
	
/* ====================================================
		Contents
==================================================== */
	
/* -------------------------------
		Main Image
------------------------------- */
.mainImage {
	

}

/* -------------------------------
		FAQ
------------------------------- */
/* Title Slide */
#faq .contentBox .tit_slide {
	padding: 20px 60px 20px 30px;
	font-size: 1.1em;
	line-height: 2em;
}
#faq .contentBox .tit_slide::before {
	top: 20px;
	left: 0;
}
	
/* Detail */
#faq .contentBox .detail {
	font-size: 1em;
	padding-left: 30px;
	margin: -10px 0 20px;
}
  
/* Icon Plus */
#faq .iconPlus {
	top: 40%;
}
	
	
  
}