@charset "utf-8";

/*=====================================================
 * Style URL: detail.css
 * Version: 1.0
 * Last Up Date: 2018/12/13
=====================================================*/
/**----- contents -------
	1: html & body & other
	2: wrapper
	3: header
	4: main
	5: footer
	6: #safety
	7: #development
	8: #history
 9: #comic
10: #stockpile
----------------------*/
/*=== 1: html & body & other =====================================*/
img {
 max-width: 100%;
}

figure {
 margin: 0;
}

.sp {
 display: none !important;
}

/*---sp-------------*/
@media screen and (max-width: 640px) {
 body {
  background: url(/meiji-eiyoucare/img/common/bg_top.jpg);
 }

 .pc {
  display: none !important;
 }

 .sp {
  display: block !important;
 }
}

/*================================================================*/
/*=== 2: wrapper =================================================*/
.wrapper {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-direction: column;
 -webkit-flex-direction: column;
 flex-direction: column;
 min-height: 100vh;
}

/*================================================================*/
/*=== 3: header ==================================================*/
.wrapper header {
 width: auto;
 height: auto;
 position: static;
 z-index: auto;
}

.wrapper header.fixed {
 width: 100%;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 999;
}

.wrapper header .header_inner {
 width: 1024px;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-justify-content: space-between;
 -ms-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: center;
 -ms-align-items: center;
 align-items: center;
 padding: 15px 42px 23px;
 margin: auto;
 background: #fff;
 box-sizing: border-box;
}

.wrapper header nav ul {
 width: 593px;
 border-left: #000 1px solid;
 border-right: #000 1px solid;
 box-sizing: border-box;
}

.wrapper header nav ul li {
 position: relative;
 display: table-cell;
 padding: 1.4% 21px;
 height: auto;
 vertical-align: bottom;
}

.wrapper header nav ul li:nth-child(2) {
 border-left: #000 1px solid;
 border-right: #000 1px solid;
}

.wrapper header nav ul li:nth-child(1),
.wrapper header nav ul li:nth-child(1):hover::before,
.wrapper header nav ul li.act:nth-child(1)::before {
 width: 115px;
}

.wrapper header nav ul li:nth-child(2),
.wrapper header nav ul li:nth-child(2):hover::before,
.wrapper header nav ul li.act:nth-child(2)::before {
 width: 93px;
}

.wrapper header nav ul li:nth-child(3),
.wrapper header nav ul li:nth-child(3):hover::before,
.wrapper header nav ul li.act:nth-child(3)::before {
 width: 255px;
}

.wrapper header nav ul li img {
 width: 100%;
}

.wrapper header nav ul li::before {
 position: absolute;
 bottom: -10px;
 content: "";
 height: 4px;
 -webkit-transition: all .3s;
 transition: all .3s;
}

.wrapper header nav ul li:hover::before,
.wrapper header nav ul li.act::before {
 position: absolute;
 bottom: -10px;
 content: "";
 height: 4px;
 background: #ff942b;
 border-radius: 3px;
}

/*---sp-------------*/
@media screen and (max-width: 640px) {
 .wrapper header .header_inner {
  width: 100%;
  display: block;
  padding: 22px 0 25px;
 }

 .wrapper header .header_inner p img {
  width: 40%;
  display: block;
  margin: 0 auto 25px;
 }

 .wrapper header .header_inner p img.min {
  width: 25%;
  display: block;
  margin: 0 auto 10px;
  -webkit-animation-name: anime;
  -webkit-animation-duration: 0.5s;
  animation-name: anime;
  animation-duration: 0.5s;
 }

 @-webkit-keyframes anime {
  from {
   width: 40%;
   margin: 0 auto 25px;
  }

  to {
   width: 25%;
   margin: 0 auto 10px;
  }
 }

 @keyframes anime {
  from {
   width: 40%;
   margin: 0 auto 25px;
  }

  to {
   width: 25%;
   margin: 0 auto 10px;
  }
 }

 .wrapper header nav ul {
  width: 90.266%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  margin: auto;
  border-left: none;
  border-right: none;
 }

 .wrapper header nav ul li {
  padding: 0;
 }

 .wrapper header nav ul li a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
 }

 .wrapper header nav ul li:nth-child(1) {
  width: 22.433%;
  padding: 1% 3.3% 1% 0;
 }

 .wrapper header nav ul li:nth-child(1):hover::before,
 .wrapper header nav ul li.act:nth-child(1)::before {
  width: 86%;
 }

 .wrapper header nav ul li:nth-child(2) {
  width: 18%;
  padding: 1% 3.2%;
 }

 .wrapper header nav ul li:nth-child(2):hover::before,
 .wrapper header nav ul li.act:nth-child(2)::before {
  width: 74%;
 }

 .wrapper header nav ul li:nth-child(3) {
  width: 49.466%;
  padding: 1% 0 1% 3.2%;
 }

 .wrapper header nav ul li:nth-child(3):hover::before,
 .wrapper header nav ul li.act:nth-child(3)::before {
  width: 93.466%;
 }
}

