@charset "UTF-8";


.inner { padding: 0 0; width: 1028px;}
footer { margin: 0 0 0;}
@media screen and (max-width: 768px) {
    .inner {padding: 0 25px;}
    footer { margin: 100px 0 0;}
}
/*--------------------------------------------------------------------------
main
--------------------------------------------------------------------------*/
main section {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
main #visual {
  background-image: url(../images/family/visual.jpg);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: cover;
  height: 20vw;
  text-align: center; }
  main #visual .inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    height: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: center; }
  main #visual h1 {
    color: #fff;
    font-family: "Miriam Libre", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    margin: 0 auto;
    text-align: center; }
    main #visual h1 span {
      display: block;
      font-size: 45px; 
      font-weight: bold;}
      
main #crumbs{
    background: #f2f6f7;
    padding: 20px 0 10px 0;}

main #information {
  background-color: #f2f6f7;
  margin: 0 0 0;
  padding: 0 0 100px; }
  main #information .title h3 {
    background-color: #f2f6f7;
    border: solid 20px #f2f6f7; }
  main #information .title h3 span{
    font-weight: normal; }  
    
main #information #infoarea {
    background-color: #fff;
    border: solid 0 #20aee5;
    border-radius: 0;
    padding: 30px;
    webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    -moz-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    -ms-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    }
    
main #information #infoarea h4{
font-size: 24px;
line-height: 1.416;
color: #20AEE5;
font-weight: bold;
margin-bottom: 40px;
}
 main #information #infoarea h4 span{
color: #5f5f5f;
display: block;
font-size: 14px;
font-weight: normal;
padding-top: 15px;
}
#infoarea h5{
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  margin: 0 0 5px;
  color: #20aee5;
}
main #information #infoarea .infolist{
  margin-bottom: 30px;
}
main #information #infoarea .infolist table{
width: 100%; 
}
main #information #infoarea .infolist table th,
main #information #infoarea .infolist table td{
 border-radius: 0;
 vertical-align: middle;
 padding: 0 0;
 height: 74px;
}
main #information #infoarea .infolist table th{
width:160px;
}
main #information #infoarea .infolist table td{
width:808px;
color:#707070;
text-align: left;
padding: 0 20px;
}
main #information #infoarea .infolist table td b{
 color: #20aee5;
}
main #information #infoarea .infolist table th{
border-bottom: 1px solid #fff;
border-right: none;
}
main #information #infoarea .infolist table tr:last-child th{
border-bottom: 1px solid #20aee5;
}
main #information #infoarea .infolist table tr:first-child th{
border-top-left-radius: 4px; 
}
main #information #infoarea .infolist table tr:first-child th{
border-top-left-radius: 4px;
border-top:1px solid #20aee5;
}
main #information #infoarea .infolist table tr:first-child td{
border-top-right-radius: 4px;
border-top:1px solid #20aee5;
}
main #information #infoarea .infolist table tr:last-child th{
border-bottom-left-radius: 4px;
border-bottom:1px solid #20aee5;
}
main #information #infoarea .infolist table tr:last-child td{
border-bottom-right-radius: 4px;
border-bottom:1px solid #20aee5;
}

    
main #information #infoarea .otherimage{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
justify-content: space-between;
margin: 0 0 30px;
}
main #information #infoarea .otherimage div.other_area {
    width: 47.7%;
    margin-bottom:30px;
    }
main #information #infoarea .otherimage div.other_area2 {
    width: 100%;
}
main #information #infoarea .otherimage div.other_area img, 
main #information #infoarea .otherimage div.other_area2 img {width: 100%;}
main #information #infoarea .infolist ul {
margin: 15px 0 0; }

main #information #infoarea .otherimage span{
display:block;
margin-top: 0.25em;
}

main #information #infoarea .infolist ul li,
main #information #infoarea .otherimage span{
  color: #5F5F5F;
  font-size: 14px;
  line-height: 1.428;
  text-align: left; }
 
