@charset "UTF-8";

@import url("https://use.typekit.net/atd0tao.css");

:root {
    --c_brown: #956D33;
    --c_beige: #FFF7ED;
    --en_mincho: cormorant-garamond, serif;
    --en_gothic: montserrat, sans-serif;
    --mincho: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', serif;
}

/*reset*/
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
/*
ul {
  list-style: none;
}
*/
button, input, select, textarea {
  margin: 0;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
select::-ms-expand {
    display: none;
}
input, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  max-width: 100%;
  border: none;
  border-radius: 0;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*, *::before, *::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
img, video {
  height: auto;
  max-width: 100%;
}
img {
  vertical-align: bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
iframe {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
td:not([align]), th:not([align]) {
  text-align: left;
}
td:not([align]), th:not([align]) {
  text-align: left;
}
a {
  color: var(--black);
  text-decoration: none;
}
/*//reset*/



html {
    font-size: 62.5%;
}
body {
    position: relative;
    width: 100%;
    color: var(--c_brown);
    font-size: 1.5em;
    font-family: var(--en_gothic);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    background-color: var(--c_beige);
}
/*//common*/

/*header*/
.wrapper {
    position: relative;
    width: 100%;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    overflow: hidden;
}
.main {
    width: 100%;
}
.inner_wrapper {
    width: 100%;
    padding-left: 155px;
}
.inner_wrapper + .inner_wrapper {
    background-color: #F7F7F7;
}
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 180px);
    padding: 40px 50px 0;
    z-index: 999;
}
a.hamburger {
    display: none;
    top: 25px;
    left: auto;
    right: 25px;
    width: 20px;
    height: 35px;
    padding: 0;
    background: transparent;
}
a.hamburger.active {
    width: 35px;
}
div.hamburger__icon, div.hamburger__icon:after, div.hamburger__icon:before {
    width: 100%;
    background-color: var(--c_brown);
}
div.hamburger__icon {
    margin-top: 15px;
    margin-bottom: 15px;
}
div.hamburger__icon:before {
    top: -15px;
}
.hamburger.active div.hamburger__icon:before {
    width: 45px;
    -moz-transform: translateY(15px)rotate(60deg);
    -ms-transform: translateY(15px)rotate(60deg);
    -webkit-transform: translateY(15px)rotate(60deg);
    transform: translateY(15px)rotate(60deg);
}
div.hamburger__icon:after {
    top: 15px;
}
.hamburger.active div.hamburger__icon:after {
    width: 45px;
    -moz-transform: translateY(-15px)rotate(-60deg);
    -ms-transform: translateY(-15px)rotate(-60deg);
    -webkit-transform: translateY(-15px)rotate(-60deg);
    transform: translateY(-15px)rotate(-60deg);
}
div.fat-nav {
    left: auto;
    right: 0;
    width: 250px;
    height: auto;
    padding: 80px 25px 60px;
    background-color: var(--c_brown);
    transform: scale(1);
}
div.fat-nav .gnav_li a::after {
    background-color: #fff;
}
div.fat-nav .gnav_li a {
    opacity: 1;
    transition: all .3s ease;
}
div.fat-nav .gnav_li a:hover {
    opacity: .6;
}
div.fat-nav .side_yt {
    color: #fff;
    font-family: var(--en_mincho);
}
div.fat-nav .side_yt::before {
    font-size: 3rem;
}
div.fat-nav .gnav_li li {
    padding: 0;
    text-align: left;
}
.logo img {
    display: block;
    width: 67px;
}
.logo {
    opacity: 1;
    transition: all .3s ease;
}
.logo:hover {
    opacity: .6;
}
.logo span {
    display: block;
    margin-top: 10px;
    font-size: clamp(1.5rem, 1.3vw, 1.9rem);
    font-family: var(--en_mincho);
    line-height: 1;
}
#side_nav {
    position: fixed;
    top: 0;
    left: -160px;
    width: 155px;
    height: 100vh;
    font-family: var(--en_mincho);
    background-color: var(--c_beige);
    border-right: 1px solid #DBDBDB;
    transition: all .5s ease;
    z-index: 999;
}
#side_nav.side_fixed {
    left: 0;
}
.side_inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: calc(100% - 45px);
    padding: 70px 20px 40px;
}
.side_logo {
    width: 67px;
    margin: 0 auto 80px;
}
#gnav, .gnav_li {
    width: 100%;
    list-style: none;
}
.gnav_li li {
    margin-bottom: 30px;
}
.gnav_li a {
    opacity: 1;
    position: relative;
    display: block;
    padding-bottom: 10px;
    font-size: clamp(1.8rem, 1.4vw, 2rem);
    font-family: var(--en_mincho);
}
.gnav_li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 1px;
    background-color: var(--c_brown);
}
.side_yt {
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: auto auto 0;
    font-size: clamp(1.8rem, 1.6vw, 2.3rem);
    transition: all .3s ease;
}
.side_yt::before {
    content: '\f167';
    margin-right: 5px;
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}
#side_nav .pagetop {
    position: relative;
    bottom: 0;
    right: 0;
    display: flex!important;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#side_nav .pagetop a {
    display: flex!important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    color: #fff;
    font-size: clamp(1.7rem, 1.7vw, 2.4rem);
    background-color: var(--c_brown);
}
.main_video_scroll {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: none;
    width: 2px;
    height: 30px;
    transform: translateX(-50%);
    overflow: hidden;
}
@keyframes video_scroll {
    0% {
        transform: scaleY(0);
        transform-origin: center top;
    }
    35% {
        transform: scaleY(1);
        transform-origin: center top;
    }
    45% {
        transform: scaleY(1);
        transform-origin: center bottom;
    }
    85% {
        transform: scaleY(0);
        transform-origin: center bottom;
    }
    100% {
        transform: scaleY(0);
    }
}
.main_video_scroll::before {
    content: '';
    display: block;
    width: 2px;
    height: 30px;
    background-color: #fff;
    transform: scaleY(0);
    transform-origin: center top;
    animation: video_scroll 2s infinite linear forwards;
}
@media only screen and (max-width: 767px) {
    #header {
        width: 100%;
        padding: 20px 25px 0;
    }
    a.hamburger {
        opacity: 0;
        display: flex;
        pointer-events: none;
        transition: all .3s ease;
    }
    a.hamburger.hamb_fixed {
        opacity: 1;
        pointer-events: auto;
    }
    #side_nav {
        display: none;
    }
