@charset "UTF-8";
/* 
*****************************************************************/
/* mixin
*********************************************************************/
/* カラー */
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* 1280 */
/* フルワイド */
/* フルワイド */
.area_visual .pagettl svg {
  width: 100%;
  height: auto;
  max-width: 40vw;
  min-width: 200px;
}

.area_history {
  position: relative;
  padding: 0 12vw;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .area_history {
    padding: 0 20px;
  }
}
.area_history .block_history {
  padding: 60px 0;
}
@media all and (max-width: 896px) {
  .area_history .block_history {
    padding: 30px 0;
  }
}
.area_history .block_history .box_ttl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media all and (max-width: 896px) {
  .area_history .block_history .box_ttl {
    justify-content: center;
  }
}
.area_history .block_history .box_ttl .side_ttl {
  width: 40%;
  text-align: center;
}
@media all and (max-width: 896px) {
  .area_history .block_history .box_ttl .side_ttl {
    width: 100%;
  }
}
.area_history .block_history .box_ttl .side_ttl h1 {
  font-family: "Hina Mincho", serif;
  font-size: 3.6rem;
  line-height: 1.1em;
  font-weight: 200;
  letter-spacing: 0.2em;
}
@media all and (max-width: 896px) {
  .area_history .block_history .box_ttl .side_ttl h1 {
    font-size: 2.8rem;
  }
}
.area_history .block_history .box_ttl .side_ttl .cloud {
  padding: 5px 0 0;
}
.area_history .block_history .box_ttl .side_ttl .cloud img {
  width: 100%;
  height: auto;
}
@media all and (max-width: 896px) {
  .area_history .block_history .box_ttl .side_logo {
    width: 70%;
    padding: 20px 0 0;
  }
}
.area_history .block_history .box_ttl .side_logo img {
  width: 100%;
  height: auto;
  max-width: 300px;
}
.area_history .block_history .box_copy {
  text-align: center;
  padding: 20px 0 0;
}
.area_history .block_history .box_copy p {
  font-size: 1.6rem;
  line-height: 2em;
  text-align: center;
}
@media all and (max-width: 896px) {
  .area_history .block_history .box_copy p {
    font-size: 1.5rem;
  }
}
.area_history .block_history .column_top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10.5vw 0;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_top {
    padding: 30px 0 0;
  }
}
.area_history .block_history .column_top .box_elem01 {
  position: absolute;
  right: 0px;
  top: -8vw;
  width: 18vw;
  mix-blend-mode: multiply;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_top .box_elem01 {
    right: -20px;
    top: 100px;
    width: 200px;
  }
}
@media all and (max-width: 480px) {
  .area_history .block_history .column_top .box_elem01 {
    top: 200px;
    width: 100px;
  }
}
.area_history .block_history .column_top .box_elem01 img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_top .side_img {
  width: 47%;
  box-sizing: border-box;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_top .side_img {
    width: 100%;
  }
}
.area_history .block_history .column_top .side_img .box_img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  width: 120%;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_top .side_img .box_img {
    position: relative;
    top: auto;
    transform: none;
    right: auto;
    width: 240px;
    margin: auto;
  }
}
.area_history .block_history .column_top .side_img .box_img img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_top .side_txt {
  width: 53%;
  box-sizing: border-box;
  padding: 0 0 0 3vw;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_top .side_txt {
    width: 100%;
    padding: 16px 0 0 0vw;
  }
}
.area_history .block_history .column_top .side_txt h2 {
  font-size: 3vw;
  line-height: 1.1em;
  font-weight: 700;
  letter-spacing: 0.5em;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_top .side_txt h2 {
    font-size: 2.7rem;
    text-align: center;
  }
}
.area_history .block_history .column_second {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  padding: 10vw 0;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_second {
    padding: 30px 0 0;
  }
}
.area_history .block_history .column_second .side_img {
  width: 47%;
  box-sizing: border-box;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_second .side_img {
    width: 100%;
  }
}
.area_history .block_history .column_second .side_img .box_img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  width: 140%;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_second .side_img .box_img {
    position: relative;
    top: auto;
    transform: none;
    right: auto;
    width: 300px;
    margin: auto;
  }
}
.area_history .block_history .column_second .side_img .box_img img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_second .side_txt {
  width: 53%;
  box-sizing: border-box;
  padding: 0 0 0 0;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_second .side_txt {
    width: 100%;
    padding: 16px 0 0 0vw;
  }
}
.area_history .block_history .column_second .side_txt h2 {
  font-size: 3vw;
  line-height: 1.1em;
  font-weight: 700;
  letter-spacing: 0.5em;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_second .side_txt h2 {
    font-size: 2.7rem;
    text-align: center;
  }
}
.area_history .block_history .column_third {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10vw 0 32vw;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third {
    padding: 30px 0 40vw;
  }
}
.area_history .block_history .column_third .bg_img {
  position: absolute;
  bottom: 0px;
  right: -8vw;
  width: 80%;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third .bg_img {
    width: 80%;
  }
}
@media all and (max-width: 480px) {
  .area_history .block_history .column_third .bg_img {
    width: 90%;
  }
}
.area_history .block_history .column_third .bg_img img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_third .box_elem02 {
  position: absolute;
  left: -6vw;
  bottom: 3vw;
  width: 22vw;
  mix-blend-mode: multiply;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third .box_elem02 {
    display: none;
  }
}
.area_history .block_history .column_third .box_elem02 img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_third .side_img {
  width: 47%;
  box-sizing: border-box;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third .side_img {
    width: 100%;
  }
}
.area_history .block_history .column_third .side_img .box_img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  width: 110%;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third .side_img .box_img {
    position: relative;
    top: auto;
    transform: none;
    right: auto;
    width: 240px;
    margin: auto;
  }
}
.area_history .block_history .column_third .side_img .box_img img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_third .side_txt {
  width: 53%;
  box-sizing: border-box;
  padding: 0 0 0 3vw;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third .side_txt {
    width: 100%;
    padding: 16px 0 0 0vw;
  }
}
.area_history .block_history .column_third .side_txt h2 {
  font-size: 3vw;
  line-height: 1.1em;
  font-weight: 700;
  letter-spacing: 0.5em;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_third .side_txt h2 {
    font-size: 2.7rem;
    text-align: center;
  }
}
.area_history .block_history .column_noone {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  margin: 0 -20px;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_noone {
    padding: 10px 0;
    margin: 0 -10px;
  }
}
.area_history .block_history .column_noone .side_txt {
  width: 55%;
  box-sizing: border-box;
  padding: 20px;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_noone .side_txt {
    width: 100%;
    padding: 10px;
  }
}
.area_history .block_history .column_noone .side_txt .lead {
  text-indent: -0.5em;
}
@media all and (max-width: 480px) {
  .area_history .block_history .column_noone .side_txt .lead {
    letter-spacing: -0.05em;
  }
}
.area_history .block_history .column_noone .side_img {
  width: 45%;
  box-sizing: border-box;
  padding: 20px;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_noone .side_img {
    width: 100%;
    padding: 10px;
  }
}
.area_history .block_history .column_noone .side_img img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_welcome .inner {
  background-color: #FFF;
  border: #B68458 solid 1px;
  border-radius: 14px;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_welcome .inner {
    padding: 8px;
  }
}
.area_history .block_history .column_welcome .inner .side_logo {
  padding: 15px;
  box-sizing: border-box;
  width: 220px;
  text-align: center;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_welcome .inner .side_logo {
    width: 100%;
    padding: 8px;
  }
}
.area_history .block_history .column_welcome .inner .side_logo img {
  width: 100%;
  height: auto;
  max-width: 220px;
}
.area_history .block_history .column_welcome .inner .side_txt {
  width: calc(100% - 220px);
  padding: 15px;
  box-sizing: border-box;
  position: relative;
}
@media all and (max-width: 896px) {
  .area_history .block_history .column_welcome .inner .side_txt {
    width: 100%;
    padding: 16px 8px 8px;
  }
}
.area_history .block_history .column_welcome .inner .side_txt .ttl_welcome {
  position: relative;
  display: inline-block;
  padding: 0 50px 10px 0;
}
.area_history .block_history .column_welcome .inner .side_txt .ttl_welcome h3 {
  font-size: 2.2rem;
  line-height: 1.2em;
  color: #B68458;
  font-weight: 500;
}
@media all and (max-width: 480px) {
  .area_history .block_history .column_welcome .inner .side_txt .ttl_welcome h3 {
    font-size: 2rem;
  }
}
.area_history .block_history .column_welcome .inner .side_txt .ttl_welcome .line {
  width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
}
.area_history .block_history .column_welcome .inner .side_txt .ttl_welcome .line img {
  width: 100%;
  height: auto;
}
.area_history .block_history .column_welcome .inner .side_txt .btn_check {
  position: absolute;
  right: 50px;
  bottom: 0px;
}
@media all and (max-width: 1025px) {
  .area_history .block_history .column_welcome .inner .side_txt .btn_check {
    position: relative;
    right: auto;
    bottom: auto;
  }
}
.area_history .block_history .column_welcome .inner .side_txt p {
  padding-bottom: 10px;
}
.area_history .block_history .column_welcome .inner .elem_ill {
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 150px;
}
@media all and (max-width: 1025px) {
  .area_history .block_history .column_welcome .inner .elem_ill {
    right: -20px;
    bottom: -20px;
    width: 100px;
  }
}
.area_history .block_history .column_welcome .inner .elem_ill img {
  width: 100%;
  height: auto;
}
.area_history .block_history p {
  font-size: 1.5rem;
  line-height: 2em;
  padding: 20px 0 0;
  text-align: justify;
}
@media all and (max-width: 896px) {
  .area_history .block_history p {
    padding: 12px 0 0;
    text-align: justify;
  }
}

