@charset "UTF-8";
/* CSS Document */
/*basic*/
body {
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.77;
  color: #222;
  text-align: center;
}

a {
  transition: 0.3s all ease;
  text-decoration: none;
  color: inherit;
}

a img,
input[type=submit] input[type=reset],
input[type=button] {
  transition: 0.4s all ease;
}

a:hover img,
input[type=submit]:hover input[type=reset]:hover,
input[type=button]:hover {
  opacity: 0.7;
}

#container {
  /*overflow-x: hidden;*/
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/*Color*/
.black {
  color: #222;
}

.white {
  color: #fff;
}

.blue {
  color: #0071be;
}

.pink {
  color: #f76491;
}

.ylw {
  color: #fffa88;
}

.ylw-bg {
  background: linear-gradient(transparent 70%, #fffa88 70%);
}

.en {
  font-family: "Overpass", sans-serif;
}

/*============================
#top
============================*/
#top {
  height: 66px;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

#top .wrap {
  height: 100%;
}

.top-right {
  column-gap: 10px;
}

.top-right .f27 {
  line-height: 1.2;
}

.btn {
  width: 218px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
  border-radius: 23px;
  background: #f76491;
  width: 218px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.18);
  position: relative;
}

.btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
}

/*============================
#mv
============================*/
#mv {
  height: 546px;
  background: url(../img/mv-bg.jpg) center center no-repeat;
  background-size: cover;
}

/*============================
#worry
============================*/
#worry {
  padding-top: 45px;
}

h2 .en {
  display: block;
}

.worry-content {
  background: rgba(0, 164, 240, 0.05);
  padding: 45px 0;
  position: relative;
}

.worry-list {
  width: 66%;
  padding: 30px 45px 30px;
  border-radius: 10px;
  background: #fff;
  border: 3px solid #6ea2de;
  position: relative;
  z-index: 1;
  margin-left: -10%;
}

.worry-list li {
  padding: 15px 0 15px 60px;
  border-bottom: 2px dashed #c7c7c7;
  position: relative;
}

.worry-list li::before {
  content: "";
  width: 46px;
  height: 38px;
  background: url(../img/check1.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 15px;
}

.worry-img img {
  position: absolute;
  left: 44%;
  top: -46px;
  max-width: unset;
}

/*============================
#recommend
============================*/
#recommend {
  padding-top: 45px;
}

.recommend-content {
  background: url(../img/recommend-bg.png) center center no-repeat;
  background-size: cover;
  padding: 35px 0 0;
}

.recommend-img {
  margin: -100px -50px 0 0;
  position: relative;
  z-index: 1;
}

.recommend-txt {
  padding: 40px 50px;
  border-radius: 10px;
  background: #fff;
  height: fit-content;
  position: relative;
}

.recommend-txt::before {
  content: "";
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 7px;
  border: 3px dotted #f76491;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.recommend-txt h3 {
  padding-bottom: 12px;
  border-bottom: 2px dotted #c7c7c7;
}

.recommend-txt h3 span {
  padding: 7px 19px;
  border-radius: 25px;
  background-color: #439cd9;
  margin-right: 10px;
}

.recommend-txt p {
  margin-right: 32px;
}

/*============================
#feature
============================*/
#feature {
  padding: 50px 0 60px;
  position: relative;
}

#feature::before {
  content: "";
  width: 100%;
  height: 60%;
  background: #fffff6;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.feature-wrap {
  padding-left: calc(50vw - 600px);
  overflow: scroll;
}

.feature-inner {
  width: 2480px;
}

.feature-each {
  width: 546px;
  margin-right: 74px;
}

/*============================
#point
============================*/
.point-top {
  height: 505px;
  background: url(../img/point-top.jpg) center center no-repeat;
  background-size: cover;
  margin-bottom: -205px;
}

