img {
  width: 100%;
}

#contents {
  width: 100%;
  font-family: "Koburina Gothic W3 JIS2004";
  font-weight: normal;
  color: #1A1A1A;
}

.imgWrap {
  margin: auto;
  text-align: center;
}

.imgWrap img {
  position: relative;
}

.mokuji_img {
  position: relative;
  max-width: 870px;
}

.mokuji_img__link {
  position: absolute;
  top: 48px;
  right: 58px;
  max-width: 579px;
}

.mokuji_img__link a {
  display: block;
}

.mokuji_img__link a:nth-of-type(2) {
  max-width: 572px;
  margin: 26px 0 26px 2px;
}

.mokuji_img__link a:nth-of-type(3) {
  max-width: 561px;
  margin-left: 2px;
}

.bg--blue {
  background-color: rgba(149, 198, 216, 0.56);
  padding: 70px 0 50px;
}

.border_left {
  position: relative;
  max-width: 860px;
  margin: 50px auto 0;
}

.border_left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 100%;
}

.border_left--blue::before {
  background-color: #BCD8E2;
}

.border_left--yellow::before {
  background-color: #FFEB94;
}

.border--yellow {
  position: relative;
  padding: 45px 0 45px 100px;
  margin-top: 60px;
  border: 17px solid rgba(255, 226, 108, 0.75);
  border-left: none;
}

.border--yellow::before {
  content: '';
  position: absolute;
  top: -17px;
  left: 0;
  width: 17px;
  height: calc(100% + 34px);
  background: linear-gradient(#f7da36 17px, #ffe26c 17px, #ffe26c calc(100% - 17px), #f7da36 calc(100% - 17px), #f7da36);
}

.gotoTop {
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.05em;
}

.shareBorder {
  width: 700px;
  padding: 30px 0;
  font-size: 12px;
  margin: 50px auto;
  border: 1px solid #E5E5E5;
  text-align: center;
}

.shareBorder p {
  letter-spacing: 0.05em;
}

.share {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.share a {
  width: 30px;
}

.share a:nth-of-type(2) {
  margin: 0 30px;
}

.date {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.txt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 0.05em;
  padding-top: 45px;
}

.txt a.n1 {
  width: 225px;
}

.txt a.n2 {
  width: 326px;
}

.txt--4, .txt--5, .txt--9, .txt--10, .txt--11, .txt--15, .txt--16 {
  align-items: inherit;
  margin: auto;
}

.txt--4, .txt--5 {
  max-width: 584px;
}

.txt--9, .txt--10, .txt--11 {
  max-width: 508px;
}

.txt--15, .txt--16 {
  max-width: 475px;
}

.txt--17, .txt--18 {
  padding-left: 177px;
  align-items: inherit;
}

.txt--17 {
  margin-top: -338px;
}

.txt--1 {
  padding: 20px 0;
  margin: 45px 0;
}

.txt--1::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 270px);
  height: 100%;
  width: 2px;
  background-image: url(../img/img-line.png);
  background-size: cover;
}

.txt--2 {
  text-align: center;
}

.txt--4 {
  padding-top: 40px;
}

.txt--5 {
  padding-top: 35px;
}

.txt--19 {
  align-items: initial;
  padding-top: 0;
  font-size: 24.97px;
  line-height: 36px;
}

.txt--20 {
  align-items: initial;
}

.txt--21 {
  padding: 65px 0;
}

section .secInner {
  width: 96em;
  margin: 0 auto;
  background-color: #fff;
}

