@charset "UTF-8";
@import url("global.css");
#policytitle {
  height: 700px;
  background: url("../img/policy/topbg.jpg") no-repeat center center;
  position: relative;
  align-content: center;
  text-align: left; }
  #policytitle .titleblock {
    font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 600;
    position: relative;
    z-index: 3;
    margin-inline: auto 53%;
    padding-left: 5vw;
    width: fit-content; }
    #policytitle .titleblock .title {
      font-size: min(25px,2.3vw);
      line-height: 1.2;
      margin-bottom: 20px; }
      #policytitle .titleblock .title strong {
        display: block;
        font-size: 248%;
        letter-spacing: .06em; }
        #policytitle .titleblock .title strong i {
          font-size: 125%;
          padding-right: 8px; }
    #policytitle .titleblock .text {
      letter-spacing: .03em;
      line-height: 2; }
  #policytitle .image {
    position: absolute;
    z-index: 1; }
    #policytitle .image img {
      --delay: 0.2s;
      animation: topphoto 0.5s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--delay) * var(--index)) 1;
      animation-fill-mode: both; }
  #policytitle .bg {
    position: absolute;
    z-index: 1; }
    #policytitle .bg img {
      --delay: 0.2s;
      animation: topbg 0.5s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--delay) * var(--index)) 1;
      animation-fill-mode: both; }
  #policytitle .image1 {
    top: 0;
    left: 52%;
    width: 35%;
    height: 520px;
    z-index: 1; }
  #policytitle .image2 {
    right: 4%;
    top: 440px;
    height: 210px;
    width: 16.5%;
    z-index: 2; }
  #policytitle .image3 {
    min-width: 200px;
    width: 11.2%;
    bottom: 50%;
    right: calc(58% + 600px);
    z-index: 1; }
  #policytitle .image4 {
    top: 540px;
    width: 15.3%;
    min-width: 280px;
    left: 12%;
    z-index: 1; }
  #policytitle .bg1 {
    width: 12.6%;
    top: -30px;
    right: 54%;
    opacity: .5;
    filter: blur(4px);
    z-index: 0; }
  #policytitle .bg2 {
    width: 22%;
    left: 45%;
    top: 350px;
    opacity: .3;
    filter: blur(10px);
    z-index: 0; }

@keyframes topphoto {
  0% {
    opacity: 0;
    scale: 1.1;
    filter: blur(10px) grayscale(10); }
  100% {
    opacity: 1;
    scale: 1;
    filter: none; } }
@keyframes topbg {
  0% {
    opacity: 0;
    scale: .8; }
  100% {
    opacity: 1;
    scale: 1; } }
#breadcrumbs {
  position: static;
  text-align: right;
  margin-top: 65px; }

ul.policy {
  margin-top: 100px; }
  ul.policy li {
    margin-bottom: 140px;
    display: flex;
    gap: min(80px,5vw); }
    ul.policy li:nth-of-type(even) {
      flex-direction: row-reverse; }
    ul.policy li .image {
      width: 50%;
      min-height: 600px;
      flex-shrink: 0;
      box-shadow: 0 0 40px rgba(34, 34, 34, 0.1); }
    ul.policy li .main {
      padding-top: 6px;
      /*dl {
      	margin-top: 45px;
      	background-color: $bgcolor;
      	padding: 25px 30px;
      	font-size: 94%;
      	dt {
      		font-weight: 600;
      		margin-bottom: 5px;
      		&::before {
      			content: "";
      			width: 8px;
      			height: 8px;
      			display: inline-block;
      			vertical-align: 2px;
      			margin-right: 6px;
      			background-color: $black;
      		}
      		&::after {
      			content: "…";
      			display: inline-block;
      			margin-left: 3px;
      		}
      	}
      }*/ }
      ul.policy li .main .number {
        background-color: #132240;
        color: #fff;
        width: 110px;
        text-align: center;
        font-size: 13px;
        line-height: 30px;
        margin-bottom: 25px; }
      ul.policy li .main .title {
        font-size: min(40px,3.5vw);
        font-weight: 600;
        font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        margin-bottom: 25px;
        line-height: 1.4;
        word-break: keep-all; }
      ul.policy li .main .sub {
        color: #B4975A;
        font-weight: 600;
        margin-bottom: 20px; }
      ul.policy li .main .text p + p {
        margin-top: 1em; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #policytitle .titleblock .text br {
    display: none; }
  #policytitle .image1 {
    left: 53%;
    right: 0;
    width: auto; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #policytitle {
    height: 650px; }
    #policytitle .image2 {
      right: 4%;
      top: 480px;
      height: 160px;
      width: 25%; }
    #policytitle .image4 {
      min-width: 220px;
      left: 5%; }
    #policytitle .bg1 {
      width: 20%;
      top: -10px;
      right: 50%; }
    #policytitle .bg2 {
      width: 25%;
      left: 40%;
      top: 300px; }

  #breadcrumbs {
    margin-top: 50px; }

  ul.policy {
    margin-top: 80px; }
    ul.policy li {
      margin-bottom: 100px; }
      ul.policy li:nth-of-type(even) .image {
        margin-inline: 0 -6vw; }
      ul.policy li .image {
        margin-inline: -6vw 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #policytitle {
    height: auto;
    align-content: start; }
    #policytitle .titleblock {
      margin-inline: auto;
      padding-inline: 5vw;
      padding-block: 280px 230px;
      width: auto; }
      #policytitle .titleblock .title {
        font-size: min(20px,4.8vw); }
      #policytitle .titleblock .text {
        letter-spacing: .03em; }
    #policytitle .image1 {
      left: 0;
      height: 230px; }
    #policytitle .image2 {
      right: 4%;
      top: auto;
      bottom: 20px;
      height: 160px;
      width: 33%; }
    #policytitle .image4 {
      top: auto;
      bottom: -30px;
      height: 180px;
      width: 55%;
      min-width: inherit;
      left: 0; }
    #policytitle .bg1 {
      width: 26%;
      top: 200px;
      right: 6%; }
    #policytitle .bg2 {
      width: 40%;
      left: 28%;
      top: auto;
      bottom: 110px; }

  #breadcrumbs {
    margin-top: 40px; }

  ul.policy {
    margin-top: 70px; }
    ul.policy li {
      margin-bottom: 60px;
      display: block; }
      ul.policy li:nth-of-type(even) .image {
        margin-inline: 0; }
      ul.policy li .image {
        width: auto;
        min-height: inherit;
        box-shadow: 0 0 40px rgba(34, 34, 34, 0.1);
        margin-inline: 0 0; }
      ul.policy li .main {
        position: relative;
        z-index: 1;
        margin-top: -10px;
        padding-top: 0; }
        ul.policy li .main .number {
          margin: 0 0 15px -10px; }
        ul.policy li .main .sub {
          margin-bottom: 5px; }
        ul.policy li .main .title {
          font-size: min(24px,5.5vw);
          margin-bottom: 20px; }
        ul.policy li .main dl {
          margin-top: 25px;
          padding: 25px; } }