@charset "UTF-8";
@-webkit-keyframes loop {
    0% {
      transform: translateX(100%);
    }
  
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop {
    0% {
      transform: translateX(100%);
    }
  
    to {
      transform: translateX(-100%);
    }
  }
  
  @-webkit-keyframes loop2 {
    0% {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(-200%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(-200%);
    }
  }

 /* ========================================
   @media screen and (min-width: 768px), print
 ======================================== */ 
@media screen and (min-width: 768px),print {
#domain .seo_bread_list {margin-bottom: -122px;padding: 49px 0;}
#domain .main-ttl {margin-bottom: 57px;}

/* mainContents
-------------------------------------*/
.mainContents {
    background: #C8C6BE;
    padding-block: 166px;
}
.mainContents .enttl {
    text-align: center;
    margin-bottom: 23px;
}
.mainContents .subt {
    font-weight: bold;
    font-size: 26px;
    text-align: center;
    margin-bottom: 100px;
}
.mainContents .bg-slide {
    max-width: 1920px;
    padding-bottom: 68px;
}
.mainContents .bg-slide .loop {
    overflow: hidden;
}
.mainContents .bg-slide .loop .loop__box {
    display: flex;
    width: 100vw;
}
.mainContents .bg-slide .loop .loop__box img {
    min-width: 102.084vw;
}
.mainContents .bg-slide .loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.mainContents .bg-slide .loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}


/* contents
-------------------------------------*/
.contents {
    position: relative;
}
.contents .ttl {
    font-weight: bold;
    font-size: 28px;
    letter-spacing: 0.05em;
    line-height: 1.285714;
    text-align: center;
    margin-bottom: 40px;
}
.contents .lead {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: center;
    margin-bottom: 30px;
}
.contents .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
}
.contents .bg-slide {
    max-width: 1920px;
    padding-top: 137px;
    padding-bottom: 0;
    position: relative;
    z-index: 5;
    margin-bottom: -228px;
}
.contents .bg-slide .loop {
    overflow: hidden;
}
.contents .bg-slide .loop .loop__box {
    display: flex;
    width: 100vw;
}
.contents .bg-slide .loop .loop__box img {
    min-width: 138.75vw;
}
.contents .bg-slide .loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.contents .bg-slide .loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}
.contents .list {
    display: grid;
    gap: 40px;
    width: min(95%, 1280px);
    margin-inline: auto;
    position: relative;
    z-index: 6;
}
.contents .list li {
    background: #FFFFFF;
    padding-block: 72px 70px;
    padding-inline: 130px;
}
.contents .list li .ttl {
    display: flex;
    gap: 20px;
    align-items: center;
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 28px;
    justify-content: center;
    letter-spacing: 0;
}
.contents .list li .lead {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.6666;
    text-align: center;
    margin-bottom: 33px;
}
.contents .list li .inBox {
   display: grid;
   grid-template-columns: 45.099% 47.5490%;
   gap: 50px;
}
.contents .list li:nth-child(7) .inBox {margin-bottom: -27px;}
.contents .list li .inBox .txt{
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.1428;
    text-align: left;
}
.contents .list li .inBox .photo {
    padding-top: 5px;
}
.contents .list li .inBox .btn {
    width: min(95%, 280px);
    padding: 25px 0;
}
.contents .list li .inBox .btn a {
    display: block;
    background: #131313;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.85714;
    text-align: left;
    color: #fff;
    border-radius: 200px;
    padding: 17px 40px;
    position: relative;
}
.contents .list li .inBox .btn a::after {
    content: "";
    display: block;
    width: 10px;
    height: 7px;
    background: url(../images/common/btn-arrow.svg)no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

/* イラスト */
.domain-person {
    display: grid;
    padding-block: 20px 0px;
    justify-content: center;
    gap: 39px;
    align-items: center;
    position: relative;
    margin-bottom: -50px;
}
.domain-person .domain-person-textFrame {
    border: 2px solid #269A6F;
    border-radius: 20px;
    padding-block: 23px;
    width: 690px;
    height: auto;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 0;
}
.domain-person .domain-person-text {
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.142857;
    text-align: left;
    width: min(95%, 514px);
}
.domain-person.is-left {
    grid-template-columns: 11.3725% 69.413%;
    left: 23px;
}
.domain-person.is-left .domain-person-illust {
    order: 1;
    position: relative;
    top: 18px;
}
 .domain-person.is-left .domain-person-textFrame {
    order: 2;
}
.domain-person.is-left .domain-person-textFrame::before {
    position: absolute;
    content: "";
    background: url(../images/domain/fukidashi-l.png)no-repeat center left;
    background-size: contain;
    width: 18px;
    height: 20px;
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
    z-index: 2;
}

.domain-person.is-right {
    grid-template-columns: 68.923% 11.3725%;
    left: -10px;
    gap: 23px;
    padding-block: 16px 0;
}
.domain-person.is-right .domain-person-illust {
    order: 2;
    top: 20px;
    position: relative;
}
.domain-person.is-right .domain-person-textFrame {
    order: 1;
}
.domain-person.is-right .domain-person-textFrame::before {
    position: absolute;
    content: "";
    background: url(../images/domain/fukidashi-r.png)no-repeat center left;
    background-size: contain;
    width: 13px;
    height: 18px;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    z-index: 2;
}

.contents .deco01 {
    position: absolute;
    top: 16px;
    right: -83px;
}
.contents .deco02 {
    position: absolute;
    top: 921px;
    left: 0;
}
.contents .deco03 {
    position: absolute;
    top: 2741px;
    left: 76px;
}
.contents .deco02-02 {
    position: absolute;
    top: 3991px;
    right: 0;
}
.contents .deco04 {
    position: absolute;
    bottom: -148px;
    left: -78px;
}

/* deco 共通 初期状態 */
.deco01,
.deco02,
.deco03,
.deco02-02,
.deco04 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
/* 表示状態 */
.deco01.is-show,
.deco02.is-show,
.deco03.is-show,
.deco02-02.is-show,
.deco04.is-show {
    opacity: 1;
    transform: translateY(0);
}


/* bottom-sec
-------------------------------------*/
.bottom-sec {
    padding-block: 160px;
}
.bottom-sec .ttl{
    font-weight: bold;
    font-size: 28px;
    letter-spacing: 0.05em;
    line-height: 1.642857;
    text-align: center;
    margin-bottom: 60px;
}
.bottom-sec .bg-slide {
    max-width: 1920px;
    padding-bottom: 138px;
}
.bottom-sec .bg-slide .loop {
    overflow: hidden;
}
.bottom-sec .bg-slide .loop .loop__box {
    display: flex;
    width: 100vw;
}
.bottom-sec .bg-slide .loop .loop__box img {
    min-width: 124.015vw;
}
.bottom-sec .bg-slide .loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.bottom-sec .bg-slide .loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}
.bottom-sec .link-box {
    width: min(95%, 1100px);
    margin-inline: auto;
}
.bottom-sec .link-box .ttl{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-bottom: 70px;
    letter-spacing: 0;
}
.bottom-sec .link-box .bnr-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
  
}

}


