@charset "UTF-8";
/**
  * 旅色BOOK10月号 column2用CSS
  * Created on: 2026.09.17
  */
/**
 * 旅色BOOK トンマナ用CSS
 * Created on: 2019.05.29
 * Modified on: 2021.12.27 -- dart-sass対応
 */
/*--------------------------------------------------------
　BREAK POINT
--------------------------------------------------------*/
/*--------------------------------------------------------
　FONT
--------------------------------------------------------*/
/*--------------------------------------------------------
　COLOR
--------------------------------------------------------*/
/*--------------------------------------------------------
　FRAME WIDTH
--------------------------------------------------------*/
/*--------------------------------------------------------
　CSS SPRITE
--------------------------------------------------------*/
/*--------------------------------------------------------
　OTHERS
--------------------------------------------------------*/
/**
 * 旅色BOOK3月号 テーマカラー用CSS
 * Created on: 2026.02.25
 */
/*--------------------------------------------------------
　COLOR
--------------------------------------------------------*/
/*--------------------------------------------------------
　column
--------------------------------------------------------*/
body {
  background: #e2e2e4;
}

#arrows {
  display: none;
}

.main {
  margin-top: -44px;
}

.section img {
  width: 100%;
}
.section a img {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.section a img:hover {
  opacity: 0.7;
}

.line-wave {
  width: 55.5%;
  max-width: 710px;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  .line-wave {
    width: 65.5%;
  }
}
.line-wave {
  margin: 0 auto;
  text-align: center;
}

.column-first {
  position: relative;
  width: 100%;
}
.column-first .main-img {
  position: relative;
  padding-top: 44px;
  top: 0;
  z-index: 2;
  width: 100%;
}
.column-first .main-img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.column-first .main-ttl {
  position: absolute;
  left: 48.3%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  width: 42.6%;
  max-width: 545px;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  .column-first .main-ttl {
    width: 52.6%;
  }
}
.column-first .main-ttl {
  padding: 18.7% 0 0 0;
}
@media only screen and (max-width: 800px) {
  .column-first .main-ttl {
    width: 34%;
  }
}
.column-first .lead {
  width: 64.2%;
  margin: 4px auto 0;
  position: relative;
  z-index: 2;
}
.column-first .lead p {
  font-family: "Hiragino Kaku Gothic W3 JIS2004", Sans-Serif;
  font-size: 17px;
}
@media only screen and (max-width: 1024px) {
  .column-first .lead p {
    font-size: 15px;
  }
}
@media only screen and (max-width: 800px) {
  .column-first .lead p {
    font-size: 1.875vw;
  }
}
@media only screen and (max-width: 640px) {
  .column-first .lead p {
    font-size: 15px;
  }
}
.column-first .lead p {
  line-height: 1.85;
  text-align: left;
  color: #000;
  position: relative;
}
.column-first .lead .name {
  font-size: 15px;
}
@media only screen and (max-width: 1024px) {
  .column-first .lead .name {
    font-size: 13px;
  }
}
@media only screen and (max-width: 800px) {
  .column-first .lead .name {
    font-size: 1.625vw;
  }
}
@media only screen and (max-width: 640px) {
  .column-first .lead .name {
    font-size: 13px;
  }
}
.column-first .lead .name {
  line-height: 2;
  margin-top: 4.7%;
}
.column-first p.staff-credit {
  font-family: "Hiragino Kaku Gothic W3 JIS2004", Sans-Serif;
  font-size: 14px;
}
@media only screen and (max-width: 1024px) {
  .column-first p.staff-credit {
    font-size: 12px;
  }
}
@media only screen and (max-width: 800px) {
  .column-first p.staff-credit {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 640px) {
  .column-first p.staff-credit {
    font-size: 12px;
  }
}
.column-first p.staff-credit {
  text-align: center;
  display: block;
  margin-top: 28px;
}
.column-article {
  padding-bottom: 12%;
}
.column-article .sec-block-inner {
  position: relative;
  z-index: 2;
  padding: 8.6% 0;
}
@media only screen and (max-width: 800px) {
  .column-article .sec-block-inner {
    padding: 80px 0;
  }
}
.column-article .sec-block-inner .sec-ttl {
  position: relative;
  margin: 0 auto;
}
.column-article .sec-block-inner .sec-block-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
.column-article .sec-block-inner .sec-block-flex.item-btm {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.column-article .sec-block-inner .sec-block-flex.item-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.column-article .sec-block-inner .sec-block-flex.item-sb {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.column-article .sec-block-inner .sec-block-txt {
  width: 47.4%;
}
.column-article .sec-block-inner .sec-ttl-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
.column-article .sec-block-inner .mainimg-wrap,
.column-article .sec-block-inner .mainimg {
  position: relative;
  width: 100%;
}
.column-article .sec-block-inner .mainimg-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 8px;
}
.column-article .sec-block-inner figcaption {
  font-family: "Hiragino Kaku Gothic W3 JIS2004", Sans-Serif;
  font-size: 14px;
}
@media only screen and (max-width: 1024px) {
  .column-article .sec-block-inner figcaption {
    font-size: 12px;
  }
}
@media only screen and (max-width: 800px) {
  .column-article .sec-block-inner figcaption {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 640px) {
  .column-article .sec-block-inner figcaption {
    font-size: 12px;
  }
}
.column-article .sec-block-inner figcaption {
  line-height: 1.3333333333;
  margin-top: 0;
}
.column-article .sec-block-inner .txt-box {
  position: relative;
}
@media only screen and (max-width: 800px) {
  .column-article .sec-block-inner .txt-box {
    width: 90%;
  }
}
.column-article .sec-block-inner .txt-box > p {
  font-family: "Hiragino Kaku Gothic W3 JIS2004", Sans-Serif;
  font-size: 17px;
}
@media only screen and (max-width: 1024px) {
  .column-article .sec-block-inner .txt-box > p {
    font-size: 15px;
  }
}
@media only screen and (max-width: 800px) {
  .column-article .sec-block-inner .txt-box > p {
    font-size: 1.875vw;
  }
}
@media only screen and (max-width: 640px) {
  .column-article .sec-block-inner .txt-box > p {
    font-size: 15px;
  }
}
.column-article .sec-block-inner .txt-box > p {
  line-height: 1.8666666667;
  text-align: justify;
  text-justify: inter-ideograph;
  line-break: strict;
}
.column-article .sec-block {
  position: relative;
  width: 83%;
  max-width: 1062px;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  .column-article .sec-block {
    width: 93%;
  }
}
.column-article .sec-block.sec01 .sec-block-inner {
  width: 100%;
  padding: 8.6% 0 0;
}
.column-article .sec-block.sec01 .sec-ttl {
  width: 66%;
  margin-bottom: 0;
  top: 14px;
}
.column-article .sec-block.sec01 .sec-ttl-img {
  width: 71%;
  margin: 1% auto 6.3%;
}
.column-article .sec-block.sec01 .sec-block-txt {
  margin: 0 auto;
  width: 77%;
}
.column-article .sec-block.sec01 .mainimg {
  width: 97%;
  margin: 7.6% auto 0;
}
.column-article .sec-block.sec02 .sec-block-inner {
  width: 100%;
  padding: 3.9% 0;
}
.column-article .sec-block.sec02 .sec-ttl {
  width: 97%;
  margin-bottom: 2.5%;
}
.column-article .sec-block.sec02 .sec-ttl-img {
  width: 100%;
  margin: 4% auto 3%;
}
.column-article .sec-block.sec02 .sec-block-txt {
  margin: 0 auto;
  width: 77%;
}
.column-article .sec-block.sec03 .sec-block-inner {
  width: 100%;
  padding: 5.6% 0 0;
}
.column-article .sec-block.sec03 .sec-ttl {
  width: 97%;
  margin-bottom: 3.5%;
}
.column-article .sec-block.sec03 .sec-ttl-img {
  width: 100%;
  margin: 4% auto 3%;
}
.column-article .sec-block.sec03 .sec-block-txt {
  margin: 0 auto;
  width: 78%;
}
.column-article .sec-block.sec04 p.sec-block-inner {
  width: 100%;
  padding-bottom: 0;
}
.column-article .sec-block.sec04 .sec-ttl {
  width: 66%;
  margin-bottom: 0;
}
.column-article .sec-block.sec04 .sec-ttl-img {
  width: 64%;
  margin: 2% auto 5.9%;
}
.column-article .sec-block.sec04 .sec-block-txt {
  margin: 0 auto 7%;
  width: 77%;
}
.column-article .sec-block.sec04 .mainimg {
  position: relative;
  width: 81%;
  margin: 0 auto;
}
.column-article .sec-block.sec05 {
  position: relative;
}
.column-article .sec-block.sec05::after {
  content: "";
  position: absolute;
  top: 57.7%;
  left: -26.8%;
  width: 60.2%;
  aspect-ratio: 920/594;
  background: url(/book/monthly/202610/images/column2/info-img.png) no-repeat center/contain;
}
@media (min-width: 1280px) {
  .column-article .sec-block.sec05::after {
    top: 64.7%;
    left: -16.8%;
    width: 50.2%;
  }
}
.column-article .sec-block.sec05 .sec-block-inner {
  width: 100%;
  padding: 0.8% 0;
}
.column-article .sec-block.sec05 .sec-ttl {
  width: 96.5%;
  margin-bottom: 1.4%;
}
.column-article .sec-block.sec05 .sec-ttl-img {
  width: 100%;
  margin: 4% auto 3%;
}
.column-article .sec-block.sec05 .sec-block-txt {
  margin: 0 12% 0 auto;
  width: 50.3%;
}
.column-article .sec-block.sec06 .sec-block-inner {
  width: 100%;
  padding: 11.9% 0 15.3%;
}
.column-article .sec-block.sec06 .sec-ttl {
  width: 66%;
}
.column-article .sec-block.sec06 .sec-ttl-img {
  width: 96%;
  margin: -1% auto 1%;
}
.column-article .sec-block.sec06 .sec-block-txt {
  margin: 0 auto;
  width: 77%;
}
.column-article .sec-block .mainimg {
  width: 56%;
  margin: 7.7% auto;
}
.column-article .sec-info {
  max-width: none;
  width: 100%;
  margin-top: -4.6%;
}
.column-article .sec-info-inner {
  width: 100%;
  position: relative;
  margin-top: 1%;
  padding: 5.1% 0 8%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
}
.column-article .sec-info-inner::before {
  content: "";
  position: absolute;
  top: -11%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 43.3%;
  height: 37.5%;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
}
.column-article .sec-info-inner::after {
  content: "";
  position: absolute;
  top: -2%;
  left: 49.8%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 8.1%;
  height: 8.9%;
  background-image: url(/book/monthly/202610/images/column2/info_deco.svg);
  background-repeat: no-repeat;
}
.column-article .sec-info-ttl {
  position: relative;
  width: 35.8%;
  margin: 2.3% auto 2.7%;
}
.column-article .sec-info-txt {
  font-family: "Hiragino Kaku Gothic W3 JIS2004", Sans-Serif;
  font-size: 17px;
}
@media only screen and (max-width: 1024px) {
  .column-article .sec-info-txt {
    font-size: 15px;
  }
}
@media only screen and (max-width: 800px) {
  .column-article .sec-info-txt {
    font-size: 1.875vw;
  }
}
@media only screen and (max-width: 640px) {
  .column-article .sec-info-txt {
    font-size: 15px;
  }
}
.column-article .sec-info-txt {
  line-height: 1.8666666667;
  padding: 0 2%;
  width: 64.9%;
  margin: 0 auto 3.5%;
}
.column-article .sec-info-link {
  width: 47%;
  margin: 0 auto;
}
.column-article .sec-info-link a {
  display: block;
}
.column-article .sec-info-img {
  width: 78.7%;
  margin: -5.7% auto;
  position: relative;
  z-index: 3;
}
.column-article .sec-info .sec-block-inner {
  padding: 7% 0 3%;
}
.column-article .sec-info .info-img01 {
  width: 83.33%;
  margin-left: 5.6%;
  margin-right: auto;
}
.column-article .sec-info .info-img02 {
  width: 80.7%;
  margin-right: 5.6%;
  margin-left: 13.7%;
  margin-top: -78px;
  margin-bottom: 50px;
}
.column-article .sec-info .info-img03 {
  width: 72.1%;
  margin: 40px auto 0;
}

#footer {
  position: relative;
  background: #FFFFFF;
  padding-top: 70px;
}

/*--------------------------------------------------------
　SCROLL ANIMATION
--------------------------------------------------------*/
.is-anm,
.load-anm {
  opacity: 0;
  -webkit-transition: opacity 0.8s ease-in-out, all 0.8s ease;
  transition: opacity 0.8s ease-in-out, all 0.8s ease;
}
.is-anm.is-done,
.load-anm.is-done {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.fade-up {
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
}

.fade-down {
  -webkit-transform: translate(0, -30px);
          transform: translate(0, -30px);
}

.fade-left {
  -webkit-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
}

.fade-right {
  -webkit-transform: translate(20px, 0);
          transform: translate(20px, 0);
}

.fade-scale {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: all 0.8s cubic-bezier(0.65, -0.55, 0.265, 1.55);
  transition: all 0.8s cubic-bezier(0.65, -0.55, 0.265, 1.55);
}
.fade-scale.is-done {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.delay-003 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.delay-01 {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

.delay-02 {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}/*# sourceMappingURL=column2.css.map */