@charset "utf-8";

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

		about page
	 
----------------------------------------------------
*
		subPages Layout
		Greeting
    Mission
		Partners
		Company
*
================================================= */






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

		subPages Layout

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

.subPages.aboutIndex #contents,
.subPages.aboutPartners #contents {
  padding-bottom: 153px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(../../common/img/img_partners.png);
  background-size: 350px auto;
}

@media screen and (max-width: 360px) {
  .subPages.aboutIndex #contents,
  .subPages.aboutPartners #contents {
    padding-bottom: 153px;
    padding-bottom: 42.5%;
    background-size: 350px auto;
    background-size: 97.2% auto;
  }
}/* max:360*/



/* ----------------------------------------------
		aside
---------------------------------------------- */

.subPages.aboutPartners #contentsAside ul li.aboutPartners {
  display: none;
}
.subPages.aboutMission #contentsAside ul li.aboutMission {
  display: none;
}
.subPages.aboutCompany #contentsAside ul li.aboutCompany {
  display: none;
}
.subPages.aboutGreeting #contentsAside ul li.aboutGreeting {
  display: none;
}









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

		Greeting

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

.aboutGreeting #greeting .message {
  padding: 4.9%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 6px 6px 0 0 #f99bcc;
  background-color: #fff;
}
.aboutGreeting #greeting .message p.signature {
  text-align: right;
	font-family: "Sawarabi Mincho";
  color: #333;
}
.aboutGreeting #greeting .message p.signature .name {
  font-size: 110%;
}

/* letter Design */
.aboutGreeting #greeting .message .letter {
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #eee 97%,
      #eee 100%
    );
  background-size: 100% 2.5em;
  line-height: 2.5;
}
.aboutGreeting #greeting .message .letter p {
  margin-bottom: 2.5em;
}

/* for JS */
.aboutGreeting #greeting .message p {
  opacity: 0;
}


@media screen and (min-width: 768px) {
  .aboutGreeting #greeting .message {
    position: relative;
    width: 100%;
    padding: 80px 40px 30px;
  }
  .aboutGreeting #greeting .message::before {
    content: "";
    position: absolute;
    left: 15px;
    top: -25px;
    width: 80px;
    height: 91px;
    background: url(../img/greeting_sealingwax.png) left top no-repeat;
    background-size: 100% auto;
    /*-moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);*/
  }
}/* min:768 */


@media screen and (min-width: 769px) {
  .aboutGreeting #greeting .message {
    width: 88%;
    padding: 70px 60px 30px;
    padding: 70px 5% 30px;
  }
  .aboutGreeting #greeting .message::before {
    left: 35px;
    top: -30px;
  }
}/* min:769 */










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

		Mission

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

/* ----------------------------------------------
		mission
---------------------------------------------- */
/*	blkWrapper
---------------------------------------------- */
.aboutMission #mission .blkWrapper {
  margin-top: 20px;
}
.aboutMission #mission .blk {
  padding: 24px 22px 26px;
  margin-top: 25px;
  box-shadow: 6px 6px 0 0 #f99bcc;
  background-color: #fff;
}
.aboutMission #mission .blk .num {
  text-align: center;
  font-size: 24px;
  line-height: 1;
  color: #ec52a2;
}
.aboutMission #mission .blk .num span {
  padding-left: 0.15em;
  font-size: 36px;
}
.aboutMission #mission .blk .ttl {
  margin: 10px 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
}
.aboutMission #mission .blk .img {
  width: 150px;
  margin: 10px auto;
  text-align: center;
}


@media screen and (min-width: 769px) {
  .aboutMission #mission .blk {
    width: 33.3%;
    padding: 20px 20px 20px;
  }
  .aboutMission #mission .blk:nth-child(3n+2) {/*真ん中の列（2,5,8,11…番目）の要素に適用*/
    margin-right: 25px;
    margin-left: 25px;
  }
  .aboutMission #mission .blk .ttl {
    font-size: 16px;
  }
  .aboutMission #mission .blk .txt {
    font-size: 14px;
  }
}/* min:769 */



/* ----------------------------------------------
		action
---------------------------------------------- */
/*	listCheckmark
---------------------------------------------- */
.aboutMission #action .listCheckmark {
  margin-top: 30px;
}
.aboutMission #action .listCheckmark li {
  margin-top: 15px;
  line-height: 1.3;
  color: #33282c;
  background: url(../img/mission_ico_checkmark.png) left center no-repeat #fef5fa;
  background-size: 50px 50px
}

.aboutMission #action .listCheckmark li p {
  padding: 12px 10px 12px;
  vertical-align: middle;
  -webkit-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.aboutMission #action .listCheckmark li p strong {
  display: inline-block;
  vertical-align: middle;
  font-size: 125%;
}
.aboutMission #action .listCheckmark li p span {
  vertical-align: middle;
}


