@charset "UTF-8";
/*pc_base*/
body {
  min-width: 1100px;
  position: relative;
}

#ga {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  color: #f00;
}

/* =============================================================
	custom pc(共通CSSにあって値を変更したいもの、独自に設定したいものを記述)
============================================================= */
.floatL {
  float: left;
  margin: 0 2em 2em 0;
}

.floatR {
  float: right;
  margin: 0 0 2em 2em;
}

.rtxtC {
  text-align: center;
}

.rbr-pc {
  display: none;
}

/* section */
.sec-inner {
  padding: 60px 0;
  position: relative;
}

.sec-inner-inner:not(:last-child) {
  margin-bottom: 60px;
}

/* title */
.title-1-wrapper {
  background: url("svg/border_top.svg") no-repeat top center, url("svg/border_bottom.svg") no-repeat bottom center;
  text-align: center;
  margin-bottom: 60px;
  padding: 55px 0;
  position: relative;
}
.title-1-wrapper > img {
  width: 115px;
  margin: auto;
  position: absolute;
  top: -8px;
  right: 0;
  left: 0;
}

.title-1 {
  font-size: 4.1rem;
}

.chrome .title-1 {
  font-weight: 700;
}

.title-2 {
  color: #006124;
  font-size: 4.6rem;
  line-height: 1.2;
  margin: 0 0 35px;
}

.title-3 {
  color: #5d7d5e;
  font-size: 2.2rem;
  line-height: 1.4;
  margin: 0 0 35px;
}
.title-3 strong {
  font-size: 4rem;
}

.title-4 {
  font-size: 3.2rem;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: .1em;
}
.title-4 img {
  width: 120px;
}

.title-5 {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  text-align: center;
  font-size: 3.3rem;
  margin-bottom: 35px;
  padding: 25px 0;
}

.title-5.left {
  text-align: left;
  padding-left: 40px;
}

.chrome .title-5.left {
  font-weight: 700;
}

.title-6 {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-size: 2.3rem;
  margin-bottom: 40px;
  padding: 13px 0 13px 35px;
}

/* text */
.text-box-1 {
  position: relative;
}
.text-box-1 p {
  letter-spacing: .2em;
  line-height: 2.2;
}
.text-box-1 p:last-child {
  margin-bottom: 0;
}

.text-box-3 {
  background: #fff;
  padding: 50px;
}

/* table */
.table-wrapper {
  margin-bottom: 25px;
}

.table-1 th, .table-1 td {
  border: 1px solid #d2d2d2;
  font-size: 1.4rem;
  padding: 10px;
}
.table-1 thead th {
  background: #007b82;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
}
.table-1 tbody th {
  white-space: nowrap;
  vertical-align: middle;
}

.wparts {
  display: inline-block;
  width: 60px;
}

.comments {
  text-indent: -1em;
  padding-left: 1em;
}

/* cv-contents */
.cv-contents {
  position: relative;
}
.cv-contents .to-cart-btn {
  position: absolute;
  bottom: 145px;
  right: 75px;
}

/* button */
.btn-wrap {
  text-align: center;
}

a.btn-1 {
  background: #007b82;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  line-height: 1.4;
  text-align: center;
  padding: 16px 40px;
  min-width: 240px;
}

.link-btn {
  border: 1px solid #595959;
  border-radius: 25px;
  display: inline-block;
  text-decoration: none !important;
  padding: 10px 50px;
}

.link-btn-2 {
  background-color: #007b82 !important;
  border-radius: 30px;
  color: #fff !important;
  display: block;
  text-align: center;
}

.contact-btn {
  background: #fff url("svg/icon_mail.svg") no-repeat left 17px top 50%/15px 11px;
  border: 1px solid #ccc;
  border-radius: 20px;
  display: inline-block;
  font-size: 1.2rem;
  line-height: 38px;
  padding: 0 20px 0 40px;
}

/* breadCrumb */
.breadcrumb-wrapper {
  background: #eee;
}

.breadcrumb-inner {
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb-inner > span {
  display: block;
}

.breadcrumb-wrapper,
.breadcrumb-wrapper a {
  font-size: 1.2rem;
}

.breadcrumb-home {
  font-size: 1.3rem;
}
.breadcrumb-home a {
  background: url("svg/icon_home.svg") no-repeat left 50%/11px;
  padding-left: 20px;
}

.breadcrumb-arrow {
  background: url("svg/icon_arrow_black.svg") no-repeat center center/5px;
  height: 0;
  overflow: hidden;
  padding-top: 22px;
  margin: 0 5px;
}

.breadcrumb-wrapper a:hover {
  color: #007b82;
}

/* pagetitle */
.pagetitle-wrapper {
  background: url("images/title_bg_regularly_course.jpg") no-repeat center 50%/cover;
  display: flex;
  align-items: center;
  min-height: 320px;
}

.pagetitle {
  color: #006124;
  font-size: 5.1rem;
  margin-bottom: 20px;
}
.pagetitle span {
  display: block;
  font-size: 1.6rem;
}
.pagetitle-inner p {
  font-size: 1.8rem;
}
.pagetitle-sub {
  color: #006124;
  font-size: 2.4rem;
  margin-bottom: 20px;
}

.title-whats-euglena {
  background: url("images/title_bg_whats_euglena.jpg") no-repeat center 50%/cover;
}
.title-whats-euglena * {
  color: #fff;
}

.title-regularly-course {
  background: url("images/title_bg_regularly_course.jpg") no-repeat center 50%/cover;
}

.title-product {
  background: url("images/title_bg_product.jpg") no-repeat center 50%/cover;
}

.title-faq {
  background: url("images/title_bg_faq.jpg") no-repeat center 50%/cover;
}

.title-privacy {
  background: url("images/title_bg_privacy.jpg") no-repeat center 50%/cover;
}

.title-specified-commerce {
  background: url("images/title_bg_specified_commerce.jpg") no-repeat center 50%/cover;
}

.title-company {
  background: url("images/title_bg_company.jpg") no-repeat center 50%/cover;
}

.title-agency-recruitment {
  background: url("images/title_bg_agency_recruitment.jpg") no-repeat center 50%/cover;
}

.title-voice {
  background: url("images/title_bg_voice.jpg") no-repeat center 50%/cover;
}

.category-dictionary .pagetitle-wrapper {
  background: url("images/title_bg_dictionary.jpg") no-repeat center 50%/cover;
}

.title-contact, .title-confirm, .title-complete {
  background: url("images/title_bg_contact.jpg") no-repeat center 50%/cover;
}

/* =============================================================
	wrap,box
============================================================= */
.content-left {
  float: left;
  width: 760px;
}

.mainnav {
  margin-left: auto;
  margin-right: auto;
  width: 1100px;
}

.header-wrap,
.sec-inner,
.footer-inner,
.breadcrumb-inner,
.pagetitle-inner,
.post-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.mainnav {
  margin-left: auto;
  margin-right: auto;
  width: 1100px;
}

.pink-box,
.gray-box {
  border-bottom: 1px solid #f6f6f6;
  margin-bottom: 45px;
  padding: 30px 40px;
}

.pink-box {
  background: #f2e8e9;
}

.gray-box {
  background: #eee;
}

/* =============================================================
	header
============================================================= */
.header-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 37px 0 40px;
}

/* header-desc
--------------------------------- */
.header-desc {
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 0 30px;
  position: absolute;
  top: 10px;
}

/* header-logo
--------------------------------- */
.header-logo {
  width: 238px;
}