.point-movie {
  width: 66%;
  height: 0;
  padding-bottom: 37.125%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.point-movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.point-bottom {
  background: url(../img/point-bg.png) center center no-repeat;
  background-size: cover;
  padding-bottom: 45px;
}

.point-head {
  border-bottom: 3px dotted #f76491;
}

.point-each {
  padding-bottom: 35px;
  border-bottom: 3px dotted #f76491;
}

.point-each:last-of-type {
  border: none;
}

.point-txt {
  max-width: 610px;
}

.point-txt h3 {
  line-height: 1.27;
}

.point-txt h3 img {
  margin-right: -100px;
}

.point-txt + img {
  margin-top: 45px;
}

.point1-img {
  margin-right: 30px;
}

/*============================
#flow
============================*/
#flow {
  padding-top: 70px;
}

.flow-content {
  background-color: #e7f5fd;
  background-image: linear-gradient(-180deg, #f2faff 50%, transparent 50%);
  background-size: 10px 10px;
  padding: 58px 0 65px;
}

.flow-content .wrap {
  position: relative;
}

.flow-content .wrap::before {
  content: "";
  width: 217px;
  height: 214px;
  background: url(../img/flow-top1.png) center bottom no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: -214px;
}

.flow-content .wrap::after {
  content: "";
  width: 214px;
  height: 208px;
  background: url(../img/flow-top2.png) center bottom no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -208px;
}

.flow-each {
  width: 376px;
  background: #fff;
  border-radius: 5px;
}

.flow-ttl {
  background: #f76491;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  position: relative;
}

.flow-ttl::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid #f76491;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: auto;
}

.flow-ttl::after {
  content: "";
  width: 47px;
  height: 42px;
  background: url(../img/flow-accent.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: -30px;
  left: 10px;
}

.flow-each p {
  margin: 0 35px 28px;
}

/*============================
#price
============================*/
#price {
  padding: 66px 0;
}

.price-each {
  width: 48.33%;
}

.price-each h3 {
  padding-bottom: 15px;
  border-bottom: 2px dotted #f76491;
}

.price {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-collapse: collapse;
}

.price th {
  background: #fff7f9;
  border: 1px solid #d8d8d8;
  padding: 10px 20px;
}

.price td {
  border: 1px solid #d8d8d8;
  padding: 10px 20px;
}

/*============================
#loan
============================*/
#loan {
  padding: 55px 0 67px;
  background: #fffff6;
}

.loan-box {
  padding: 38px;
  border-radius: 5px;
  background: #fff;
  border: 2px solid #ededdc;
}

.loan-each {
  width: 285px;
  border-radius: 5px;
  background: #fff;
  border: 2px solid #ededdc;
}

.loan-head {
  border-radius: 5px 5px 0px 0px;
  background: #0071be;
  padding: 10px;
}

.loan-each p {
  margin: 0 20px 20px;
}

.back {
  width: 100%;
  border-collapse: collapse;
}

.back th {
  width: 25%;
}

.back thead th {
  background: #f76491;
  border: 1px solid #d8d8d8;
  padding: 10px;
}

.back tbody th {
  background: #fdf4f6;
  border: 1px solid #d8d8d8;
  vertical-align: middle;
}

.back tbody td {
  background: #fff;
  border: 1px solid #d8d8d8;
  padding: 10px;
}

/*============================
#faq
============================*/
#faq {
  padding: 68px 0 100px;
}

#faq h3 {
  padding-bottom: 18px;
  border-bottom: 2px dotted #f76491;
}

.faq dt {
  background: #fff7f9;
  padding: 30px 40px 30px 100px;
  position: relative;
  cursor: pointer;
}

.faq dt::before {
  content: "Q";
  font-family: "Overpass", sans-serif;
  font-size: 30px;
  color: #f76491;
  position: absolute;
  left: 40px;
  top: 26px;
}

.faq dt span {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 40px;
  top: 50px;
}

.faq dt span::before,
.faq dt span::after {
  content: "";
  width: 20px;
  height: 2px;
  background: #222;
  position: absolute;
  top: 0;
}

.faq dt span::after {
  transform: rotate(90deg);
  transition: 0.4s all ease;
}

.faq dt.open span::after {
  transform: rotate(-180deg);
}

.faq dd {
  display: none;
  padding-left: 100px;
  position: relative;
}