/*
    .logo img {
        display: none;
    }
    .logo a::before {
        content: '';
        display: block;
        width: 55px;
        height: 45px;
        background: url("../maruyamagawa-file/other/logo_w.svg") center center/contain no-repeat;
    }
    .logo span {
        color: #fff;
    }
*/
    .logo img {
        width: 55px;
    }
}


/*main*/
#main_video {
    width: 100%;
    height: 100vh;
}
#main_video .video_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
#main_video .video_wrap #movie-player {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
}
#main_video .video_wrap #movie-player.sp {
    aspect-ratio: 6 / 9;
}
video#video {
    width: 100%;
    height: 100%;
}
#main_video .cont {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
    padding: 40px 35px 40px 50px;
    z-index: 1;
    background-color: rgba(0,0,0,.15);
}
#main_video .cont.sp {
    background-color: rgba(0,0,0,.25);
}
#main_video .video_link {
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
    color: #fff;
    font-size: clamp(1.4rem, 1.2vw, 1.7rem);
    font-family: var(--en_mincho);
    line-height: 1.4;
    transition: all .3s ease;
}
#main_video .video_link:hover {
    opacity: .6;
}
#main_video .video_link::before {
    content: '';
    display: block;
    width: 43px;
    height: 43px;
    margin-right: 10px;
    background: url("../maruyamagawa-file/other/icon_youtube.svg") center center/contain no-repeat;
}
#main_video .ll {
    opacity: .6;
    position: absolute;
    top: 50%;
    right: 35px;
    color: #fff;
    font-size: clamp(1.4rem, 1.1vw, 1.6rem);
    letter-spacing: 1px;
    line-height: 1;
    writing-mode: tb-rl;
    transform: translateY(-50%);
}
#main_video .main_head {
    margin-top: auto;
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 7rem);
    font-family: var(--en_mincho);
    letter-spacing: 5px;
    line-height: 1.5;
}
#introduction {
    max-width: 1366px;
    width: 100%;
    padding-top: 230px;
    margin-left: auto;
}
.intro_block1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 94%;
    margin-left: auto;
}
.intro_block1 .cont {
    width: 57%;
    margin-bottom: 230px;
}
.intro_block1 .img {
    width: 28%;
    margin-top: 85px;
}
.intro_block1 .img img, .intro_block2 .cont > .img img, .intro_block2 .inner > .img img {
    display: block;
    width: 100%;
}
.intro_block1 .head2 {
    margin-bottom: 25px;
    font-size: clamp(2.8rem, 4.4vw, 6.2rem);
    font-family: var(--en_mincho);
    letter-spacing: 3px;
    line-height: 1.3;
}
.intro_block1 .head2 span {
    font-weight: 500;
    font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}