/*================================================================*/
/*=== 4: main ====================================================*/
main {
 width: 1024px;
 padding: 24px 0 60px;
 margin: 0 auto 20px;
 background: #fff;
}

main h1 {
 background: #fff5c6;
 margin-bottom: 35px;
}

main h1 img {
 transform: translateY(-30px);
}

main p {
 font-size: 18px !important;
}

main p.copy_txt {
 font-size: 22px !important;
 line-height: 1.8em;
 margin: 0 92px;
}

main .flex_inner {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 -ms-justify-content: space-between;
 justify-content: space-between;
}

/*---sp-------------*/
@media screen and (max-width: 640px) {
 main {
  width: 100%;
  padding: 28px 0 60px;
  margin: 0 auto;
  background: #fff;
 }

 main h1 {
  margin-bottom: 21px;
 }

 main h1 img {
  transform: translateY(-17px);
 }

 main p {
  font-size: 16px !important;
 }

 main p.copy_txt {
  font-size: 16px !important;
  line-height: 1.8em;
  margin: 0 11px;
 }

 main .flex_inner {
  display: block;
 }
}

/*================================================================*/
/*=== 5: footer ==================================================*/
footer {
 margin-top: auto;
}

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


/*=== 6: #safety =================================================*/
#safety main h1 img {
 display: block;
 width: 521px;
 margin: auto;
}

#safety main h2 {
 width: 940px;
 margin: 0 auto 20px;
}

#safety main .sec01,
#safety main .sec02 {
 margin-top: 58px;
}

#safety main .sec01 .flex_inner {
 width: 912px;
 margin: auto;
}

#safety main .sec01 .flex_inner dl {
 position: relative;
 width: 447px;
 height: 576px;
 padding: 11px 16px 16px;
 background: url(../images/safety/sec_bg_small.png) center top no-repeat;
 box-sizing: border-box;
}

#safety main .sec01 .flex_inner dl:nth-child(n+3) {
 margin-top: 22px;
}

#safety main .sec01 .flex_inner dl dt h3 {
 display: inline-block;
 margin-bottom: 19px;
}

#safety main .sec01 .flex_inner dl dd .sec_img {
 position: absolute;
 bottom: 16px;
}

#safety main .sec02 dl {
 position: relative;
 width: 912px;
 height: 436px;
 padding: 11px 31px 15px;
 margin: auto;
 background: url(../images/safety/sec_bg_large.png) center top no-repeat;
 box-sizing: border-box;
}

#safety main .sec02 dl:nth-child(n+2) {
 margin-top: 22px;
}

#safety main .sec02 dl dt h3 img {
 display: block;
 margin: 0 auto 19px;
}

#safety main .sec02 dl dd p {
 text-align: center;
 margin-bottom: 20px;
}

#safety main .sec02 dl dd figure {
 width: 400px;
 font-weight: bold;
 text-align: center;
}

#safety main .sec02 dl dd figure img {
 margin-bottom: 12px;
}

/*---sp-------------*/
@media screen and (max-width: 750px) {
 #safety main h1 img {
  width: 78.666%;
 }

 #safety main h2 {
  width: 89.333%;
  margin: 0 auto 20px;
 }

 #safety main .sec01,
 #safety main .sec02 {
  margin-top: 24px;
 }

 #safety main .sec01 .flex_inner {
  width: 100%;
  margin: auto;
 }

 #safety main .sec01 .flex_inner dl {
  width: 84.266%;
  height: 100%;
  padding: 124% 0 0;
  margin: auto;
  background: url(../images/safety/sec_bg_small_sp.png) center top no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
 }

 #safety main .sec01 .flex_inner dl:nth-child(2) {
  width: 84.266%;
  height: 100%;
  padding: 138% 0 0;
  background: url(../images/safety/sec_bg_middle_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #safety main .sec01 .flex_inner dl:nth-child(n+2) {
  margin-top: 0;
 }

 #safety main .sec01 .flex_inner dl dt {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  width: 93.354%;
  display: block;
  margin: auto;
 }

 #safety main .sec01 .flex_inner dl dd {
  position: absolute;
  top: 24%;
  left: 0;
  right: 0;
  width: 93.354%;
  margin: auto;
 }

 #safety main .sec01 .flex_inner dl dd .sec_img {
  position: static;
  width: 85.443%;
  margin: 8% auto 0;
 }

 #safety main .sec02 dl {
  width: 84%;
  height: 100%;
  padding: 160% 0 0;
  background: url(../images/safety/sec_bg_largest_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #safety main .sec02 dl:nth-child(2) {
  width: 84%;
  min-height: 544px;
  background: url(../images/safety/sec_bg_large_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #safety main .sec02 dl:nth-child(n+2) {
  margin-top: 22px;
 }

 #safety main .sec02 dl dt {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  width: 81.80%;
  display: block;
  margin: auto;
 }

 #safety main .sec02 dl dd {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  width: 93.354%;
  margin: auto;
 }

 #safety main .sec02 dl dd p {
  text-align: left;
  margin-bottom: 22px;
 }

 #safety main .sec02 dl dd figure {
  width: 85.443%;
  font-size: 13px;
  margin: auto;
 }

 #safety main .sec02 dl dd figure:nth-child(n+2) {
  margin-top: 23px;
 }

 #safety main .sec02 dl dd figure img {
  margin-bottom: 9px;
 }
}