/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
.contents .deco01 {
    position: absolute;
    top: 0.833vw;
    right: -4.323vw;
}
.contents .deco01 img {
    width: 38.25vw;
}
.contents .deco02 {
    position: absolute;
    top: 47.969vw;
    left: 0;
}
.contents .deco02 img {
    width: 29.29vw;
}
.contents .deco03 {
    position: absolute;
    top: 142.76vw;
    left: 3.958vw;
}
.contents .deco03 img {
    width: 33.25vw;
}
.contents .deco02-02 {
    position: absolute;
    top: 207.865vw;
    right: 0;
}
.contents .deco02-02 img {
    width: 29.29vw;
}
.contents .deco04 {
    position: absolute;
    bottom: -7.708vw;
    left: -4.062vw;
}
.contents .deco04 img {
    width: 38.25vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1350px)
======================================== */
@media screen and (min-width:768px) and (max-width:1350px) {
.contents .list li .inBox .photo img {
    width: 100%;
    height: auto;
}
/* イラスト */
.domain-person {
    padding-block: 1.481vw 0px;
    gap: 1.481vw;
    margin-bottom: -3.704vw;
}
.domain-person .domain-person-text {
    width: min(95%, 38.07vw);
}
.domain-person .domain-person-illust img {
    width: 100%;
    height: auto;
}
.domain-person.is-left {
    grid-template-columns: 11.3725% 69.413%;
    left: 0.963vw;
}
.domain-person.is-left .domain-person-illust {
    top: 1.333vw;
}
.domain-person.is-left .domain-person-textFrame {
    width: 52.444vw;
}
.domain-person.is-right {
    grid-template-columns: 68.923% 11.3725%;
    left: -0.741vw;
    gap: 1.704vw;
}
.domain-person.is-right .domain-person-textFrame {
    width: 52.074vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
.bottom-sec .link-box .bnr-item img {
    width: 100%;
    height: auto;
}
.contents .bg-slide {
    margin-bottom: -17.81vw;
}
.contents .list li {
    padding-block: 5.625vw 5.469vw;
    padding-inline: 10.156vw;
}
.contents .list li .lead {
    font-size: clamp(0.938rem, 0.656rem + 0.59vw, 1.125rem);
}
.contents .list li .inBox {
    gap: 3.906vw;
}

}

/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#domain .seo_bread_list {
    margin-bottom: -16vw;
    padding: 7vw 0 3.5vw;
    position: relative;
    z-index: 2;
}