@media screen and (min-width: 769px) {
  .aboutMission #action .listCheckmark {
    height: 100%;
    margin-top: 30px;
  }
  .aboutMission #action .listCheckmark li {
    background-size: auto 100%;
  }
  .aboutMission #action .listCheckmark li p {
    padding: 9px 10px 10px;
  }
}/* min:769 */









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

		Partners

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

/* ----------------------------------------------
		partner
---------------------------------------------- */
.aboutPartners #partners .partner {
  padding: 16px 16px 25px;
  margin-top: 25px;
  box-shadow: 6px 6px 0 0 #f99bcc;
  background-color: #fff;
}
.aboutPartners #partners .partner:first-child {
  margin-top: 0;
}

/*	Layout
---------------------------------------------- */
.aboutPartners #partners .partner .partnerHeader {
  text-align: center;
  cursor: pointer;
}
.aboutPartners #partners .partner .partnerContents {
  text-align: center;
}
.aboutPartners #partners .partner .partnerContents.accMain {
  display: none;
}


/*	partnerHeader
---------------------------------------------- */
.aboutPartners #partners .partner .partnerHeader {
}
.aboutPartners #partners .partner .partnerHeader .thumb {
  /*width: 282px;*/
  width: 80%;
  max-width: 141px;
  margin-left: auto;
  margin-right: auto;
}

.aboutPartners #partners .partner .partnerHeader .thumb img {
  -webkit-filter: drop-shadow(10px 0 0 #fef5fa);
     -moz-filter: drop-shadow(10px 0 0 #fef5fa);
      -ms-filter: drop-shadow(10px 0 0 #fef5fa);
          filter: drop-shadow(10px 0 0 #fef5fa);
}

.aboutPartners #partners .partner .partnerHeader .name {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}
.aboutPartners #partners .partner .partnerHeader .name span {
  display: block;
  margin-bottom: 5px;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.0;
  color: #f99bcc;
}

.aboutPartners #partners .partner .partnerHeader .occupation {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.3;
  color: #666;
}

.aboutPartners #partners .partner .partnerHeader .more {
  position: relative;
  padding-right: 30px;
  margin-top: 20px;
  text-align: right;
  line-height: 1;
  color: #333;
}
.aboutPartners #partners .partner .partnerHeader .more::before,
.aboutPartners #partners .partner .partnerHeader .more::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  margin: auto;
  background-color: #d95098;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.aboutPartners #partners .partner .partnerHeader .more::after {
  width: 0;
  height: 0;
}
.aboutPartners #partners .partner .partnerHeader .more span {
  display: block;
  position: relative;
  z-index: 10;
}
.aboutPartners #partners .partner .partnerHeader .more span::before,
.aboutPartners #partners .partner .partnerHeader .more span::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 0;
  bottom: 0;
  width: 14px;
  height: 2px;
  margin: auto;
  background-color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.aboutPartners #partners .partner .partnerHeader .more span::after {
  right: -34px;
  top: -12px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
/* --- open --- */
.aboutPartners #partners .partner .partnerHeader.open .more::after {
  right: 2px;
  width: 18px;
  height: 18px;
  background-color: #fff;
}
.aboutPartners #partners .partner .partnerHeader.open .more span::before,
.aboutPartners #partners .partner .partnerHeader.open .more span::after {
  background-color: #d95098;
}
.aboutPartners #partners .partner .partnerHeader.open .more span::after {
  right: -26px;
  top: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}


/*	partnerContents
---------------------------------------------- */
.aboutPartners #partners .partner .partnerContents {
  font-size: 14px;
  line-height: 1.5;
}
.aboutPartners #partners .partner .partnerContents .ttl {
  display: inline-block;
  min-width: 80px;
  padding: 5px 10px;
  margin-top: 20px;
  border-radius: 300px;
  text-align: center;
  line-height: 1.2;
  color: #fff;
  background-color: #f99bcc;
}
.aboutPartners #partners .partner .partnerContents dl,
.aboutPartners #partners .partner .partnerContents ul li,
.aboutPartners #partners .partner .partnerContents p {
  margin-top: 10px;
}
.aboutPartners #partners .partner .partnerContents dl:first-of-type,
.aboutPartners #partners .partner .partnerContents ul li:first-of-type {
  margin-top: 15px;
}