/*================================================================*/
/*=== 7: #development ============================================*/
#development main h1 img {
 display: block;
 width: 521px;
 margin: auto;
}

#development main h2 {
 width: 940px;
 margin: 0 auto 20px;
}

#development main .sec01,
#development main .sec02,
#development main .sec01,
#development main .sec03 {
 margin-top: 58px;
}

#development main .sec01 dl.inner_cont01,
#development main .sec01 dl.inner_cont02,
#development main .sec02 .inner_cont01 {
 position: relative;
 width: 912px;
 height: 232px;
 padding: 21px 16px 16px;
 margin: auto;
 background: url(../images/development/sec_bg_middle.png) center top no-repeat;
 box-sizing: border-box;
}

#development main .sec01 dl:nth-child(n+2) {
 margin-top: 20px;
}

#development main .sec01 dl.inner_cont01 dt h3 {
 width: 293px;
 margin-bottom: 32px;
}

#development main .sec01 dl.inner_cont01 dd p,
#development main .sec02 .inner_cont01 p {
 margin-right: 340px;
}

#development main .sec01 dl.inner_cont01 dd .sec_img,
#development main .sec02 .inner_cont01 .sec_img {
 position: absolute;
 top: 16px;
 right: 16px;
 width: 300px;
}

#development main .sec01 dl.inner_cont02 dt h3 {
 width: 260px;
 margin-bottom: 32px;
}

#development main .sec01 dl.inner_cont02 dd p:first-child {
 margin-bottom: 20px;
}

#development main .sec03 .inner_cont01 {
 width: 912px;
 height: 118px;
 padding: 21px 16px 16px;
 margin: auto;
 background: url(../images/development/sec_bg_small.png) center top no-repeat;
 box-sizing: border-box;
}

#development main .outside_02 h1 img {
 margin-top: 87px;
}

#development main .sec04 .sec_img {
 width: 690px;
 margin: 0 auto 20px;
}

#development main .sec04 .inner_cont01 {
 width: 912px;
 height: 520px;
 padding: 21px 16px 16px 13px;
 margin: auto;
 background: url(../images/development/sec_bg_large.png) center top no-repeat;
 box-sizing: border-box;
}

#development main .sec04 .inner_cont02 {
 width: 760px;
 padding: 20px 16px 20px;
 margin: 21px auto 31px;
 border: #023894 2px solid;
 border-radius: 10px;
 box-sizing: border-box;
}

#development main .sec04 .inner_cont02 h3 {
 width: 219px;
 margin-bottom: 19px;
}

#development main .sec04 .inner_cont02 p.note {
 font-size: 13px !important;
 margin-top: 20px;
}