/* mainContents
-------------------------------------*/
.mainContents {
    background: #C8C6BE;
    padding-block: 27.79vw 17vw;
    position: relative;
}
.mainContents .enttl {
    text-align: center;
    margin-bottom: 3vw;
}
.mainContents .subt {
    font-weight: bold;
    font-size:3.623vw;
    text-align: center;
    margin-bottom: 8.08vw;
}
.mainContents .bg-slide {
    max-width: 100vw;
    padding-bottom: 8.1vw;
}
.mainContents .bg-slide .loop {
    overflow: hidden;
}
.mainContents .bg-slide .loop .loop__box {
    display: flex;
    width: 100vw;
}
.mainContents .bg-slide .loop .loop__box img {
    min-width: 322.084vw;
}
.mainContents .bg-slide .loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.mainContents .bg-slide .loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}
.mainContents .deco01-sp {
    position: absolute;
    top: 16vw;
    right: -42vw;
}
.mainContents .deco01-sp img {
    width: 112.56vw;
}
/* deco 共通 初期状態 */
.deco01-sp,
.deco02-sp{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
/* 表示状態 */
.deco01-sp.is-show,
.deco02-sp.is-show {
    opacity: 1;
    transform: translateY(0);
}


/* contents
-------------------------------------*/
.contents {
    position: relative;
}
.contents .deco02-sp {
    position: absolute;
    top: 101vw;
    left: -25vw;
}
.contents .deco02-sp img {
    width: 86.35vw;
}
.contents .ttl {
    font-weight: bold;
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 7.66vw;
}
.contents .lead {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
    margin-bottom: 5.25vw;
    width: 82.13vw;
    margin-inline: auto;
}
.contents .txt {
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2.142857;
    text-align: left;
    width: 82.13vw;
    margin-inline: auto;
}
.contents .bg-slide {
    max-width: 100vw;
    padding-top: 7vw;
    padding-bottom: 0;
    position: relative;
    z-index: 5;
    margin-bottom: -8.5vw;
}
.contents .bg-slide .loop {
    overflow: hidden;
}
.contents .bg-slide .loop .loop__box {
    display: flex;
    width: 100vw;
}
.contents .bg-slide .loop .loop__box img {
    min-width: 350.75vw;
}
.contents .bg-slide .loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.contents .bg-slide .loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}
.contents .list {
    display: grid;
    gap: 4.23vw;
    width: 91.79vw;
    margin-inline: auto;
    position: relative;
    z-index: 6;
}
.contents .list li {
    background: #FFFFFF;
    padding-block: 9.66vw 8.66vw;
    padding-inline: 4.83vw;
}
.contents .list li .ttl {
    font-weight: bold;
    font-size:5.314vw;
    line-height: 1.4545;
    margin-bottom: 3.83vw;
    letter-spacing: 0;
    display: grid;
    gap: 1.5vw;
}
.contents .list li:nth-child(1) .ttl img {
    width: 23.19vw;
}
.contents .list li:nth-child(2) .ttl img {
    width: 46.73vw;
}
.contents .list li:nth-child(3) .ttl img {
    width: 17.63vw;
}
.contents .list li:nth-child(4) .ttl img {
    width: 46.73vw;
}
.contents .list li:nth-child(5) .ttl img {
    width: 17.63vw;
}
.contents .list li:nth-child(6) .ttl img {
    width: 17.63vw;
}
.contents .list li:nth-child(7) .ttl img {
    width: 15.94vw;
}
.contents .list li .lead {
    font-weight: bold;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: left;
    margin-bottom: 3.83vw;
}
.contents .list li .inBox {
   display: grid;
   gap: 5.23vw;
}
.contents .list li .inBox .txt{
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2.1428;
    text-align: left;
}
.contents .list li .inBox .btn {
    width: 57.25vw;
    padding-block: 8vw 3vw;
}
.contents .list li .inBox .btn a {
    display: block;
    background: #131313;
    font-weight: 500;
    font-size: 2.66vw;
    letter-spacing: 0.05em;
    line-height: 1.8181;
    text-align: left;
    color: #fff;
    border-radius: 48.31vw;
    padding: 4.11vw 7.97vw;
    position: relative;
}
.contents .list li .inBox .btn a::after {
    content: "";
    display: block;
    width: 2.42vw;
    height: 1.69vw;
    background: url(../images/common/btn-arrow.svg)no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 6.21vw;
    transform: translateY(-50%);
}