.faq dd::before {
  content: "A";
  font-family: "Overpass", sans-serif;
  font-size: 30px;
  color: #0071be;
  position: absolute;
  left: 40px;
  top: 0;
}

/*============================
#message
============================*/
#message {
  background-color: #e7f5fd;
  background-image: linear-gradient(-180deg, #f2faff 50%, transparent 50%);
  background-size: 10px 10px;
  padding: 58px 0 0;
}

.doctor {
  column-gap: 50px;
}

.footer-top {
  height: 560px;
  background: url(../img/footer-top.png) center top no-repeat;
  background-size: cover;
}

/*============================
#footer
============================*/
#footer {
  padding-bottom: 60px;
}

.footer-box {
  border-radius: 10px;
  background: #fffff6;
  padding: 30px 50px 65px;
  position: relative;
  margin-top: -162px;
}

.footer-box::before {
  content: "";
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  border-radius: 7px;
  border: 3px dotted #e66d91;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.footer-box-head {
  border-bottom: 3px dotted #e66d91;
}

.footer-box-bottom {
  line-height: 1;
}

.footer-box-bottom img {
  width: 36px;
  height: 36px;
}

.footer-box-bottom .btn {
  width: 373px;
  height: 77px;
  border-radius: 39px;
  margin-left: 37px;
}

.map {
  width: 550px;
  height: 370px;
  position: relative;
  margin-right: 60px;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.info {
  width: 590px;
  position: relative;
}

.info table {
  width: 100%;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #0071be;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  position: absolute;
  top: 60px;
  right: 0;
}

.time {
  border-collapse: collapse;
}

.time th,
.time td {
  padding: 10px;
}

.time thead th {
  border-bottom: 1px solid #dbdbdb;
}

.time th:first-of-type {
  width: 120px;
  border-right: 1px solid #dbdbdb;
}

/*============================
#copyright
============================*/
#copyright {
  background: #f2faff;
  padding: 48px;
  position: relative;
}

#copyright::before {
  content: "";
  width: 807px;
  height: 207px;
  background: url(../img/footer-img.png);
  position: absolute;
  bottom: 0;
  left: 55%;
}