/*---sp-------------*/
@media screen and (max-width: 750px) {
 #development main h1 img {
  width: 78.666%;
 }

 #development main h2 {
  width: 89.333%;
  margin: 0 auto 20px;
 }

 #development main .sec01,
 #development main .sec02,
 #development main .sec01,
 #development main .sec03 {
  margin-top: 24px;
 }

 #development main .sec01 dl.inner_cont01 {
  position: relative;
  width: 84.266%;
  height: 100%;
  padding: 106% 0 0;
  margin: auto;
  background: url(../images/development/sec_bg_middle_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #development main .sec01 dl.inner_cont02 {
  position: relative;
  width: 84.266%;
  height: 100%;
  padding: 85% 0 0;
  margin: auto;
  background: url(../images/development/sec_bg_middle_s_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #development main .sec02 .inner_cont01 {
  position: relative;
  width: 84.266%;
  height: 100%;
  padding: 123% 0 0;
  margin: auto;
  background: url(../images/development/sec_bg_middle_l_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #development main .sec01 dl:nth-child(n+2) {
  margin-top: 0;
 }

 #development main .sec01 dl.inner_cont01 dt,
 #development main .sec01 dl.inner_cont02 dt {
  position: absolute;
  top: 4%;
  left: 3%;
  right: 0;
  margin: 0;
 }

 #development main .sec01 dl.inner_cont01 dt {
  width: 65.031%;
 }

 #development main .sec01 dl.inner_cont02 dt {
  width: 57.594%;
 }

 #development main .sec01 dl.inner_cont01 dd,
 #development main .sec01 dl.inner_cont02 dd,
 #development main .sec02 .inner_cont01 .sp_inner {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  width: 93.354%;
  margin: auto;
 }

 #development main .sec01 dl.inner_cont02 dd {
  top: 16%;
 }

 #development main .sec01 dl.inner_cont01 dt h3,
 #development main .sec01 dl.inner_cont02 dt h3 {
  width: 100%;
  margin-bottom: 0;
 }

 #development main .sec01 dl.inner_cont01 dt h3 img,
 #development main .sec01 dl.inner_cont02 dt h3 img {
  display: block;
 }

 #development main .sec01 dl.inner_cont01 dd p,
 #development main .sec02 .inner_cont01 .sp_inner p {
  margin-right: 0;
 }

 #development main .sec01 dl.inner_cont02 dd p:first-child {
  margin-bottom: 10px;
 }

 #development main .sec01 dl.inner_cont01 dd .sec_img {
  position: static;
  width: 91.525%;
  margin: 20px auto 0;
 }

 #development main .sec02 .inner_cont01 .sp_inner {
  top: 4%;
 }

 #development main .sec02 .inner_cont01 .sec_img {
  position: static;
  width: 91.525%;
  margin: 20px auto 0;
 }

 #development main .sec03 .inner_cont01 {
  width: 84.266%;
  min-height: 190px;
  padding: 10px 3.322% 16px;
  margin: auto;
  background: url(../images/development/sec_bg_small_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #development main .outside_02 {
  margin-top: 20px;
 }

 #development main .outside_02 h1 img {
  margin-top: 33px;
 }

 #development main .sec04 .sec_img {
  width: 93.243%;
  margin: 0 auto 13px;
 }

 #development main .sec04 .inner_cont01 {
  position: relative;
  width: 84.266%;
  height: 100%;
  padding: 218% 0 0;
  margin: auto;
  background: url(../images/development/sec_bg_large_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #development main .sec04 .inner_cont01 .sp_inner {
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  width: 93.354%;
  margin: auto;
 }

 #development main .sec04 .inner_cont01 h2 {
  width: 100%;
  margin: 0 auto 11px;
 }

 #development main .sec04 .inner_cont02 {
  width: 97.443%;
  padding: 10px 16px;
  margin: 10px auto 10px;
  border: #023894 2px solid;
  border-radius: 10px;
  box-sizing: border-box;
 }

 #development main .sec04 .inner_cont02 h3 {
  width: 57.420%;
  margin-bottom: 19px;
 }

 #development main .sec04 .inner_cont02 h3 img {
  display: block;
 }

 #development main .sec04 .inner_cont02 p.note {
  font-size: 13px !important;
  margin-top: 10px;
 }
}

@media screen and (max-width: 413px) {
 #development main .sec02 .inner_cont01 {
  padding: 126% 0 0;
  margin: auto;
  background: url(../images/development/sec_bg_middle_l2_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #development main .sec02 .inner_cont01 .sec_img {
  margin: 10px auto 0;
 }
}

/*================================================================*/
/*=== 8: #history ================================================*/
#history main h1 img {
 display: block;
 width: 660px;
 margin: auto;
}

#history main h2 {
 width: 940px;
 margin: 0 auto 20px;
}

#history main .outside_01 .sec01,
#history main .outside_02 .sec01 {
 margin-top: 24px;
}

#history main .outside_01 .sec_img {
 width: 690px;
 margin: 0 auto 20px;
}

#history main .outside_01 .inner_cont01 {
 position: relative;
 width: 912px;
 height: 890px;
 padding: 40px 15px 16px;
 margin: auto;
 background: url(../images/history/sec_bg_large.png) center top no-repeat;
 box-sizing: border-box;
}

#history main .outside_01 .inner_cont01 dl dt.story_01 h3 {
 width: 285px;
 margin-bottom: 20px;
}

#history main .outside_01 .inner_cont01 dl dt.story_02 h3 {
 width: 260px;
 margin-bottom: 20px;
}

#history main .outside_01 .inner_cont01 dl dt.story_03 h3 {
 width: 164px;
 margin-bottom: 20px;
}

