@charset "UTF-8";

/* ---------------------------------------------------------------------------
//  top
--------------------------------------------------------------------------- */
.guide-bnr {
  width: 680px;
  border-radius: 15px;
  overflow: hidden;
  margin: 50px auto 0;
}
.guide-bnr .text {
  background: #EBEDEE;
  padding: 25px;
}
.guide-bnr .title {
  border-left: 7px solid #EC6604;
  padding-left: 10px;
}
.guide-bnr .title h2 {
  font-size: 32px;
  color: #EC6604;
}
.guide-bnr .title p {
  font-size: 14px;
  color: #7D7D7D;
}
.guide-bnr .icon {
  width: 80px;
  margin: 20px auto 0;
  text-align: center;
}

.top_head,
.top_menu,
.top_tool,
.top_apply{ margin-bottom: 70px; }

.top_menu h2 {
  font-size: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.top_menu h2::before,
.top_menu h2:after {
  content: "";
  flex: 1;
  height: 6px;
  display: block;
}
.top_menu h2::before { margin-right: .5em; }
.top_menu h2::after { margin-left: .5em; }

.top_menu.top_how_to h2 { color: #EC6604; }
.top_menu.top_how_to h2::before, .top_menu.top_how_to h2:after { border-top: 6px dotted #EC6604; }
.top_menu.top_about h2 { color: #0058A2; }
.top_menu.top_about h2::before, .top_menu.top_about h2:after { border-top: 6px dotted #0058A2; }

.top_menu a {
  border-radius: 15px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 40px;
}
.top_menu.top_how_to a {
  padding: 20px 10px 0;
  background: #FFEB27;
  color: #EC6604;
}
.top_menu.top_how_to a > div {
  width: 170px;
  margin: 10px auto 0;
}
.top_menu.top_how_to a:nth-child(1) > div,
.top_menu.top_how_to a:nth-child(4) > div {
  margin: 20px auto 0;
}

.top_menu.top_how_to .faq {
  width: 100%;
  padding: 15px;
}
.top_menu.top_how_to .faq > p {
  display: inline-block;
}
.top_menu.top_how_to .faq > div {
  display: inline-block;
  width: 92px;
  height: 53px;
  margin: 0 0 0 10px;
  vertical-align: middle;
}
.top_menu.top_about a {
  padding: 20px 10px 10px;
  background: #91C5EB;
  color: #0058A2;
}
.top_menu.top_about a > div {
  width: 105px;
  margin: 10px auto 0;
}
.top_menu.top_about a:nth-child(2) > div,
.top_menu.top_about a:nth-child(3) > div,
.top_menu.top_about a:nth-child(4) > div {
  margin: 20px auto 0;
}
.top_menu.top_about .management {
  width: 48.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 50px;
}
.top_menu.top_about .management > div {
  margin: 0;
}

.top_tool .frame {
  border: 5px solid #EA6068;
  border-radius: 15px;
  padding: 30px 50px;
}
.top_tool h2 {
  font-size: 32px;
  text-align: center;
  color: #EA6068;
  margin-bottom: 30px;
}
.top_tool a.flex {
  align-items: flex-start
}
.top_tool a .book {
  width: 115px;
}
.top_tool a p {
  border-left: 5px solid #EA6068;
  margin-left: 15px;
  padding-left: 5px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.top_apply .frame {
  border: 5px solid #054492;
  padding: 30px 50px;
  text-align: center;
}
.top_apply .frame p{
  font-size: 20px;
}
.top_apply .frame p span{
  font-weight: 700;
  color: #054492;
}
.top_apply .frame a{
  padding: 10px 20px;
  background: #EC6604;
  color: #fff;
  font-weight: 700;
  margin-top: 20px;
  display: inline-block;
  border-radius: 5px;
}

.page-top aside .flex {
  justify-content: center;
}
.page-top aside .contact {
  border: 3px solid #E3E3E3;
  padding: 15px 30px;
}
.page-top aside h3 {
  font-size: 16px;
  margin-bottom: 10px;
}
.page-top aside .tel {
  font-size: 18px;
  font-weight: 700;
  color: #378439;
  margin-bottom: 5px;
}
.page-top aside .tel .num {
  margin-left: .5em;
}
.page-top aside .tel .num::before {
  content: "";
  display: inline-block;
  background: url(../images/icon-freedial.png) center center / contain no-repeat;
  width: 24px;
  height: 15px;
  margin-right: .2em;
}
.page-top aside dl {
  font-size: 14px;
}
.page-top aside dl dt {
  display: inline-block;
  background: #E3E3E3;
  text-align: center;
  width: 100px;
  margin-right: 5px;
}
.page-top aside dl dd {
  display: inline-block;
}
.page-top aside .bnr {
  width: 31%;
  /*margin-left: 40px;*/
  border-radius: 5px;
  overflow: hidden;
}
.page-top .flex.around{
  justify-content: space-around;
}

/* ---------------------------------------------------------------------------
//  sec-common
--------------------------------------------------------------------------- */
.pankz { display: flex; justify-content: flex-start; margin-bottom: 40px; }
.pankz li { font-size: 14px; position: relative; }
.pankz li::after {
  content: "❯";
  color: #c8c9ca;
  display: inline-block;
  margin: 0 .5em;
}
.pankz li:last-child::after { content: none; }

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

#side {
  width: 250px;
}
#side ul {
  border: 1px solid #B4B4B5;
  border-radius: 10px;
  padding: 0 15px;
}
#side ul {
  border: 1px solid #B4B4B5;
  border-radius: 10px;
  padding: 0 15px;
}
#side ul li {
  height: 80px;
  border-bottom: 2px dotted #B4B4B5;
}
#side ul li:last-child {
  border-bottom: none;
}
#side ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #717071;
  line-height: 1.4;
  position: relative;
}
#side ul li a::after {
  content: "";
  display: block;
  background: url(../images/icon-play.png) center center / contain no-repeat;
  width: 16px;
  height: 16px;
}
.cat-how_to #side ul li:first-child a { font-size: 18px; }
.page-how_to #side ul li:nth-child(1) a,
.page-timing #side ul li:nth-child(2) a,
.page-handling.cat-how_to #side ul li:nth-child(3) a,
.page-medication #side ul li:nth-child(4) a,
.page-carry #side ul li:nth-child(5) a,
.page-side-effect #side ul li:nth-child(6) a,
.page-attention #side ul li:nth-child(7) a,
.page-storage #side ul li:nth-child(8) a,
.page-faq #side ul li:nth-child(9) a,
.page-movie #side ul li:nth-child(10) a {
  color: #EC6604;
}
.page-how_to #side ul li:nth-child(1) a::after,
.page-timing #side ul li:nth-child(2) a::after,
.page-handling.cat-how_to #side ul li:nth-child(3) a::after,
.page-medication #side ul li:nth-child(4) a::after,
.page-carry #side ul li:nth-child(5) a::after,
.page-side-effect #side ul li:nth-child(6) a::after,
.page-attention #side ul li:nth-child(7) a::after,
.page-storage #side ul li:nth-child(8) a::after,
.page-faq #side ul li:nth-child(9) a::after,
.page-movie #side ul li:nth-child(10) a::after {
  background: url(../../how_to/images/icon-play.png) center center / contain no-repeat;
}
.page-how_to #side ul li:nth-child(1) a::before,
.page-timing #side ul li:nth-child(2) a::before,
.page-handling.cat-how_to #side ul li:nth-child(3) a::before,
.page-medication #side ul li:nth-child(4) a::before,
.page-carry #side ul li:nth-child(5) a::before,
.page-side-effect #side ul li:nth-child(6) a::before,
.page-attention #side ul li:nth-child(7) a::before,
.page-storage #side ul li:nth-child(8) a::before,
.page-faq #side ul li:nth-child(9) a::before,
.page-movie #side ul li:nth-child(10) a::before {
  content: "";
  display: block;
  background: #FFEB27;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.page-about #side ul li:nth-child(1) a,