@media (max-width: 1200px) {
  /*basic*/
  body {
    font-size: 1.5vw;
  }
  .wrap {
    max-width: 96vw;
  }
  /*============================
  #top
  ============================*/
  #top {
    height: 5.5vw;
  }
  .top-right {
    column-gap: 0.833vw;
  }
  .btn {
    width: 18.167vw;
    height: 3.75vw;
    padding-right: 0.833vw;
    border-radius: 1.917vw;
    width: 18.167vw;
  }
  .btn::before {
    width: 0.833vw;
    height: 0.833vw;
    right: 1.667vw;
  }
  /*============================
  #mv
  ============================*/
  #mv {
    height: 45.5vw;
  }
  #mv h1 img {
    width: 59.33vw;
  }
  /*============================
  #worry
  ============================*/
  #worry {
    padding-top: 3.75vw;
  }
  .worry-content {
    padding: 3.75vw 0;
  }
  .worry-list {
    padding: 2.5vw 3vw 2.5vw;
    width: 65%;
    border-radius: 0.833vw;
    margin-left: 0;
  }
  .worry-list li {
    padding: 1.25vw 0 1.25vw 5vw;
  }
  .worry-list li::before {
    width: 3.833vw;
    height: 3.167vw;
    top: 1.25vw;
  }
  .worry-img img {
    top: -3.833vw;
    left: 54%;
    height: 90%;
  }
  /*============================
  #recommend
  ============================*/
  #recommend {
    padding-top: 3.75vw;
  }
  .recommend-content {
    padding: 2.917vw 0 0;
  }
  .recommend-img {
    margin: -8.333vw -4.167vw 0 0;
    z-index: 1;
    width: 28vw;
  }
  .recommend-txt {
    padding: 3.333vw 4.167vw;
    border-radius: 0.833vw;
  }
  .recommend-txt::before {
    width: calc(100% - 1.667vw);
    height: calc(100% - 1.667vw);
    border-radius: 0.583vw;
  }
  .recommend-txt h3 {
    padding-bottom: 1vw;
  }
  .recommend-txt h3 span {
    padding: 0.583vw 1.583vw;
    border-radius: 2.083vw;
    margin-right: 0.833vw;
  }
  .recommend-txt p {
    margin-right: 2.667vw;
  }
  .recommend-txt img {
    width: 22.4vw;
  }
  /*============================
  #feature
  ============================*/
  #feature {
    padding: 4.167vw 0 5vw;
  }
  .feature-wrap {
    padding-left: 2vw;
  }
  .feature-inner {
    width: 206.667vw;
  }
  .feature-each {
    width: 42vw;
    margin-right: 3vw;
  }
  /*============================
  #point
  ============================*/
  .point-top {
    height: 42.083vw;
    margin-bottom: -17.083vw;
  }
  .point-bottom {
    padding-bottom: 3.75vw;
  }
  .point-each {
    padding-bottom: 2.917vw;
  }
  .point-txt {
    max-width: 50vw;
  }
  .point-txt h3 img {
    margin-right: -8.333vw;
    width: 25vw;
  }
  .point-txt + img {
    margin-top: 3.75vw;
  }
  .point-img {
    width: 30vw;
  }
  .point-each .point-txt + img {
    width: 43vw;
  }
  .point1-img {
    margin-right: 2.5vw;
    width: 30vw;
  }
  /*============================
  #flow
  ============================*/
  #flow {
    padding-top: 5.833vw;
  }
  .flow-content {
    background-size: 0.833vw 0.833vw;
    padding: 4.833vw 0 5.417vw;
  }
  .flow-content .wrap::before {
    content: "";
    width: 18.083vw;
    height: 17.833vw;
    top: -17.833vw;
  }
  .flow-content .wrap::after {
    width: 17.833vw;
    height: 17.333vw;
    top: -17.333vw;
  }
  .flow-each {
    width: 31.333vw;
    border-radius: 0.417vw;
  }
  .flow-ttl {
    padding: 0.833vw;
    border-radius: 0.417vw 0.417vw 0 0;
  }
  .flow-ttl::after {
    width: 3.917vw;
    height: 3.5vw;
    top: -2.5vw;
    left: 0.833vw;
  }
  .flow-each p {
    margin: 0 2.917vw 2.333vw;
  }
  /*============================
  #price
  ============================*/
  #price {
    padding: 5.5vw 0;
  }
  .price-each h3 {
    padding-bottom: 1.25vw;
  }
  /*============================
  #loan
  ============================*/
  #loan {
    padding: 4.583vw 0 5.583vw;
  }
  .loan-box {
    padding: 3.167vw;
    border-radius: 0.417vw;
  }
  .loan-box img {
    width: 41.66vw;
  }
  .loan-each {
    width: 23.75vw;
    border-radius: 0.417vw;
  }
  .loan-head {
    border-radius: 0.417vw 0.417vw 0px 0px;
    padding: 0.833vw;
  }
  .loan-each p {
    margin: 0 1.667vw 1.667vw;
  }
  .back thead th {
    padding: 0.833vw;
  }
  .back tbody td {
    padding: 0.833vw;
  }
  /*============================
  #faq
  ============================*/
  #faq {
    padding: 5.667vw 0 8.333vw;
  }
  #faq h3 {
    padding-bottom: 1.5vw;
  }
  .faq dt {
    padding: 2.5vw 3.333vw 2.5vw 8.333vw;
  }
  .faq dt::before {
    font-size: 2.5vw;
    left: 3.333vw;
    top: 2.167vw;
  }
  .faq dt span {
    width: 1.667vw;
    height: 1.667vw;
    right: 3.333vw;
    top: 4.167vw;
  }
  .faq dt span::before,
  .faq dt span::after {
    width: 1.667vw;
    height: 0.167vw;
  }
  .faq dd {
    padding-left: 8.333vw;
  }
  .faq dd::before {
    font-size: 2.5vw;
    left: 3.333vw;
  }
  /*============================
  #message
  ============================*/
  #message {
    background-size: 0.833vw 0.833vw;
    padding: 4.833vw 0 0;
  }
  .doctor {
    column-gap: 4.167vw;
  }
  .doctor img {
    width: 45vw;
  }
  .footer-top {
    height: 46.667vw;
  }
  /*============================
  #footer
  ============================*/
  #footer {
    padding-bottom: 5vw;
  }
  .footer-box {
    border-radius: 0.833vw;
    padding: 2.5vw 4.167vw 5.417vw;
    margin-top: -13.5vw;
  }
  .footer-box::before {
    content: "";
    width: calc(100% - 1.25vw);
    height: calc(100% - 1.25vw);
    border-radius: 0.583vw;
  }
  .footer-box-head {
    border-bottom: 3px dotted #e66d91;
  }
  .footer-box-bottom img {
    width: 3vw;
    height: 3vw;
  }
  .footer-box-bottom .btn {
    width: 31.083vw;
    height: 6.417vw;
    border-radius: 3.25vw;
    margin-left: 3.083vw;
  }
  .map {
    width: 45.833vw;
    height: 30.833vw;
    margin-right: 5vw;
  }
  .info {
    width: 49.167vw;
  }
  .circle {
    width: 8.333vw;
    height: 8.333vw;
    border-radius: 4.167vw;
    top: 7vw;
  }
  .time th,
  .time td {
    padding: 0.833vw;
  }
  .time th:first-of-type {
    width: 10vw;
  }
  /*============================
  #copyright
  ============================*/
  #copyright {
    padding: 4vw;
  }
  #copyright::before {
    width: 67.25vw;
    height: 17.25vw;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 3.2vw;
  }
  #top {
    height: 12vw;
  }
  #top .wrap > img,
  #top .wrap > a > img {
    width: 20vw;
  }
  .btn {
    width: 36vw;
    height: 10vw;
    border-radius: 5vw;
  }
  #mv {
    height: 160vw;
    background: url(../img/mv-bg-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #mv h1 img {
    width: 100%;
  }
  .worry-content {
    padding: 24vw 0 5vw;
    margin-top: 30vw;
  }
  .worry-list {
    width: 100%;
  }
  .worry-list li {
    padding-left: 7vw;
  }
  .worry-list li::before {
    width: 5vw;
    height: 5vw;
    top: 2vw;
  }
  .worry-img img {
    height: auto;
    width: 120vw;
    left: 20%;
    top: -30vw;
  }
  #recommend h2 {
    padding-left: 15vw;
    margin-top: 10vw;
  }
  .recommend-img {
    margin-top: -45vw;
  }
  #feature {
    padding: 8vw 0 12vw;
  }
  .feature-inner {
    width: 340vw;
  }
  .feature-each {
    width: 80vw;
  }
  .point-movie {
    width: 90%;
    padding-bottom: 50.625%;
  }
  .point-img {
    width: 50vw;
  }
  .point-txt {
    max-width: 100%;
  }
  .point-each .point-txt + img {
    width: 100%;
  }
  .point-txt h3 img {
    width: 40vw;
    margin-right: -7vw;
  }
  .point1-img {
    width: 80vw;
    margin: -6vw auto 5vw auto;
  }
  #flow h2 {
    line-height: 1.2;
    margin-top: 8vw;
  }
  .flow-content .wrap::before {
    width: 36vw;
    height: 34vw;
    top: -34vw;
    left: -2vw;
  }
  .flow-content .wrap::after {
    width: 35vw;
    height: 35vw;
    top: -35vw;
    right: -2vw;
  }
  .flow-each {
    width: 100%;
    padding-bottom: 5vw;
  }
  .flow-ttl::after {
    width: 7.8vw;
    height: 7vw;
    top: -5vw;
    left: 3vw;
  }
  .price-each {
    width: 100%;
  }
  .loan-each {
    width: 49%;
  }
  .back th {
    width: auto;
  }
  .faq dt {
    padding: 2.5vw 3.333vw 2.5vw 8.333vw;
  }
  .faq dt::before,
  .faq dd::before {
    font-size: 1.4em;
  }
  .faq dt span {
    width: 15px;
    height: 15px;
    top: 6vw;
  }
  .faq dt span::before,
  .faq dt span::after {
    width: 100%;
  }
  .doctor img {
    width: 100%;
  }
  .footer-box-head > img {
    width: 70vw;
    padding-right: 10vw;
  }
  .footer-box-bottom .btn {
    width: 60vw;
    height: 12vw;
    border-radius: 6vw;
    margin: 5vw auto 0;
  }
  .footer-box-bottom img {
    width: 6vw;
    height: 6vw;
  }
  .map {
    width: 100%;
    height: 60vw;
    margin: 0 auto 6vw;
  }
  .info {
    width: 100%;
  }
  .circle {
    width: 15vw;
    height: 15vw;
    border-radius: 7.5vw;
    top: 15vw;
  }
}
/*============================
#blog
============================*/
#blog {
  margin: 0 0 8em;
}
#blog h2 {
  color: #3670b8;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 1em;
  text-align: center;
}
#blog h2 span {
  background: linear-gradient(0deg, #fefa97 36%, #ffffff 36%);
  display: inline-block;
  padding: 0 0.2em;
  position: relative;
}
#blog h2 span:before {
  background: url("/img/icon_blog.png") no-repeat;
  background-size: 100% auto;
  content: "";
  height: 33px;
  left: -40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 33px;
}
#blog h2 + p {
  font-size: 20px;
  margin-bottom: 3em;
  text-align: center;
}
#blog h2 + p a {
  background: #4ea2ec;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
  line-height: 1.2;
  padding: 0.6em 3em 0.7em 2.5em;
  position: relative;
}
#blog h2 + p a:after {
  background: url("/img/icon_arrow_01.png") no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 16px;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}