/* イラスト */
.domain-person {
    display: grid;
    padding-block: 3.85vw 1.6vw;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: -10.3vw;
}
.domain-person .domain-person-text {
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2.142857;
    text-align: left;
    width: min(95%, 71.74vw);
}
.domain-person .domain-person-illust {
    order: 2;
    position: relative;
}
.domain-person.is-left .domain-person-illust {
    left: 17vw;
}
.domain-person.is-right .domain-person-illust {
    left: 49.5vw;
}
.domain-person .domain-person-illust img {
    width: 15.70vw;
}
.domain-person .domain-person-textFrame {
    border: 0.5vw solid #269A6F;
    border-radius: 4.83vw;
    padding-block: 4.4vw;
    width: 82.13vw;
    height: auto;
    display: grid;
    place-items: center;
    order: 1;
    position: relative;
    z-index: 0;
}
.domain-person .domain-person-textFrame::after {
    position: absolute;
    content: "";
    background: url(../images/domain/fukidashi_sp.png)no-repeat center left;
    background-size: contain;
    width: 4.23vw;
    height: 2.54vw;
    bottom: -2.5vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


/* bottom-sec
-------------------------------------*/
.bottom-sec {
    padding-block: 14.49vw;
}
.bottom-sec .ttl{
    font-weight: bold;
    font-size:4.348vw;
    letter-spacing: 0.05em;
    line-height: 1.7777;
    text-align: center;
    margin-bottom: 6.25vw;
}
.bottom-sec .bg-slide {
    max-width: 100vw;
    padding-bottom: 18.5vw;
}
.bottom-sec .bg-slide .loop {
    overflow: hidden;
}
.bottom-sec .bg-slide .loop .loop__box {
    display: flex;
    width: 100vw;
}
.bottom-sec .bg-slide .loop .loop__box img {
    min-width: 328.2vw;
}
.bottom-sec .bg-slide .loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.bottom-sec .bg-slide .loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}
.bottom-sec .link-box .ttl{
    font-weight: bold;
    font-size:4.348vw;
    text-align: center;
    margin-bottom: 6.25vw;
    letter-spacing: 0;
}
.bottom-sec .link-box .bnr-item {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4.83vw;
    width: 67.63vw;
    margin-inline: auto;
}

}