/**/
main table {
  border-collapse: separate;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  margin:0;
  width: 974px; }
  main table th, main table td {
    width: 25%; }
    main table th span, main table td span {
      color: #5f5f5f;
      display: block;
      font-weight: normal; }
  main table th {
    background-color: #20aee5;
    border-right: solid 1px #fff;
    color: #fff;
    padding: 15px 0; }
  main table td {
    background-color: #fff;
    border-right: solid 1px #20aee5;
    border-bottom: solid 1px #20aee5;
    color: #20aee5;
    padding: 15px 0;
    vertical-align: middle; }
    main table td:nth-child(1) {
      border-left: solid 1px #20aee5; }
  main table tr:nth-child(1) th:nth-child(1) {
    border-top-left-radius: 5px; }
  main table tr:nth-child(1) th:nth-last-child(1) {
    border-top-right-radius: 5px;
    border-right: none; }
  main table tr:nth-last-child(1) td:nth-child(1) {
    border-bottom-left-radius: 5px; }
  main table tr:nth-last-child(1) td:nth-last-child(1) {
    border-bottom-right-radius: 5px; }
    

/*========================================================================*/
/*========================================================================*/
@media screen and (max-width: 768px) {
  /*--------------------------------------------------------------------------
  main
  --------------------------------------------------------------------------*/
  main #crumbs {
      background: #e1edf0;
      padding: 10px 0 10px 0;}
      
  main .inner {
    width: 100%; }
  main #visual {
    background-image: url(../images/family/visual_sp.jpg);
    height: 65vw;
    min-width: 100%; }
    main #visual .inner {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      height: 100%;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
      width: 100%; }
    main #visual h1 {
      font-size: 14px; }
      main #visual h1 span {
        display: block;
        font-size: 35px; }
        
main #information {
    background-color: #fff;
    padding: 0 0 0;
}
main #information .title h3 {
    background-color: #fff;
    border: solid 20px #fff;
}

main #information #infoarea {
    background-color: #fff;
    border-radius: 0;
    padding: 5px 0 30px 0 ;
    webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.16));
    -moz-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.16));
    -ms-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.16));
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.16));
    }
main #information #infoarea h4 {
    font-size: 18px;
    line-height: 1.666;
    color: #20AEE5;
    font-weight: bold;
    margin-bottom: 15px;
}

main #information #infoarea .infolist table th {
    width: 43%;
}
main #information #infoarea .infolist table td {
    width: 57%;
    padding: 12px 10px; 
}

main #information #infoarea .infolist table th, 
main #information #infoarea .infolist table td {
    border-radius: 0;
    border-top-left-radius: 0px;
    vertical-align: top;
    text-align: left;
    padding: 12px 10px; 
    height: auto;  
}
main #information #infoarea .infolist ul {
margin: 0.8em 0 0; }

main #information #infoarea .infolist ul li,
main #information #infoarea .otherimage span{
  font-size: 12px;
  line-height: 1.8;}

main #information #infoarea .otherimage span{
  line-height: 1.428;}
  
main #information #infoarea .otherimage div.other_area {
    width: 100%;
    margin-top:18px;
    }
main #information #infoarea .otherimage span {
    margin-top: 0.1em;
}











/**/  
  main table {
    border-collapse: separate;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 5% auto 0;
    width: 100%; }
    main table thead, main table tbody {
      width: 100%; }
    main table th, main table td {
      width: 25%; }
      main table th span, main table td span {
        color: #5f5f5f;
        display: block;
        font-weight: normal; }
    main table th {
      padding: 10px 0;
      vertical-align: middle; }
    main table td {
      background-color: #fff;
      border-right: solid 1px #20aee5;
      border-bottom: solid 1px #20aee5;
      color: #20aee5;
      padding: 15px 0;
      vertical-align: middle; }
      main table td:nth-child(1) {
        border-left: solid 1px #20aee5; }
    main table tr:nth-child(1) th:nth-child(1) {
      border-top-left-radius: 5px; }
    main table tr:nth-child(1) th:nth-last-child(1) {
      border-top-right-radius: 5px;
      border-right: none; }
    main table tr:nth-last-child(1) td:nth-child(1) {
      border-bottom-left-radius: 5px; }
    main table tr:nth-last-child(1) td:nth-last-child(1) {
      border-bottom-right-radius: 5px; }

}
/*========================================================================*/