#history main .outside_01 .inner_cont01 dl dt.story_04 h3 {
 width: 275px;
 margin-bottom: 20px;
}

#history main .outside_01 .inner_cont01 dl dt.story_05 h3 {
 width: 289px;
 margin-bottom: 20px;
}

#history main .outside_01 .inner_cont01 dl dd {
 margin-bottom: 30px;
}

#history main .outside_01 .inner_cont01 dl dd p:nth-child(2) {
 margin-top: 10px;
}

#history main .outside_02 {
 margin-top: 83px;
}

#history main .outside_02 .chronology {
 width: 940px;
 padding: 0 0 20px 20px;
 margin: auto;
 border: #023894 3px solid;
 border-radius: 10px;
 box-sizing: border-box;
}

#history main .outside_02 .chronology p {
 width: 280px;
 transform: translate(10px, -20px);
}

#history main .outside_02 .chronology .history_list {
 width: 904px;
 height: 520px;
 overflow-x: scroll;
 -webkit-overflow-scrolling: touch;
 box-sizing: border-box;
}

#history main .outside_02 .chronology .history_list::-webkit-scrollbar {
 width: 12px;
}

#history main .outside_02 .chronology .history_list::-webkit-scrollbar-track {
 border-radius: 10px;
 background: #d9d9d9;
}

#history main .outside_02 .chronology .history_list::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background: #bbb;
 border: 4px solid transparent;
 background-clip: content-box;
}

#history main .outside_02 .chronology .history_list img {
 width: 2628px;
 max-width: 2628px;
}

#history main .outside_02 .sec02 {
 margin-top: 20px;
}

#history main .outside_02 .inner_cont01 {
 width: 940px;
 padding: 82px 0 32px;
 margin: auto;
 background: #fccb3b url(../images/history/transition_line.png) left top no-repeat;
 border-radius: 10px;
}

#history main .outside_02 .inner_cont01 h2 {
 width: 720px;
 margin: 0 auto 29px;
}

#history main .outside_02 .inner_cont01 .sec_img {
 width: 690px;
 margin: 0 auto 47px;
}

#history main .outside_02 .inner_cont01 dl {
 width: 880px;
 margin: auto;
}

#history main .outside_02 .inner_cont01 dl dt {
 margin-bottom: 15px;
}

#history main .outside_02 .inner_cont01 dl dd {
 margin-bottom: 30px;
}

#history main .outside_02 .inner_cont01 dl dd:last-child {
 margin-bottom: 0;
}

/*---sp-------------*/
@media screen and (max-width: 750px) {
 #history main h1 img {
  display: block;
  width: 86.4%;
  margin: auto;
 }

 #history main h2 {
  width: 89.333%;
  margin: 0 auto 20px;
 }

 #history main .outside_01 .sec_img {
  width: 84%;
  margin: 0 auto 20px;
 }

 #history main .outside_01 .inner_cont01 {
  position: relative;
  width: 84.266%;
  height: 100%;
  padding: 300% 11px 0;
  background: url(../images/history/sec_bg_large_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #history main .outside_01 .inner_cont01 dl {
  position: absolute;
  top: 2%;
  left: 0;
  right: 0;
  width: 91.77%;
  margin: auto;
 }

 #history main .outside_01 .inner_cont01 dl dt.story_01 h3 {
  width: 69.137%;
  margin-bottom: 10px;
 }

 #history main .outside_01 .inner_cont01 dl dt.story_02 h3 {
  width: 62.931%;
  margin-bottom: 10px;
 }

 #history main .outside_01 .inner_cont01 dl dt.story_03 h3 {
  width: 39.655%;
  margin-bottom: 10px;
 }

 #history main .outside_01 .inner_cont01 dl dt.story_04 h3 {
  width: 67.068%;
  margin-bottom: 10px;
 }

 #history main .outside_01 .inner_cont01 dl dt.story_05 h3 {
  width: 69.137%;
  margin-bottom: 10px;
 }

 #history main .outside_01 .inner_cont01 dl dt h3 img {
  display: block;
 }

 #history main .outside_01 .inner_cont01 dl dd {
  margin-bottom: 30px;
 }

 #history main .outside_02 {
  margin-top: 55px;
 }

 #history main .outside_02 .chronology {
  width: 94.666%;
  padding: 0 0 20px 20px;
  margin: auto;
  border: #023894 3px solid;
  border-radius: 10px;
  box-sizing: border-box;
 }

 #history main .outside_02 .chronology p {
  width: 56.338%;
  transform: translate(5px, -50%);
 }

 #history main .outside_02 .chronology .history_list {
  width: 97.183%;
  height: auto;
  overflow-x: scroll;
  box-sizing: border-box;
 }

 #history main .outside_02 .chronology .history_list img {
  width: 500%;
  margin-bottom: 10px;
 }

 #history main .outside_02 .inner_cont01 {
  width: 89.333%;
  padding: 43px 0 32px;
  margin: auto;
  background: #fccb3b url(../images/history/transition_line_sp.png) left top no-repeat;
  background-size: 100% auto;
 }

 #history main .outside_02 .inner_cont01 h2 {
  width: 94.029%;
  margin: 0 auto 24px;
 }

 #history main .outside_02 .inner_cont01 .sec_img {
  width: 94.029%;
  margin: 0 auto 33px;
 }

 #history main .outside_02 .inner_cont01 dl {
  width: 90.746%;
  margin: auto;
 }

}

