@charset "UTF-8";

@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/NotoSerifJP/NotoSerifJP-Black") format("woff2"), url("../fonts/NotoSerifJP/NotoSerifJP-Black.woff") format("woff");
}

@font-face {
  font-family: "ZenOldMincho";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-Bold.ttf") format("ttf");
}

@font-face {
  font-family: "ZenOldMincho";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-Black.ttf") format("ttf");
}

.fade, .fadein, .fadein-down, .fadein-left, .fadein-right, .fadein-top, .fadein-top-sub {
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.fade {
  transform: translate(0, 0px);
}

.fadein-top {
  transform: translate(0, 50px);
  animation: top 1s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

.fadein-top-sub {
  transform: translate(0, 50px);
  animation: top 2s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

.fadein {
  transform: translate(0, 50px);
}

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

.fadein-left {
  transform: translate(-50px, 0);
}

.fadein-right {
  transform: translate(50px, 0);
}

.fade.scrollin, .fadein.scrollin, .fadein-down.scrollin, .fadein-left.scrollin, .fadein-right.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.trans-d-s {
  transition-delay: 0.5s;
}

.trans-d-m {
  transition-delay: 1s;
}

.trans-d-l {
  transition-delay: 1.5s;
}

.trans-d-02 {
  transition-delay: 0.2s;
}

.trans-d-04 {
  transition-delay: 0.4s;
}

.trans-d-06 {
  transition-delay: 0.6s;
}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap.scrollin::before {
  animation: img-wrap 4s cubic-bezier(0.6, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

@keyframes top {
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* キャンバス（グラフ）自体のスタイル */
canvas {
  flex: 1 0 48%;
  max-width: 100%;
  height: 50vh;
  margin-bottom: 20px;
}

.fbox {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}

.fb-center {
  justify-content: center;
}

.fb-between {
  justify-content: space-between;
}

.kodawari-page-ttl {
  background: #bca475;
  padding: 20px 0;
  text-align: center;
  color: #fff;
}

#kodawari {
  font-family: "NotoSerifJP", serif;
}

.kodawari-page-ttl img {
  width: 348px;
  margin-bottom: 15px;
}

.kodawari-page-ttl h1 {
  font-size: 17px;
  font-weight: 700;
  font-family: "Zen Old Mincho", serif;
}

#main {
  background: linear-gradient(to bottom, #ffffff 40%, #ffffff 40%, #d81829 40%, #d81829 100%);
  padding-bottom: 10px;
}

.main-img {
  background: url(../img/kodawari/new/main.png);
  padding: 170px 100px;
  text-align: center;
  background-size: 100%;
}

.main-img h2 {
  font-size: 70px;
  color: #d81829;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.main-img h2 .num {
  font-size: 108px;
}

.main-img h2 .tx {
  font-size: 32px;
  letter-spacing: 0;
}

.main-img p {
  font-size: 20px;
  line-height: 1.8;
  font-weight: bold;
}

.ranking {
  color: #fff;
  margin: 50px 0;
}

.ranking {
  align-items: center;
}

.ranking .img {
  width: 20%;
  font-size: 12px;
  text-align: center;
}

.ranking .img img {
  margin-bottom: -15px;
}

@media screen and (max-width: 750px) {
  .ranking .img img {
    width: calc(158/ 390 * 100vw);
  }
}

.ranking .tx {
  width: 75%;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  position: relative;
}

.ranking .tx span {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 18px;
}

.main-bottom {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#merit {
  margin: 80px 0 0;
}

.merit-tit-area {
  text-align: center;
  margin-bottom: 100px;
}

.merit-tit-area h2 {
  text-align: center;
  font-size: 28px;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

.merit-tit-area p {
  text-align: center;
  font-size: 18px;
  line-height: 2;
}

.merit-content {
  position: relative;
  margin-bottom: 100px;
}

.merit-content h3 {
  color: #d81829;
  font-size: 56px;
  line-height: 1.5;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.merit-content p {
  font-size: 16px;
  line-height: 2;
}

.merit-content .obi {
  background: #bca475;
  color: #fff;
  font-size: 13px;
  padding: 20px;
  margin-top: 30px;
}

.merit-content .obi h4 {
  background: #bca475;
  color: #fff;
  font-size: 29px;
  margin-bottom: 15px;
}

.graf-rc {
  width: 48%;
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1/1;
}

.merit-kouzo {
  margin-bottom: 0;
}

.merit-kouzo h3 {
  text-align: center;
}

.merit-kouzo p {
  margin-bottom: 30px;
}

.merit-kouzo h4 {
  background: #bca475;
  color: #fff;
  font-size: 24px;
  padding: 20px;
  margin: 50px 0;
  text-align: center;
  position: relative;
}

.merit-kouzo h4::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: #bca475;
  position: absolute;
  left: 0;
  top: -5px;
}

.merit-kouzo h4::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: #bca475;
  position: absolute;
  left: 0;
  bottom: -5px;
}

.merit-kouzo .item {
  width: 45%;
}

.point-area {
  margin-top: 150px;
}

.point-tit-area {
  text-align: center;
  margin-bottom: 140px;
}

.point-tit-area .tit-en {
  font-size: 62px;
  margin-bottom: 30px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
}

.point-tit-area .tit-en span {
  color: #d81829;
}

.point-tit-area h3 {
  font-size: 28px;
}


.point-main .tit-area {
  position: relative;
  margin-bottom: 30px;

}

.point-main .tit-area .bg-num {
  font-size: 291px;
  position: absolute;
  left: -160px;
  color: rgba(215, 24, 41, 0.15);
  line-height: 0;
  top: 20px;
  font-weight: bold;
}

.point-main .tit-area h3 {
  font-size: 62px;
  line-height: 1;
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
}

.point-main .tit-area h3 .tate {
  font-size: 14px;
  transform: rotate(90deg);
  display: inline-block;
  color: #d81829;
  position: relative;
  top: 2px;
}

.point-main .tit-area h3 .num {
  font-size: 65px;
  color: #d81829;
  margin-right: 10px;
  position: relative;
  top: 4px;
}

.point-main .tit-area h3::before {
  content: "";
  display: block;
  height: 55px;
  width: 6px;
  background: #d81829;
  position: absolute;
  left: 0.5%;
  top: 9%;
}

.point-main p {
  line-height: 1.8;
  font-size: 18px;
}

.point-mess {
  margin: 30px 0;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 2;
  text-shadow: 0px 0px 10px #000;
}

.point-01-bg {
  background: url(../img/kodawari/new/point-tit-bg.png)no-repeat;
  background-size: 100%;
}

.point-content {
  margin-bottom: 80px;
}

.point-content .item {
  width: 48%;
}

.point-content h4 {
  background: #e8dfd0;
  padding: 10px 0 10px 25px;
  font-size: 24px;
  position: relative;
  margin-bottom: 35px;
}

.point-content h4::before {
  content: "";
  display: block;
  height: 1px;
  width: 90%;
  background: #0e0000;
  position: absolute;
  top: -5px;
  right: 0;
}

.point-content h4::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: #0e0000;
  position: absolute;
  bottom: -5px;
  right: 0;
}

.point-content h4 span {
  background: #bca475;
  height: calc(tan(60deg) * 23px / 2);
  width: 40px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: absolute;
  transform: rotate(-45deg);
  top: -9px;
  left: -13px;
}

.point-content .item p {
  font-size: 16px;
  line-height: 2;
}

.point-content .item .img {
  margin-bottom: 30px;
}

.point-content .point-01-03 {
  width: 100%;
}




.column-kodawari {
  border: solid 1px #040000;
  padding: 75px 30px 30px 30px;
  position: relative;
}

.column-tit {
  width: 139px;
  position: absolute;
  top: -20px;
}

.column-kodawari h3 {
  font-size: 37px;
  margin-bottom: 20px;
  color: #d81829;
}

.column-kodawari .img {
  width: 273px;
  position: absolute;
  top: 30px;
  right: 30px;
}

.column-kodawari.column-04 .img {
  width: 233px;
}

.column-kodawari p {
  font-size: 16px;
  background-image: linear-gradient(transparent 0, transparent 97%, #888 100%);
  background-size: 100% 2em;
  /* 行の高さ */
  line-height: 2;
  background-repeat: repeat-y;
  position: relative;
}

.column-kodawari p span {}

.point-02-bg {
  background: url(../img/kodawari/new/point-02-tit-bg.png)no-repeat;
  background-size: 100%;
}

.point-content .point-02-05, .point-content .point-03-03 {
  width: 100%;
}

.point-content .point-02-05 .img, .point-content .point-03-03 .img {
  width: 32%;
}

.column-02 .img {
  width: 190px;
}

.point-03-bg {
  background: url(../img/kodawari/new/point-03-tit-bg.png)no-repeat;
  background-size: 100%;
}

.point-content .point-03-03 .fbox {
  margin-top: 30px;
}

.point-content .point-03-03 .img {
  margin-bottom: 0;
}

.point-content .point-03-03 .img img {
  margin-bottom: 30px;
}

.point-03-03 h5 {
  background: #595757;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 20px;
}

.point-03-03 .img:first-child h5 {
  background: #d81829;
}

.point-04-bg {
  background: url(../img/kodawari/new/point-04-tit-bg.png)no-repeat;
  background-size: 100%;
}

.point-content .point-04-01, .point-content .point-05-01, .point-content .point-05-02, .point-content .point-06-01, .point-content .point-06-02, .point-content .point-07-01, .point-content .point-07-02 {
  width: 100%;
}

.point-dannetu h5 {
  background: #595757;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 20px;
}

.point-dannetu .item:last-child h5 {
  background: #d81829;
}

.point-dannetu .fbox {
  align-items: center;
}

.point-dannetu .img {
  width: 55%;
}

.point-dannetu .tx {
  width: 41%;
}

.mess-none {
  margin-top: 110px;
}

.point-05-01 .img {
  width: 23%;
}

.point-05-01 .fbox {
  margin-top: 30px;
}

.point-05-01 .img:first-child {
  background: url(../img/kodawari/new/point-05-first.png)no-repeat;
  background-size: 100%;
  color: #fff;
  font-size: 20px;
  padding: 23px 0 0 23px;
  line-height: 1.6;
}

.point-05-01 h5 {
  font-size: 18px;
  margin-top: 5px;
}

.point-05-01 h5 span {
  color: #d81829;
}

.point-05-02 .img {
  margin: 50px 0;
}

.point-05-02 .img h5 {
  font-size: 26px;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.point-05-02 .img h5::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background: #0e0000;
  position: absolute;
  right: -220px;
  top: 52%;
}

.point-06-01 .img {
  width: 31%;
}

.point-06-01 .img img {
  margin-bottom: 20px;
}

.point-06-02 .img {
  width: 60%;
}

.point-06-02 .tx {
  width: 39%;
}

.works-kodawari .item {
  width: 65.5%;
}

.works-kodawari .item img {
  margin-bottom: 20px;
}

.works-kodawari .item:first-child {
  width: 30%;
}

.works-kodawari .item .fbox img {
  width: 48%;
}

.works-kodawari h5 {
  color: #bca475;
  font-size: 26px;
  margin-bottom: 30px;
  position: relative;
}

.works-kodawari h5::after {
  content: "";
  display: block;
  width: 89%;
  height: 1px;
  right: 0;
  top: 50%;
  background: #bca475;
  position: absolute;
}

.point-07-bg {
  background: url(../img/kodawari/new/point-07-tit-bg.png)no-repeat;
  background-size: cover;
}

.point-07-01 .img {
  width: 45%;
}

.point-07-01 .tx {
  width: 53%;
}

.point-07-02 .img {
  margin-top: 30px;
}

#kodawari-after {
  background: #d81829;
  color: #fff;
  text-align: center;
  padding: 100px 0;
  line-height: 2;
  font-size: 18px;
}

#kodawari-after h2 {
  font-size: 32px;
  line-height: 1.8;
  margin-bottom: 50px;
}

#kodawari-after p {
  margin-bottom: 35px;
}

#kodawari-after img {
  width: 319px;
  margin: 0 auto;
}

.spbr {
  display: none;
}

.pcbr {
  display: block;
}

@media all and (max-width: 1440px) {
  .kodawari-page-ttl {
    padding: 2vw 0;
  }

  .kodawari-page-ttl img {
    width: 24vw;
    margin-bottom: 1vw;
  }

  .kodawari-page-ttl h1 {
    font-size: 1.2vw;
  }

  .main-img {
    padding: 11vw 10vw;
  }

  .main-img h2 {
    margin-bottom: 1vw;
    font-size: 4.8vw;
  }

  .main-img h2 .num {
    font-size: 7.5vw;
  }

  .main-img h2 .tx {
    font-size: 2.2vw;
  }

  .main-img p {
    font-size: 1.4vw;
  }

  .merit-content .obi h4 {
    font-size: 2vw;
  }

  .ranking {
    margin: 3.5vw 0;
  }

  .ranking .img {
    font-size: 0.8vw;
  }

  .ranking .tx {
    font-size: 1.9vw;
  }

  .ranking .tx span {
    font-size: 1.2vw;
  }

  #merit {
    margin: 5.5vw 0 0;
  }

  .merit-tit-area {
    margin-bottom: 7vw;
  }

  .merit-tit-area h2 {
    font-size: 1.95vw;
    margin-bottom: 2.1vw;
  }

  .merit-tit-area p {
    font-size: 1.25vw;
  }

  .merit-content {
    margin-bottom: 7vw;
  }

  .merit-content h3 {
    font-size: 3.9vw;
    margin-bottom: 2.1vw;
  }

  .merit-content p {
    font-size: 1.12vw;
  }

  .merit-content .obi {
    font-size: 0.9vw;
    padding: 1.4vw;
    margin-top: 2.1vw;
  }

  .merit-kouzo p {
    margin-bottom: 2.1vw;
  }

  .merit-kouzo h4 {
    font-size: 1.7vw;
    padding: 1.4vw;
    margin: 3.5vw 0;
  }

  .point-area {
    margin-top: 10.5vw;
  }

  .point-tit-area {
    margin-bottom: 9.8vw;
  }

  .point-tit-area .tit-en {
    margin-bottom: 2.1vw;
    font-size: 4.35vw;
  }

  .point-main .tit-area {
    margin-bottom: 2.1vw;
  }

  .point-main .tit-area .bg-num {
    left: -11.5vw;
    top: 1.4vw;
    font-size: 20.3vw;
  }

  .point-main .tit-area h3 {
    font-size: 4.3vw;
  }

  .point-main .tit-area h3::before {
    height: 3.9vw;
    width: 0.42vw;
  }

  .point-main .tit-area h3 .tate {
    top: 0.4vw;
    font-size: 1vw;
    top: 0;
  }

  .point-main .tit-area h3 .num {
    margin-right: 0.8vw;
    font-size: 4.55vw;
    top: 0;
  }

  .point-mess {
    margin: 2.1vw 0;
    padding: 5.5vw 0;
    font-size: 1.65vw;
  }

  .mess-none {
    margin-top: 7.6vw;
  }

  .point-content h4 {
    padding: 0.7vw 0 0.7vw 1.8vw;
    font-size: 1.7vw;
    margin-bottom: 2.4vw;
  }

  .point-content .item .img {
    margin-bottom: 2.1vw;
  }

  .point-content {
    margin-bottom: 5.6vw;
  }

  .point-content .item p {
    font-size: 16px;
    font-size: 1.12vw;
  }

  .point-03-03 h5 {
    padding: 0.8vw;
    margin-bottom: 1.8vw;
    font-size: 1.25vw;
  }

  .point-dannetu h5 {
    padding: 0.8vw;
    margin-bottom: 1.8vw;
    font-size: 1.25vw;
  }

  .point-05-01 .img:first-child {
    font-size: 1.35vw;
    padding: 1.8vw 0 0 1.8vw;
  }

  .point-05-01 h5 {
    font-size: 1.2vw;
  }

  .column-kodawari {
    padding: 5.2vw 2.1vw 2.1vw 2.1vw;
  }

  .column-tit {
    width: 9.5vw;
    top: -1.5vw;
  }

  .column-kodawari h3 {
    font-size: 2.6vw;
    margin-bottom: 1.4vw;
  }

  .column-kodawari p {
    font-size: 1.12vw;
  }

  .column-kodawari .img {
    width: 19vw;
    top: 2.1vw;
    right: 2.1vw;
  }

  .column-02 .img {
    width: 13vw;
  }


  #kodawari-after {
    padding: 7vw 0;
    font-size: 1.3vw;
  }

  #kodawari-after h2 {
    margin-bottom: 3.5vw;
    font-size: 2.25vw;
  }

  #kodawari-after p {
    margin-bottom: 2.4vw;
  }

  #kodawari-after img {
    width: 22.3vw;
  }

  .column-kodawari.column-04 .img {
    width: calc(233/ 1440 * 100vw);
  }



}

