@media only screen and (max-width: 768px) {
  #header .btn_menu {
    right: 10px;
    font-size: 16px;
  }
  #header .btn_menu #nav_icon {
    width: 40px;
  }
  #header .logo {
    top: 0;
    left: 0;
    padding: 12px;
  }
  #header.active .logo {
    top: 0;
    left: 0;
  }
  #header.active .logo img {
    content: url(../images/logo_active.svg);
    width: 32px;
    height: 32px;
  }
  .idx7 {
    padding: 40px 0;
  }
  .idx7 .fblock {
    display: flex !important;
  }
  .idx7 .inner {
    max-width: 610px;
  }
  .idx7 .ttl02 {
    font-size: 8vw;
  }
  .idx7 .img1 {
    order: 1;
  }
  .idx7 .img1,
  .idx7 .img2 {
    max-width: 100%;
    width: 100%;
  }
  .idx7 .img1 .txt,
  .idx7 .img1 .img,
  .idx7 .img2 .txt,
  .idx7 .img2 .img {
    max-width: 100%;
    width: 100%;
  }
  .idx7 .img2 {
    text-align: center;
  }
  .idx7 .img2 .img {
    display: table;
    margin: 25px auto;
  }
  .idx7 .box > div {
    width: 100%;
    max-width: 100%;
  }
  .idx7 .box > div:not(:last-child) {
    margin-bottom: 25px;
  }
  .idx7 .box {
    padding: 40px 0;
    margin-bottom: 40px;
  }
  .idx7 .box .box_btn {
    margin-left: auto;
    margin-right: auto;
  }
  .idx7 .box .box_btn a {
    letter-spacing: 0;
  }
  footer {
    padding: 40px 0;
  }
  footer .left,
  footer .right {
    width: 100%;
    max-width: 100%;
  }
  footer .ft_logo {
    margin: 25px auto;
    display: table;
  }
  footer .txt {
    width: 100%;
    padding-bottom: 25px;
  }
  footer .txt p {
    position: relative;
    padding-left: 60px;
  }
  footer .txt p span {
    position: absolute;
    left: 0;
    top: 0;
  }
  footer .txt p br {
    display: none;
  }
  footer .btn {
    margin: 25px auto;
  }
  footer .copyright {
    padding: 0;
  }
  footer .copyright .left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
  }
  footer .copyright p {
    letter-spacing: 0;
  }
  footer .copyright .totop {
    margin-right: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .under #warpper {
    background-size: 120%;
    background-position: top center;
  }
  .under #main {
    padding-bottom: 40px;
  }
  .under #key h2 {
    font-size: 24px;
  }
  .under #key p {
    max-width: 100%;
  }
  .under #key .key_bg {
    height: 260px;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    mask-position: center top;
    mask-size: cover;
  }
  .under h3 {
    font-size: 22px;
    margin: 20px 0;
  }
  .under .section {
    padding-top: 40px;
  }
  .under h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .under h5 {
    font-size: 18px;
  }
  .under .ud_list01 .item {
    width: 100%;
    height: 180px;
    padding: 0 20px;
  }
  .under .ud_list01 .item::before, .under .ud_list01 .item::after {
    left: 0;
    right: 0;
    mask-size: contain;
  }
  .under .ud_list01 .item p {
    max-width: 100%;
  }
  .under .ud_list01 .item:last-child {
    margin-top: 20px;
  }
  .under .ud_list01 .item:last-child::before, .under .ud_list01 .item:last-child::after {
    left: 0;
    right: 0;
  }
  .under .ud_list01 .item:last-child h4 {
    text-align: left;
  }
  .under .ud_list01 .item:last-child p {
    text-align: left;
    display: table;
    margin-left: 0;
  }
  .under .ud_fblock01 figure {
    max-width: 100%;
    width: 100%;
  }
  .under .ud_fblock01 figure img {
    width: 100%;
    border-radius: 20px;
  }
  .under .ud_fblock01 .txt {
    width: 100%;
  }
  .under .ud_fblock02 {
    border-radius: 20px;
  }
  .under .ud_fblock02 figure {
    width: 100%;
  }
  .under .ud_fblock02 figure img {
    border-radius: 0 0 20px 20px;
    display: block;
  }
  .under .ud_fblock02 .txt {
    width: 100%;
    padding: 20px;
  }
  .be_img .be_image .ttl {
    left: calc(100% + 5vw);
  }
  .be_list {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .be_list .item {
    width: 100%;
    font-size: 12px;
  }
  .be_list .item p strong {
    font-size: 1.5em;
  }
  .ud_fblock03 figure {
    width: 100%;
    max-width: 100%;
  }
  .ud_fblock03 figure img {
    border-radius: 20px;
  }
  .ud_fblock03 .txt {
    width: 100%;
  }
  .form_group.w50 {
    width: 100%;
  }
  .form_group.w100 {
    width: 100%;
  }
  .contact #main {
    padding-bottom: 65vw;
  }
  .ud_fblock04 .txt {
    width: 100%;
  }
  .ud_fblock04 .contact_box {
    margin-top: 40px;
    width: 100%;
    max-width: 100;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 20px;
  }
  .ud_fblock04 .contact_box .btn {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
  .ud_fblock04 .contact_box .btn button {
    width: 100%;
    max-width: 100%;
  }
  .under.sustainability #key {
    margin-top: 20px;
  }
  .under.sustainability #key h2 {
    width: 100%;
    font-size: 24px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .under.sustainability #key h2 br {
    display: none;
    text-align: center;
  }
  .under.sustainability #key .key_text_r {
    max-width: 100%;
    width: 100%;
    margin: 0;
    margin-top: 20px;
    text-align: justify;
    padding: 0;
    margin-bottom: 25px;
  }
  .under.sustainability #key .key_text_r::after {
    top: -16vw;
    left: unset;
    right: -130px;
    font-size: 2.15vw;
  }
  .under.sustainability #key .key_video {
    margin-top: 0;
  }
  .under.sustainability .sus_list {
    margin-top: 20px;
  }
  .under.sustainability .sus_list .item .sus_ttl {
    width: 100%;
  }
  .under.sustainability .sus_list .item .sus_ttl p {
    font-size: 22px;
  }
  .under.sustainability .sus_list .item .tbl {
    width: 100%;
  }
  .under.sustainability .sus_list01 {
    padding: 40px 0;
  }
  .under.sustainability .sus_list01 .item {
    align-items: center;
  }
  .under.sustainability .sus_list01 .item .txt {
    width: 100%;
  }
  .under.sustainability .sus_list01 .item figure {
    margin: 20px 0;
    width: 100%;
  }
  .under.sustainability .sus_list01 .item figure img {
    border: 1px solid var(--main_clr);
    border-radius: 20px;
  }
  .under.sustainability .sus_list01 .item h3 {
    text-align: left;
  }
  .under.sustainability .sus_list01 .item:last-child {
    margin-top: 20px;
  }
  .under.sustainability .sus_list01 .item:last-child figure {
    order: 1;
  }
  .under .idx2_list .idx2_item {
    width: 100%;
  }
  .under.sustainability #key .key_text_r::before {
    bottom: 0;
    right: 0;
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 768px) {
  .home #key {
    justify-content: center;
    position: relative;
    height: 135vw;
    max-height: 100vh;
    max-width: 100%;
    aspect-ratio: unset;
  }
  .home #key h2 {
    text-align: center;
    color: #fff;
    font-size: 6vw;
    padding-bottom: 100px;
  }
  .home #key .inner {
    position: static;
  }
  .home #key .key_360 {
    right: unset;
    left: calc(50% - 87px);
    bottom: 40px;
  }
  .home h3 {
    text-align: center;
    font-size: min(5vw, 26px);
    line-height: 1.35;
  }
}
@media only screen and (max-width: 768px) {
  .idx1 {
    background-position: bottom left;
    padding: 40px 0 0;
  }
  .idx1 ul li {
    width: 48%;
  }
  .idx1 ul li a::after {
    display: none;
  }
  .idx1 .idx1_box {
    width: 100%;
    width: 100%;
    padding: 40px 0;
  }
  .idx1 h3 {
    font-size: 18px;
    text-align: center;
  }
  .idx1 h3 strong {
    font-weight: 500;
  }
}
@media only screen and (max-width: 768px) {
  .idx2 {
    background-size: 100%;
    background-color: #e7ecec;
    overflow: hidden;
  }
  .idx2 .inner {
    padding-top: 60vw;
  }
  .idx2 .inner::after {
    top: -10vw;
    left: calc(50% - 4.815em);
    font-size: 3vw;
  }
  .idx2 h3 {
    margin-bottom: 25px;
  }
}
@media only screen and (max-width: 768px) {
  .idx3 .inner {
    position: relative;
    padding: 40px 20px;
  }
  .idx3 .inner::before {
    left: 10px;
  }
  .idx3 .idx3_txt {
    width: 100%;
    padding-left: 0;
    padding-bottom: 40px;
  }
  .idx3 .idx3_slider {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .idx3 .idx3_ttl {
    writing-mode: unset;
    position: static;
    text-align: center;
  }
  .idx3 .slick-dotted.slick-slider {
    margin: 0;
  }
  .idx3 .slick-dots {
    bottom: 20px;
  }
  .idx3 dl {
    padding: 10px 0;
  }
  .idx3 dl dt,
  .idx3 dl dd {
    letter-spacing: 0;
  }
  .idx3 dl dt {
    width: 100%;
    margin-bottom: 5px;
  }
  .idx3 dl dd {
    width: 100%;
  }
  .idx3 .slick-dots {
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .idx3 .slick-dots li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0px;
  }
  .idx3 .slick-dots li button {
    margin: 0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    transition: 0.3s all;
  }
  .idx3 .slick-dots li button::before {
    display: none;
  }
  .idx3 .slick-dots li button:hover {
    background: #fff;
  }
  .idx3 .slick-dots li.slick-active {
    width: 40px;
  }
  .idx3 .slick-dots li.slick-active button {
    width: 40px;
    border-radius: 20px;
    background-color: #fff;
  }
}
@media only screen and (max-width: 768px) {
  .idx4 .item .ttl01 {
    font-size: 8px;
  }
  .idx4 .item .ttl02 {
    font-size: 14px;
  }
}
@media only screen and (max-width: 768px) {
  .idx5 {
    background-size: 90%;
    padding: 40px 0;
    background-color: #fffbf5;
  }
  .idx5 .inner {
    width: 100%;
  }
  .idx5 p {
    text-align: center;
  }
  .idx5 .idx5_txt {
    max-width: 100%;
    width: 100%;
  }
  .idx5 .ttl02 {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #744a32;
    margin: 40px 0;
  }
  .idx5 .ttl03 {
    font-size: 14px;
    line-height: 150%;
    color: #c17f51;
  }
  .idx5 .idx5_list {
    margin-top: 20px;
    padding-top: 20px;
  }
  .idx5 .idx5_list .item {
    width: 100%;
    text-align: center;
  }
  .idx5 .idx5_list .item:not(:last-child) {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .idx6 {
    padding: 40px 0 0;
  }
  .idx6 > div {
    width: 100%;
  }
  .idx6 .idx6_slider1 {
    margin: 20px 0;
  }
  .idx6 .idx6_slider1 .ttl01 {
    font-size: 20px;
    margin: 20px 0 20px;
  }
  .idx6 .idx6_slider1 .slick-arrow {
    top: 42%;
  }
  .idx6 .right {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 480px) {
  .idx6 .idx6_slider1 .ttl01 {
    font-size: 18px;
  }
  .idx6 .idx6_box::before {
    top: 25.5%;
  }
  .idx6 .idx6_slider1 .slick-arrow {
    top: 30%;
    width: 40px;
    height: 80px;
  }
  .idx6 .idx6_slider1 .slick-prev {
    left: -28px;
  }
  .idx6 .idx6_slider1 .slick-next {
    right: -28px;
  }
  .idx6 .right {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .ixd7 {
    padding: 40px 0 !important;
  }
  .idx8 {
    aspect-ratio: unset;
    padding: 60px 0;
  }
}
@media only screen and (max-width: 768px) {
  .idx9 {
    padding: 40px 0;
  }
  .idx9 .idx9_bg picture::after {
    font-size: 8px;
  }
  .idx9 .idx9_bg {
    font-size: 10px;
    width: 100%;
  }
  .idx9 .idx9_txt {
    position: static;
    width: 100%;
    max-width: 100%;
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0;
  }
  .idx9 .idx9_txt .ttl {
    font-size: 18px;
    color: var(--clr1);
    border-bottom-color: var(--clr1);
  }
  .idx9 .idx9_txt .item > .fblock.fblock2 {
    position: relative;
  }
  .idx9 .idx9_txt .item > .fblock.fblock2::after {
    content: "";
    position: absolute;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: url(../images/idx6_arr_right.svg);
    background-color: var(--clr1);
    width: 14px;
    height: 13px;
    right: 0;
    top: calc(50% - 14px);
    animation: infinite linear 1.2s idx9_r;
  }
  @keyframes idx9_r {
    50% {
      right: 10px;
    }
    100% {
      right: 0;
    }
  }
  .idx9 .idx9_ul1 {
    display: flex;
  }
  .idx9 .idx9_ul1 li {
    color: var(--clr1);
    width: 45%;
  }
  .idx9 .idx9_ul1 .clr2::after {
    background-image: url(../images/clr2_sp.png);
  }
  .idx9 .idx9_ul1 .clr3::after {
    background-image: url(../images/clr3_sp.png);
  }
  .idx9 .idx9_ul1 .clr4::after {
    background-image: url(../images/clr4_sp.png);
  }
  .idx9 .idx9_ul1 .clr5::after {
    background-image: url(../images/clr5_sp.png);
  }
  .idx9 .idx9_ul2::-webkit-scrollbar {
    display: none;
  }
  .idx9 .idx9_ul2 {
    scrollbar-width: none;
  }
  .idx9 .idx9_ul2 {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 50%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0;
  }
  .idx9 .idx9_ul2 li {
    list-style: none;
    scroll-snap-align: start;
    color: var(--clr1);
    margin-bottom: 10px;
    padding-right: 10px;
  }
  .idx9 .idx9_ul2 li span {
    border-color: var(--clr1);
    min-width: 1.8em;
    min-height: 1.8em;
  }
  .idx9 .idx9_ul2 li:nth-child(4n+1),
  .idx9 .idx9_ul2 li:nth-child(4n+2),
  .idx9 .idx9_ul2 li:nth-child(4n+3),
  .idx9 .idx9_ul2 li:nth-child(4n+4) {
    scroll-snap-align: start;
  }
  .idx9 .list_point {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .idx10 {
    padding: 20px 0 40px;
  }
  .idx10 .idx10_txt {
    width: 100%;
  }
  .idx10 .idx10_img {
    width: 100%;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .idx11 {
    padding: 40px 0 0;
  }
  .idx11 .left,
  .idx11 .right {
    max-width: 100%;
    width: 100%;
    padding: 0;
  }
  .idx11 .left {
    padding-bottom: 40px;
    border-bottom: 1px solid #ebe0d0;
  }
  .idx11 .idx10_img {
    width: 100%;
    margin-top: 40px;
  }
  .idx11 .right {
    display: flex;
  }
  .idx11 .item {
    padding: 10px;
  }
  .idx11 .item p {
    letter-spacing: 0;
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --wrapper: 60px;
  }
  .fblock {
    display: block;
  }
  .inner {
    max-width: 610px;
  }
  .btn {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  body {
    font-size: 14px;
  }
}
@media only screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
  }
}
@media only screen and (min-width: 769px) {
  .sp_only {
    display: none !important;
  }
}