@media screen and (max-width: 413px) {
 #history main .outside_01 .inner_cont01 {
  padding: 310% 11px 0;
  background: url(../images/history/sec_bg_large_l_sp.png) center top no-repeat;
  background-size: 100% auto;
 }

 #history main .outside_01 .inner_cont01 dl dd {
  margin-bottom: 25px;
 }
}

/*================================================================*/
/*=== 9: #comic ==================================================*/
#comic .wrapper header {
 width: 100%;
 position: static;
 z-index: auto;
}

#comic .wrapper header p {
 width: 198px;
 margin: auto;
}

#comic .wrapper header .header_inner {
 width: 1024px;
 display: block;
 padding: 15px 42px 23px;
 margin: auto;
 background: #fff;
 border-radius: 0 0 10px 10px;
 box-shadow: 0px 3px 10px -3px #d6cccd;
 box-sizing: border-box;
}

#comic main {
 width: 1024px;
 /*padding: 180px 0 0;*/
 padding: 90px 0 0;
 margin: 0 auto 0;
 background: url("../images/comic/main_bg.png") left top repeat;
}

#comic main h1 {
 margin-bottom: 35px;
 background: rgba(255, 255, 255, 0.00);
 box-sizing: border-box;
}

#comic main h1 img,
#comic main .character img {
 display: block;
 margin: auto;
}

#comic main .sec01 {
 padding: 40px 0;
 margin-top: 40px;
 background: #fff;
}

#comic main ul.thum {
 width: 825px;
 margin: auto;
}

#comic main ul.thum li {
 width: 380px;
 margin-bottom: 40px;
}

#comic .product_link {
 padding: 30px 0;
 background: #eb726d url("../images/comic/product_link_bg.png") center bottom no-repeat;
}

#comic .product_link a {
 display: block;
 width: 600px;
 padding: 30px 0 28px;
 margin: 25px auto 0;
 background: #fff;
 border-radius: 10px;
}

#comic .meibalance_link {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-justify-content: center;
 -ms-justify-content: center;
 justify-content: center;
 -webkit-align-items: center;
 -ms-align-items: center;
 align-items: center;
 padding: 23px 0;
 background: #fff4c6;
}

#comic .meibalance_link p {
 width: 587px;
}

#comic .meibalance_link a {
 display: block;
 width: 220px;
 padding: 13px 0 12px;
 margin-left: 50px;
 background: #fff;
 border-radius: 10px;
}

#comic .product_link a,
#comic .meibalance_link a {
 -webkit-transition: all .3s;
 transition: all .3s;
}

#comic .product_link a:hover,
#comic .meibalance_link a:hover {
 opacity: 0.8;
}

#comic .product_link img,
#comic .meibalance_link img {
 display: block;
 margin: auto;
}

/*---sp-------------*/
@media screen and (max-width: 750px) {
 #comic .wrapper header p {
  width: 100%;
 }

 #comic .wrapper header .header_inner {
  width: 100%;
  display: block;
  padding: 22px 0 25px;
 }

 #comic .wrapper header .header_inner p img {
  width: 40%;
  display: block;
  margin: auto;
 }

 #comic .wrapper header .header_inner p img.min {
  /*width: 25%;*/
  width: 40%;
  display: block;
  margin: auto;
  -webkit-animation-name: anime;
  -webkit-animation-duration: 0.5s;
  animation-name: anime;
  animation-duration: 0.5s;
 }

 #comic main {
  width: 100%;
  /*padding: 145px 0 60px;*/
  padding: 40px 0 0;
  margin: 0 auto;
 }

 #comic main h1 {
  width: 92.53%;
  margin: auto;
 }

 #comic main .character {
  width: 92%;
  margin: auto;
 }

 #comic main ul.thum {
  width: 92%;
  margin: auto;
 }

 #comic main ul.thum li {
  width: 100%;
 }

 #comic .product_link {
  padding: 20px 0 25px;
  background: #eb726d url("../images/comic/product_link_bg_sp.png") center bottom no-repeat;
  background-size: 100%;
 }

 #comic .product_link p {
  width: 65.2%;
  margin: auto;
 }

 #comic .product_link a {
  width: 66.66%;
  padding: 15px 6.3%;
  margin: 15px auto 0;
  box-sizing: border-box;
 }

 #comic .meibalance_link {
  display: block;
  padding: 23px 0;
 }

 #comic .meibalance_link p {
  width: 39.63vw;
  margin: auto;
 }

 #comic .meibalance_link a {
  display: block;
  width: 48.8%;
  padding: 12px 6.3% 12px;
  margin: 8px auto 0;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
 }

}