@media all and (max-width: 750px) {
  #kodawari .sec__in {
    width: calc(100vw - calc(54/ 390 * 100vw));
  }

  .pcbr {
    display: none;
  }

  .spbr {
    display: block;
  }

  .kodawari-page-ttl {
    padding: 5vw 0;
  }

  .kodawari-page-ttl img {
    width: 80vw;
    margin-bottom: 2vw;
  }

  .kodawari-page-ttl h1 {
    font-size: 4.4vw;
  }

  #main .sec__in {
    width: 100%;
  }

  .main-img {
    padding: 37vw 0vw;
    background-size: cover;
    background-position: center;
  }

  .main-img h2 {
    margin-bottom: 5vw;
    font-size: 9.8vw;
  }

  .main-img h2 .num {
    font-size: 13.5vw;
  }

  .main-img h2 .tx {
    font-size: 4.6vw;
  }

  .main-img p {
    font-size: 3.6vw;
    line-height: 2.1;
  }

  .ranking {
    margin: 7vw 0;
  }

  .ranking .img {
    font-size: 3vw;
    width: 50%;
    margin: 0 auto;
  }

  .ranking .tx {
    font-size: 5.8vw;
    padding: 0 5vw;
    width: 100%;
    margin-top: 6vw;
  }

  .ranking .tx span {
    font-size: 3.2vw;
    position: static;
    display: block;
    margin-top: 3vw;
  }

  .main-bottom {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .main-bottom .item img {
    object-fit: cover;
    height: 31vw;
  }

  .main-bottom .item:first-child {
    width: 60%;
  }

  .main-bottom .item:nth-child(2) {
    width: 40%;
  }

  .main-bottom .item:nth-child(3), .main-bottom .item:nth-child(4), .main-bottom .item:nth-child(5) {
    width: calc(100% / 3);
  }

  .merit-tit-area {
    margin-bottom: 10vw;
  }

  .merit-tit-area h2 {
    font-size: 5.4vw;
    margin-bottom: 5vw;
  }

  .merit-tit-area p {
    font-size: 4.4vw;
  }

  .merit-content h3 {
    font-size: 9.6vw;
    margin-bottom: 4vw;
  }

  .merit-content p {
    font-size: 4.1vw;
  }

  .merit-content .obi h4 {
    font-size: 5vw;
    margin-bottom: 4vw;
  }

  .merit-content .obi {
    font-size: 3.2vw;
    padding: 6vw 4vw;
    margin-top: 2vw;
    text-align: center;
    line-height: 2;
  }

  .merit-kouzo h3 {
    text-align: left;
  }

  .merit-kouzo p {
    margin-bottom: 2em;
  }

  .merit-kouzo h4 {
    font-size: 6.6vw;
    letter-spacing: 0.05em;
    padding: 3vw 0;
    margin: 10vw 0 7vw;
    line-height: 1.5;
  }

  .merit-kouzo .item {
    width: 100%;
    margin: 0 auto 4vw;
  }

  .point-area {
    margin-top: 10.5vw;
    margin-bottom: 25vw;
  }

  .point-tit-area {
    margin-bottom: 15vw;
    font-size: 5vw;
  }

  .point-tit-area .tit-en {
    margin-bottom: 6vw;
    font-size: 11.6vw;
    letter-spacing: 0.05em;
  }

  .point-main .tit-area {
    margin-bottom: 6vw;
  }

  .point-main .tit-area .bg-num {
    left: 1vw;
    top: 16vw;
    font-size: 70vw;
  }

  .point-main .tit-area h3 {
    font-size: 11vw;
  }

  .point-main .tit-area h3::before {
    height: 11vw;
    width: 1.5vw;
    top: 6%;
  }

  .point-main .tit-area h3 .tate {
    font-size: 3vw;
  }

  .point-main .tit-area h3 .num {
    margin-right: 0.8vw;
    font-size: 12.55vw;
  }

  .point-main p {
    font-size: 4.1vw;
  }

  .point-mess {
    margin: 15vw 0;
    padding: 20vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(393/ 390 * 100vw);
    font-size: 4.6vw;
    line-height: 2.5;
  }

  .point-01-bg, .point-02-bg, .point-03-bg, .point-04-bg, .point-07-bg {
    background-size: cover;
    background-position: center;
  }

  .point-content {
    margin-bottom: 0;
  }

  .point-content .item {
    width: 100%;
    margin-bottom: 12vw;
  }

  .point-content .item.point-01-03 img {
    width: calc(273/ 390 * 100vw);
    height: auto;
  }

  .point-content h4 {
    padding: 2vw 0 2vw 6vw;
    font-size: 5vw;
    margin-bottom: 7vw;
  }

  .point-content .item .img {
    text-align: center;
    margin-bottom: 4vw;
  }

  .point-content .item p {
    font-size: 3.6vw;
    line-height: 1.6;
  }

  .point-03-03 h5 {
    padding: 2vw;
    margin-bottom: 4vw;
    font-size: 4.25vw;
  }

  .point-dannetu h5 {
    padding: 2vw;
    margin-bottom: 4vw;
    font-size: 4.25vw;
  }

  .point-dannetu .img {
    width: 75%;
    margin: 0 auto;
  }

  .point-dannetu .tx {
    width: 100%;
  }

  .column-kodawari {
    padding: 2vw 2vw 5vw 2vw;
  }

  .column-tit {
    width: 25vw;
    position: static;
    margin: 0 auto 3vw;
  }

  .column-kodawari h3 {
    font-size: 5.4vw;
    margin-bottom: 5vw;
    text-align: center;
  }

  .column-kodawari p {
    font-size: 3.6vw;
    background-image: linear-gradient(transparent 0, transparent 97%, #888 100%);
    background-size: 100% 2em;
    /* 行の高さ */
    line-height: 2;
    background-repeat: repeat-y;
  }

  .column-kodawari p::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
    background-color: #fff;
  }

  .column-kodawari p span {
    border-bottom: 0;
  }

  .column-kodawari .img {
    width: 70vw;
    position: static;
    margin: 5vw auto 0;
  }

  .mess-none {
    margin-top: 28vw;
  }

  .point-content .point-02-05 .img, .point-content .point-03-03 .img {
    width: 90%;
    margin: 0 auto 5vw;
  }

  .point-05-01 .img {
    width: 48%;
  }

  .point-05-01 .img:first-child {
    font-size: 4vw;
    padding: 3.8vw 0 0 3.8vw;
  }

  .point-05-01 h5 {
    font-size: 3.4vw;
  }

  .point-06-01 .img {
    width: 100%;
    margin-bottom: 5vw;
  }

  .point-06-01 .img img {
    margin-bottom: 2vw;
  }

  .point-06-02 .img {
    width: 100%;
  }

  .point-06-02 .tx {
    width: 100%;
  }

  .works-kodawari h5 {
    font-size: 5vw;
    margin-bottom: 6vw;
  }

  .works-kodawari h5::after {
    width: 77%;
  }

  .works-kodawari .item:first-child {
    width: 100%;
  }

  .works-kodawari .item .fbox img {
    width: 100%;
  }

  .point-07-01 .img {
    width: 100%;
  }

  .point-07-01 .tx {
    width: 100%;
  }

  .point-07-02 .img {
    margin-top: 7vw;
    width: 107%;
    overflow-x: scroll;
    padding-right: 5vw;
  }

  .point-07-02 .img img {
    width: 700px;
    max-width: none;
  }

  #kodawari-after {
    padding: 10vw 0;
    font-size: 4.3vw;
    line-height: 2.2;
  }

  #kodawari-after h2 {
    margin-bottom: 4.5vw;
    font-size: 6.2vw;
  }

  #kodawari-after p {
    margin-bottom: 6.5vw;
  }

  #kodawari-after img {
    width: 75vw;
  }

  .column-kodawari.column-04 .img {
    width:calc(280/ 390 * 100vw);
  }