.page-cause #side ul li:nth-child(2) a,
.page-type #side ul li:nth-child(3) a,
.page-treatment #side ul li:nth-child(4) a,
.page-handling.cat-about #side ul li:nth-child(5) a,
.page-living #side ul li:nth-child(6) a,
.page-management-sheet #side ul li:nth-child(7) a {
  color: #0058A2;
}
.page-about #side ul li:nth-child(1) a::after,
.page-cause #side ul li:nth-child(2) a::after,
.page-type #side ul li:nth-child(3) a::after,
.page-treatment #side ul li:nth-child(4) a::after,
.page-handling.cat-about #side ul li:nth-child(5) a::after,
.page-living #side ul li:nth-child(6) a::after,
.page-management-sheet #side ul li:nth-child(7) a::after {
  background: url(../../about/images/icon-play.png) center center / contain no-repeat;
}
.page-about #side ul li:nth-child(1) a::before,
.page-cause #side ul li:nth-child(2) a::before,
.page-type #side ul li:nth-child(3) a::before,
.page-treatment #side ul li:nth-child(4) a::before,
.page-handling.cat-about #side ul li:nth-child(5) a::before,
.page-living #side ul li:nth-child(6) a::before,
.page-management-sheet #side ul li:nth-child(7) a::before {
  content: "";
  display: block;
  background: #9FCFEF;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.page-tool #side ul li:nth-child(1) a {
  color: #E15F68;
}
.page-tool #side ul li:nth-child(1) a::after {
  background: url(../../tool/images/icon-play.png) center center / contain no-repeat;
}
.page-tool #side ul li:nth-child(1) a::before {
  content: "";
  display: block;
  background: #F5BDC8;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

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