/* header-info
--------------------------------- */
.header-info {
  width: 510px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.header-tel {
  width: 240px;
}
.header-tel img {
  vertical-align: top;
}
.header-tel p {
  color: #4d4d4d;
  font-size: 1.3rem;
}

.header-link {
  width: 230px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.header-link li {
  text-align: center;
}
.header-link a {
  color: #4d4d4d;
  display: block;
  font-size: 1.3rem;
}
.header-link svg {
  display: block;
  fill: #007b77;
  width: 24px;
  margin: auto;
}
.header-link .icon-mail {
  margin: 5px auto 3px;
}

/* main navi
--------------------------------- */
#gnav {
  margin-bottom: 15px;
}

.mainnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mainnav > li {
  flex: 1 1 auto;
  position: relative;
}
.mainnav > li > a {
  font-size: 1.4rem;
  display: block;
  line-height: 1.2;
  text-align: center;
  position: relative;
}
.mainnav > li span {
  color: #999;
  font-size: 1.2rem;
}
.mainnav > li:not(:last-child)::after {
  background: #ccc;
  content: "";
  width: 1px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* =============================================================
	footer
============================================================= */
.dl-style-1 dt {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-size: 2.3rem;
  padding: 10px 0 10px 40px;
}
.dl-style-1 dd {
  font-size: 1.4rem;
  margin: 25px 0;
  padding-left: 40px;
}

.product-info, .bell-group-banner {
  background: #fdfcfb;
}
.product-info dl {
  display: flex;
  flex-wrap: wrap;
}
.product-info dl dt, .product-info dl dd {
  font-size: 1.4rem;
}
.product-info dl dt {
  width: 140px;
  padding-left: 40px;
}
.product-info dl dd {
  border-left: 1px solid #aaa;
  width: 820px;
  padding: 0 0 30px 20px;
}
.product-info dl dd:last-child {
  padding-bottom: 0;
}

.contact-area {
  text-align: center;
}
.contact-area h2 {
  font-size: 3rem;
  margin-bottom: 25px;
}
.contact-area p {
  font-size: 2rem;
  margin-bottom: 40px;
}
.contact-area.ca-2 {
  background: #edf2e3;
}

.btn-contact {
  width: 602px;
  margin: auto;
}

.ca-tel {
  margin-bottom: 15px;
}
.ca-tel img {
  width: 645px;
}

.footer-wrap {
  background: #313131;
  border-top: 5px solid #007b82;
  padding: 70px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.footer-info {
  width: 270px;
  margin-right: 90px;
}

.footer-navi {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
}
.footer-navi ul:not(:last-child) {
  margin-right: 80px;
}
.footer-navi li {
  margin-bottom: 15px;
}
.footer-navi a {
  color: #fff;
  font-size: 1.4rem;
}
.footer-navi a:hover {
  text-decoration: underline;
}

.footer-logo {
  margin-bottom: 15px;
}

.footer-contact {
  color: #fff;
}
.footer-contact h3 {
  font-size: 1.2rem;
}

.footer-tel {
  display: block;
  width: 220px;
  margin: 5px 0;
}

.footer-reception-time {
  font-size: 1rem;
  margin-bottom: 15px;
}

.footer-contact-btn {
  background: #464646;
  border-radius: 4px;
  text-align: center;
}
.footer-contact-btn svg {
  fill: #fff;
  width: 16px;
  vertical-align: bottom;
  margin-right: .5em;
}
.footer-contact-btn a {
  color: #fff;
  display: block;
  font-size: 1.1rem;
  line-height: 12px;
  padding: 8px;
}

.footer-share-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}
.footer-share-btn li {
  width: 30px;
}
.footer-share-btn li:not(:last-child) {
  margin-right: 20px;
}

/* copyright
--------------------------------- */
.copyright {
  display: block;
  text-align: center;
}
.copyright small {
  color: #fff;
  font-size: 1.4rem;
}

/* pagetop
--------------------------------- */
#pagetop {
  background: #007b82;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 1rem;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  text-decoration: none;
  width: 100px;
  position: fixed;
  bottom: 10px;
  right: 10px;
}
#pagetop:hover {
  background: #3c9;
  text-decoration: none;
}
#pagetop.on {
  opacity: 1;
  visibility: visible;
}

@keyframes pagetop_anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*pc_home*/
/* =============================================================
	home
============================================================= */
.pane {
  height: 230px;
  overflow: hidden;
}

/* home add
--------------------------------- */
/* main-image */
.main-image {
  background: url("images/main_visual.png") no-repeat center center/cover;
  text-align: center;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-top: 670px;
}

.main-image img {
  width: 100%;
}

/*sec-01*/
.sec-01 h2 {
  width: 991px;
  margin-right: -31px;
}

.sec01-img {
  width: 360px;
}

.sec01-text {
  width: 600px;
}