/*================================================================*/
/*=== 10: #stockpile =============================================*/
#stockpile {
 color: #000;
 font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
}

#stockpile .wrapper header {
 width: 100%;
 position: static;
 z-index: auto;
}

#stockpile .wrapper header p {
 width: 198px;
 margin: auto;
}

#stockpile .wrapper header .header_inner {
 width: 1024px;
 display: block;
 padding: 15px 42px 23px;
 margin: auto;
 background: #fff;
 border-radius: 0 0 10px 10px;
 box-shadow: 0px 3px 10px -3px #d6cccd;
 box-sizing: border-box;
}

#stockpile main {
 width: 1024px;
 padding: 70px 0 0;
 margin: 0 auto 0;
 background: url("../images/stockpile/main_bg.png") left top repeat;
}

#stockpile main h1 {
 position: relative;
 margin-bottom: 35px;
 background: rgba(255, 255, 255, 0.00);
 box-sizing: border-box;
}

#stockpile main h1 img,
#stockpile main .comic img {
 display: block;
 margin: auto;
 transform: translateY(0px);
}

#stockpile main h1 a {
 position: absolute;
 bottom: 30px;
 right: 62px;
 display: block;
 width: 340px;
 height: 180px;
 -webkit-transition: all .3s;
 transition: all .3s;
}

#stockpile main h1 a:hover {
 background: rgba(177, 177, 177, 0.15);
}

#stockpile main h1 a span {
 display: none;
}

#stockpile main .summary {
 position: relative;
 width: 940px;
 margin: 0 auto 40px;
}

#stockpile main .summary p {
 position: absolute;
 top: 160px;
 left: 55px;
 width: 65%;
 color: #000;
 font-size: 20px !important;
 line-height: 1.6;
}

#stockpile main .sec01 {
 width: 940px;
 padding: 30px 40px;
 margin: 40px auto 0;
 background: #fff;
 border-radius: 8px;
 box-sizing: border-box;
}

#stockpile main .sec01.f02 {
 padding: 30px 38px;
}

#stockpile main .sec01.f01 h2,
#stockpile main .sec01.f03 h2 {
 margin-bottom: 20px;
}

#stockpile main .sec01.f02 h2 {
 margin-bottom: 40px;
}

#stockpile h3 {
 margin: 40px auto 0;
}

#stockpile main .sec01.f02 p {
 display: block;
 width: 780px;
 color: #000;
 font-size: 20px !important;
 line-height: 1.6;
 margin: 0 auto 38px;
}

#stockpile main .sec01.f02 p.medal {
 margin: 38px auto 0;
}

#stockpile main .sec01.f02 figure ul {
 list-style: none;
 color: #000;
 font-size: 12px !important;
 padding: 0;
 margin: 20px 0 0 20px;
}

#stockpile main .sec01.f02 figure ul>li>ul {
 margin: 0 0 0 3px;
}

#stockpile main .sec01.f02 figure li {
 text-indent: -2em;
 padding-left: 2em;
}

#stockpile main .sec01.f03 figure p {
 color: #000;
 font-size: 12px !important;
 text-indent: -1em;
 padding-left: 1em;
 margin-left: 60px;
}

#stockpile main .sec01 img {
 display: block;
 margin: auto;
}

#stockpile .product_link {
 padding: 30px 0;
 margin: 40px 0 30px;
 background: #eb726d;
}

#stockpile .product_link a {
 display: block;
 width: 600px;
 padding: 30px 0 28px;
 margin: 25px auto 0;
 background: #fff;
 border-radius: 10px;
}

#stockpile main .comic a img,
#stockpile .product_link a {
 -webkit-transition: all .3s;
 transition: all .3s;
}

#stockpile main .comic a:hover img,
#stockpile .product_link a:hover {
 opacity: 0.8;
}

#stockpile .product_link img {
 display: block;
 margin: auto;
}

/*-- 2022/06/10 edit --*/
#stockpile main .sec01.f02 p {
 margin: 0 0 38px 20px;
}