#foot-menu {
  background: #EEEEEF;
  padding: 50px 0;
  margin-top: 110px;
  color: #717071;
}
#foot-menu a {
  color: #717071;
}
a.gotop {
  display: block;
  width: 40px;
  height: 40px;
  margin: -90px 0 50px auto;
}
#foot-menu h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
#foot-menu a:not(.gotop) {
  font-size: 14px;
}
#foot-menu a:not(.gotop):not(.title)::before {
  content: "";
  display: inline-block;
  background: url(../images/icon-play.png) center center / contain no-repeat;
  width: 16px;
  height: 16px;
  margin-right: .2em;
  vertical-align: -3px;
}
#foot-menu .menu-box {
  margin-top: 10px;
}
#foot-menu .menu-box ul > li:first-child {
  border-bottom: 1px solid #C8C9CA;
  padding-bottom: 3px;
}
#foot-menu .menu-box ul > li:first-child a {
  font-size: 16px;
  font-weight: 700;
}
#foot-menu .menu-box li {
  margin-top: 10px;
}

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

#contents {
  width: 900px;
  line-height: 1.6;
}
#contents h1 {
  font-size: 32px;
  padding-bottom: 8px;
  margin-bottom: 30px;
}
#contents h1 span {
  display: block;
}
.cat-how_to #contents h1 { color: #EC6604; border-bottom: 6px dotted #EC6604; }
.cat-about #contents h1 { color: #0058A2; border-bottom: 6px dotted #0058A2; }
.cat-tool #contents h1 { color: #E15F68; border-bottom: 6px dotted #E15F68; }

#contents .intro {
  font-size: 20px;
  margin-bottom: 60px;
}
#contents .intro p + p {
  margin-top: 1em;
}
.cat-how_to #contents .intro { font-weight: 700; }
.cat-how_to #contents .intro strong,
.cat-how_to #contents .color { color: #EC6604; }

.cat-about #contents .intro {
  border: 4px solid #83B9E4;
  background: #DEF1FA;
  border-radius: 15px;
  padding: 30px;
  color: #0058A2;
}
.cat-about #contents .color { color: #0058A2; }

#contents .f14 { font-size: 14px; font-weight: 500; }
#contents .f16 { font-size: 16px; font-weight: 500; }
#contents .f18 { font-size: 18px; }
#contents .f20 { font-size: 20px; }
#contents .f22 { font-size: 22px; }
#contents .bold { font-weight: 700; }

/* ---------------------------------------------------------------------------
//  sec-how_to
--------------------------------------------------------------------------- */

.page-how_to #contents .age { width: 100%; }
.page-how_to #contents .age th,
.page-how_to #contents .age td { line-height: 1.4; text-align: center; }
.page-how_to #contents .age th { width: 120px; }
.page-how_to #contents .age td { width: calc(100% - 120px / 4); padding: 10px; }
.page-how_to #contents .age tr:nth-child(1) td p { border-radius: 15px; color: #fff; padding: 10px 0; }
.page-how_to #contents .age tr:nth-child(1) td:nth-of-type(1) p { background: #FFF000; color: #595757; }
.page-how_to #contents .age tr:nth-child(1) td:nth-of-type(2) p { background: #4F81C2; }
.page-how_to #contents .age tr:nth-child(1) td:nth-of-type(3) p { background: #9A72AF; }
.page-how_to #contents .age tr:nth-child(1) td:nth-of-type(4) p { background: #EE7C1C; }
.page-how_to #contents .age tr:nth-child(2) td img { width: 75px; }
.page-how_to #contents .age tr:nth-child(3) td { padding: 30px 10px; }
.page-how_to #contents .age tr:nth-child(4) td img { width: 125px; }
.page-how_to #contents .frame { border: 1px solid #B4B4B5; margin-top: 20px; padding: 20px; }
.page-how_to #contents .frame p { text-indent: -1.8em; padding-left: 1.8em; }