.area_img {
  line-height: 0em;
  overflow: hidden;
}
.area_img img {
  width: 100%;
  height: auto;
}

.area_info {
  padding: 0 20px;
}
.area_info .block_info {
  text-align: center;
  padding: 50px 0 0;
}
@media all and (max-width: 896px) {
  .area_info .block_info {
    padding: 30px 0 0;
  }
}
.area_info .block_info .box_info {
  display: inline-block;
  max-width: 670px;
}
.area_info .block_info .box_info h3 {
  font-size: 1.6rem;
  line-height: 1.8em;
  text-align: left;
  font-weight: 400;
}
.area_info .block_info .box_info ul {
  text-align: left;
}
.area_info .block_info .box_info ul li {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.8em;
  padding: 3px 6px;
}
.area_info .block_bnr {
  padding: 20px 0 60px;
}
@media all and (max-width: 896px) {
  .area_info .block_bnr {
    padding: 10px 0 30px;
  }
}
.area_info .block_bnr ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
}
.area_info .block_bnr ul li {
  max-width: 380px;
  box-sizing: border-box;
  padding: 10px;
}
.area_info .block_bnr ul li img {
  width: 100%;
  height: auto;
}

/***************************************************
 * Generated by SVG Artista on 6/19/2023, 11:43:14 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1047.0089111328px;
    stroke-dasharray: 1047.0089111328px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1047.0089111328px;
  }
}
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-1 {
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}
@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 703.3751220703px;
    stroke-dasharray: 703.3751220703px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 703.3751220703px;
  }
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-2 {
  animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}
@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 177.143157959px;
    stroke-dasharray: 177.143157959px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 177.143157959px;
  }
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-3 {
  animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both, animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}
@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 301.840423584px;
    stroke-dasharray: 301.840423584px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.840423584px;
  }
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-4 {
  animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both, animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}
@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 898.5582885742px;
    stroke-dasharray: 898.5582885742px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 898.5582885742px;
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-5 {
  animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both, animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}
@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 1120.5847167969px;
    stroke-dasharray: 1120.5847167969px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1120.5847167969px;
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-6 {
  animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both, animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}
@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 553.5270996094px;
    stroke-dasharray: 553.5270996094px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 553.5270996094px;
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-7 {
  animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both, animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
}
@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 485.8404541016px;
    stroke-dasharray: 485.8404541016px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 485.8404541016px;
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-8 {
  animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both, animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}
@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 308.1839599609px;
    stroke-dasharray: 308.1839599609px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.1839599609px;
  }
}
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-9 {
  animation: animate-svg-stroke-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both, animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}