section.mv {
  background: linear-gradient(#F8C9BE, #B9C7C7);
  background: linear-gradient(rgba(248, 201, 190, 0.56), rgba(185, 199, 199, 0.56));
}

section.howto .imgWrap {
  max-width: 862px;
  padding-top: 60px;
}

section.howto .imgWrap.line_top_img {
  max-width: 100%;
  padding-top: 100px;
  margin-bottom: 5px;
}

section.howto .imgWrap.vol_img {
  max-width: 580px;
  padding-top: 0;
}

section.howto .imgWrap.howto1_img1 {
  padding-top: 35px;
}

section.howto .imgWrap.howto1_img2 {
  max-width: 612px;
  padding-top: 0;
}

section.howto .imgWrap.howto1_img3 {
  padding-top: 80px;
}

section.howto .imgWrap.howto2_img1 {
  max-width: 100%;
}

section.howto .imgWrap.howto2_img2 {
  max-width: 624px;
}

section.howto .imgWrap.howto2_img6 {
  max-width: 752px;
}

section.howto .imgWrap.howto2_img7 {
  max-width: 339px;
  margin: 0 0 0 -25px;
  padding: 0;
}

section.howto--1 {
  background: linear-gradient(#B9C7C7, #81BEC9, #9DC0AA);
  background: linear-gradient(rgba(185, 199, 199, 0.56), rgba(129, 190, 201, 0.56), rgba(157, 192, 170, 0.56));
}

section.howto--2 {
  background: linear-gradient(#9DC0AA, #FFE9A7);
  background: linear-gradient(rgba(157, 192, 170, 0.56), rgba(255, 233, 167, 0.56));
}

section.ftArea {
  background-color: rgba(255, 233, 167, 0.56);
  font-family: "-apple-system","Helvetica Neue","Hiragino Kaku Gothic ProN",meiryo,"M+ 1p",sans-serif;
  text-align: center;
}

section.ftArea .secInner {
  padding: 50px 0;
}

.sp,
.pc {
  display: none;
}

/*PC*/
.device-pc .pc {
  display: block;
}

.device-pc .article-navi {
  margin-top: 0;
}

/*SP*/
.device-sp .sp {
  display: block;
}

.device-sp #contents {
  padding: 0;
}

.device-sp .bg--blue {
  padding: 30px 0 25px;
}

.device-sp .txt {
  font-size: 15px;
  padding-top: 20px;
  padding-left: 16px;
  padding-right: 16px;
}

.device-sp .txt--1 {
  padding-bottom: 10px;
  margin: 0;
}

.device-sp .txt--2 {
  text-align: left;
}

.device-sp .txt--9, .device-sp .txt--10, .device-sp .txt--11, .device-sp .txt--15, .device-sp .txt--16, .device-sp .txt--21 {
  line-height: 25px;
}

.device-sp .txt--17 {
  margin-top: 0;
}

.device-sp .txt--20 {
  padding: 20px 8px 0;
  align-items: inherit;
}

.device-sp .txt--21 {
  padding-bottom: 0;
}

.device-sp .border_left {
  margin: 30px auto 0;
}

.device-sp .border_left::before {
  content: none;
}

.device-sp .border--yellow {
  margin-top: 20px;
  padding: 0 0 15px 0;
  border-left: 17px solid rgba(255, 226, 108, 0.75);
}

.device-sp .border--yellow::before {
  content: none;
}

.device-sp .shareBorder {
  width: calc(100% - 32px);
}

.device-sp .mokuji_img {
  width: calc(100% - 16px);
  transform: translateX(1%);
}

.device-sp .mokuji_img__link {
  top: 38%;
  right: 0;
  left: 0;
  margin: auto;
  width: 81%;
}

.device-sp .mokuji_img__link a:nth-of-type(2) {
  margin: 3.5% 0;
}

.device-sp section .secInner {
  width: 100%;
}

.device-sp section.howto .imgWrap {
  padding-top: 30px;
}

.device-sp section.howto .imgWrap.line_top_img {
  padding-top: 0;
}

.device-sp section.howto .imgWrap.vol_img {
  width: 82%;
  padding-top: 0;
}

.device-sp section.howto .imgWrap.howto1_img1 {
  padding-top: 15px;
}

.device-sp section.howto .imgWrap.howto1_img2 {
  width: calc(100% - 32px);
  padding-top: 0;
}

.device-sp section.howto .imgWrap.howto1_img3 {
  padding-top: 40px;
}

.device-sp section.howto .imgWrap.howto2_img2 {
  width: calc(100% - 32px);
  padding-top: 0;
}

.device-sp section.howto .imgWrap.howto2_img6 {
  width: calc(100% - 16px);
}

.device-sp section.howto .imgWrap.howto2_img7 {
  max-width: 295px;
  padding-top: 15px;
  margin: auto;
}

.device-sp section.howto--1 {
  padding-top: 0;
}

.device-sp .article-navi {
  margin-top: 0;
  padding: 0 16px;
}