.page-timing #contents .flow .item { position: relative; margin-bottom: 130px; }
.page-timing #contents .flow .item:last-child { margin-bottom: 0; }
.page-timing #contents .flow .item::after { content: ""; display: block; background: url(../../how_to/images/icon-flow.png) center center / contain no-repeat; width: 75px; height: 82px; position: absolute; bottom: -110px; left: calc(50% - 37px); }
.page-timing #contents .flow .item:last-child::after { content: none; }
.page-timing #contents .flow > div:nth-child(1) .image { margin: 0 auto 20px; }
.page-timing #contents .flow > div:nth-child(2) { border: 4px solid #6391C1; background: #DEF1FB; padding: 40px 50px; border-radius: 15px; }
.page-timing #contents .flow > div:nth-child(2) .attention{
  font-size: 120%; color: #0058A2; }
.page-timing #contents .flow > div:nth-child(2) .image { width: 250px; position: absolute;  right:50px; }
.page-timing #contents .flow > div:nth-child(3) { border: 4px solid #F6B281; background: #FFFCE4; padding: 30px 50px; border-radius: 15px; }
.page-timing #contents .flow > div:nth-child(3) li:first-child { margin-bottom: 1em; }
.page-timing #contents .flow > div:nth-child(3) li::before { content: "●"; color: #EC6604; }
.page-timing #contents .flow > div:nth-child(3) .image { width: 214px; }

.page-handling.cat-how_to #contents .point h2 { display: table; font-size: 26px; background: #FFEB27; padding: 10px 60px; margin: 0 0 40px 20px; border-radius: 30px; position: relative; }
.page-handling.cat-how_to #contents .point h2::before { content: ""; display: block; background: url(../../how_to/images/icon-hand.png) center center / contain no-repeat; width: 71px; height: 73px; position: absolute; left: -20px; top: -5px; }
.page-handling.cat-how_to #contents .point li { font-size: 22px; font-weight: 700; margin-bottom: 15px; }
.page-handling.cat-how_to #contents .point li::before { content: ""; display: inline-block; background: url(../../how_to/images/icon-check.png) center center / contain no-repeat; width: 30px; height: 32px; margin-right: 5px; vertical-align: -6px; }
.page-handling.cat-how_to #contents > .image { width: 697px; margin: 50px auto 80px; }
.page-handling.cat-how_to #contents .caution h2 { font-size: 30px; text-align: center; display: table; margin: 0 auto 30px; }
.page-handling.cat-how_to #contents .caution h2::before { content: ""; display: inline-block; background: url(../../how_to/images/icon-caution.png) center center / contain no-repeat; width: 80px; height: 72px; margin-right: .5em; vertical-align: -20px; }
.page-handling.cat-how_to #contents .caution span { font-size: 36px; color: #e1242a; }
.page-handling.cat-how_to #contents .caution h3 { font-size: 26px; color: #e1242a; }
.page-handling.cat-how_to #contents .caution .item { background: #FFFCCC; border-radius: 20px; padding: 30px 50px; margin-bottom: 30px; }
.page-handling.cat-how_to #contents .caution .item .text { width: calc(100% - 150px); padding-right: 100px; }
.page-handling.cat-how_to #contents .caution .item .image { width: 150px; }
.page-handling.cat-how_to #contents .bathing { border: 3px solid #73BBE2; background: #DEF1FB; padding: 30px 50px; border-radius: 15px; }
.page-handling.cat-how_to #contents .bathing h3 { font-size: 22px; color: #036EB7; }
.page-handling.cat-how_to #contents .bathing h3::before { content: "●"; color: #7FCCEC; }
.page-handling.cat-how_to #contents .bathing .text { width: calc(100% - 200px); padding-right: 80px; }
.page-handling.cat-how_to #contents .bathing .image { width: 200px; }

.page-medication #contents .intro { border: 3px solid #e1242a; padding: 20px 30px; }
.page-medication #contents .intro strong { color: #e1242a; }
.page-medication #contents .step { margin-bottom: 60px; }
.page-medication #contents .step h2 { color: #004496; font-size: 38px; margin-bottom: 20px; }
.page-medication #contents .step h2::before { content: ""; display: inline-block; width: 119px; height: 53px; margin-right: .2em; vertical-align: -12px; }
.page-medication #contents .step1 h2::before { background: url(../../how_to/images/medication-step1.png) center center / contain no-repeat; }
.page-medication #contents .step2 h2::before { background: url(../../how_to/images/medication-step2.png) center center / contain no-repeat; }
.page-medication #contents .step .flex { margin-left: 40px; }
.page-medication #contents .step .flex .image { width: 400px; text-align: center; }
.page-medication #contents .step .flex .text { width: calc(100% - 400px); padding-left: 40px; }
.page-medication #contents .step .flex .text .dot li { margin-bottom: 1em; }
.page-medication #contents .step .flex .text .dot li::before { content: "●"; color: #004496; }
.page-medication #contents .step1 .illust { width: 276px; }
.page-medication #contents .step2 p { margin-top: 2em; }
.page-medication #contents .flex.step2-2 { margin-top: 60px; justify-content: center; }
.page-medication #contents .flex.step2-2 .image { width: auto; }
.page-medication #contents .flex.step2-2 .image img { width: 296px; }
.page-medication #contents .flex.step2-2 .text { width: auto; }
.page-medication #contents .step2-2 p { margin: 0 0 20px 30px; }
.page-medication #contents .step2-2 .illust { width: 327px; }
.page-medication #contents .caution { border: 4px solid #EC6604; background: #FFFCE4; padding: 30px 50px; border-radius: 15px; margin-top: 80px; }
.page-medication #contents .caution h2 { display: table; margin: 0 auto 30px; font-size: 28px; color: #EC6604; text-align: center; }
.page-medication #contents .caution h2::before { content: ""; display: inline-block; background: url(../../how_to/images/icon-caution.png) center center / contain no-repeat; width: 46px; height: 41px; margin-right: .5em; vertical-align: -10px; }
.page-medication #contents .caution li { margin-bottom: 15px; }
.page-medication #contents .caution li::before { content: "●"; color: #EC6604; }