main #information #infoarea > section{
  position: relative;
}
main #information #infoarea > section > p{
  background-color: #20aee5;
  color: #fff;
  font-weight: bold;
  font-size: 1.4em;
  line-height: 130%;
  width: 150px;
  height: 150px;
  padding-top: 45px;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  right: 30px;
  display: block;
  transform: rotate(10deg);
}
/* PC */
@media print, screen and (min-width:769px) {
main #information #infoarea > section > p{
  top: -45px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
main #information #infoarea > section > p{
  top: -70px;
}
}
/* SP横向き */
@media screen and (max-width:768px) and (orientation: landscape) {
main #information #infoarea > section > p{
  font-size: 1.2em;
  width: 100px;
  height: 100px;
  padding-top: 30px;
  position: relative;
  right:auto;
  top:0;
  margin: 0 auto 15px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
main #information #infoarea > section > p{
  font-size: 1.2em;
  width: 100px;
  height: 100px;
  padding-top: 30px;
  position: relative;
  right:auto;
  top:0;
  margin: 0 auto 15px;
}
}


/*--------------------------------------------------------------------------
popup
--------------------------------------------------------------------------*/



/* -------------------------------------------------

popupLayout

------------------------------------------------- */
.popupLayout{
	box-sizing: border-box;
  position: relative;
}
.popupLayout > section{
  background-color: #fff;
  width: 1000px;
  box-sizing: border-box;
  padding:40px 30px;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.popupLayout > section > p.closeBtn:hover{
	opacity: 0.7;
}
.popupLayout > section > p.closeBtn:before{
	content: "×";
	font-weight: bold;
	font-size: 50px;
  line-height: 50px;
	display: block;
	position: absolute;
	z-index:2;
	top:20px;
  right: 20px;
	cursor: pointer;
	transition: 0.8s;
}
.popupLayout > section h4{
  font-size: 2em;
  font-family: "Miriam Libre", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  font-weight: bold;
  text-align: center;
  margin:0 0 20px;
}
.popupLayout > section ul{
  display: flex;
  justify-content: center;
}
.popupLayout > section ul li{
  width: 400px;
  margin:0 10px 10px;
}
.popupLayout > section ul li img{
  width:100%;
}
.popupLayout > section p.text{
  font-size: 1.2em;
}
/* Tablet */
@media screen and (max-width:768px) {
.popupLayout > section{
  width: calc(100% - 60px);
}
.popupLayout > section ul li{
  width: calc(50% - 20px);
  margin:0 10px 10px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.popupLayout > section > p.closeBtn:before{
	font-size: 30px;
  line-height: 30px;
	top:10px;
  right: 10px;
}
.popupLayout > section{
  width: calc(100% - 40px);
  padding:30px 15px;
}
.popupLayout > section ul li{
  width: calc(50% - 10px);
  margin:0 5px 10px;
}
}


/*--------------------------------------------------------------------------
gallery
--------------------------------------------------------------------------*/
.gallery{
  display: flex;
  flex-flow: wrap;
}
.gallery li{
  margin:0 10px 10px;
  width: calc(33.33% - 20px);
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.gallery li{
  width: calc(50% - 20px);
}
}



/*--------------------------------------------------------------------------
conceptArea
--------------------------------------------------------------------------*/

.conceptArea{
  margin:0 0 30px;
}
.conceptArea ul li{
  color: #20aee5;
  font-size: 20px;
  border-bottom:1px dotted #ddd;
  padding:10px 0;
}