#stockpile .feature02_box {
 position: relative;
}

#stockpile .feature02_box .illust {
 position: absolute;
 top: -150px;
 ;
 right: -33px;
 width: 191px;
}

#stockpile .feature02_box a {
 position: absolute;
 top: 134px;
 right: 15px;
 display: block;
 width: 240px;
 height: 64px;
 border-radius: 10px;
 transition: all .3s;
}

#stockpile .feature02_box a:hover {
 background: rgba(255, 255, 255, 0.3);
}

#stockpile .feature02_box a span {
 display: none;
}

/*-- edit end ---------*/

/*---sp-------------*/
@media screen and (max-width: 750px) {
 #stockpile .wrapper header p {
  width: 100%;
 }

 #stockpile .wrapper header .header_inner {
  width: 100%;
  display: block;
  padding: 22px 0 25px;
 }

 #stockpile .wrapper header .header_inner p img {
  width: 40%;
  display: block;
  margin: auto;
 }

 #stockpile .wrapper header .header_inner p img.min {
  width: 40%;
  display: block;
  margin: auto;
  -webkit-animation-name: anime;
  -webkit-animation-duration: 0.5s;
  animation-name: anime;
  animation-duration: 0.5s;
 }

 #stockpile main {
  width: 100%;
  padding: 20px 0 0;
  margin: 0 auto;
 }

 #stockpile main h1 {
  width: 100%;
  margin: 0 auto 0;
 }

 #stockpile main h1 a {
  display: none;
 }

 #stockpile main .summary {
  width: 92%;
  margin: auto;
 }

 #stockpile main .summary p {
  top: 107px;
  left: 15px;
  width: 92%;
  font-size: 15px !important;
  line-height: 1.5;
 }

 #stockpile main .comic {
  width: 92%;
  margin: 15px auto 0;
 }

 #stockpile main .sec01 {
  width: 92%;
  padding: 15px 20px;
  margin: 20px auto 0;
 }

 #stockpile main .sec01.f02 {
  padding: 15px 20px;
 }

 #stockpile main .sec01.f01 h2,
 #stockpile main .sec01.f03 h2 {
  margin-bottom: 10px;
 }

 #stockpile main .sec01.f02 h2 {
  margin-bottom: 20px;
 }

 #stockpile h3 {
  margin: 20px auto 0;
 }

 #stockpile main .sec01.f02 p {
  display: block;
  width: 100%;
  font-size: 15px !important;
  line-height: 1.5;
  margin: 0 auto 19px;
 }

 #stockpile main .sec01.f02 p.medal {
  margin: 14px auto 0;
 }

 #stockpile main .sec01.f02 figure ul {
  list-style: none;
  font-size: 10px !important;
  padding: 0;
  margin: 10px 0 0 0;
 }

 #stockpile main .sec01.f02 figure ul>li>ul {
  margin: 0 0 0 3px;
 }

 #stockpile main .sec01.f02 figure ul>li {
  text-indent: -2em;
  padding-left: 2em;
 }

 #stockpile main .sec01.f02 figure ul>li>ul>li {
  text-indent: -0.5em;
  padding-left: 1em;
 }

 #stockpile main .sec01.f03 figure p {
  font-size: 10px !important;
  margin-left: 0;
 }

 #stockpile .product_link {
  padding: 20px 0 25px;
  background-size: 100%;
 }

 #stockpile .product_link p {
  width: 65.2%;
  margin: auto;
 }

 #stockpile .product_link a {
  width: 66.66%;
  padding: 15px 6.3%;
  margin: 15px auto 0;
  box-sizing: border-box;
 }

 #stockpile .product_link.sp {
  margin: 0 0 25px;
 }

 /*-- 2022/06/10 edit --*/
 #stockpile main .sec01.f02 p {
  margin: 0 auto 19px;
 }

 #stockpile .feature02_box {
  position: relative;
 }

 #stockpile .feature02_box .illust {
  display: none;
 }

 #stockpile .feature02_box a {
  position: absolute;
  top: 114vw;
  right: 0;
  left: 0;
  display: block;
  width: 64vw;
  height: 18.5vw;
  margin: 0 auto;
  border-radius: 10px;
  transition: all .3s;
 }

 #stockpile .feature02_box a:hover {
  background: rgba(255, 255, 255, 0.3);
 }

 #stockpile .feature02_box a span {
  display: none;
 }

 /*-- edit end ---------*/
}

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

#comic main,
#stockpile main {
 margin-top: -20px;
}

#comic .wrapper header,
#stockpile .wrapper header {
 z-index: 1;
}

@media screen and (max-width: 750px) {

 #comic main h1,
 #stockpile main h1 {
  margin-top: 4vw;
 }
}