.page-carry #contents .bg { background: #FFFCE4; border-radius: 20px; padding: 30px; margin-bottom: 10px; }
.page-carry #contents .bg .flex { padding: 0 50px; }
.page-carry #contents .bg .image { width: 143px; }
.page-carry #contents .caution li { line-height: 1.4; display: flex; margin-bottom: 30px; }
.page-carry #contents .caution li p { margin-top: 6px; }
.page-carry #contents .caution li::before { content: ""; display: block; background: url(../../how_to/images/icon-caution.png) center center / contain no-repeat; width: 46px; height: 41px; margin-right: .5em; }
.page-carry #contents .little li::before { content: "◆"; color: #e1242a; }
.page-carry #contents .frame { border: 3px solid #e1242a; margin: 30px 0; padding: 0 30px; }
.page-carry #contents .frame p { margin: 10px 0; }
.page-carry #contents .frame p strong { color: #e1242a; }
.page-carry #contents .frame .image { width: 126px; }
.page-carry #contents .message { border: 3px solid #FFEB27; background: #FFFCE4; border-radius: 20px; padding: 40px; margin-top: 70px; position: relative; }
.page-carry #contents .message h2 { display: table; font-size: 26px; background: #FFEB27; padding: 10px 70px; margin: -70px auto 40px; border-radius: 30px; position: relative; }
.page-carry #contents .message h2::before { content: ""; display: block; background: url(../../how_to/images/icon-hand.png) center center / contain no-repeat; width: 71px; height: 73px; position: absolute; left: -20px; top: -5px; }
.page-carry #contents .message dt { font-size: 22px; font-weight: 700; }
.page-carry #contents .message dt::before { content: ""; display: inline-block; background: url(../../how_to/images/icon-check.png) center center / contain no-repeat; width: 30px; height: 32px; margin-right: 5px; vertical-align: -6px; }
.page-carry #contents .message dd { margin: 5px 0 30px 36px; display: flex; }
.page-carry #contents .message dd::before { content: ""; display: block; background: url(../../how_to/images/icon-right.png) center center / contain no-repeat; width: 19px; height: 18px; margin: 3px 5px 0 0; }
.page-carry #contents .message .image { display: block; width: 251px; position: absolute; top: 60px; right: 80px; }

.page-side-effect #contents .attention { border: 4px solid #EC6604; background: #FFFCE4; padding: 0 30px; border-radius: 15px; }
.page-side-effect #contents .attention .image { width: 139px; align-self: flex-end; }
.page-side-effect #contents .attention p { margin: 30px 0; line-height: 1.4; }
.page-side-effect #contents .measure { border: 3px solid #73BBE2; background: #DEF1FB; padding: 30px 30px; border-radius: 15px; margin-top: 40px; }
.page-side-effect #contents .measure h2 { color: #036EB7; }
.page-side-effect #contents .measure > dl { margin-top: 20px; }
.page-side-effect #contents .measure dl dt { font-size: 18px; font-weight: 700; color: #231815; }
.page-side-effect #contents .measure dl dt::before { content: "●"; color: #7FCCEC; }
.page-side-effect #contents .measure dl dd { padding-left: 1.1em; }
.page-side-effect #contents .measure .flex { margin-top: 20px; }
.page-side-effect #contents .measure .flex .image { width: 176px; }
.page-side-effect #contents .measure .flex dl { width: calc(100% - 176px); padding-right: 40px; }