.txt {
    width: 100%;
}
.intro_block2 {
    width: 94%;
    margin-top: -165px;
}
.intro_block2 .head3 {
    position: relative;
    padding-bottom: 40px;
    margin-left: 14%;
    margin-bottom: 40px;
    font-size: clamp(3.5rem, 4.4vw, 6.2rem);
    font-family: var(--en_mincho);
    letter-spacing: 3px;
    line-height: 1.3;
}
.intro_block2 .head3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 30px;
    height: 1px;
    background-color: var(--c_brown);
}
.intro_block2 .cont {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.intro_block2 .cont > .img {
    width: 21%;
    margin-top: 45px;
}
.intro_block2 .inner {
    width: 69%;
}
.intro_block2 .inner .txt {
    margin-bottom: 100px;
}
.intro_block2 .inner > .img {
    width: 81%;
    margin-left: auto;
}
.img_wrap {
    position: relative;
    width: calc(100% + 155px);
    padding-top: 36%;
    margin-top: 220px;
    margin-left: -155px;
    overflow: hidden;
}
.img_wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 999;
}
#story, #about {
    max-width: 1366px;
    width: 100%;
    padding-top: 225px;
    margin-left: auto;
}
.sec_block {
    display: flex;
    justify-content: space-between;
    width: 94%;
}
.story_block {
    margin-left: auto;
}
.about_block {
    flex-direction: row-reverse;
}
.sec_block .inner1 {
    width: 56%;
}
.sec_block .inner2 {
    width: 36%;
}
.head2_1 {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 50px;
    font-size: clamp(2rem, 2.1vw, 3rem);
    font-family: var(--en_mincho);
    letter-spacing: 1px;
}
.head2_1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 23px;
    height: 1px;
    background-color: var(--c_brown);
}
.story_block .inner1 > * + * {
    margin-top: 45px;
}
.sec_block .inner1 .img, .sec_block .inner2 .img {
    width: 100%;
}
.sec_block .inner1 img, .sec_block .inner2 img, .about_wrap .img img {
    display: block;
    width: 100%;
}
.story_block .inner2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.story_block .inner2 .img {
    margin-bottom: 40px;
}
.story_block .inner2 .txt {
    margin-top: auto;
}
.about_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 94%;
    margin: 135px auto 0;
}
.about_wrap + .about_wrap {
    flex-direction: row-reverse;
}
.about_wrap .img {
    width: 59%;
}
.about_wrap .txt {
    width: 35%;
}
#tour {
    width: 100%;
    padding: 215px 0 240px;
    background-color: #F7F7F7;
}
.tour_video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
.tour_sec_inner {
    max-width: 1366px;
    width: 100%;
    margin-left: auto;
}
.tour_sec_inner > .head2_2 {
    margin-left: 60px;
}
.head2_2 {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 55px;
    font-size: clamp(4rem, 3.5vw, 6.2rem);
    font-family: var(--en_mincho);
}
.head2_2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 23px;
    height: 1px;
    background-color: var(--c_brown);
}
.tour_video {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 56.25%;
    margin-bottom: 135px;
    overflow: hidden;
}
.tour_block_wrap, .tour_block {
    width: 100%;
}
.tour_block + .tour_block {
    padding-top: 30px;
    margin-top: 230px;
}
.tour_block .inner_wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    width: 94%;
}
.tour_block:nth-of-type(2) {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
}
.tour_block:nth-of-type(3) .inner_wrap, .tour_block:nth-of-type(5) .inner_wrap {
    flex-direction: row;
    margin-left: auto;
}
.tour_block .inner_wrap + * {
    margin-bottom: 60px;
}
.tour_block .inner1 {
    width: 48%;
    margin-top: 90px;
}
.tour_block .inner1 .head2_1 {
    margin-bottom: 60px;
}
.tour_block .inner1 .head2_1 span {
    font-size: 1.3em;
    letter-spacing: 3px;
    line-height: 1;
}
.tour_block .inner1 .head3, .tour_block .head3 {
    margin: 0 0 100px;
    font-size: clamp(3.5rem, 3.5vw, 6.2rem);
    font-family: var(--en_mincho);
}
.tour_block .inner1 .img {
    width: 68%;
    margin-left: auto;
}
.tour_block .inner1 > * + * {
    margin-top: 65px;
}
.tour_block .inner1 > .txt {
    margin-bottom: 40px;
}
.tour_block:nth-of-type(3) .inner1 .img, .tour_block:nth-of-type(5) .inner1 .img, .tour_block:nth-of-type(3) .inner3, .tour_block:nth-of-type(5) .inner3 {
    margin-left: 0;
}
.tour_block .inner2 {
    width: 43%;
}
.tour_block .inner3 {
    width: 80%;
    margin-top: 95px;
    margin-left: auto;
}
.tour_block img {
    display: block;
    width: 100%;
}
.tour_block img + img {
    margin-top: 2px;
}
.btn_wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.btn1 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 7px;
    width: auto;
    font-size: clamp(1.8rem, 1.6vw, 2.3rem);
    font-family: var(--en_mincho);
}
.btn1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--c_brown);
    transition: all .3s ease;
}
.btn1:hover::after {
    width: 100%;
}
.btn_wrap .btn1 + .btn1 {
    margin-left: 20px;
}
.btn1 .arw {
    position: relative;
    width: 25px;
    height: 7px;
    margin-left: 15px;
}
.btn1 .arw::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--c_brown);
    transform: translateY(-50%);
}
.btn1 .arw::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 0;
    height: 0;
    border-top: 3.5px solid transparent;
    border-right: none;
    border-bottom: 3.5px solid transparent;
    border-left: 6px solid var(--c_brown);
    transform: translateY(-50%);
}
.tour_block:nth-of-type(2) .head3 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.tour_block .head3 span {
    display: block;
    margin-right: 20px;
    border-bottom: 1px solid var(--c_brown);
}
.tour_block .txt.mincho {
    margin-bottom: 80px;
    font-size: clamp(1.8rem, 2.1vw, 3rem);
    font-family: var(--en_mincho);
}
.tour_exp_li {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}
.tour_exp_li li {
    width: 32%;
    background: center center/cover no-repeat;
    list-style: none;
   
}