#blog > div {
  background: #fdf7f9;
  padding: 50px 0 70px;
}
#blog ul {
  display: grid;
	grid-template-columns: 30% 30% 30%;
  justify-content: space-between;
	align-items: flex-start;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 38px;
	gap:5% 0;
}

#blog ul li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
	gap:15px 0;
}


#blog ul li .photo a {
  display: block;
  aspect-ratio: 1/1;
}
#blog ul li .photo a img {
  border: 3px dotted #4ea2ec;
  border-radius: 0.5vw;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#blog ul li h3 {
  color: #3470b8;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
	line-height: 1.3;
	
}
#blog ul li p {
  text-align: left;
}
#blog ul li div.button a {
  background: #4ea2ec;
  border-radius: 50px;
  color: #fff;
  line-height: 1.2;
  padding: 0.4em 3.5em 0.6em 3em;
  position: relative;
	display: inline-block;
}
#blog ul li div.button a:after {
  background: url("/lib/img/icon_arrow_01.png") no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 16px;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}
@media screen and (max-width: 1200px) {
  #blog h2 {
    font-size: 3vw;
  }
  #blog h2 + p {
    font-size: 1.666vw;
  }
#blog ul li h3 {
    font-size: 1.666vw;
  }
}
@media screen and (max-width: 768px) {
  #blog {
    margin: 0 0 4em;
  }
  #blog h2 {
    font-size: 5.6vw;
  }
  #blog h2 span:before {
    height: 5vw;
    left: -6vw;
    width: 5vw;
  }
  #blog h2 + p {
    font-size: 4vw;
    margin-bottom: 1.5em;
  }
  #blog > div {
    padding: 2em 0 3em;
  }
  #blog ul {
    display: block;
    padding: 0 10vw;
  }
  #blog ul li {
    margin-bottom: 4em;
    width: auto;
  }
  #blog ul li:last-child {
    margin-bottom: 0;
  }
  #blog ul li img {
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    width: 80%;
  }