.page-attention #contents .list h2 { text-indent: -1em; padding-left: 1em; }
.page-attention #contents .list h2::before { content: "●"; color: #EC6604; }
.page-attention #contents .list { margin-bottom: 40px; }
.page-attention #contents .list .text ul,
.page-attention #contents .list .text p { margin-left: 1em; }
.page-attention #contents .list .text { width: calc(100% - 220px); }
.page-attention #contents .list .image { width: 220px; text-align: center; }
.page-attention #contents .list1 .image img { width: 194px; }
.page-attention #contents .list2 .image img { width: 166px; }
.page-attention #contents .attention { border: 4px solid #EC6604; background: #FFFCE4; padding: 20px 30px; border-radius: 15px; }
.page-attention #contents .attention .image { width: 200px; }

.page-storage #contents .list { margin-bottom: 40px; }
.page-storage #contents .list .text p { padding-left: 1em; }
.page-storage #contents .list .text p:first-child { text-indent: -1em; }
.page-storage #contents .list .text p:first-child::before { content: "◉"; color: #EC6604; }
.page-storage #contents .list .image { width: 220px; text-align: center; }
.page-storage #contents .list1 .image img { width: 122px; }
.page-storage #contents .list2 .image img { width: 69px; }
.page-storage #contents .list3 .image img { width: 83px; }
.page-storage #contents .list3 .brackets { position: relative; display: table; padding: 0 1em; margin: .5em 0 .5em 1.5em; }
.page-storage #contents .list3 .brackets::before { content: ""; display: block; border: 2px solid #B4B4B5; border-right: none; width: 8px; height: 100%; position: absolute; top: 0; left: 0; }
.page-storage #contents .list3 .brackets::after { content: ""; display: block; border: 2px solid #B4B4B5; border-left: none; width: 8px; height: 100%; position: absolute; top: 0; right: 0; }

.page-faq #contents .faq dt { display: flex; align-items: center; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.page-faq #contents .faq dd { display: flex; font-size: 18px; padding: 0 0 40px 55px; margin-bottom: 40px; border-bottom: 3px dotted #B4B4B5; }
.page-faq #contents .faq dt::before { content: ""; display: block; background: url(../../how_to/images/faq-q.png) center center / contain no-repeat; width: 45px; height: 44px; flex: 0 0 45px; margin-right: 10px; }
.page-faq #contents .faq dd::before { content: ""; display: block; background: url(../../how_to/images/faq-a.png) center center / contain no-repeat; width: 35px; height: 35px; flex: 0 0 35px; margin-right: 5px; }

.page-movie #contents .movie-file {
  display: flex;
  justify-content: center;
}


.cat-about #contents h2.default { font-size: 26px; color: #0058A2; margin-bottom: 10px; }
.page-about #contents > .image { margin: 60px auto; }
.page-about #contents .flex .image { width: 469px; }
.page-about #contents .flex .text { width: calc(100% - 469px); padding-right: 20px; }

.page-cause #contents .item .image { width: 400px; text-align: center; }
.page-cause #contents .item .text { width: calc(100% - 400px); padding-right: 40px; }
.page-cause #contents .item1.flex .image img { width: 233px; }
.page-cause #contents .item2.flex .image img { width: 191px; }
.page-cause #contents .item3.flex .image img { width: 205px; }
.page-cause #contents .item4.flex .image img { width: 319px; }
.page-cause #contents .item h2 { font-size: 26px; color: #EC6604; }
.page-cause #contents .item dt { margin-bottom: 10px; }
.page-cause #contents .item dt::after { display: inline-block; background: #EC6604; width: 27px; height: 27px; border-radius: 50%; margin-left: .3em; color: #fff; font-size: 16px; line-height: 27px; font-weight: 700; text-align: center; vertical-align: 1px; }
.page-cause #contents .item1 dt::after { content: "1"; }
.page-cause #contents .item2 dt::after { content: "2"; }
.page-cause #contents .item3 dt::after { content: "3"; }
.page-cause #contents .item4 dt::after { content: "4"; }
.page-cause #contents .item1 { margin-bottom: 60px; }
.page-cause #contents .item2 { margin-bottom: 70px; }
.page-cause #contents .item3 { margin-bottom: 40px; }

.page-type #contents .item { margin-top: 40px; padding-top: 40px; border-top: 3px dotted #B4B4B5; }
.page-type #contents .item1,
.page-type #contents .item3 { margin-top: 20px; }
.page-type #contents .item2 { margin-bottom: 60px; }
.page-type #contents .item1 .image,
.page-type #contents .item4 .image { margin: 20px auto 0; }
.page-type #contents .item2 .image { width: 180px; }
.page-type #contents .item2 .text { width: calc(100% - 180px); padding-right: 40px; }
.page-type #contents .item3 .image { width: 328px; }
.page-type #contents .item3 .text { width: calc(100% - 328px); padding-right: 40px; }
.page-type #contents h3 { color: #EC6604; margin-bottom: 10px; }