@media screen and (min-width: 769px) {
  .aboutPartners #partners .partner {
    padding: 18px 10px 25px;
  }
  
  /*	Layout
  ---------------------------------------------- */
  .aboutPartners #partners .partner .partnerHeader {
    padding: 0 15px 0;
    text-align: left;
  }
  .aboutPartners #partners .partner .partnerContents {
    position: relative;
    padding-left: 195px;
    margin-top: 30px;
    text-align: left;
  }
  .aboutPartners #partners .partner .partnerContents::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    width: 0%;
    height: 1px;
    margin: auto;
    background-color: #f99bcc;
    transition: all 0.3s;
    transform-origin: 0 0;
  }
  .aboutPartners #partners .partner .partnerHeader.open + .partnerContents::before {
    width: 100%;
  }
  
   /*	partnerHeader
  ---------------------------------------------- */
  .aboutPartners #partners .partner .partnerHeader {
    position: relative;
  }
  .aboutPartners #partners .partner .partnerHeader .thumb {
    width: 141px;
    margin-left: 0;
    margin-right: 40px;
  }
  .aboutPartners #partners .partner .partnerHeader .txt {
    -webkit-flex-grow: 2;
    flex-grow: 2;
  }
  .aboutPartners #partners .partner .partnerHeader .more {
    position: absolute;
    right: 0px;
    bottom: -10px;
    margin-top: 0;
  }

  /*	partnerContents
  ---------------------------------------------- */
  .aboutPartners #partners .partner .partnerContents {
    overflow: hidden;
  }
  .aboutPartners #partners .partner .partnerContents .ttl {
    display: inline-block;
    min-width: 80px;
    padding: 5px 10px;
    margin-top: 20px;
    border-radius: 300px;
    text-align: center;
    line-height: 1.2;
    color: #fff;
    background-color: #f99bcc;
  }
  .aboutPartners #partners .partner .partnerContents .ttl + div {
    margin-top: 10px;
    margin-left: 40px;
  }
  .aboutPartners #partners .partner .partnerContents dl,
  .aboutPartners #partners .partner .partnerContents ul li,
  .aboutPartners #partners .partner .partnerContents p {
    margin-top: 10px;
  }
  .aboutPartners #partners .partner .partnerContents dl:first-of-type,
  .aboutPartners #partners .partner .partnerContents ul li:first-of-type {
    margin-top: 10px;
  }
  
  .aboutPartners #partners .partner .partnerContents dl {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    width: 100%;
  }
  .aboutPartners #partners .partner .partnerContents dl dt {
    width: 120px;
  }
}/* min:769 */









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

		Company

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

/* ----------------------------------------------
		outline
---------------------------------------------- */
/*	tableWrapper
---------------------------------------------- */
.aboutCompany #outline .tableWrapper dl {
  border-width: 0;
  border-color: #ccc;
  border-style: solid;
  background-color: #fff;
}

.aboutCompany #outline .tableWrapper > dl {
  width: 100%;
  border-width: 1px;
  border-top-width: 0;
}
.aboutCompany #outline .tableWrapper > dl:first-of-type {
  border-top-width: 1px;
}
.aboutCompany #outline .tableWrapper > dl > dt,
.aboutCompany #outline .tableWrapper > dl > dd {
  padding: 10px 15px;
}
.aboutCompany #outline .tableWrapper > dl > dt {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  vertical-align: middle;
  font-size: 96%;
  color: #333;
  background-color: #f1f1f1;
}

.aboutCompany #outline .tableWrapper > dl > dd > dl > dt,
.aboutCompany #outline .tableWrapper > dl > dd > dl > dd {
  display: inline-block;
}
.aboutCompany #outline .tableWrapper > dl > dd > dl > dt {
  font-weight: normal;
  padding-right: 1em;
}

@media screen and (min-width: 769px) {
  .aboutCompany #outline .tableWrapper dl {
    display: table;
  }
  .aboutCompany #outline .tableWrapper dl dt,
  .aboutCompany #outline .tableWrapper dl dd {
    display: table-cell;
  }

  .aboutCompany #outline .tableWrapper > dl {
    margin-top: -1px;
    border-top-width: 1px;
  }
  .aboutCompany #outline .tableWrapper > dl > dt,
  .aboutCompany #outline .tableWrapper > dl > dd {
    padding: 8px 30px;
  }
  .aboutCompany #outline .tableWrapper > dl > dt {
    width: 10em;
    padding-top: 8px;
    padding-bottom: 8px;
    border-right: 1px solid #ccc;
    vertical-align: middle;
  }

  .aboutCompany #outline .tableWrapper > dl > dd > dl {
    width: 10em;
  }
  .aboutCompany #outline .tableWrapper > dl > dd > dl > dt {
    width: 7em;
  }
  .aboutCompany #outline .tableWrapper > dl > dd > dl > dd {
    text-align: right;
  }
}/* min:769 */


/*	notes
---------------------------------------------- */
.aboutCompany #outline .notes {
  padding: 5px 0;
  text-align: right;
  font-size: 12px;
}


/* ----------------------------------------------
		access
---------------------------------------------- */
/*	frameMap
---------------------------------------------- */
.aboutCompany #access .frameMap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 80%; 
  border: 1px solid #ccc;
}
.aboutCompany #access .frameMap iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
}

.aboutCompany #access .linkMap {
  display: block;
  text-align: right;
  font-size: 12px;
  line-height: 1.2;
}
.aboutCompany #access .linkMap a {
  display: inline-block;
  padding: 8px 8px;
  border: 1px solid #ccc;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  background-color: #f1f1f1;
}

.aboutCompany #access .address {
  margin-top: 20px;
  line-height: 1.4;
}
.aboutCompany #access .station {
  margin-top: 10px;
  line-height: 1.4;
}

@media screen and (min-width: 769px) {
  .aboutCompany #access .frameMap {
    padding-top: 60%; 
  }
}/* min:769 */