.column-kodawari.column-04 h3{
  font-size: 4.8vw;
}

  .graf-rc {
    width: 100%;
    position: relative;
    top: auto;
    right: auto;
    margin-top: calc(80/ 375 * 100vw);
  }

  @keyframes img-wrap {
    100% {
      transform: translateX(700px);
    }
  }
}


/** graph ****************************/


svg.graph {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.inner_g {
  position: relative;
  height: 100%;
}

.circle {
  fill: rgba(0, 0, 0, 0);
  stroke-width: 31.8309886184;
  stroke-dasharray: 0, 0, 0, 100;
  stroke-dashoffset: 25;
  -webkit-animation: pie1 3s ease both;
  animation: pie1 6s ease both;
  animation-play-state: paused;
}

.scrollin .circle {
  animation-play-state: running;
}

.pie1 {
  stroke: rgba(216, 24, 41, 1);
}

.pie2 {
  stroke: rgba(89, 87, 87, 1);
  -webkit-animation-name: pie2;
  animation-name: pie2;
}

.pie3 {
  stroke: rgba(158, 158, 159, 1);
  -webkit-animation-name: pie3;
  animation-name: pie3;
}

.pie4 {
  stroke: rgba(219, 220, 220, 1);
  -webkit-animation-name: pie4;
  animation-name: pie4;
}

/* 1st pie is 40% */
@-webkit-keyframes pie1 {
  50%, 100% {
    stroke-dasharray: 88, 12, 0, 0;
  }
}

@keyframes pie1 {
  50%, 100% {
    stroke-dasharray: 88, 12, 0, 0;
  }
}

/* 2nd pie is 30% */
@-webkit-keyframes pie2 {
  50%, 100% {
    stroke-dasharray: 0, 88, 8, 4;
  }
}

@keyframes pie2 {
  50%, 100% {
    stroke-dasharray: 0, 88, 8, 4;
  }
}

/* 3rd pie is 30% */
@-webkit-keyframes pie3 {
  50%, 100% {
    stroke-dasharray: 0, 96, 2, 2;
  }
}

@keyframes pie3 {
  50%, 100% {
    stroke-dasharray: 0, 96, 2, 2;
  }
}

/* 4th pie is 10% */
@-webkit-keyframes pie4 {
  50%, 100% {
    stroke-dasharray: 0, 98, 2, 0;
  }
}

@keyframes pie4 {
  50%, 100% {
    stroke-dasharray: 0, 98, 2, 0;
  }
}

.txtarea {
  position: relative;
  transition-delay: 3s;
}

.txtarea>* {
  position: absolute;
  line-height: 1.3 !important;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
}

.txtarea p {
  letter-spacing: 0.05em;
  line-height: 1.3 !important;
}

.txtarea .lg {
  top: calc(185/ 375 * 100vw);
  left: 50%;
  transform: translateX(-50%);
}

.txtarea .lg p {
  color: #fff;
  text-align: center;

  font-size: calc(30/ 375 * 100vw);
}

.txtarea .lg span {
  font-size: calc(53/ 375 * 100vw);
}

.txtarea .mid {
  left: calc(85/ 375 * 100vw);
  top: calc(25/375 * 100vw);
}

.txtarea .mid p {
  text-align: center;
  color: #fff;

  font-size: calc(15/ 375 * 100vw);
}

.txtarea .mid span {
  font-size: calc(24/ 375 * 100vw);
}

.txtarea .sm {
  left: calc(145 / 375 * 100vw);
  top: calc(55 / 375 * 100vw * -1);
  height: calc(90 / 375 * 100vw);
  border-left: 1px solid #000;
  padding-left: calc(5 / 375 * 100vw);
}

.txtarea .sm p {
  font-size: calc(13/ 375 * 100vw);
}

.txtarea .sm span {
  font-size: calc(24/ 375 * 100vw);
}



@media all and (min-width: 751px) {
  .txtarea .lg {
    top: calc(300/ 1441 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }

  .txtarea .lg p {
    font-size: calc(37/ 1441 * 100vw);
  }

  .txtarea .lg span {
    font-size: calc(67/ 1441 * 100vw);
  }

  .txtarea .mid {
    left: calc(120/ 1441 * 100vw);
    top: calc(40/1441 * 100vw);
  }

  .txtarea .mid p {
    font-size: calc(17/ 1441 * 100vw);
  }

  .txtarea .mid span {
    font-size: calc(30/ 1441 * 100vw);
  }

  .txtarea .sm {
    left: calc(200/ 1441 * 100vw);
    top: calc(65/ 1441 * 100vw *-1);
    height: calc(106/ 1441 * 100vw);
    border-left: 2px solid #000;
    padding-left: calc(10/ 1441 * 100vw);
  }

  .txtarea .sm p {
    font-size: calc(17/ 1441 * 100vw);
  }

  .txtarea .sm span {
    font-size: calc(30/ 1441 * 100vw);
  }
}

@media all and (min-width: 1441px) {
  .txtarea .lg {
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
  }

  .txtarea .lg p {
    font-size: 37px;
  }

  .txtarea .lg span {
    font-size: 67px;
  }

  .txtarea .mid {
    left: 120px;
    top: 40px;
  }

  .txtarea .mid p {
    font-size: 17px;
  }

  .txtarea .mid span {
    font-size: 30px;
  }

  .txtarea .sm {
    left: 200px;
    top: -65px;
    height: 106px;
    padding-left: 10px;
  }

  .txtarea .sm p {
    font-size: 17px;
  }

  .txtarea .sm span {
    font-size: 30px;
  }
}