@charset "UTF-8";
/* CSS Document */
/*
Theme Name:atorie1/f
Description:wordpressオリジナルテーマ
*/
.section-top {
  position: relative;
  overflow: hidden;
  background-color: #f8ecba;
}
.top-bg {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  height: 100%;
  padding-top: 26px;
}
.box {
  opacity: 0;
  width: 100%;
}
.owl {
  width: 70%;
  margin: 0px auto;
  transform-origin: center bottom;
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards, yurayura 2s ease-out 1s infinite;
}
.chibi {
  width: 45%;
  position: relative;
  z-index: 1;
  margin: -15% 15% 0% auto;
  transform-origin: center bottom;
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s 1 forwards, yurayura 2s ease-out 1s infinite;
}
.chibi-img {
  transform: rotate(-20deg);
}
.tomodachi {
  width: 55%;
  margin: -30% auto 0 24px;
  transform-origin: center bottom;
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1s 1 forwards, yurayura 2s ease-out 1s infinite;
}
.tomodachi-img {
  transform: rotate(-20deg);
}
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes yurayura {
  0%, 100% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(3deg);
  }
  66% {
    transform: rotate(-3deg);
  }
}
@media(min-width:960px) {
  .top-bg {
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
    padding: 0;
    height: 90vmin;
  }
  .section-top_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90vh;
  }
  .owl {
    width: 660px;
    order: 1;
    position: relative;
    z-index: 11;
  }
  .chibi {
    width: 560px;
    margin: 0px;
    order: 2;
    position: relative;
    right: 8%;
    z-index: 10;
  }
  .chibi-img {
    transform: rotate(360deg);
  }
  .tomodachi {
    width: 560px;
    margin: 0px;
    position: relative;
    left: 5%;
    z-index: 10;
  }
  .tomodachi-img {
    transform: rotate(360deg);
  }
}
.section-top2 {
  overflow: hidden;
}
.top2-bg {
  background-image: url("image/about/bg-texturemobile.png");
  padding-bottom: 80px;
  position: relative;
}
.top2-bg:before {
  content: "";
  background-image: url("image/SVG/top-nami-mobile.png");
  padding-bottom: 12%;
  width: 100vw;
  background-size: cover;
  position: absolute;
  top: 0;
}
.top2-bg:after {
  position: absolute;
  bottom: -1px;
  content: "";
  display: block;
  background-image: url("image/SVG/nami-garally-mibile.png");
  padding-bottom: 18%;
  background-size: cover;
  width: 100%;
}
.section-top2_inner {
  padding: 25% 24px 0;
  max-width: 600px;
  margin: 0 auto;
}
@media(min-width:960px) {
  .top2-bg {
    background-image: url("image/about/bg-texture.png");
  }
  .top2-bg:before {
    background-image: url("image/SVG/top-nami.svg");
    padding-bottom: 10%;
    top: -11px;
    left: -100px;
  }
  .top2-bg:after {
    background-image: url("image/SVG/nami-gallary.png");
    padding-bottom: 12%;
    bottom: -3px;
  }
}
.section-about {
  margin: 0 auto;
}
.about-title {
  position: relative;
  margin-top: 60px;
  width: 256px;
  height: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-family: ab-tsubaki, sans-serif;
  font-size: 2.0rem;
  z-index: 1;
  padding-top: 10px;
}
.about-title span {
  font-size: 3.6rem;
}
.about-title:after {
  position: absolute;
  background-color: #ecb317;
  content: "";
  display: block;
  height: 60px;
  width: 256px;
  border-radius: 20px;
  top: -6px;
  left: 5px;
  z-index: -10
}
.about-title:before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 256px;
  border-radius: 20px;
  z-index: -1;
  border: dotted;
  border-color: #876b2d;
  border-width: 6px;
  top: 0px;
  left: 0px;
}
.about-p_bg {
  width: 100%;
  max-width: 600px;
  padding: 80px 30px 60px;
  background-color: #fcf8ed;
  border-radius: 30px;
  border: solid;
  border-color: #6d6006;
  margin-top: -20px;
  margin-bottom: 30px;
}
.about-p_bg p {
  vertical-align: 3.6rem;
}
.p-blank {
  display: block;
  height: 3.6rem;
}
.lamp-img {
  height: 240px;
  width: 160px;
  background: url("image/about/lanp.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
}
.stones-img {
  display: flex;
  justify-content: space-between;
}
.stone1 {
  width: 82px;
  height: 60px;
  background: url("image/about/stone1.gif");
  background-size: contain;
}
.stone2 {
  width: 50px;
  height: 60px;
  background: url("image/about/stone2.gif");
  background-size: contain;
}
.stone3 {
  width: 73px;
  height: 78px;
  background: url("image/about/stone6.gif");
  background-size: contain;
  background-repeat: no-repeat;
}
.stone4 {
  display: none;
}
.stones-anime {
  animation: 3s linear infinite rotation1;
}
@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.section-img {
  margin-bottom: 60px;
}
@media(min-width:1400px) {
  .section-top2_inner {
    padding: 15% 64px 0;
    max-width: 1340px;
  }
  .section-about {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-end;
    margin-top: -220px;
    margin-bottom: 150px;
  }
  .about-p-wrapper {
    position: relative;
    flex: 1;
  }
  .section-img {
    flex: 1;
    margin-bottom: 20px;
  }
  .about-title {
    writing-mode: vertical-rl;
    width: 76px;
    height: 330px;
    font-size: 2.4rem;
    top: 204px;
    left: 480px;
    padding: 0 25px 0 0;
  }
  .about-title span {
    font-size: 4.8rem;
  }
  .about-title:after {
    height: 330px;
    width: 76px;
    border-radius: 28px;
  }
  .about-title:before {
    height: 330px;
    width: 76px;
    border-radius: 28px;
  }
  .stone4 {
    display: block;
    width: 82px;
    height: 60px;
    background: url("image/about/stone1.gif");
    background-size: contain;
  }
  .stone5 {
    width: 82px;
    height: 60px;
    background: url("image/about/stone1.gif");
    background-size: contain;
    margin: 20px;
  }
  .stone6 {
    width: 50px;
    height: 60px;
    background: url("image/about/stone2.gif");
    background-size: contain;
    margin: 10px;
  }
  .about-p_bg {
    width: 580px;
    max-height: 522px;
    padding-left: 50px;
    background-color: #fcf8ed;
    border-radius: 80px;
    margin-top: -20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .about-p_bg p {
    writing-mode: vertical-rl;
    padding: 10px;
    line-height: 3.6rem;
  }
  .lamp-img {
    height: 415px;
    width: 340px;
    margin-left: 20%;
    margin-bottom: 30px;
  }
}
.profile-title {
  position: relative;
  width: 174px;
  height: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-family: ab-tsubaki, sans-serif;
  font-size: 2.0rem;
  z-index: 1;
  padding-top: 10px;
}
.profile-title span {
  font-size: 3.6rem;
}
.profile-title:after {
  position: absolute;
  background-color: #ecb317;
  content: "";
  display: block;
  height: 60px;
  width: 174px;
  border-radius: 20px;
  top: -6px;
  left: 5px;
  z-index: -10
}
.profile-title:before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 174px;
  border-radius: 20px;
  z-index: -1;
  border: dotted;
  border-color: #876b2d;
  border-width: 6px;
  top: 0px;
  left: 0px;
}
.profile-p_bg {
  width: 100%;
  max-width: 600px;
  padding: 80px 30px 60px;
  background-color: #fcf8ed;
  border-radius: 30px;
  border: solid;
  border-color: #6d6006;
  margin-top: -20px;
  margin-bottom: 60px;
}
.profile-p_bg span {
  font-weight: 600;
}
.section-profile {
  margin: 0 auto;
}
.bx-wrapper {
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}
.bx-viewport {
  max-width: 600px;
  margin: 0 auto;
  overflow: inherit;
  padding: 0 24px;
  margin-bottom: 60px;
}
.gallery-bg {
  position: relative;
  background-color: #3b3531;
  margin: 0 auto;
  padding: 60px 24px;
}
.wave {
  position: relative;
}
.custom-shape {
  position: absolute;
  bottom: -34px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.custom-shape svg {
  position: relative;
  display: block;
  width: calc(146% + 1.3px);
  height: 35px;
}
.custom-shape .shape-fill {
  fill: #3B3531;
}
@media(min-width:1400px) {
  .section-profile {
    display: flex;
    align-items: center;
  }
  .plofile-wrapper {
    flex: 1
  }
  .bx-wrapper {
    flex: 2;
  }
  .profile-title {
    width: 76px;
    height: 245px;
    font-size: 2.4rem;
    writing-mode: vertical-rl;
    top: 140px;
    left: 440px;
    padding: 0 25px 0 0;
  }
  .profile-title span {
    font-size: 4.8rem;
  }
  .profile-p_bg {
    writing-mode: vertical-rl;
    padding: 10px;
    line-height: 3.6rem;
  }
  .profile-title:after {
    height: 245px;
    width: 76px;
    border-radius: 28px;
    top: -6px;
    left: 5px;
    z-index: -10
  }
  .profile-title:before {
    height: 245px;
    width: 76px;
    border-radius: 28px;
  }
  .profile-p_bg {
    width: 560px;
    height: 531px;
    border-radius: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 60px;
    padding-right: 160px;
  }
  .section-profile {
    margin: 0 0 150px;
  }
  .bx-wrapper {
    margin-bottom: 0px !important;
  }
  .bx-viewport {
    margin-bottom: 0px;
  }
}
.section-gallery {
  position: relative;
}
.gallery-inner {
  max-width: 600px;
  margin: 0 auto;
}
.gallery-title {
  color: #fff;
  font-family: ab-tsubaki, sans-serif;
  font-size: 2.0rem;
  border: dotted 6px;
  border-color: #ecb317;
  height: 60px;
  width: 256px;
  border-radius: 20px;
  text-align: center;
  padding-top: 7px;
  margin: 0 auto 30px;
}
.gallery-title span {
  font-size: 3.6rem;
}
.section-gallery p {
  color: #fff;
  text-align: center;
  padding-top: 20px;
}
.gallery-img {
  width: 100%;
  height: content-fit;
  margin: 30px 0;
}
.story-post {
  color: #fff;
  margin-bottom: 30px;
  text-align: center;
}
.new {
  color: #e8c566;
}
.story-post time {
  font-size: 10px;
}
.story-post a {
  color: #fff;
  text-decoration: none;
}
.story-post h1 {
  font-weight: 600;
  border-bottom: #ecb317 dotted 6px;
  margin: 0 auto;
  padding: 10px;
  width: 223px;
  font-size: 24px;
}
@media(min-width:1400px) {
  .gallery-img {
    width: 80%;
    margin-top: 50px;
    height: content-fit;
  }
  .gallery-p-wrapper {
    display: flex;
    writing-mode: vertical-rl;
    flex-direction: row;
  }
  .gallery-title {
    font-size: 2.4rem;
    height: 376px;
    width: 94px;
    border-radius: 28px;
    padding: 30px;
    margin: 0;
  }
  .gallery-title span {
    font-size: 4.8rem;
  }
  .gallery-p-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
  }
  .gallery-p-flex br {
    display: none;
  }
  .gallery-flex {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .gallery-inner {
    max-width: 960px;
  }
}
.lake-img {
  width: 100%;
  padding-bottom: 44.35%;
  position: relative;
}
.lake-img:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: url("image/gallery/mauntain.jpeg");
  background-size: cover;
}
.section-blog {
  position: relative;
  background: #e8c566;
  padding: 60px 24px;
}
.blog-inner {
  max-width: 600px;
  margin: 0 auto;
}
.blog-title {
  position: relative;
  margin-top: 60px;
  width: 146px;
  height: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-family: ab-tsubaki, sans-serif;
  font-size: 2.0rem;
  z-index: 1;
  padding-top: 10px;
}
.blog-title span {
  font-size: 3.6rem;
}
.blog-title:after {
  position: absolute;
  background-color: #e9e6dd;
  content: "";
  display: block;
  height: 60px;
  width: 146px;
  border-radius: 20px;
  top: -6px;
  left: 5px;
  z-index: -10
}
.blog-title:before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 146px;
  border-radius: 20px;
  z-index: -1;
  border: dotted;
  border-color: #876b2d;
  border-width: 6px;
  top: 0px;
  left: 0px;
}
.blog-box {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 20px;
  border: solid #876b2d;
  overflow: hidden;
  margin: 60px auto;
}
.blog-box a {
  text-decoration: none;
  color: #333;
}
.wp-post-image-bg {
  text-align: center;
  margin-bottom: 20px;
}
.blog-box-inner {
  padding: 20px;
}
.blog-box-inner p {
  padding-top: 20px;
}
.page-navigation {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
@media(min-width:1400px) {
  .blog-inner {
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
  }
  .blog-title {
    writing-mode: vertical-rl;
    width: 76px;
    height: 230px;
    text-align: center;
    font-size: 2.4rem;
    padding: 0 25px 0 0;
  }
  .blog-title span {
    font-size: 4.8rem;
  }
  .blog-title:after {
    height: 230px;
    width: 76px;
    border-radius: 28px;
  }
  .blog-title:before {
    height: 230px;
    width: 76px;
    border-radius: 28px;
  }
  .blog-box {
    display: flex;
    flex-direction: row;
    border-radius: 36px;
  }
  .blog-box-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .wp-post-image-bg {
    width: 340px;
    margin-bottom: 0;
  }
  .wp-post-image-bg img {
    width: 100%;
  }
  .blog-p-wrapper {
    width: 70%;
    padding-left: 20px;
  }
  .blog-box-inner h4 {
    display: inline-block;
    margin-right: 1.6rem;
  }
  .blog-flex-wrapper {
    flex: 0.9;
    margin-top: 80px;
  }
}
/*ボタン設定*/
.button {
  text-align: center;
}
.btn, a.btn, button.btn, .wpcf7-submit {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn-malformation, .wpcf7-submit {
  padding: 3rem 5rem;
  border-radius: 100% 80px / 80px 100%;
  background-color: #d76a3a;
  border: solid #876b2d;
}
a.btn-malformation:hover {
  color: #fff;
  border-radius: 60% 80% / 100% 80%;
}
.wpcf7-submit:hover {
  color: #fff;
  border-radius: 60% 80% / 100% 80%;
}
.zigzag {
  position: absolute;
  left: 0;
  bottom: -55px;
  width: 100%;
  height: 60px;
  background-image: url("image/blog/zigzag-img.png");
  background-repeat: repeat-x;
  background-size: contain;
}
@media(min-width:1400px) {
  .instagram-button {
    text-align: start;
  }
  .blog-button {
    text-align: end;
  }
  .zigzag {
    height: 150px;
    bottom: -135px;
  }
}
.section-instagram {
  padding: 10% 24px 60px;
  background-color: #f0dfb8
}
.instagram-inner {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 50px;
}
.instagram-title {
  position: relative;
  width: 185px;
  height: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-family: ab-tsubaki, sans-serif;
  font-size: 2.0rem;
  z-index: 1;
  padding-top: 10px;
}
.instagram-title span {
  font-size: 3.6rem;
}
.instagram-title:after {
  position: absolute;
  background-color: #ecb317;
  content: "";
  display: block;
  height: 60px;
  width: 185px;
  border-radius: 20px;
  top: -6px;
  left: 5px;
  z-index: -10
}
.instagram-title:before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 185px;
  border-radius: 20px;
  z-index: -1;
  border: dotted;
  border-color: #876b2d;
  border-width: 6px;
  top: 0px;
  left: 0px;
}
.instagram-photo {
  width: 100%;
  max-width: 600px;
  margin: 60px auto;
}
.instagram__chibi-img {
  position: relative;
  width: 151px;
  height: 223px;
  background-image: url("image/instagram/chibikko.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 60px auto 0;
}
.instagram__chibi-img:after {
  display: block;
  content: "";
  width: 40%;
  height: 50px;
  background-image: url("image/instagram/stone5.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  top: 160px;
  left: 110px;
  animation: 3s linear infinite rotation1;
}
@media(min-width:1400px) {
  .instagram-title {
    writing-mode: vertical-rl;
    width: 78px;
    height: 252px;
    font-size: 2.4rem;
    padding: 0 25px 0 0;
  }
  .instagram-title span {
    font-size: 4.8rem;
  }
  .instagram-title:after {
    height: 252px;
    width: 78px;
    border-radius: 28px;
  }
  .instagram-title:before {
    height: 252px;
    width: 78px;
    border-radius: 28px;
  }
  .instagram-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
  }
  .instagram-button {
    justify-content: flex-start;
  }
  .instagram-button a {
    margin-left: 130px;
  }
  .instagram-flex-wrapper {
    display: flex;
    flex-direction: row-reverse;
  }
  .instagram__chibi-img {
    position: absolute;
    top: 500px;
    right: 0;
  }
}
.section-contact {
  position: relative;
  background: #e8c566;
  padding: 60px 24px;
}
.contact-inner {
  max-width: 600px;
  margin: 0 auto;
}
.contact-title {
  position: relative;
  margin-top: 60px;
  width: 170px;
  height: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-family: ab-tsubaki, sans-serif;
  font-size: 2.0rem;
  z-index: 1;
  padding-top: 10px;
  margin-bottom: 40px;
}
.contact-title span {
  font-size: 3.6rem;
}
.contact-title:after {
  position: absolute;
  background-color: #e9e6dd;
  content: "";
  display: block;
  height: 60px;
  width: 170px;
  border-radius: 20px;
  top: -6px;
  left: 5px;
  z-index: -10
}
.contact-title:before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 170px;
  border-radius: 20px;
  z-index: -1;
  border: dotted;
  border-color: #876b2d;
  border-width: 6px;
  top: 0px;
  left: 0px;
}
@media(min-width:1400px) {
  .contact-inner {
    max-width: 1000px;
    margin: 200px auto 60px;
  }
  .contact-flex-wrapper {
    display: flex;
    justify-content: center;
  }
  .contact-title {
    writing-mode: vertical-rl;
    width: 76px;
    height: 230px;
    text-align: center;
    font-size: 2.4rem;
    padding: 0 25px 0 0;
    margin-top: 0px;
    margin-right: 100px;
  }
  .contact-title span {
    font-size: 4.8rem;
  }
  .contact-title:after {
    height: 230px;
    width: 76px;
    border-radius: 28px;
  }
  .contact-title:before {
    height: 230px;
    width: 76px;
    border-radius: 28px;
  }
}
.btn-submit {
  margin-top: 40px;
}
@media(min-width:1400px) {
  .btn-submit {
    display: flex;
    justify-content: flex-end;
  }
}
/*single.phpのページナビゲーション用*/
.single_page-navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.single_page-navigation a {
  color: #333;
  font-weight: 600;
}
/*single-storyのcss*/
.section-story2 {
  padding: 60px 14px 100px;
  background-color: #dfb339;
  position: relative;
}
.story-inner2 {
  max-width: 600px;
  margin: 0 auto;
}
.story-p2 {
  max-width: 475px;
  margin: 0 auto;
}
/*single-storyのタイトル*/
.section-story_title2 {
  margin-top: 100px;
}
.section-story2 h1 {
  color: #333;
  position: relative;
  margin: 0 auto 35px;
  width: 230px;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  z-index: 1;
  padding-top: 10px;
}
.section-story2 span {
  font-size: 3.6rem;
}
.section-story2 h1:after {
  position: absolute;
  background-color: #e9d6aa;
  content: "";
  display: block;
  height: 60px;
  width: 230px;
  border-radius: 20px;
  top: -6px;
  left: 5px;
  z-index: -10
}
.section-story2 h1:before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 230px;
  border-radius: 20px;
  z-index: -1;
  border: dotted;
  border-color: #876b2d;
  border-width: 6px;
  top: 0px;
  left: 0px;
}
.content2 {
  background-image: url("../atorie1f/image/tomodachi-gallery/story-bg-pic-mobile.png");
  background-size: cover;
  width: 100%;
  padding: 60px 20px;
  position: relative;
  margin-bottom: 60px;
}
.story-wrapper2 {
  max-width: 375px;
  margin: 0 auto;
}
.content2 h4 {
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-size: 2.0rem;
  color: #3a4634;
  text-align: center;
  margin-bottom: 10px;
}
.content2 h5 {
  font-family: fot-tsukubrdgothic-std, sans-serif;
  color: #3a4634;
  text-align: center;
  margin-bottom: 30px;
}
.story-p-wrapper {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.section-story2 p {
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.section-story2 p:last-child {
  margin-bottom: 0px;
}
.story_pic2 {
  width: 90%;
  margin: 0 auto;
  max-width: 400px;
}
.story_pic2 img {
  width: 100%;
}
.category-box {
  padding: 30px 10px;
  position: sticky;
  height: fit-content;
  top: 150px;
  font-family: fot-tsukubrdgothic-std, sans-serif;
  text-align: center;
  width: 100%;
  background: #e9d6aa;
  border-radius: 30px;
  border: 1px solid;
}
.category-box h2 {
  margin-bottom: 20px;
  font-family: ab-tsubaki, sans-serif;
}
.taxonomy-list {
  list-style: none;
  line-height: 3.6rem;
  font-weight: 600;
}
.taxonomy-list a {
  text-decoration: none;
  color: #003333;
  border-bottom: 3px dotted;
}
.taxonomy-button {
  padding-top: 30px;
}
.taxonomy-button a {
  padding: 30px 10px;
  width: 170px;
}
.taxonomy a {
  color: #003333;
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-weight: 600;
  margin-bottom: 1.6rem;
}
@media(min-width:960px) {
  .section-story2 {
    padding-top: 0;
    padding-bottom: 220px;
  }
  .story-flex2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .taxonomy-story-titlefixd {
    height: 600px;
    position: sticky;
    top: 0;
    right: 0;
    padding-top: 135px;
  }
  .taxonomy-story-titlefixd p {
    writing-mode: vertical-rl;
    height: 400px;
    padding-bottom: 110px;
  }
  .section-story2 h1 {
    writing-mode: vertical-rl;
    width: 60px;
    height: 230px;
    padding: 0 15px;
  }
  .section-story2 span {
    font-size: 3.6rem;
  }
  .section-story2 h1:after {
    height: 230px;
    width: 60px;
  }
  .section-story2 h1:before {
    height: 230px;
    width: 60px;
  }
  .story-inner2 {
    max-width: 900px;
  }
  .story-content-wrapper2 {
    position: relative;
    top: 150px;
  }
  .category-box {
    width: 240px;
  }
}
.video-section{
  text-align: center
}
.video {
  display: block;
  margin: 40px auto;
}