/*sec-02*/
.sec-02 .title-1-wrapper {
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.sec-02-1 {
  background: #f0f4f4 url("images/section02_1_bg.jpg") no-repeat center bottom/cover;
}
.sec-02-1 .text-box-1 {
  margin-left: 500px;
  padding: 55px 0 0 55px;
}
.sec-02-1 .text-box-1 > img {
  width: 147px;
  position: absolute;
  top: 0;
  left: 0;
}
.sec-02-1 .fs-1 {
  font-size: 6.9rem;
}
.sec-02-1 .fs-2 {
  font-size: 5.2rem;
}

.sec-02-2 {
  background: #f8fafa url("images/section02_2_bg.jpg") no-repeat center bottom;
}
.sec-02-2 .text-box-1 {
  padding-top: 55px;
}
.sec-02-2 .text-box-1 > img {
  width: 147px;
  position: absolute;
  top: 0;
  left: -55px;
}
.sec-02-2 .fs-1 {
  font-size: 4rem;
}
.sec-02-2 .fs-2 {
  font-size: 8rem;
}

.sec-02-3 {
  background: #f0f4f4 url("images/section02_3_bg.jpg") no-repeat center bottom/cover;
}
.sec-02-3 .text-box-1 {
  margin-left: 500px;
  padding: 55px 0 0 55px;
}
.sec-02-3 .text-box-1 > img {
  width: 147px;
  position: absolute;
  top: 0;
  left: 0;
}
.sec-02-3 .fs-1 {
  font-size: 6.6rem;
}
.sec-02-3 .fs-2 {
  font-size: 3.5rem;
}

/*sec-03*/
.sec-03 {
  background: url("images/section03_1_bg.png") no-repeat top left, url("images/section03_2_bg.png") no-repeat bottom right;
  background-color: #fff;
}
.sec-03 .text-box-2 img {
  float: left;
  margin: -75px -85px 0 -165px;
}
.sec-03 p {
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 3px;
  margin-bottom: 0;
}

.voice-wrapper {
  background: #fff;
  box-shadow: 4px 5px 15px 2px #c9c9c9;
}
.voice-wrapper article {
  display: flex !important;
  flex-wrap: wrap;
}
.voice-wrapper .slick-dots {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
}

.voice-photo {
  width: 400px;
  position: relative;
}
.voice-photo::after {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
  content: "";
  display: block;
  width: 60px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.voice-contents {
  width: 560px;
  padding: 50px 70px 50px 50px;
}
.voice-contents p {
  font-size: 1.5rem;
  letter-spacing: 0;
}

.voice-head {
  color: #5e7d5e;
  font-size: 3.5rem;
  margin-bottom: 20px;
}
.voice-head span {
  background: #5e7d5e;
  color: #eaebdd;
  font-size: 1.8rem;
  vertical-align: middle;
  margin-left: 12px;
  padding: 5px 15px;
}
.voice-head::before {
  background: url("svg/voice.svg") no-repeat;
  content: "";
  display: block;
  width: 111px;
  height: 42px;
  margin: 0 0 -5px -15px;
}

.voice-title {
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.voice-info {
  float: right;
}

.voice-info-age {
  font-size: 1.1rem;
}

.voice-info-name {
  font-size: 1.9rem;
  letter-spacing: .1em;
}
.voice-info-name::after {
  content: "さま";
  font-size: 1.3rem;
}

/*sec-04*/
.sec-04 {
  background: #f7f6f2 url("images/section04_bg.png") no-repeat center top;
  padding-top: 200px;
}
.sec-04 .text-box-3 {
  padding-bottom: 75px;
}
.sec-04 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sec-04 li {
  font-size: 1.9rem;
  line-height: 1;
}
.sec-04 li::before {
  color: #5d7d5e;
  content: "● ";
  display: block;
  float: left;
  font-size: 1rem;
  margin: 5px;
}

.svg-magazine {
  margin-bottom: -20px;
}

.sec-04-img {
  display: block;
}

.sec-04-img.television {
  margin: 0 auto 80px;
}

.sec-04-img.magazine {
  margin: 0 -17px 30px -15px;
  max-width: inherit;
}

/*sec-05*/
.sec-05 {
  background: #f7f6f2;
}
.sec-05 .title-1-wrapper {
  margin-bottom: 35px;
}

.sec-05-text {
  text-align: center;
  margin-bottom: 25px;
}
.sec-05-text img {
  margin-right: -94px;
}

/*sec-06*/
.sec-06-header {
  background: url("images/section06_bg_1.png") no-repeat center center/cover;
  position: relative;
}
.sec-06-header::after {
  border-style: solid;
  border-width: 62px 37px 0 37px;
  border-color: #767676 transparent transparent transparent;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -62px;
  left: 0;
  z-index: 10;
}
.sec-06-header h2 {
  color: #fff;
  font-size: 4rem;
  text-align: center;
  margin-bottom: 10px;
}
.sec-06-header ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sec-06-header li {
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 2.2rem;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  margin-right: 20px;
  padding-top: 25px;
  width: 170px;
  height: 170px;
}
.sec-06-header li:last-child {
  margin-right: 0;
}
.sec-06-header svg {
  display: block;
  margin: 0 auto 20px;
  fill: #fff;
  width: 33px;
}
.sec-06-header li:nth-child(2) svg {
  margin-bottom: 5px;
}

.sec-06-contents {
  background: url("images/section06_bg_2.png") no-repeat right bottom, url("images/section06_bg_3.png") no-repeat left top;
}
.sec-06-contents .sec-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 0;
}

.sec-06-img {
  margin-left: -35px;
}

.sec-06-text {
  display: flex;
  flex-direction: column;
  width: 520px;
  margin-right: -35px;
  padding-top: 65px;
}
.sec-06-text h3 {
  color: #5d7d5e;
  font-size: 10.3rem;
  order: 2;
}
.sec-06-text span {
  background: #5d7d5e;
  border-radius: 26.5px;
  color: #fff;
  display: block;
  font-size: 3.1rem;
  line-height: 53px;
  text-align: center;
  width: 290px;
}
.sec-06-text p {
  font-size: 4rem;
  line-height: 1.4;
  letter-spacing: .05em;
  margin-bottom: 45px;
  order: 1;
}

/*sec-07*/
.sec-07 {
  background: #f7f6f2 url("images/section07_bg.jpg") repeat-y center top/100%;
}
.sec-07 .title-1-wrapper {
  background: url("svg/border_top.svg") no-repeat top center;
  padding-bottom: 0;
}
.sec-07 .title-1-wrapper > img {
  width: 140px;
}

.sec-07-eyecatch {
  margin-bottom: 50px;
}

.point1-list {
  margin-bottom: 40px;
}
.point1-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.point1-list li:nth-child(1) .point1-text {
  width: 480px;
  order: 2;
}
.point1-list li:nth-child(1) > img {
  margin-left: -40px;
  order: 1;
}
.point1-list li:nth-child(2) .point1-text {
  width: 405px;
}
.point1-list li:nth-child(2) > img {
  margin-left: -40px;
}
.point1-list li:nth-child(3) .point1-text {
  margin-left: -10px;
  padding-top: 60px;
  order: 2;
}
.point1-list li:nth-child(3) > img {
  margin-right: -10px;
  order: 1;
}
.point1-list li:nth-child(4) .point1-text {
  width: 545px;
  margin-right: -60px;
}
.point1-list li:nth-child(4) > img {
  margin-right: -40px;
}
.point1-list li:nth-child(5) .point1-text {
  width: 500px;
  order: 2;
}
.point1-list li:nth-child(5) > img {
  margin-left: -50px;
  order: 1;
}
.point1-list .point1-text {
  padding-top: 100px;
}
.point1-list h3 {
  margin-bottom: 40px;
}
.point1-list h4 {
  font-size: 2.4rem;
  line-height: 1.8;
  margin-bottom: 15px;
}
.point1-list p {
  font-size: 1.8rem;
  margin-bottom: 0;
}

.beauty-component {
  margin-bottom: 60px;
}
.beauty-component h3 {
  text-align: center;
  margin-bottom: 30px;
}
.beauty-component > img {
  display: block;
  margin: 0 auto 35px;
}

.beauty-component-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.beauty-component-list li {
  width: 225px;
}
.beauty-component-list figure {
  margin-bottom: 20px;
}
.beauty-component-list .img-wrapper {
  border: 4px solid;
  border-radius: 50%;
  overflow: hidden;
}
.beauty-component-list figcaption {
  border-radius: 22.5px;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  margin-top: -22px;
  padding: 4.5px 0;
  position: relative;
  z-index: 1;
}
.beauty-component-list dt {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
}
.beauty-component-list dd {
  font-size: 1.8rem;
  letter-spacing: 0;
  padding-right: 10px;
}

.beauty-component-1 .img-wrapper {
  border-color: #a06b9c;
}
.beauty-component-1 figcaption {
  background: #a06b9c;
}
.beauty-component-1 dt {
  color: #a06b9c;
}

.beauty-component-2 .img-wrapper {
  border-color: #d88b94;
}
.beauty-component-2 figcaption {
  background: #d88b94;
}
.beauty-component-2 dt {
  color: #d88b94;
}

.beauty-component-3 .img-wrapper {
  border-color: #5e7d5e;
}
.beauty-component-3 figcaption {
  background: #5e7d5e;
}
.beauty-component-3 dt {
  color: #5e7d5e;
}

.beauty-component-4 .img-wrapper {
  border-color: #b7aa00;
}
.beauty-component-4 figcaption {
  background: #b7aa00;
}
.beauty-component-4 dt {
  color: #b7aa00;
}

.midorimushi-nutrients {
  text-align: center;
  margin-bottom: 70px;
}
.midorimushi-nutrients h3 {
  font-size: 4.3rem;
  margin-bottom: 10px;
}
.midorimushi-nutrients span {
  color: #5d7d5e;
}
.midorimushi-nutrients p {
  font-size: 2.3rem;
  margin-bottom: 0;
}

.text-box-4 {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 80px;
}

.tb4-inner {
  width: 410px;
}
.tb4-inner h3 {
  font-size: 2.3rem;
  line-height: 1.8;
  margin-bottom: 25px;
}
.tb4-inner p {
  font-size: 1.8rem;
  margin-bottom: 0;
}

/*sec-08*/
.sec-08 {
  background: url("images/section08_bg.jpg") repeat-y center top/100%;
}
.sec-08 h2 {
  color: #fff;
  font-size: 6.85rem;
  text-align: center;
  margin-bottom: 70px;
}
.sec-08 strong {
  font-size: 10.5rem;
}

.text-box-5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tb5-inner {
  background: #fff;
  width: 457px;
}
.tb5-inner img {
  display: block;
  margin-bottom: 40px;
}
.tb5-inner figure {
  margin-bottom: 35px;
}
.tb5-inner figcaption {
  color: #5d7d5e;
  font-size: 2.3rem;
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}
.tb5-inner figcaption::after {
  background: #5e7d5e;
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.tb5-inner p {
  font-size: 1.8rem;
  letter-spacing: 0;
  line-height: 1.8;
  padding: 0 65px;
}

/*sec-09*/
.sec-09, .sec-11, .sec-14 {
  background: #f7f6f2;
}

.sec-09-text {
  font-size: 6rem;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 30px !important;
}
.sec-09-text span {
  color: #c14f63;
}

/*sec-10*/
.img-box-1 {
  position: relative;
}
.img-box-1 > a {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.sec-10 {
  background: #fff url("images/section10_bg.jpg") no-repeat right bottom;
}

.sec-10-btn {
  bottom: 35px !important;
}

/*sec-12*/
.faq-sec .title-1-wrapper > img {
  width: 53px;
}

.faq-list dt, .faq-list dd {
  padding-left: 65px;
}
.faq-list dt {
  background: url("svg/q.svg") no-repeat left 50%/49px 44px;
  color: #d88b94;
  font-size: 2.8rem;
  margin-bottom: 25px;
}
.faq-list dd {
  background: url("svg/a.svg") no-repeat left top 7px/52px 40px;
  font-size: 1.8rem;
  min-height: 50px;
  margin-bottom: 50px;
}
.faq-list a {
  text-decoration: underline;
}
.faq-list a:hover {
  text-decoration: none;
}

/*sec-13*/
.sec-13 {
  background: url("images/section13_bg.jpg") no-repeat center top/cover;
}

.greeting-box {
  background: rgba(255, 255, 255, 0.9);
  color: #42210b;
  margin-left: 300px;
  padding: 70px;
}
.greeting-box h2 {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 55px;
}
.greeting-box p {
  font-size: 2rem;
  letter-spacing: 1.5px;
  line-height: 2;
}

.sec-14-p {
  color: #42210b;
  font-size: 2.5rem;
  line-height: 2.2;
  margin-bottom: 120px !important;
}
.sec-14-inner {
  background: #fff;
  padding: 80px 40px 40px;
}
.sec-14-title {
  margin-bottom: 45px;
  position: relative;
}
.sec-14-title-photo {
  margin: auto;
  position: absolute;
  top: -150px;
  right: 0;
  left: 0;
}
.sec-14-dl dt {
  color: #c14f63;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 15px;
  position: relative;
}
.sec-14-dl dt::after {
  background: #c14f63;
  content: "";
  display: block;
  width: 55px;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.sec-14-dl dd {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

/*pc_page*/
/* =============================================================
	page
============================================================= */
/* =============================================================
	page-whats-euglena
============================================================= */
.about-euglena p {
  font-size: 1.8rem;
  line-height: 2;
  padding: 0 40px;
}
.about-euglena .floatR {
  margin-left: 80px;
}

.point-wrapper {
  padding: 0 40px;
}
.point-wrapper > div {
  margin-bottom: 50px;
}
.point-wrapper h3 {
  color: #447b41;
  font-size: 3.6rem;
  margin-bottom: 15px;
}
.point-wrapper h3::before {
  background: #5e7d5e no-repeat center 50% / 105px;
  content: "Point01";
  display: block;
  overflow: hidden;
  width: 160px;
  height: 0;
  margin-bottom: 20px;
  padding-top: 30px;
}
.point-wrapper .point-01 h3::before {
  background-image: url("svg/point1_w.svg");
}
.point-wrapper .point-02 h3::before {
  background-image: url("svg/point2_w.svg");
}
.point-wrapper .point-03 h3::before {
  background-image: url("svg/point3_w.svg");
}
.point-wrapper .point-04 h3::before {
  background-image: url("svg/point4_w.svg");
}
.point-wrapper .point-05 h3::before {
  background-image: url("svg/point5_w.svg");
}
.point-wrapper p {
  font-size: 1.8rem;
  line-height: 2;
}
.point-wrapper .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.point-wrapper .text-box {
  width: 440px;
}
.point-wrapper .text-box h4 {
  font-size: 2.3rem;
  margin-bottom: 30px;
}
.point-wrapper .img-box {
  width: 407px;
}

.img-center {
  text-align: center;
  margin: 40px 0;
}

.nutrients-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nutrients-wrapper > div {
  background: #fff;
  border-top: 5px solid #5e7d5e;
  width: 280px;
  margin-bottom: 20px;
  padding: 20px 25px;
}
.nutrients-wrapper h4 {
  color: #5e7d5e;
  font-size: 2.3rem;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 15px;
}
.nutrients-wrapper .min {
  font-size: 1.8rem;
}
.nutrients-wrapper .accent {
  font-size: 3.6rem;
}
.nutrients-wrapper dt {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 15px;
}
.nutrients-wrapper .flex li {
  width: 50%;
  font-size: 1.4rem;
}

.nutrients-6 {
  background: #5e7d5e !important;
}
.nutrients-6 h4 {
  background: #fff url("svg/quill_pen.svg") no-repeat right 25px top 45%/17px 19px;
  border-radius: 18px;
  color: #5e7d5e;
  font-size: 1.8rem;
  padding: 7.5px 0;
}
.nutrients-6 dt, .nutrients-6 dd {
  color: #fff;
}
.nutrients-6 dd {
  text-align: left;
}
.nutrients-6 dd img {
  display: block;
  margin-top: 10px;
}

.kouka h3 {
  color: #d88b94;
}
.kouka h3::before {
  background-color: #d88b94;
}

.sec-08.conjugation {
  background-image: url("images/conjugation_bg@2x.jpg");
  background-size: cover;
}

.page-whats-euglena .sec-04 {
  background: #fff;
  padding-top: 50px;
}

.page-whats-euglena .sec-05-text img {
  margin: inherit;
}

/* =============================================================
	page-regularly-course
============================================================= */
.benefits-1 {
  background: #fff;
  margin-bottom: 35px;
}
.benefits-1 h3 {
  background: #5e7d5e;
  color: #fff;
  font-size: 4rem;
  text-align: center;
  position: relative;
  padding: 30px 10px 30px 40px;
}
.benefits-1 h3 span {
  color: #f0e000;
  font-size: 4rem;
}
.benefits-1 h3 img {
  position: absolute;
  top: -10px;
  left: -15px;
}

.benefits-1-inner {
  padding: 40px;
}

.teiki-1 {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.teiki-1 a {
  display: block;
  position: absolute;
  bottom: 20px;
  right: 30px;
}

.teiki-2-5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
}
.teiki-2-5 li {
  width: 222px;
  text-align: center;
}
.teiki-2-5 li > img {
  margin-bottom: 15px;
}
.teiki-2-5 h5 {
  color: #5e7d5e;
  font-size: 2.6rem;
  margin-bottom: 10px;
}
.teiki-2-5 h5 span {
  font-size: 4rem;
}

.benefits-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.benefits-wrapper li {
  background: #fff;
  width: 465px;
  margin-bottom: 30px;
}
.benefits-wrapper h3 {
  background: #5e7d5e;
  color: #fff;
  font-size: 3rem;
  text-align: center;
  position: relative;
  padding: 25px;
}
.benefits-wrapper h3 span {
  color: #f0e000;
  font-size: 3rem;
}
.benefits-wrapper h3 img {
  position: absolute;
  top: -6px;
  left: -10px;
}
.benefits-wrapper p {
  font-size: 1.8rem;
  margin: 0;
  padding: 155px 40px 40px 40px;
}

.benefits-2 p {
  background: url("svg/icon_truck.svg") no-repeat center top 32px/152px;
}

.benefits-3 p {
  background: url("svg/icon_calendar.svg") no-repeat center top 32px/128px;
}

.benefits-4 p {
  background: url("svg/icon_dollar.svg") no-repeat center top 32px/101px;
}

.benefits-5 p {
  background: url("svg/icon_smartphone.svg") no-repeat center top 32px/58px;
}

.cancellation .sec-inner {
  width: 880px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
.cancellation h2 {
  color: #5d7d5e;
  font-size: 5.5rem;
  margin-bottom: 45px;
}
.cancellation p:not(.kome) {
  background: url("svg/icon_door.svg") no-repeat center top/100px;
  font-size: 3.7rem;
  margin-bottom: 30px;
  padding-top: 150px;
}
.cancellation .kome {
  font-size: 2.2rem;
  margin-bottom: 0;
}

/* =============================================================
	page-product
============================================================= */
.product-benefits {
  margin-bottom: 45px;
}
.product-benefits ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.product-benefits ol li {
  background: #f7f6f2;
  width: 310px;
  text-align: center;
  padding: 40px 30px;
  position: relative;
}
.product-benefits ol li::after {
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  width: 144px;
  height: 72px;
  display: block;
  position: absolute;
  top: -6px;
  left: -10px;
  z-index: 10;
}
.product-benefits ol h3 {
  font-size: 2.8rem;
  margin-bottom: 20px;
}
.product-benefits ol span {
  color: #d88b94;
  font-size: 3.7rem;
}
.product-benefits ol p {
  font-size: 1.8rem;
  margin-bottom: 0;
  padding-top: 85px;
}
.product-benefits ul li {
  font-size: 1.5rem;
}

.product-benefits-1::after {
  background-image: url("images/product_reborn_1.png");
}
.product-benefits-1 p {
  background: url("svg/icon_coin.svg") no-repeat center top/70px;
}

.product-benefits-2::after {
  background-image: url("images/product_reborn_2.png");
}
.product-benefits-2 p {
  background: url("svg/icon_coin2.svg") no-repeat center top/61px;
}

.product-benefits-3::after {
  background-image: url("images/product_reborn_3.png");
}
.product-benefits-3 p {
  background: url("svg/icon_dollar2.svg") no-repeat center top/63px;
}

.product-item-wrapper h3 {
  text-align: center;
  margin-bottom: 45px;
}

.product-item-1 {
  margin-bottom: 10px;
  position: relative;
}
.product-item-1 a {
  display: block;
  height: 62px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 40px;
  bottom: 0;
}

.product-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product-item-list li {
  box-shadow: 0px 0px 3px 2px #f1f1f1;
  background: #fff;
  text-align: center;
  width: 310px;
  margin-bottom: 15px;
  padding: 30px 40px;
  position: relative;
}
.product-item-list li > img {
  display: block;
  margin-bottom: 20px;
}
.product-item-list li::after {
  border-style: solid;
  border-width: 100px 100px 0 0;
  border-color: #d88b94 transparent transparent transparent;
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.product-item-list h4 {
  font-size: 2.6rem;
  margin-bottom: 25px;
}
.product-item-list span {
  font-size: 4rem;
}
.product-item-list a {
  display: block;
}

.off-icon {
  color: #fff;
  font-size: 2.1rem;
  line-height: 1;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

/* =============================================================
	page-voice
============================================================= */
.page-voice .sec-01 {
  background: url("images/section06_bg_2.png") no-repeat right bottom, url("images/section06_bg_3.png") no-repeat left top;
}

.voice-box {
  background: #fff;
  border-top: 3px solid #5e7d5e;
  box-shadow: 0px 0px 3px 1px #dbdbdb;
  margin-bottom: 40px;
  padding: 40px;
  position: relative;
}
.voice-box::after {
  background: url("images/leaf@2x.png") no-repeat 0 0/cover;
  content: "";
  display: block;
  width: 153px;
  height: 165px;
  position: absolute;
  right: -30px;
  bottom: 10px;
  z-index: 2;
}

.voice-header {
  background-repeat: no-repeat;
  background-position: left 50%;
  margin-bottom: 25px;
  padding-left: 70px;
}
.voice-header h2 {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 166px;
  color: #5e7d5e;
  font-size: 2.5rem;
  padding-top: 50px;
}

.voice-box-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.voice-text {
  width: 580px;
}
.voice-text p {
  line-height: 2.2;
}
.voice-text p span {
  background: -moz-linear-gradient(top, rgba(250, 246, 178, 0) 0%, rgba(250, 246, 178, 0) 35%, #faf6b2 36%, #faf6b2 100%);
  background: -webkit-linear-gradient(top, rgba(250, 246, 178, 0) 0%, rgba(250, 246, 178, 0) 35%, #faf6b2 36%, #faf6b2 100%);
  background: linear-gradient(to bottom, rgba(250, 246, 178, 0) 0%, rgba(250, 246, 178, 0) 35%, #faf6b2 36%, #faf6b2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00faf6b2', endColorstr='#faf6b2',GradientType=0 );
}

.voice-img {
  width: 250px;
}
.voice-img img {
  box-shadow: 0px 0px 3px 1px #dbdbdb;
  margin-bottom: 10px;
}

.voice-name {
  font-size: 1.8rem;
}

.voice-box:nth-child(1) .voice-header {
  background-image: url("images/voice_photo_01.png");
}
.voice-box:nth-child(1) .voice-header h2 {
  background-image: url("svg/voice01.svg");
}

.voice-box:nth-child(2) .voice-header {
  background-image: url("images/voice_photo_02.png");
}
.voice-box:nth-child(2) .voice-header h2 {
  background-image: url("svg/voice02.svg");
}

.voice-box:nth-child(3) .voice-header {
  background-image: url("images/voice_photo_03.png");
}
.voice-box:nth-child(3) .voice-header h2 {
  background-image: url("svg/voice03.svg");
}

.voice-box:nth-child(4) .voice-header {
  background-image: url("images/voice_photo_04.png");
}
.voice-box:nth-child(4) .voice-header h2 {
  background-image: url("svg/voice04.svg");
}

.voice-box:nth-child(5) .voice-header {
  background-image: url("images/voice_photo_05.png");
}
.voice-box:nth-child(5) .voice-header h2 {
  background-image: url("svg/voice05.svg");
}

.voice-box:nth-child(6) .voice-header {
  background-image: url("images/voice_photo_06.png");
}
.voice-box:nth-child(6) .voice-header h2 {
  background-image: url("svg/voice06.svg");
}

.voice-box:nth-child(7) .voice-header {
  background-image: url("images/voice_photo_07.png");
}
.voice-box:nth-child(7) .voice-header h2 {
  background-image: url("svg/voice07.svg");
}

.voice-box:nth-child(8) .voice-header {
  background-image: url("images/voice_photo_08.png");
}
.voice-box:nth-child(8) .voice-header h2 {
  background-image: url("svg/voice08.svg");
}

.voice-box:nth-child(9) .voice-header {
  background-image: url("images/voice_photo_09.png");
}
.voice-box:nth-child(9) .voice-header h2 {
  background-image: url("svg/voice09.svg");
}

.voice-box:nth-child(10) .voice-header {
  background-image: url("images/voice_photo_10.png");
}
.voice-box:nth-child(10) .voice-header h2 {
  background-image: url("svg/voice10.svg");
}

.page-voice .sec-01 .kome {
  font-size: 1.5rem;
  text-align: right;
}

/* =============================================================
	page-specified-commerce
============================================================= */
.specified-commerce__table {
  margin-top: 55px;
}
.specified-commerce__table caption {
  text-align: left;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-size: 2.3rem;
  padding: 15px 0;
  text-indent: 38px;
}
.specified-commerce__table:nth-of-type(1) {
  margin-top: 0;
}
.specified-commerce__table th, .specified-commerce__table td {
  font-size: 1.8rem;
  padding: 35px 0 10px 0;
}
.specified-commerce__table th {
  text-indent: 38px;
  width: 315px;
}
.specified-commerce__table .fsize13 {
  font-size: 1.3rem;
}

.innerTable {
  margin-top: -15px;
  margin-bottom: 1.8em;
}
.innerTable th, .innerTable td {
  padding: 10px 0 5px 0;
}
.innerTable th {
  text-indent: 0;
  width: 132px;
}

/* =============================================================
	page-faq
============================================================= */
.page-faq .faq-list {
  padding-left: 60px;
}
.page-faq .sec-05 {
  background: #fff;
}

.page-link {
  padding: 55px 0;
}
.page-link ul {
  width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.page-link li {
  background: #d88b94;
  border-radius: 5px;
  text-align: center;
  width: 315px;
  padding: 2px;
  margin-bottom: 10px;
}
.page-link a {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d88b94+0,c15064+100 */
  background: #d88b94;
  /* Old browsers */
  background: -moz-linear-gradient(top, #d88b94 0%, #c15064 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #d88b94 0%, #c15064 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #d88b94 0%, #c15064 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d88b94', endColorstr='#c15064',GradientType=0 );
  /* IE6-9 */
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 1.8rem;
  display: block;
  transition: all .2s ease-out;
  line-height: 1.4;
  padding: 15px 0;
}
.page-link a:hover {
  opacity: .6;
}

/* =============================================================
	page-privacy
============================================================= */
.privacy-list > li {
  margin-bottom: 20px;
}
.privacy-list > li ul {
  margin-bottom: 20px;
  padding-left: 20px;
}
.privacy-list > li ol {
  margin-bottom: 20px;
}
.privacy-list > li ol li {
  text-indent: -1.2em;
  padding-left: 1.2em;
}
.privacy-list > li p {
  margin: 10px;
}

/* =============================================================
	page-privacy
============================================================= */
.agency-01, .agency-box-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.agency-box-1 {
  background: #fff;
  width: 310px;
}
.agency-box-1 h2 {
  background: #5e7d5e;
  color: #fff;
  font-size: 2.3rem;
  text-align: center;
  margin-bottom: 30px;
  padding: 15px 0;
}
.agency-box-1 p, .agency-box-1 ul {
  padding: 0 40px;
}
.agency-box-1 .kome {
  font-size: 1.4rem;
  text-indent: 0;
}

.agency-box-2:nth-child(odd) {
  flex-direction: row-reverse;
}
.agency-box-2 .text-area {
  width: 420px;
  padding-top: 50px;
}
.agency-box-2 h2 {
  color: #5d7d5e;
  font-size: 2.6rem;
  margin-bottom: 40px;
}
.agency-box-2 p {
  font-size: 1.8rem;
}

.agency-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
}
.agency-flow li {
  width: 180px;
  position: relative;
}
.agency-flow li:not(:last-child):after {
  background: url("svg/icon_arrow_gray.svg") no-repeat;
  content: "";
  display: block;
  width: 23px;
  height: 44px;
  margin: auto;
  position: absolute;
  top: 75px;
  right: -35px;
}
.agency-flow img {
  display: block;
  margin: 0 auto;
  padding-bottom: 20px;
}
.agency-flow li:nth-child(1) img {
  width: 57px;
  margin-bottom: 25px;
}
.agency-flow li:nth-child(2) img {
  width: 49px;
  margin-bottom: 24px;
}
.agency-flow li:nth-child(3) img {
  width: 46px;
  margin-bottom: 20px;
}
.agency-flow li:nth-child(4) .step {
  color: #c14f63;
}
.agency-flow li:nth-child(4) img {
  width: 50px;
  margin-bottom: 22px;
}
.agency-flow .step {
  color: #5e7d5e;
  font-size: 2rem;
  text-align: center;
  line-height: 1;
  margin-bottom: 20px;
}
.agency-flow .step span {
  font-size: 3.7rem;
}
.agency-flow h3 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 20px;
}

.agency-voice {
  border-bottom: 1px solid #b3b3b3;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50px;
  padding: 0 40px 50px 10px;
}

.agency-voice-text {
  width: 560px;
}
.agency-voice-text h3 {
  color: #5e7d5e;
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.agency-voice-text span {
  color: #1a1a1a;
  font-size: 1.6rem;
  margin-left: 20px;
}
.agency-voice-text p {
  font-size: 1.8rem;
}

.agency-voice-img img {
  box-shadow: #e5e5e5 0 0 10px;
  padding: 5px;
}

.page-agency-recruitment .contact-area {
  background: url("images/contact_area_agency_bg@2x.png") left top/cover;
}

.agency-recruitment-dd h3 {
  color: #5e7d5e;
  font-size: 1.4rem;
  font-weight: 700;
}
.agency-recruitment-dd table {
  width: 320px;
  margin-bottom: 10px;
}
.agency-recruitment-dd th, .agency-recruitment-dd td {
  border: 1px solid #b3b3b3;
  font-size: 1.4rem;
  text-align: center;
  width: 50%;
  padding: 10px;
}
.agency-recruitment-dd th {
  background: #edf2e3;
  font-weight: 700;
}
.agency-recruitment-dd p {
  font-size: 1.4rem;
  margin-bottom: 0;
}

/* =============================================================
	mask
============================================================= */
.page-mask {
  padding-top: 86px;
}
.page-mask .sec-inner {
  padding: 70px 0 80px;
}
.page-mask .main-visual {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,fff+0,fff+60,36b5e4+60,2b9fd5+100 */
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #fff 0%, #fff 0%, #fff 60%, #fff 60%, #fff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #fff 0%, #fff 0%, #fff 60%, #fff 60%, #fff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #fff 0%, #fff 0%, #fff 60%, #fff 60%, #fff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2b9fd5',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}
.page-mask .main-visual .sec-inner {
  padding: 45px 0;
}
.page-mask .main-visual img {
  max-width: 1030px;
  margin-right: -70px;
}
.page-mask footer {
  background: #313131;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  padding: 30px 0;
}
.page-mask #pagetop {
  background: #364e8e;
  border-radius: 3px;
}
.page-mask #pagetop:hover {
  background: #4e69b2;
}

.mask-header {
  background: #fff;
  box-shadow: 0px 0px 6px 3px #d8d8d8;
  width: 100%;
  padding: 15px 0;
  position: fixed;
  top: 0;
  z-index: 10;
}
.mask-header-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.mask-header-btn {
  background: #ef5a66;
  border-radius: 18.5px;
  color: #fff !important;
  display: block;
  font-weight: 700;
  line-height: 37px;
  text-align: center;
}
.mask-header-btn:hover {
  background: #f47781;
}
.mask-header-btn:active {
  transform: translateY(2px);
}
.mask-header-btn-wrapper {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,e33637+50,e33637+100&0+0,0+49,0+50,1+50,1+100 */
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#e33637',GradientType=0 );
  /* IE6-9 */
  border-radius: 20px;
  width: 185px;
  height: 40px;
  overflow: hidden;
  margin: auto 0;
}

.maskSec-01 {
  background: #f5f6fa;
}
.maskSec-01-title {
  background: #364e8e;
  color: #fff;
  font-size: 2rem;
  line-height: 50px;
  text-align: center;
  position: relative;
}
.maskSec-01-title::after {
  border-style: solid;
  border-width: 13px 16px 0 16px;
  border-color: #364e8e transparent transparent transparent;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
}
.maskSec-01-inner {
  background: #fff;
  padding: 50px 80px;
}
.maskSec-01-inner .buy-button {
  background: #ef5a66;
  border-radius: 40px;
  color: #fff;
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  padding: 15px;
  position: relative;
}
.maskSec-01-inner .buy-button:hover {
  background: #f47781;
}
.maskSec-01-inner .buy-button:active {
  transform: translateY(3px);
}
.maskSec-01-inner .buy-button::after {
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  content: "";
  display: block;
  transform: rotate(45deg);
  width: 15px;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 40px;
  bottom: 0;
}
.maskSec-01-inner .buy-button-wrapper {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,e33637+50,e33637+100&0+0,0+49,0+50,1+50,1+100 */
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#e33637',GradientType=0 );
  /* IE6-9 */
  border-radius: 40px;
  margin-top: 25px;
  padding-bottom: 5px;
}
.maskSec-02 {
  background: url("images/mask_img_03.png") no-repeat top center;
}
.maskSec-02 .sec-inner {
  padding: 50px 0 30px;
}
.maskSec-02-title {
  color: #0f71ad;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}
.maskSec-02-title-sub {
  background: #1872a8;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 30px;
  text-align: center;
  width: 190px;
  margin: 0 auto 15px;
}
.maskSec-02-text {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.maskSec-03 {
  background: #1371a7;
  text-align: center;
  position: relative;
}
.maskSec-03-title {
  margin-bottom: 30px;
}
.maskSec-03::after {
  border-style: solid;
  border-width: 35px 77px 0 77px;
  border-color: #1371a7 transparent transparent transparent;
  content: "";
  display: block;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -35px;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1;
}
.maskSec-04 {
  background: #eff7fd;
  position: relative;
}
.maskSec-04-title {
  color: #1470a7;
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}
.maskSec-04-title span {
  font-size: 3rem;
  font-weight: 700;
}
.maskSec-04-title-02 {
  color: #333;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 25px;
}
.maskSec-04-img {
  float: left;
  margin-right: 80px;
}
.maskSec-04-text {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 30px;
}
.maskSec-04::after {
  border-style: solid;
  border-width: 35px 77px 0 77px;
  border-color: #eff7fd transparent transparent transparent;
  content: "";
  display: block;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -35px;
  left: 0;
  width: 0;
  height: 0;
}
.maskSec-05 {
  background: url("images/mask_img_07.png") no-repeat center/cover;
  text-align: center;
}
.maskSec-05 .sec-inner {
  padding-bottom: 0;
}
.maskSec-05-title {
  font-size: 3rem;
  font-weight: 700;
  display: inline-block;
  letter-spacing: 2px;
  position: relative;
}
.maskSec-05-title::after {
  background: #cee1ec;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
}
.maskSec-05-title span {
  color: #1470a7;
  font-size: 3.5rem;
  font-weight: 700;
}
.maskSec-06 {
  background: #1470a7;
}
.maskSec-06-title {
  color: #fff;
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 35px;
}
.maskSec-06-img {
  display: block;
  margin-bottom: 25px;
}
.maskSec-06-text {
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
}
.maskSec-07-title {
  background: url("images/mask_img_10.png") no-repeat center;
  color: #1470a7;
  font-size: 3rem;
  font-weight: 700;
  line-height: 81px;
  text-align: center;
  margin-bottom: 30px;
}
.maskSec-07-title span {
  font-size: 3.5rem;
  font-weight: 700;
}
.maskSec-07-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.maskSec-07-img {
  width: 455px;
}
.maskSec-07-img img {
  display: block;
  margin-bottom: 15px;
}
.maskSec-07-img-04 {
  margin: 50px auto 0 !important;
}
.maskSec-07-img p {
  font-size: 1.2rem;
  margin-bottom: 25px;
}
.maskSec-07-img a {
  font-weight: 700;
  text-decoration: underline;
}
.maskSec-08 {
  background: #f6fbfe url("images/mask_img_12.png") no-repeat right bottom;
}
.maskSec-08-title {
  color: #1470a7;
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 55px;
}
.maskSec-08-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.maskSec-08-dl {
  background: #fff;
  border: 3px solid #448db9;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 400px;
  padding: 20px 30px;
}
.maskSec-08-dl dt, .maskSec-08-dl dd {
  color: #1470a7;
  font-size: 1.5rem;
  font-weight: 700;
}
.maskSec-08-dl dt {
  width: 75px;
  text-align: center;
}
.maskSec-08-dl dd {
  width: 255px;
}
.maskSec-08-text {
  background: #fff;
  box-shadow: 0px 0px 6px 3px #ebf5fe;
  border-radius: 50%;
  color: #1470a7;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  margin: 0 !important;
  padding: 22px 0;
  width: 105px;
  height: 106px;
  position: absolute;
  top: -130px;
  right: 20px;
}
.maskSec-09 {
  background: #e5f8e5;
}
.maskSec-09-title {
  background: #00ba01;
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  position: relative;
}
.maskSec-09-title-inner {
  width: 960px;
  text-indent: 20px;
  margin: auto;
  padding: 26px 0 26px 20px;
}
.maskSec-09-title-inner::before {
  background: url("images/mask_img_14.png") no-repeat;
  content: "";
  display: block;
  width: 59px;
  height: 116px;
  position: absolute;
  top: -20px;
}
.maskSec-09-title span {
  font-size: 4rem;
}
.maskSec-10-title {
  color: #1470a7;
  font-size: 3.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.maskSec-10 a {
  display: block;
}

/* =============================================================
	araemon
============================================================= */
.page-araemon {
  padding-top: 86px;
}
.page-araemon .sec-inner {
  padding: 70px 0 80px;
}
.page-araemon .main-visual {
  background: url("images/araemon_main_visual_bg.png") no-repeat center/cover;
}
.page-araemon .main-visual .sec-inner {
  padding: 35px 0;
}
.page-araemon .main-visual img {
  max-width: 1030px;
  margin-right: -70px;
}
.page-araemon footer {
  background: #313131;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  padding: 30px 0;
}
.page-araemon #pagetop {
  background: #364e8e;
  border-radius: 3px;
}
.page-araemon #pagetop:hover {
  background: #4e69b2;
}

.araemon-header {
  background: #fff;
  width: 100%;
  padding: 15px 0;
  position: fixed;
  top: 0;
  z-index: 15;
}
.araemon-header-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.araemon-header-btn {
  background: #ef5a66;
  border-radius: 18.5px;
  color: #fff !important;
  display: block;
  font-weight: 700;
  line-height: 37px;
  text-align: center;
}
.araemon-header-btn:hover {
  background: #f47781;
}
.araemon-header-btn:active {
  transform: translateY(2px);
}
.araemon-header-btn-wrapper {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,e33637+50,e33637+100&0+0,0+49,0+50,1+50,1+100 */
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 0%, rgba(223, 55, 57, 0) 49%, #e33637 50%, #e33637 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#e33637',GradientType=0 );
  /* IE6-9 */
  border-radius: 20px;
  width: 185px;
  height: 40px;
  overflow: hidden;
  margin: auto 0;
}

.araemonSec-01 {
  background: #f5f6fa;
}
.araemonSec-01-title {
  background: #0055d5;
  color: #fff;
  font-size: 2rem;
  line-height: 50px;
  text-align: center;
  position: relative;
}
.araemonSec-01-title::after {
  border-style: solid;
  border-width: 13px 16px 0 16px;
  border-color: #0055d5 transparent transparent transparent;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
}
.araemonSec-01-inner {
  background: #fff;
  padding: 40px 80px 50px;
  text-align: center;
}
.araemonSec-01-inner .buy-button {
  background: #e32e50;
  border-radius: 40px;
  color: #fff;
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  padding: 15px;
  position: relative;
}
.araemonSec-01-inner .buy-button:hover {
  background: #f47781;
}
.araemonSec-01-inner .buy-button:active {
  transform: translateY(3px);
}
.araemonSec-01-inner .buy-button::after {
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  content: "";
  display: block;
  transform: rotate(45deg);
  width: 15px;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 40px;
  bottom: 0;
}
.araemonSec-01-inner .buy-button-wrapper {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d81b2b+0,d81b2b+50,d81b2b+51,d81b2b+100&0+0,0+49,1+50,1+51,1+100 */
  background: -moz-linear-gradient(top, rgba(216, 27, 43, 0) 0%, rgba(216, 27, 43, 0) 49%, #d81b2b 50%, #d81b2b 51%, #d81b2b 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(216, 27, 43, 0) 0%, rgba(216, 27, 43, 0) 49%, #d81b2b 50%, #d81b2b 51%, #d81b2b 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(216, 27, 43, 0) 0%, rgba(216, 27, 43, 0) 49%, #d81b2b 50%, #d81b2b 51%, #d81b2b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d81b2b', endColorstr='#d81b2b',GradientType=0 );
  /* IE6-9 */
  border-radius: 40px;
  margin-top: 35px;
  padding-bottom: 5px;
}
.araemonSec-02 {
  background: url("images/araemon_img_03.png") no-repeat bottom center/cover;
}
.araemonSec-02 .sec-inner {
  padding: 50px 0 30px;
}
.araemonSec-02-title {
  color: #0053b1;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}
.araemonSec-02-text {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.araemonSec-02-img {
  text-align: center;
}
.araemonSec-03 {
  background: url("images/araemon_img_07.png") no-repeat top center/cover;
  text-align: center;
  position: relative;
}
.araemonSec-03-title {
  margin-bottom: 30px;
}
.araemonSec-04 {
  background: #eff7fd;
  position: relative;
}
.araemonSec-04::after {
  border-style: solid;
  border-width: 35px 77px 0 77px;
  border-color: #eff7fd transparent transparent transparent;
  content: "";
  display: block;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -35px;
  left: 0;
  width: 0;
  height: 0;
}
.araemonSec-04-title {
  color: #0053b1;
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}
.araemonSec-04-title::before {
  background: url("images/title_bg.png") no-repeat;
  content: "";
  display: block;
  width: 120px;
  height: 120px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 200px;
}
.araemonSec-04-title span {
  font-weight: bold;
  position: relative;
  z-index: 10;
}
.araemonSec-04-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.araemonSec-04-box {
  background: #fff;
  width: 220px;
}
.araemonSec-04-box-title {
  background: #0055d5;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 10px 0;
}
.araemonSec-04-box:nth-of-type(3) .araemonSec-04-box-title, .araemonSec-04-box:nth-of-type(4) .araemonSec-04-box-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
}
.araemonSec-04-box-img {
  display: block;
  margin: 10px 0 20px;
}
.araemonSec-04-box-text {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 20px;
}
.araemonSec-04-text {
  font-size: 1.5rem;
  text-align: center;
}
.araemonSec-05 {
  background: url("images/araemon_img_12.png") no-repeat center/cover;
}
.araemonSec-05-title {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0px 0px 10px #000;
  margin-bottom: 40px;
  position: relative;
}
.araemonSec-05-title::after {
  background: #fff;
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
}
.araemonSec-05-title span {
  font-size: 3.5rem;
  font-weight: 700;
}
.araemonSec-05-title-02 {
  color: #0053b1;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.araemonSec-05-title-02 span {
  font-size: 3.2rem;
  font-weight: 700;
}
.araemonSec-05-inner {
  background: rgba(255, 255, 255, 0.73);
  border-radius: 10px;
  box-shadow: 0px 0px 6px 3px #fff;
  width: 800px;
  margin: auto;
  padding: 30px 50px 40px;
}
.araemonSec-05-text {
  font-weight: 700;
}
.araemonSec-05-text:last-child {
  margin-bottom: 0 !important;
}
.araemonSec-06 {
  background: #cae3ff;
}
.araemonSec-06-title {
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 35px;
}
.araemonSec-06-title span {
  color: #0053b1;
  font-weight: 700;
}
.araemonSec-06-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  margin-bottom: 45px !important;
}
.araemonSec-06-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -25px;
}
.araemonSec-06-box {
  margin: 25px 0;
}
.araemonSec-06-list {
  background: #fff;
  padding: 20px;
}
.araemonSec-06-list li {
  background: url("svg/icon_check_02.svg") no-repeat left center/11px 10px;
  font-size: 1.3rem;
  font-weight: 700;
  padding-left: 20px;
}
.araemonSec-07 {
  background: url("images/araemon_img_21.png") no-repeat top center/100%;
}
.araemonSec-07-title {
  color: #1470a7;
  font-size: 3rem;
  font-weight: 700;
  line-height: 81px;
  text-align: center;
  margin-bottom: 20px;
}
.araemonSec-07-text {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
  text-align: center;
}
.araemonSec-07-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 800px;
  margin: -7.5px auto 25px;
}
.araemonSec-07-img li {
  margin: 7.5px 0;
}
.araemonSec-07-dl {
  background: rgba(239, 247, 253, 0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 800px;
  margin: -10px auto 0;
  padding: 20px 40px;
}
.araemonSec-07-dl dt, .araemonSec-07-dl dd {
  font-weight: 700;
  margin: 10px 0;
}
.araemonSec-07-dl dt {
  font-size: 1.8rem;
  width: 180px;
}
.araemonSec-07-dl dd {
  font-size: 1.3rem;
  width: 540px;
}
.araemonSec-08 .sec-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.araemonSec-08-inner {
  width: 590px;
}
.araemonSec-08-title {
  margin-bottom: 30px;
  position: relative;
}
.araemonSec-08-title::before {
  background: url("images/title_bg_02.png") no-repeat;
  content: "";
  display: block;
  width: 120px;
  height: 120px;
  position: absolute;
  top: -35px;
  left: -25px;
}
.araemonSec-08-title span {
  color: #0053b1;
  font-size: 3rem;
  font-weight: 700;
  line-height: 2;
  position: relative;
  z-index: 5;
}
.araemonSec-08-text {
  font-size: 1.8rem;
  font-weight: 700;
}
.araemonSec-08-img {
  width: 460px;
  margin-right: -125px;
}
.araemonSec-09 {
  background: #eff7fd;
}
.araemonSec-09 .araemonSec-04-title::before {
  left: 260px;
}
.araemonSec-09-text {
  font-size: 1.8rem;
  font-weight: 700;
  width: 800px;
  margin: 0 auto 20px;
}
.araemonSec-09-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.araemonSec-09-box {
  width: 300px;
}
.araemonSec-09-box-img {
  display: block;
}
.araemonSec-09-box-title {
  color: #0053b1;
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  margin: 20px 0;
}
.araemonSec-10-title {
  color: #0053b1;
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}
.araemonSec-10 .sec-inner {
  background: url("images/araemon_img_32.png") no-repeat top 45px right 0;
}
.araemonSec-10-box {
  width: 800px;
  margin: auto;
}
.araemonSec-10-box:not(:last-child) {
  margin-bottom: 80px;
}
.araemonSec-10-box-title {
  color: #0053b1;
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 35px;
}
.araemonSec-10-box-title span {
  background: #eff7fd;
  border-right: 9px solid #83b5ff;
  color: #333;
  display: inline-block;
  font-weight: 700;
  margin-right: 20px;
  padding: 10px 20px 10px 0px;
  position: relative;
}
.araemonSec-10-box-title span::before {
  background: #eff7fd;
  content: "";
  display: block;
  width: calc( ( 100vw - 800px ) / 2 );
  height: 100%;
  position: absolute;
  top: 0;
  right: 100%;
}
.araemonSec-10-box-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.araemonSec-10-box-list {
  width: 440px;
}
.araemonSec-10-box-list li {
  background: url("images/icon_drop.png") no-repeat left center;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 35px;
}
.araemonSec-10-box-img {
  display: block;
  max-width: 885px;
  margin-left: -42.5px;
}
.araemonSec-10-box-img-02 {
  display: block;
  max-width: 960px;
  margin-left: -80px;
}
.araemonSec-11 {
  background: #e5f8e5;
}
.araemonSec-11-title {
  background: #00ba01;
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  position: relative;
}
.araemonSec-11-title-inner {
  width: 960px;
  text-indent: 20px;
  margin: auto;
  padding: 26px 0 26px 20px;
}
.araemonSec-11-title-inner::before {
  background: url("images/mask_img_14.png") no-repeat;
  content: "";
  display: block;
  width: 59px;
  height: 116px;
  position: absolute;
  top: -20px;
}
.araemonSec-11-title span {
  font-size: 4rem;
}
.araemonSec-12-title {
  color: #1470a7;
  font-size: 3.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.araemonSec-12 a {
  display: block;
}

/* =============================================================
	404
============================================================= */
.page404-title {
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 30px;
}

.page404 {
  text-align: center;
  line-height: 1.6;
  padding: 60px 0;
}

.page404-title {
  font-size: 30px;
}

/*pc_post*/
/* =============================================================
    post
============================================================= */
.post-wrapper {
  margin-top: 60px;
  margin-bottom: 100px;
}
.post-wrapper .content {
  float: left;
  width: 630px;
}
.post-wrapper .sidebar {
  float: right;
  width: 300px;
}
.post-wrapper .side-bnr {
  margin-bottom: 30px;
}
.post-wrapper .side-title {
  border-top: 1px solid #bdc3c4;
  border-bottom: 1px solid #bdc3c4;
  font-size: 2rem;
  margin-bottom: 10px;
  padding: 10px 0 10px 20px;
}
.post-wrapper .side-menu li {
  border-left: 3px solid #5e7d5e;
  box-shadow: 1px 1px 2px 0px #cacaca;
  margin-bottom: 5px;
}
.post-wrapper .side-menu li.stay a {
  background: #edf2e3;
}
.post-wrapper .side-menu a {
  background: #fff url("svg/icon_arrow_green.svg") no-repeat right 20px top 50%/5px 9px;
  display: block;
  font-size: 1.3rem;
  padding: 10px 10px 10px 20px;
}

.post-list-1 .post-list-box {
  margin-bottom: 35px;
}
.post-list-1 .post-list-date {
  margin-bottom: 10px;
}
.post-list-1 .post-list-title {
  margin-bottom: 20px;
  position: relative;
}
.post-list-1 .post-list-title a {
  display: block;
  font-size: 1.8rem;
  padding-left: 15px;
  line-height: 20px;
}
.post-list-1 .post-list-title::before, .post-list-1 .post-list-title::after {
  content: "";
  display: block;
  width: 2px;
  height: 10px;
  position: absolute;
  left: 0;
}
.post-list-1 .post-list-title::before {
  background: #5e7d5e;
  top: 0;
}
.post-list-1 .post-list-title::after {
  background: #006124;
  bottom: 0;
}
.post-list-1 .cat-name {
  background: #edf2e3;
  color: #5e7d5e;
  font-size: 1rem;
  margin-left: 10px;
  padding: 2px 5px;
}
.post-list-1 .post-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.post-list-1 .post-text {
  width: 315px;
}
.post-list-1 .post-text p {
  margin-bottom: 20px;
}
.post-list-1 .post-text a {
  background: url("svg/icon_arrow_green.svg") no-repeat right 50px top 50%/5px 9px;
  border: 1px solid #70ab4e;
  border-radius: 17px;
  color: #70ab4e;
  float: right;
  font-size: 1.2rem;
  padding: 6px 65px;
}

.post-list-2 .post-list-box {
  border-bottom: 1px dotted #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.post-list-2 .post-list-date {
  font-size: 1.4rem;
  padding: 10px 0;
  width: 205px;
}
.post-list-2 .cat-icon {
  border-radius: 10px;
  color: #fff;
  font-size: 1.2rem;
  display: inline-block;
  float: right;
  text-align: center;
  width: 80px;
  margin-left: 10px;
  margin: 2px 0;
  padding: 0 10px;
}
.post-list-2 .cat-icon.blog {
  background: #690;
}
.post-list-2 .cat-icon.news {
  background: #ff9d01;
}
.post-list-2 .cat-icon:hover {
  opacity: .6;
}
.post-list-2 .post-list-title {
  width: calc(100% - 225px);
}
.post-list-2 .post-list-title a {
  display: block;
  line-height: 1.6;
  padding: 10px 0;
}

.to-post-list {
  text-align: center;
}

.eyecatch {
  margin-bottom: 25px;
}

.post-article > a {
  background: #edf2e3;
  color: #5e7d5e;
  font-size: 1.4rem;
  margin-left: 10px;
  padding: 2px 5px;
}
.post-article h3:not(.posts-index-title) {
  border-bottom: 1px solid #dcdddd;
  font-size: 2.2rem;
  margin-bottom: 20px;
  padding-bottom: 15px;
  position: relative;
}
.post-article h3:not(.posts-index-title)::after {
  background: #5e7d5e;
  content: "";
  display: block;
  width: 90px;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
}
.post-article h4 {
  border-bottom: 1px solid #007b82;
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 0 10px 5px;
}
.post-article h5 {
  border-left: 3px solid #99cacd;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 20px;
  padding-left: 10px;
}
.post-article h6 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.post-article h6::before {
  content: "< ";
}
.post-article h6::after {
  content: " >";
}
.post-article ul {
  margin-bottom: 1.8em;
}
.post-article ul li {
  list-style: disc inside;
  margin-bottom: 5px;
}
.post-article ol {
  margin-bottom: 1.8em;
}
.post-article ol li {
  list-style: decimal inside;
  margin-bottom: 5px;
}
.post-article blockquote {
  background: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 30px 40px;
  position: relative;
}
.post-article blockquote::before {
  background: url("svg/icon_quote.svg") no-repeat;
  content: "";
  width: 20px;
  height: 15px;
  transform: scale(-1, 1);
  position: absolute;
  top: 10px;
  left: 10px;
}
.post-article blockquote::after {
  background: url("svg/icon_quote.svg") no-repeat;
  content: "";
  width: 20px;
  height: 15px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.post-article blockquote p {
  margin-bottom: 0 !important;
}

.single-time {
  font-size: 2.3rem;
}

.single-title {
  font-size: 2.7rem;
  margin-bottom: 30px;
}

.posts-index-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 25px;
}

.beginning-text {
  margin-bottom: 20px;
}

.posts-index {
  background: #edf2e3;
  border-radius: 5px;
  margin-bottom: 40px;
  margin-top: 50px;
  padding: 30px 50px;
}
.posts-index li {
  list-style: none;
  margin-bottom: 10px;
  padding-left: 1.5em;
  position: relative;
}
.posts-index li::before {
  content: "●";
  color: #5e7d5e;
  display: block;
  font-size: 0.6em;
  height: 9px;
  line-height: 9px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.posts-index li:last-child {
  margin-bottom: 0;
}
.posts-index a {
  color: #5e7d5e;
  display: block;
}

/* for archive */
.archive .blog-list {
  margin: 0 -15px;
}

.archive .blog-list-box {
  margin: 0 15px 40px;
}

/* prev next
--------------------------------- */
.pn-prev {
  padding: 15px 15px 15px 75px;
}

.pn-next {
  padding: 15px 75px 15px 15px;
}

.single a.pn-prev::before,
.single a.pn-next::before {
  background: #007b82;
  content: "";
  height: 75%;
  width: 1px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

.single a.pn-prev::before {
  left: 62px;
}

.single a.pn-next::before {
  right: 62px;
}

.pn-label {
  margin: auto;
  position: absolute;
  bottom: 0;
  top: 0;
}

a.pn-prev:hover,
a.pn-next:hover {
  color: #333;
  background: rgba(0, 123, 130, 0.2);
}

.pn-prev .pn-label {
  left: 10px;
}

.pn-next .pn-label {
  right: 10px;
}

.btn-wrap {
  margin-bottom: 50px;
}

/* sns
--------------------------------- */
.share ul {
  justify-content: flex-end;
}
.share li {
  width: 20%;
}
.share .facebook a:hover {
  background-color: #506fb5;
}
.share .tweet a:hover {
  background-color: #89ccff;
}
.share .line a:hover {
  background-color: #32e732;
}

/* Pagination
--------------------------------- */
.pagination {
  clear: both;
  padding: 30px 0 10px;
  position: relative;
  font-size: 1.4rem;
  text-align: center;
}

.pagination span, .pagination a {
  border-color: #007b82;
  border-radius: 3px;
  color: #333;
  display: inline-block;
  text-decoration: none;
  margin: 0 4px;
  padding: 8px 18px;
  width: auto;
}

.single-bnr {
  margin-bottom: 50px;
}

.relation-posts-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.relation-posts-inner article {
  width: 190px;
  margin-bottom: 30px;
}
.relation-posts-inner .post-list-date {
  font-size: 1.3rem;
  margin-bottom: 5px;
}
.relation-posts-inner .cat-name {
  background: #edf2e3;
  color: #5e7d5e;
  font-size: 1rem;
  margin-left: 5px;
  padding: 2px 5px;
}
.relation-posts-inner .post-list-title {
  font-size: 1.5rem;
}

/*pc_effect*/
/* =============================================================
    effect
============================================================= */
a, a img {
  transition: all .2s ease-out;
}

.scale {
  overflow: hidden;
}
.scale img {
  transition: transform .4s ease-out;
}

a:hover img {
  opacity: .6;
}

/* button */
/* mainnav */
.mainnav a:hover::after,
.mainnav a.stay::after {
  height: 4px;
}

a.btn-1:hover,
.header-btn:hover,
.contact-area-btn:hover {
  background-color: #0e9ea6;
}

.link-btn:hover {
  color: #595959;
  background-color: rgba(89, 89, 89, 0.2);
}

.dropdown:hover .dropmenu-inner {
  opacity: 1;
  visibility: visible;
  height: 232px;
}

.dropdown-menu li:hover img,
.scale:hover img {
  transform: scale(1.1);
}

.category a.pn-prev:hover,
.category a.pn-next:hover {
  color: #fff;
  background: #ee807f;
}

.link-btn-2:hover,
.reserved-link:hover a {
  background-color: #fe908f !important;
}

.btn-effect {
  display: block;
  overflow: hidden;
  position: relative;
}
.btn-effect::before {
  animation: btn-effect2 2s ease-out 0s infinite normal;
  box-shadow: 0px 0px 5px 0px #ffffff inset;
  border-radius: 50px;
  content: "";
  display: block;
  width: 99%;
  height: 96%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.btn-effect::after {
  animation: btn-effect1 2s ease-out 0s infinite normal;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.4+60,0+100 */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
  /* IE6-9 */
  content: "";
  display: block;
  width: 250px;
  height: 100%;
  transform: skew(-35deg);
  position: absolute;
  top: 0;
  left: -260px;
}
.btn-effect:hover img {
  opacity: 1 !important;
}

@keyframes btn-effect1 {
  0% {
    left: -260px;
  }
  40% {
    left: 650px;
  }
  100% {
    left: 650px;
  }
}
@keyframes btn-effect2 {
  0% {
    box-shadow: 0px 0px 15px 5px #ffffff inset;
  }
  40% {
    box-shadow: 0px 0px 5px 0px #ffffff inset;
  }
  100% {
    box-shadow: 0px 0px 5px 0px #ffffff inset;
  }
}