.page-treatment #contents .image { margin: 20px auto 0; }
.page-treatment #contents cite { margin-bottom: 20px; }
.page-treatment #contents cite + h2.default { margin-top: 60px; }
.page-treatment #contents .time { margin-top: 20px; border: 1px solid #595757; border-radius: 15px; overflow: hidden; }
.page-treatment #contents .time table { width: 100%; }
.page-treatment #contents .time th,
.page-treatment #contents .time td { padding: 10px; text-align: center; font-weight: 700; }
.page-treatment #contents .time th { background: #FDF0E6; }
.page-treatment #contents .time td { background: #FFFCE4; }
.page-treatment #contents .time th:nth-last-child(n+2),
.page-treatment #contents .time td:nth-last-child(n+2) { border-right: 1px solid #595757; }
.page-treatment #contents .time tr:nth-last-child(n+2) th,
.page-treatment #contents .time tr:nth-last-child(n+2) td { border-bottom: 1px solid #595757;  }
.page-treatment #contents .time thead td { border-bottom: 1px solid #595757; background: #FAD9C0; }
.page-treatment #contents .bg { background: #EAF5FC; border-radius: 20px; padding: 30px; margin-top: 20px; }
.page-treatment #contents .bg h3 { color: #0058A2; margin-bottom: 10px; }
.page-treatment #contents .bg dt { font-weight: 700; }
.page-treatment #contents .bg dt::before { content: ""; display: inline-block; background: url(../../about/images/icon-check.png) center center / contain no-repeat; width: 20px; height: 18px; margin-right: .2em; vertical-align: -2px; }
.page-treatment #contents .bg dd { margin: 0 0 10px 22px; }

.page-handling.cat-about #contents .icons { line-height: 1.4; background: #FFFCE4; border-radius: 20px; padding: 30px; margin-top: 20px; }
.page-handling.cat-about #contents .icons > .flex > div { margin-top: 20px; }
.page-handling.cat-about #contents .icons1 h3 { color: #0058A2; }
.page-handling.cat-about #contents .icons1 h3::before { content: ""; display: inline-block; background: url(../../about/images/icon-right-b.png) center center / contain no-repeat; width: 29px; height: 29px; margin-right: .2em; vertical-align: -5px; }
.page-handling.cat-about #contents .icons1 .image { width: 87px; margin-right: 10px; }
.page-handling.cat-about #contents .icons2 h3 { color: #EC6604; }
.page-handling.cat-about #contents .icons2 h3::before { content: ""; display: inline-block; background: url(../../about/images/icon-right-o.png) center center / contain no-repeat; width: 29px; height: 29px; margin-right: .2em; vertical-align: -5px; }
.page-handling.cat-about #contents .icons2 .image { width: 102px; margin-right: 10px; }
.page-handling.cat-about #contents .item .image { width: 370px; text-align: center; }
.page-handling.cat-about #contents .item .text { width: calc(100% - 370px); padding-right: 40px; }
.page-handling.cat-about #contents .item1.flex .image img { width: 203px; }
.page-handling.cat-about #contents .item2.flex .image img { width: 219px; }
.page-handling.cat-about #contents .item h2 { font-size: 26px; color: #EC6604; }
.page-handling.cat-about #contents .item dt { margin-bottom: 10px; }
.page-handling.cat-about #contents .item dt::after { display: inline-block; background: #EC6604; width: 27px; height: 27px; border-radius: 50%; margin-left: .3em; color: #fff; font-size: 16px; line-height: 27px; font-weight: 700; text-align: center; vertical-align: 1px; }
.page-handling.cat-about #contents .item1 dt::after { content: "1"; }
.page-handling.cat-about #contents .item2 dt::after { content: "2"; }
.page-handling.cat-about #contents .item1 { margin-top: 50px; }
.page-handling.cat-about #contents .item2 { margin-top: 60px; }