#blog ul li h3 {
    font-size: 4vw;
  }
  #blog ul li dl dd a:last-of-type {
    display: block;
    padding: 0.6em 3.5em 0.8em 3em;
  }
}

/* blog entry */
#blog_vi {
  background: url("/img/vi_blog.jpg") center center no-repeat;
  background-size: cover;
}
#blog_vi div {
  margin: 0 auto;
  max-width: 1200px;
  padding: 4em 1em;
  text-align: right;
}
#blog_vi h1 {
  color: #3670b8;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 1em;
}
#blog_vi h1 span {
  background: linear-gradient(0deg, #fefa97 36%, transparent 36%);
  display: inline-block;
  padding: 0 0.2em;
  position: relative;
}
#blog_vi h1 span:before {
  background: url("/img/icon_blog.png") no-repeat;
  background-size: 100% auto;
  content: "";
  height: 33px;
  left: -40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 33px;
}

#blog_main {
  text-align: left;
}
#blog_main .blog_inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1200px;
  padding: 3em 0 6em;
}
#blog_main #blog_side {
  width: 22%;
}
#blog_main #blog_side dt {
  border-bottom: 3px dotted #4ea2ec;
  color: #4ea2ec;
  font-weight: 700;
  margin-bottom: 1em;
  padding: 1em 0 0.3em;
  text-align: center;
}
#blog_main #blog_side dd {
  margin-bottom: 2em;
}
#blog_main #blog_side ul li {
  padding-left: 1em;
  position: relative;
}
#blog_main #blog_side ul li:before {
  content: "・";
  height: 1em;
  left: 0;
  position: absolute;
  top: 0;
  width: 1em;
}
#blog_main #blog_side ul li a {
  text-decoration: underline;
}
#blog_main #blog_entry {
  width: 73%;
}
#blog_main #blog_entry p {
  padding-top: 1.5em;
}
#blog_main #blog_entry > section {
  margin-bottom: 5em;
}
#blog_main #blog_archive {
  width: 73%;
}
#blog_main .blog_title {
  color: #3470b8;
  border-bottom: 3px dotted #4ea2ec;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
}
#blog_main .blog_detail {
  display: flex;
  gap: 0.6em;
  justify-content: flex-end;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
}
#blog_main .blog_detail li {
  font-size: 90%;
}
#blog_main .blog_detail li a {
  text-decoration: underline;
}
#blog_main .blog_detail li:first-child:after {
  content: "｜";
  height: 1em;
  margin-left: 0.6em;
  width: 1em;
  vertical-align: middle;
}
#blog_main .archive_list {
  padding: 1em 0;
}
#blog_main .archive_list li {
  line-height: 1.6;
  margin-bottom: 0.8em;
}
#blog_main .archive_list li a {
  color: #3670b8;
  display: inline-block;
  font-weight: 500;
  padding-left: 1.8em;
  position: relative;
}
#blog_main .archive_list li a:before {
  background: url("/img/icon_blog.png") no-repeat;
  background-size: 100% auto;
  content: "";
  height: 1em;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
}
#blog_main .blog_page {
  margin-top: 5em;
  padding-top: 1.5em;
  position: relative;
}
#blog_main .blog_page li a {
  background: #4ea2ec;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
  letter-spacing: 0.1em;
  line-height: 1.1;
  padding: 0.6em 2em 0.8em;
  position: relative;
}
#blog_main .blog_page li.page_back {
  left: 0;
  position: absolute;
  top: 0;
}
#blog_main .blog_page li.page_back a {
  padding-left: 3em;
}
#blog_main .blog_page li.page_back a:before {
  background: url("/img/icon_arrow_01.png") no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 16px;
  left: 1em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 10px;
}
#blog_main .blog_page li.page_next {
  position: absolute;
  right: 0;
  top: 0;
}
#blog_main .blog_page li.page_next a {
  padding-right: 3em;
}
#blog_main .blog_page li.page_next a:before {
  background: url("/img/icon_arrow_01.png") no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 16px;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}