@media screen and (min-width: 768px) {
.tour_exp_li li {
    margin-right: 30px;
 
   
}

}
.tour_exp_li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    color: #fff;
    background-color: rgba(255, 255, 255, .04);
    transition: all .3s ease;
}
.tour_exp_li a:hover {
    background-color: rgba(255,255,255,.2);
}
.tour_exp_li small {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: clamp(2.1rem, 2.1vw, 3rem);
    font-family: var(--en_mincho);
    line-height: 1;
    border-bottom: 1px solid #fff;
}
.tour_exp_li span {
    margin-bottom: 30px;
    font-size: clamp(2.1rem, 2.1vw, 3rem);
    font-family: var(--en_mincho);
    line-height: 1;
}
#contact {
    width: 94%;
    padding-top: 230px;
    margin: auto;
    color: #fff;
}
.contact_inner {
    position: relative;
    width: 100%;
    padding: 85px 65px 60px;
    background: url("../maruyamagawa-file/contact/contact.jpg") center center/cover no-repeat;
}
.contact_inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 0;
}
.contact_inner > * {
    position: relative;
    z-index: 1;
}
#contact .head2_2 {
    margin-bottom: 35px;
    font-size: clamp(3rem, 3.6vw, 5rem);
    line-height: 1.2;
}
#contact .head2_2::after {
    background-color: #fff;
}
#contact .txt {
    font-size: clamp(1.4rem, 1.3vw, 1.8rem);
    line-height: 1.8;
}
#contact .txt dl {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
#contact .txt.mincho {
    margin-bottom: 35px;
    font-size: clamp(1.5rem, 2vw, 2.8rem);
    font-family: var(--en_mincho);
}
#contact .btn_wrap {
    flex-shrink: 0;
    width: 160px;
}
#contact .btn1 {
    color: #fff;
}
#contact .btn1::after {
    background-color: #fff;
}
#contact .btn1 .arw::after {
    border-left-color: #fff;
}
#contact .btn1 .arw::before {
    background-color: #fff;
}
#contact .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}
@media only screen and (max-width: 1024px) {
    #introduction {
        padding-top: 100px;
    }
    .intro_block1 .img {
        width: 35%;
    }
    .intro_block1, .intro_block2 {
        width: 96%;
    }
    .intro_block1 .head2 {
        line-height: 1.2;
    }
    .intro_block2 .cont > .img {
        width: 26%;
        margin-top: 20px;
    }
    .intro_block2 .inner > .img {
        width: 90%;
    }
    .intro_block2 .head3 {
        padding-bottom: 20px;
        margin-bottom: 30px;
        line-height: 1.2;
    }
    .intro_block2 .inner .txt {
        margin-bottom: 40px;
    }
    #story, #about {
        padding-top: 100px;
    }
    .sec_block .inner2 {
        width: 38%;
    }
    .img_wrap {
        margin-top: 150px;
    }
    .head2_1 {
        padding-bottom: 10px;
        margin-bottom: 35px;
    }
    .story_block .inner1 > * + * {
        margin-top: 30px;
    }
    .about_wrap {
        margin: 90px auto 0;
    }
    .tour_block .inner_wrap {
        width: 96%;
    }
    .tour_block .inner1 {
        width: 50%;
        margin-top: 45px;
    }
    .tour_block .inner1 .img {
        width: 75%;
    }
    .tour_block .inner3 {
        width: 90%;
        margin-top: 40px;
    }
    .tour_sec_inner > .head2_2 {
        margin-left: 20px;
    }
    .head2_2 {
        padding-bottom: 5px;
    }
    #tour {
        padding: 100px 0;
    }
    .tour_video {
        margin-bottom: 100px;
    }
    .tour_block .inner1 .head2_1 {
        margin-bottom: 20px;
    }
    .tour_block .inner1 .head3 {
        margin-bottom: 35px;
    }
    .tour_block .inner1 > * + * {
        margin-top: 35px;
    }
    .tour_block + .tour_block {
        padding-top: 20px;
        margin-top: 70px;
    }
    .tour_block .inner1 .head3, .tour_block .head3 {
        margin-bottom: 30px;
    }
    .tour_block .txt.mincho {
        margin-bottom: 50px;
    }
    #contact {
        padding-top: 100px;
    }
    .contact_inner {
        padding: 50px 40px 40px;
    }
}
@media only screen and (max-width: 767px) {
    #main_video .cont {
        padding: 25px;
    }
    #main_video .main_head {
        margin: auto auto auto 0;
    }
    #main_video .ll {
        top: 35px;
        transform: translateY(0);
    }
    #main_video .video_link {
        position: absolute;
        bottom: 50px;
        left: 25px;
    }
    .main_video_scroll {
        display: block;
    }
    .inner_wrapper {
        padding-left: 0;
    }
    #introduction {
        padding-top: 70px;
    }
    .intro_block1 {
        flex-direction: column;
        justify-content: flex-start;
    }
    .intro_block1 .cont {
        width: 100%;
    }
    .intro_block1 .head2 {
        margin-bottom: 20px;
    }
    .intro_block1 .cont {
        width: 92%;
        margin: auto;
    } 
    .intro_block1 .img {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        margin-top: 25px;
    }
    .intro_block1 .img > img {
        margin-right: auto;
        margin-left: auto;
    }
    .intro_block1 .img > img, .intro_block1 .img > .img1 {
        width: 61%;
        margin-bottom: 50px;
    }
    .intro_block1 .img > .img1 {
        margin-right: 0;
        margin-left: 0;
    }
    .intro_block1 .img > .img2 {
        width: 30%;
        margin: auto 0 0 0;
    }
    .intro_block1, .intro_block2 {
        width: 100%;
    }
    .intro_block2 .cont {
        flex-direction: column-reverse;
    }
    .intro_block2 {
        margin-top: 50px;
    }
    .intro_block2 .head3 {
        width: 92%;
        margin-right: auto;
        margin-left: auto;
    }
    .intro_block2 .cont > .img {
        width: 40%;
        margin: 0 auto 20px;
    }
    .intro_block2 .inner {
        width: 100%;
    }
    .intro_block2 .inner .txt {
        width: 92%;
        margin-right: auto;
        margin-left: auto;
    }
    .img_wrap {
        width: 100%;
        margin-top: 100px;
        margin-left: 0;
        z-index: 998;
    }
    #story, #about {
        padding-top: 70px;
    }
    .sec_block {
        flex-direction: column;
        width: 100%;
    }
    .sec_block .inner1 .head2_1 {
        width: 92%;
        margin: 0 auto 20px;
    }
    .sec_block .inner1 {
        width: 100%;
    }
    .story_block .inner1 > * + * {
        margin-top: 20px;
    }
    .sec_block .inner1 p.txt {
        padding: 0 4%;
    }
    .story_block .inner1 .img.sp {
        margin: 20px 0 20px auto;
    }
    .sec_block .inner1 .img, .sec_block .inner2 .img {
        width: 94%;
    }
    .sec_block .inner2 {
        width: 100%;
        padding: 0 4%;
        margin-top: 30px;
    }
    .about_wrap, .about_wrap + .about_wrap {
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        margin-top: 50px;
    }
    .about_wrap .img {
        width: 94%;
        margin-left: auto;
        margin-bottom: 25px;
    }
    .about_wrap + .about_wrap .img {
        margin-left: 0;
        margin-right: auto;
    }
    .about_wrap .txt {
        width: 94%;
        margin: auto;
    }
    .about_block .inner1 .img.sp {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .tour_video {
        width: 94%;
        margin: 0 auto 70px;
    }
    #tour {
        padding: 70px 0;
    }
    .tour_sec_inner > .head2_2 {
        margin-bottom: 35px;
    }
    .tour_block .inner_wrap, .tour_block:nth-of-type(3) .inner_wrap, .tour_block:nth-of-type(5) .inner_wrap {
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }
    .tour_block .inner1 {
        width: 100%;
    }
    .tour_block .inner2 {
        width: 100%;
        margin: 20px auto 0;
    }
    .tour_block .inner1 .head2_1, .tour_block .inner1 .head3, .tour_block .head3, .tour_block .inner1 > .txt, .tour_block .inner1 .btn_wrap {
        width: 94%;
        margin-right: auto;
        margin-left: auto;
    }
    .tour_block .inner1 {
        width: 100%;
        margin-top: 0;
    }
    .tour_block .inner1 .head3, .tour_block .head3 {
        line-height: 1.3;
    }
    .tour_block .inner1 .img {
        width: 94%;
        margin-left: auto;
    }
    .tour_block .inner1 > .txt {
        margin-bottom: 20px;
    }
    .tour_block .inner1 > .txt {
        margin-bottom: 20px;
    }
    .tour_block .inner3 {
        width: 94%;
        margin-top: 25px;
        margin-bottom: 0;
    }
    .tour_block + .tour_block {
        margin-top: 50px;
    }
    .tour_block .inner1 .head3, .tour_block .head3 {
        margin-bottom: 20px;
    }
    .tour_exp_li {
        flex-wrap: wrap;
    }
    .tour_exp_li li {
        width: 100%;
    }
    .tour_exp_li li + li {
        margin-top: 15px;
    }
    .tour_block .txt.mincho {
        margin-bottom: 35px;
    }
    .tour_exp_li small {
        margin-bottom: 15px;
    }
     .tour_exp_li spa{
        margin-bottom: 20px;
    }
    .tour_exp_li a {
        padding: 15px;
    }
    .tour_block .inner2 .img {
        width: 94%;
        margin: auto;
    }
    .tour_block .inner1 .btn_wrap {
        margin-top: 20px;
    }
    #tour_nature.tour_block .inner1 .img.sp, #tour_cultural.tour_block .inner1 .img.sp, #tour_local.tour_block .inner1 .img.sp {
        width: 100%;
    }
    #tour_nature.tour_block .inner1 .img.sp .img2, #tour_cultural.tour_block .inner1 .img.sp .img1, #tour_local.tour_block .inner1 .img.sp .img2 {
        width: 94%;
        margin-left: auto;
        margin-bottom: 25px;
    }
     #tour_nature.tour_block .inner1 .img.sp .img1, #tour_cultural.tour_block .inner1 .img.sp .img2, #tour_local.tour_block .inner1 .img.sp .img1 {
        width: 94%;
    }
    #tour_nature.tour_block .inner1 .img.sp .img2, #tour_local.tour_block .inner1 .img.sp .img2 {
        margin-top: 25px;
        margin-bottom: 0;
    }
    #contact {
        padding-top: 70px;
    }
    .contact_inner {
        padding: 30px 20px;
        background: url("../maruyamagawa-file/contact/contact_sp.jpg") center center/cover no-repeat;
    }
    #contact .inner {
        flex-direction: column;
        justify-content: flex-start;
    }
}