.page-living #contents .bg { line-height: 1.4; background: #FFFCE4; border-radius: 20px; padding: 40px 40px 0; margin-bottom: 60px; }
.page-living #contents .bg li { padding-left: 38px; text-indent: -38px; margin-bottom: 20px; }
.page-living #contents .bg li::before { content: ""; display: inline-block; background: url(../../about/images/icon-right-o.png) center center / contain no-repeat; width: 29px; height: 29px; margin-right: .5em; vertical-align: -7px; }
.page-living #contents .bg .image { width: 595px; margin: 40px auto 0; }
.page-living #contents .check { margin-top: 40px; }
.page-living #contents .check dt { font-size: 22px; font-weight: 700; }
.page-living #contents .check dt::before { content: ""; display: inline-block; background: url(../../about/images/icon-check2.png) center center / contain no-repeat; width: 30px; height: 32px; margin-right: 5px; vertical-align: -6px; }
.page-living #contents .check dd { font-size: 18px; margin: 5px 0 30px 36px;; }
.page-living #contents .flex.sheet { margin-top: 60px; justify-content: center; }
.page-living #contents .flex.sheet .image { width: auto; }
.page-living #contents .flex.sheet .image img { width: 265px; }
.page-living #contents .flex.sheet .text { align-self: flex-start; width: auto; border: 2px solid #0058A2; padding: 20px; border-radius: 15px; margin-right: 40px; }

.page-management-sheet #contents .frame { margin-top: 40px; border: 2px solid #0058A2; padding: 40px; border-radius: 15px; }
.page-management-sheet #contents h2 { color: #231815; }
.page-management-sheet #contents .image { width: 466px; margin: 20px auto; }
.page-management-sheet #contents .btn { display: block; width: 440px; margin: 0 auto; background: #62AFE2; color: #fff; text-align: center; padding: 10px; border-radius: 30px; }
.page-management-sheet #contents .sample { margin: 60px auto 0; width: 710px; }
.page-management-sheet #contents .sample .sheet { margin-top: 10px; box-shadow: 3px 3px 6px rgba(0,0,0,0.2); }


.page-tool #contents .frame { border: 3px solid #EE8484; border-radius: 15px; padding: 40px; }
.page-tool #contents .item { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 2px dotted #B4B4B5; }
.page-tool #contents .item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.page-tool #contents .item .book { width: 200px; }
.page-tool #contents .item .text { width: calc(100% - 200px); padding-left: 40px; }
.page-tool #contents .item .text h2 { border-left: 8px solid #EA6068; padding-left: 10px; margin-bottom: 10px; }
.page-tool #contents .item .text .btn { display: table; margin: 40px auto 0; padding: 5px 60px; background: #E15F68; color: #fff; border-radius: 30px; text-align: center; }
.page-tool #contents .item .text .btn::before { content: ""; display: inline-block; background: url(../../common/images/icon-dl.png) center center / contain no-repeat; width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px; }



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

.top_menu.top_about .management { padding: 20px; }
.top_tool .frame { padding: 30px; }

#side { display: none; }
#contents { margin: 0 auto; }

}
/* /////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////// */
.movie-container {
  width: 900px;
  height: auto;
  position: relative;
  border: 1px solid #ccc;
}
.movie_main {
  width: 100%;
  max-width: 900px;
  cursor: pointer;
}

/* ----------------------------------------------
		YesNo modal
---------------------------------------------- */
#confirm{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 10000;
  background: rgba(1,1,1,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;

  display: none;
}

#confirm .confirm_panel{
  width: 700px;
  height: auto;
  background: #fff;
}

#confirm .confirm_upperBlock{
  padding: 40px 50px 30px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#confirm .confirm_upperBlock img{
  width: 40%;
  height: auto;
}

#confirm .confirm_upperBlock p{
  margin-top: 20px;
  border-top: 1px solid #808080;
  padding-top: 20px;
  font-size: 14px;
}
#confirm .confirm_lowerBlock p{
  font-size: 14px;
}

#confirm .confirm_lowerBlock{
  border-top: 2px solid #fed400;
  background: #fff67f;
  padding: 20px 50px 40px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#confirm .confirm_lowerBlock ul{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 30px;
}
#confirm .confirm_lowerBlock ul a{
  width: 30%;
}

#confirm .confirm_lowerBlock ul a:first-child{
  margin-right: 30px;
}

#confirm .confirm_yes{
  width: 100%;
  background: #ec6604;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  padding: 5px 0;
}
#confirm .confirm_no{
  width: 100%;
  background: #65aadd;
  text-align: center;

  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  padding: 5px 0;
}

.topArrow {
  margin: 20px 0 50px auto!important;
}

@media screen and (max-width: 767px) {
  #confirm{
    align-items: flex-start;
    width: 100%;
    height: 100%;
  }

  #confirm .confirm_upperBlock img{
    width: 60%;
    height: auto;
  }

  #confirm .confirm_upperBlock{
    padding: 40px 20px 30px 20px;
  }
  #confirm .confirm_lowerBlock{
    padding: 20px 20px 40px 20px;
  }

  #confirm .confirm_lowerBlock ul a{
    width: 40%;
  }

  .topArrow {
    margin: 20px 0 0 auto!important;
  }

}