@media screen and (max-width: 1200px) {
  #blog_vi h1 {
    font-size: 3vw;
  }
  #blog_main .blog_inner {
    padding: 3em 2em 6em;
  }
  #blog_main .blog_title {
    font-size: 2.166vw;
  }
}
@media screen and (max-width: 768px) {
  #blog_vi {
    background: url("/img/vi_blog_sp.jpg") center center no-repeat;
    background-size: cover;
  }
  #blog_vi h1 {
    font-size: 4vw;
    line-height: 1.3;
  }
  #blog_main .blog_inner {
    display: block;
    padding: 1.5em 0 3em;
  }
  #blog_main #blog_side {
    background: rgba(0, 164, 240, 0.05);
    margin-top: 3em;
    padding: 0 2em 2em;
    width: auto;
  }
  #blog_main #blog_side dt {
    font-size: 3.6vw;
  }
  #blog_main #blog_side dd:last-of-type {
    margin-bottom: 0;
  }
  #blog_main #blog_entry,
  #blog_main #blog_archive {
    padding: 0 2em;
    width: auto;
  }
  #blog_main .blog_title {
    font-size: 3.8vw;
  }
  #blog_main .blog_detail li {
    font-size: 80%;
  }
  #blog_main .archive_list li {
    font-size: 3.4vw;
  }
  #blog_main .blog_page {
    margin-top: 2em;
  }
}
/* ------------------------------------
// wp class
------------------------------------ */
div.alignright,
img.alignright,
a.alignright {
  float: right;
  margin: 0 0 20px 20px;
}