/*footer*/
#footer {
    position: relative;
    width: 100%;
    padding: 100px 0 25px;
    color: #fff;
    background: url("../maruyamagawa-file/footer/footer.jpg") center center/cover no-repeat;
}
#footer .pagetop {
    opacity: 1;
    position: absolute;
    bottom: 25px;
    right: 35px;
    font-size: clamp(1.4rem, 1.4vw, 2rem);
    font-family: var(--en_mincho);
    transition: all .3s ease;
}
#footer .pagetop:hover {
    opacity: .6;
}
#footer .pagetop .arw {
    position: relative;
    display: block;
    width: 10px;
    height: 30px;
    margin: auto;
}
#footer .pagetop .arw::before {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    margin: auto;
    background-color: #fff;
}
#footer .pagetop .arw::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-top: none;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #fff;
    border-left: 4px solid transparent;
    transform: translateX(-50%);
}
.f_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    width: 92%;
    margin: 0 auto 110px;
}
.f_logo {
    opacity: 1;
    flex-shrink: 0;
    width: 370px;
    margin-right: 20px;
    transition: all .3s ease;
}
.f_logo img {
    display: block;
    width: 68px;
}
.f_logo span {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: clamp(1.5rem, 1.3vw, 1.9rem);
    font-family: var(--en_mincho);
    line-height: 1;
}
.f_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.f_nav_li {
    flex-shrink: 0;
    width: 95px;
    margin-right: 20px;
    list-style: none;
}
.f_nav_li li {
    margin-bottom: 25px;
}
.f_nav_li a {
    opacity: 1;
    position: relative;
    display: block;
    padding-bottom: 10px;
    color: #fff;
    font-size: clamp(1.8rem, 1.4vw, 2rem);
    font-family: var(--en_mincho);
    font-weight: 600;
    line-height: 1;
    transition: all .3s ease;
}
.f_nav_li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    height: 1px;
    background-color: #fff;
}
.f_nav_li a:hover {
    opacity: .6;
}
.f_address {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 375px;
    width: 100%;
}
.f_address > p + dl {
    margin-top: 15px;
}
.f_address dl {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
.f_address .yt_link {
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 60px;
    font-size: 1.7rem;
    font-family: var(--en_mincho);
    font-weight: 600;
    line-height: 1;
    transition: all .3s ease;
}
.f_address .yt_link::before {
    content: '\f167';
    margin-right: 10px;
    font-size: 1.5em;
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}
.f_address .yt_link:hover {
    opacity: .6;
}
#footer .copyright {
    display: block;
    width: 100%;
    padding: 0 20px;
    color: #fff;
    font-size: clamp(1.2rem, 1vw, .4rem);
    font-family: var(--en_mincho);
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
@media only screen and (max-width: 767px) {
    #footer {
        padding: 50px 0 25px;
    }
    .f_logo {
        width: 100%;
    } 
    .f_wrap {
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 40px;
    }
    .f_inner {
        flex-direction: column;
        justify-content: flex-start;
    }
    .f_nav {
        width: 100%;
        margin-top: 35px;
        margin-bottom: 10px;
    }
    .f_nav_li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }
    .f_nav_li li {
        width: 48%;
    }
    #footer .pagetop {
        bottom: 55px;
        right: 20px;
    }
}


/*animation*/
svg.a_svg {
    display: block;
}
@keyframes move {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.a_img {
    width: 100%;
    height: auto;
    transform: scale(1.2);
}
.run .a_img {
    animation: move 1.8s ease forwards;
}
@keyframes clip {
    0% {
        transform: scaleY(0%);
    }
    100% {
        transform: scaleY(100%);
    }
}
.a_clip {
    transform: scaleY(0%);
}
.run .a_clip {
    animation: clip 1.4s ease forwards;
}

.run .a_img.i2 {
    animation: move 1.1s ease forwards;
}
.run .a_clip.c2 {
    animation: clip .8s ease forwards;
}

@keyframes wrap_move {
    0% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}
.img_wrap.run img {
    animation: wrap_move 2s ease forwards .5s;
}
.a_block.animation {
    opacity: 0;
    transition: all 1.1s ease .7s;
}
.a_block.animation.slow {
    opacity: 0;
    transition: all 1.5s ease 1s;
}
.a_block.animation.run {
    opacity: 1;
}


/*loading*/
body.noscroll {
    overflow: hidden!important;
    touch-action: none;
}
.loader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--c_beige);
    z-index: 9999;
    overflow: hidden;
}
.load_img_wrap {
    position: relative;
    width: 98px;
    height: 74px;
}
.load_img_wrap img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes load1 {
    0% {
        opacity: 0;
        transform: rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: rotate(-90deg); 
    }
    30% {
        opacity: 1;
        transform: rotate(-90deg);
    }
    45% {
        opacity: 0;
        transform: rotate(-90deg);
    }
    100% {
        opacity: 0;
        transform: rotate(-90deg);
    }
}
.load_img1 {
    opacity: 0;
    transform: rotate(0deg);
    animation: load1 9s ease infinite forwards;
}
@keyframes load2 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.load_img2 {
    opacity: 0;
    animation: load2 9s ease infinite forwards;
}
@keyframes load3 {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.load_img3 {
    opacity: 0;
    animation: load3 9s ease infinite forwards;
}


.no-scroll .wrapper > * {
    touch-action: none;
}
.no-scroll .wrapper > #header {
    touch-action: inherit;
}