div.alignleft,
img.alignleft,
a.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}

div.aligncenter,
img.aligncenter,
a.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 20px 0 0;
}

.entrybody::after {
  content: "";
  clear: both;
  display: block;
}
.entrybody h1,
.entrybody h2,
.entrybody h3,
.entrybody h4,
.entrybody h5,
.entrybody h6 {
  font-weight: 700;
  margin: 2em 0 1em;
}
.entrybody h1,
.entrybody h2,
.entrybody h3 {
  font-size: 2.2rem;
}
.entrybody h4,
.entrybody h5,
.entrybody h6 {
  font-size: 2rem;
}
.entrybody p {
  margin-bottom: 2em;
}
.entrybody p::before {
  content: "";
  clear: both;
  display: block;
}
.entrybody ul {
  margin-bottom: 2em;
}
.entrybody ul li {
  padding-left: 1em;
  position: relative;
}
.entrybody ul li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.entrybody ol {
  margin-bottom: 2em;
  counter-reset: number;
}
.entrybody ol li {
  padding-left: 1.5em;
  position: relative;
}
.entrybody ol li::before {
  position: absolute;
  left: 0;
  counter-increment: number;
  content: counter(number) ".";
}

@media screen and (max-width: 768px) {
  .aligncenter,
  .alignright,
  .alignleft {
    float: none !important;
    padding: 0 0 20px 0 !important;
  }
}
/* ------------------------------------
// pager
----------------------------------- */
.pager {
  margin-top: 5em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.pager li {
  line-height: 1;
  margin: 6px;
}
.pager li a,
.pager li span.current {
  border: 1px solid #4ea2ec;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  width: 2.7em;
  height: 2.7em;
  border-radius: 50%;
}
.pager li span.current {
  background: #4ea2ec;
  color: #fff;
}
.pager li a {
  background: #fff;
  text-decoration: none !important;
  color: #4ea2ec;
  transition: 0.3s;
}
.pager li a:hover {
  opacity: 0.8;
}
.pager li a.next, .pager li a.prev {
  background: #4ea2ec;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
  letter-spacing: 0.1em;
  line-height: 1.1;
  padding: 0.6em 2em 0.8em;
  position: relative;
  width: auto;
  height: auto;
}
.pager li a.prev {
  padding-left: 3em;
}
.pager li a.prev:before {
  background: url("/img/icon_arrow_01.png") no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 16px;
  left: 1em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 10px;
}
.pager li a.next {
  padding-right: 3em;
}
.pager li a.next:before {
  background: url("/img/icon_arrow_01.png") no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 16px;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}
@media screen and (max-width: 768px) {
  .pager {
    padding: 4em 0;
  }
  .pager li a.prev, .pager li a.next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .pager li a.prev {
    top: 0;
  }
  .pager li a.next {
    bottom: 0;
  }
}

/* ------------------------------------
// notFound
----------------------------------- */
.notFound {
  padding: 100px 0;
}
.notFound p {
  text-align: center;
}