@charset "utf-8";
/* CSS Document */


/* #topmain
----------------------------------------- */
#topmain {
    width: 100%;
	height: 100vh;
    background-color: #FFFFFF;
}

#topmain .inner {
    max-width: none;
    width: 100%;
	height: 100%;
}
#topmain .topmain_layout {
    width : 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
}
#topmain .topmain_layout .logo {
    position: absolute;
    z-index: 2;
    top: calc(60 / 915 * 100%);
    left: calc(70 / 1400 * 100%);
}

#topmain .topmain_layout .slider_wrap {
    width: 100%;
    height: 100%;
}
#topmain .topmain_layout .slide_wrap {
    position: relative;
}
#topmain .topmain_layout .slide_wrap .txt {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /*text-orientation: mixed;*/
    padding: 2rem 9rem;
    
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}
#topmain .topmain_layout .slide_wrap .txt span {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.2em;
    color: #FFFFFF;
    font-weight: 600;
}

#topmain .swiper-container,
#topmain .swiper-wrapper,
#topmain .swiper-slide {
	width: 100%;
    height: 100%;
}
#topmain .swiper-slide {
    width: 100%;
}
#topmain .swiper-slide a:hover {
    opacity: .8;
}
#topmain .slide_wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
#topmain .slide_wrap img {
	width: 100%;
    height: 100%;
    object-fit: cover;
}

#topmain .swiper-pagination {
    width: auto;
    line-height: 1;
    bottom: calc(60 / 915 * 100%);
    left: 8rem;
    /*transform: translateY(100%);*/
}
#topmain .swiper-pagination-bullet {
    width: 5rem;
    height: 2px;
    display: inline-block;
    border-radius: 0;
    background: #7C7C7C;
    opacity: 1;
}
#topmain .swiper-pagination-bullet-active {
    background: #FFFFFF;
    opacity: 1;
}
#topmain .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
#topmain .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}


@media only screen and (max-width: 768px) {
#topmain {
    height: 100vh;
    height: 100dvh;
}

#topmain .topmain_layout .logo {
    width: 10.2rem;
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: 8rem;
    left: calc(30 / 375 * 100%);
}
#topmain .topmain_layout .logo svg {
    width: 100%;
    height: auto;
}
    
#topmain .topmain_layout .logo svg #kamon_3005 {
    display: none;
}

#topmain .topmain_layout .slide_wrap .txt {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /*text-orientation: mixed;*/
    padding: 2rem 2.5rem;
    padding-bottom: 8rem;
    
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}
#topmain .topmain_layout .slide_wrap .txt span {
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: 0.2em;
    color: #FFFFFF;
    font-weight: 600;
}

#topmain .swiper-pagination {
    width: 100%;
    line-height: 1;
    bottom: 2.5rem;
    left: auto;
    /*transform: translateY(100%);*/
}
#topmain .swiper-pagination-bullet {
    width: 3rem;
    height: 2px;
}
#topmain .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
#topmain .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}
}


/* #about
----------------------------------------- */
#about {
    background-color: #FFFFFF;
}
#about .inner {
    padding-top: 16rem;
    padding-bottom: 16rem;
}
#about .layout {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column;
    gap: 6rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /*text-orientation: mixed;*/
}
#about .ttl {
    font-size: 3rem;
    letter-spacing: 0.12em;
    line-height: calc(56/30);
    white-space: nowrap;
}
#about .txt {
    font-size: 2rem;
    letter-spacing: 0.12em;
    line-height: calc(50 / 20);
    white-space: nowrap;
}
#about ruby {
    ruby-align: center;
}
#about rt {
    font-size: 0.45em;
    letter-spacing: -0.05em;
    transform: translateX(0.1em);
    position: relative;
    left: 0.1em;
}

#about .first {
    margin-top: -0.5em;
}

@media only screen and (max-width: 768px) {
#about {
}
#about .inner {
    padding-top: 12rem;
    padding-bottom: 12rem;
}
#about .layout {
    gap: 2rem;
}
#about .ttl {
    font-size: 2.2rem;
    letter-spacing: 0.12em;
    line-height: calc(56/30);
}
#about .txt {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    line-height: calc(50 / 20);
}
#about ruby {
    ruby-align: center;
}
#about rt {
    font-size: 0.45em;
    letter-spacing: -0.05em;
    transform: translateX(0.1em);
    position: relative;
    left: 0.1em;
}

#about .first {
    margin-top: -0.5em;
}
  
}



/* #imadate
----------------------------------------- */
#imadate {
    background-color: #FFFFFF;
}
#imadate .inner {
    max-width: 104rem;
}
#imadate .layout {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
#imadate .layout::after {
    content: '';
    width: calc(100% + 6rem );
    height: 60rem;
    background-color: #F3F1E7;
    
    position: absolute;
    z-index: -1;
    bottom: -6rem;
    left: -6rem;
}

#imadate .txt_wrap {
    width: calc(570/1040*100%);
    padding-bottom: 5rem;
}
#imadate .txt_wrap .ttl {
    font-size: 3rem;
    letter-spacing: 0.12em;
    line-height: calc(56/30);
}
#imadate .txt_wrap .txt {
    margin-top: 2.5rem;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    line-height: calc(30/16);
}

#imadate .img_wrap {
    width: calc((410/1040*100%) + 8rem );
    margin-right: -8rem;
}
#imadate .img_wrap .img {
    width: 100%;
    aspect-ratio: 490 / 670;
}
#imadate .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media only screen and (max-width: 768px) {
#imadate {
}
#imadate .inner {
    width: 100%;
    max-width: none;
    padding-bottom: 12rem;
}
#imadate .layout {
    flex-flow: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}
#imadate .layout::after {
    content: '';
    width: 100%;
    height: 86.4rem;
    bottom: -12rem;
    left: 0;
}

#imadate .txt_wrap {
    width: 30rem;
    padding-bottom: 0;
}
#imadate .txt_wrap .ttl {
    font-size: 2.6rem;
    letter-spacing: 0.12em;
}
#imadate .txt_wrap .txt {
    margin-top: 1.5rem;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
}

#imadate .img_wrap {
    width: 100%;
    margin-right: 0;
    display: flex;
    justify-content: flex-end;
}
#imadate .img_wrap .img {
    width: 32.5rem;
    aspect-ratio: 325 / 422;
}
  
}


/* #drawing
----------------------------------------- */
#drawing {
    background-color: #FFFFFF;
}
#drawing .inner {
    max-width: 104rem;
    padding-top: 19rem;
}
#drawing .sec_ttl_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#drawing .sec_ttl_wrap > h2 {
    letter-spacing: 0.03em;
}
#drawing .sec_ttl_wrap > .txt {
    max-width: 57rem;
    font-size: 1.4rem;
    line-height: calc(22/14);
    letter-spacing: 0.1em;
}

#drawing .slider_wrap {
    position: relative;
    margin-top: 3rem;
}
#drawing .drawing_slider {
    overflow: hidden;
}

/* -------------------
   矢印ボタン
------------------- */
#drawing .drawing_slider .swiper-button-prev,
#drawing .drawing_slider .swiper-button-next {
    width: 1.5rem;
    height: 3rem;
    margin-top: 0;
    top: 48%;
    transform: translateY(-50%);
}

#drawing .drawing_slider .swiper-button-prev {
    left: -1.5rem;
}

#drawing .drawing_slider .swiper-button-next {
    right: -1.5rem;
}

#drawing .drawing_slider .swiper-button-prev:after,
#drawing .drawing_slider .swiper-button-next:after {
    display: none;
}

#prev_svg .cls-1,
#prev_svg .cls-2 {
    transition: all .6s;
}
#next_svg .cls-1,
#next_svg .cls-2 {
    transition: all .6s;
}

#story .swiper-button-next.swiper-button-disabled, 
#story .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

@media (hover: hover) {
}

#drawing .btn_wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

@media only screen and (max-width: 768px) {
#drawing {
}
#drawing .inner {
    width: 100%;
    padding-top: 10rem;
}
#drawing .sec_ttl_wrap {
    flex-flow: column;
    align-items: center;
    gap: 1rem;
}
#drawing .sec_ttl_wrap > h2 {
    font-size: 2.6rem;
    letter-spacing: 0.03em;
    text-align: center;
}
#drawing .sec_ttl_wrap > .txt {
    max-width: 30rem;
    font-size: 1.4rem;
    line-height: calc(26/14);
    letter-spacing: 0.1em;
}

#drawing .swiper-wrapper {
    display: flex;
    flex-flow: column;
    gap: 4.5rem;
}
    
#drawing .drawing_slider .swiper-button-prev, 
#drawing .drawing_slider .swiper-button-next {
    display: none;
}
    
#drawing .slider_wrap {
    position: relative;
    margin-top: 3rem;
}
#drawing .drawing_slider {
    overflow: hidden;
}
    
#drawing .swiper-slide {
    display: block;
    width: 100%;
    overflow-x: scroll;
}
#drawing .img_wrap {
    display: block;
    width: 80rem;
    /*margin-left: -21.25rem;*/
}
    
/*#drawing .img_wrap a {
    display: block;
    width: 80rem;
    margin-left: -21.25rem;
}
#drawing .img_wrap a::after {
    content: '';
    display: block;
    width: 11rem;
    height: 11rem;
    background: url(../images/zoom_icon.svg) no-repeat center center / contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}*/
    
#drawing .btn_wrap {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}
    
}



/* #news_feed
----------------------------------------- */
#news_feed {
    background-color: #FFFFFF;
}
#news_feed .inner {
    max-width: 109rem;
    padding-top: 9rem;
    padding-bottom: 7rem;
    position: relative;
    z-index: 1;
}

#news_feed .layout {
    display: flex;
    flex-flow: column;
    gap: 3rem;
}

#news_feed .layout > .sec_ttl_wrap {
    padding-left: 2.5rem;
}

#news_feed .layout > .post_list_wrap {
    width: 100%;
}

#news_feed .inner > .btn_wrap {
    margin-top: 4rem;
    justify-content: flex-end;
}

@media only screen and (max-width: 768px) {
#news_feed .inner {
    max-width: 30rem;
    padding-top: 14rem;
    padding-bottom: 12rem;
}
    
#news_feed .layout {
    grid-gap: 3rem 0;
}
    
#news_feed .layout > .sec_ttl_wrap {
    padding-left: 0;
}

#news_feed .layout > .post_list_wrap.news {
    padding-top: 0;
}
    
#news_feed .layout > .sec_ttl_wrap > h2 {
    font-size: 2.6rem;
    line-height: 1;
    margin-top: 0;
}

#news_feed .layout > .post_list_wrap {
    width: 100%;
}

#news_feed .inner > .btn_wrap {
    margin-top: 5rem;
    justify-content: center;
}

}


/* #repair
----------------------------------------- */
#repair {
    /*background-image: var(--bg-pc);*/
    overflow: hidden;
    position: relative;
    /*background-attachment: fixed;
    background-size: cover;
    background-position: center center;*/
}
#repair .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: #F3F1E7;
}
#repair .inner {
    width: 100%;
    max-width: none;
    background-color: #F3F1E7;
}
#repair .img_space {
    width: 100%;
    height: 52rem;
}
#repair .txt_wrap {
    width: 100%;
    max-width: 104rem;
    margin: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12rem;
    padding-top: 6rem;
    padding-bottom: 8rem;
}
#repair .txt_wrap .txt_con .ttl {
    font-size: 3rem;
    letter-spacing: 0.12em;
    line-height: calc(56/30);
}
#repair .txt_wrap .txt_con .txt {
    margin-top: 2.5rem;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    line-height: calc(30/16);
}

#repair .img_wrap {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}
/*#repair .img_wrap {
    width: 100%;
    aspect-ratio: 1400 / 520;
}*/
#repair .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*will-change: transform;*/
}

@media only screen and (max-width: 768px) {
/*#repair {
    background-image: var(--bg-sp);
}*/
#repair .inner {
    width: 100%;
}
#repair .img_space {
    width: 100%;
    height: 32.5rem;
}
#repair .txt_wrap {
    width: 30rem;
    margin: auto;
    flex-flow: column;
    align-items: center;
    gap: 0;
    padding-top: 5rem;
    padding-bottom: 7rem;
}
#repair .txt_wrap .txt_con .ttl {
    font-size: 2.6rem;
}
#repair .txt_wrap .txt_con .txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: calc(28/14);
}
#repair .txt_wrap .btn_wrap {
    margin-top: 4rem;
}
    
/*#repair .img_wrap {
    width: 100%;
    aspect-ratio: 375 / 325;
}*/
  
}



/* #point
----------------------------------------- */
#point {
    position: relative;
    background-color: #FFFFFF;
}
#point .inner {
    max-width: 120rem;
    height: 100vh;
    position: relative;
    /*max-width: none;*/
}
#point .layout {
    position:absolute;
    inset:0;
    
    /*width: 100%;
    height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 10rem;
    padding-bottom: 10rem;
    
    --outer: max(0px, calc((100vw - 120rem) / 2));
    
    opacity:0;
    visibility:hidden;
}
#point .layout:first-child{
    opacity:1;
    visibility:visible;
}
#point .layout .txt_wrap {
    width: calc(470 / 1200 * 100%);
    display: flex;
    flex-flow: column;
}
#point .layout .txt_wrap > .ttl {
    font-size: 2.7rem;
    letter-spacing: 0.12em;
    line-height: calc(56/27);
}
#point .layout .txt_wrap > .txt {
    margin-top: 2.5rem;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    line-height: calc(30/16);
}

#point .layout .img_wrap {
    width: calc((650 / 1200 * 100%) + var(--outer));
    margin-left: calc(-1 * var(--outer));
    height: 100%;
}
#point .layout .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media only screen and (max-width: 768px) {
#point {
}
#point .inner {
    width: 100%;
    max-width: none;
    height: auto;
    position: relative;
}

#point .layout {
    position:relative;
    visibility: visible;

    flex-flow: column;
    align-items: center;
    gap: 4.5rem;
    padding-top: 7rem;
    padding-bottom: 7rem;
    
    opacity:1;
}

#point .layout .txt_wrap {
    width: 30rem;
    display: flex;
    flex-flow: column;
}
#point .layout .txt_wrap > .ttl {
    font-size: 2.0rem;
    letter-spacing: 0.12em;
}
#point .layout .txt_wrap > .txt {
    margin-top: 2.0rem;
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    line-height: calc(26/14);
}

#point .layout .img_wrap {
    width: 31.8rem;
    margin-left: auto;
    height: 100%;
}
    
#point .layout:nth-child(even) .img_wrap {
    margin-left: 0;
    margin-right: auto;
}
  
}


/* #access
----------------------------------------- */
#access {
    background-color: #ECECEC;
}
#access .inner {
    max-width: 120rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
}

#access .layout {
    display: flex;
    flex-wrap: wrap;
}
#access .layout .txt_wrap {
    width: calc(500 / 1200 * 100%);
    padding-left: 4rem;
    display: flex;
    flex-flow: column;
}
#access .layout .txt_wrap > .ttl {
    margin-top: 6rem;
    font-size: 1.8rem;
    letter-spacing: 0.12em;
    /*line-height: calc(30/18);*/
    line-height: 1;
}
#access .layout .txt_wrap > .txt {
    margin-top: 2rem;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    line-height: calc(24/15);
}
#access .layout .txt_wrap > .info_list {
    margin-top: 5rem;
    display: flex;
    flex-flow: column;
    gap: 1.5rem;
}
#access .layout .txt_wrap > .info_list > li {
    position: relative;
    padding-left: 1rem;
    font-size: 1.3rem;
    letter-spacing: 0.12em;
    line-height: calc(22/13);
}
#access .layout .txt_wrap > .info_list > li::after {
    content: '';
    display: block;
    width: 0.35rem;
    height: 0.35rem;
    background: url(../images/dot.svg) no-repeat center center / contain;
    transition: all .3s;
    
    position: absolute;
    left: 0;
    top: 1rem;
}

#access .layout .txt_wrap > .btn_list {
    margin-top: auto;
    display: flex;
    gap: 6rem;
}

#access .layout .img_wrap {
    width: calc(700 / 1200 * 100%);
}
#access .layout .img_wrap .map_wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 700 / 450;
}
#access .layout .img_wrap .map_wrap iframe {
    width: 100%;
    height: 200%;
    position: absolute;
    top: -50%;
}


@media only screen and (max-width: 768px) {
#access {
}
#access .inner {
    max-width: 30rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
}

#access .layout {
    flex-flow: column;
}
#access .layout .txt_wrap {
    display: contents;
}
#access .layout .txt_wrap > .sec_ttl_wrap {
     order: 1;   
}
#access .layout .txt_wrap > .ttl {
    margin-top: 2rem;
    font-size: 1.6rem;
    
    order: 2; 
}
#access .layout .txt_wrap > .txt {
    margin-top: 0.5rem;
    font-size: 1.4rem;
    
    order: 3;
}
#access .layout .txt_wrap > .info_list {
    margin-top: 2rem;
    gap: 1.5rem;
    
    order: 4;
}
#access .layout .txt_wrap > .info_list > li {
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}

#access .layout .txt_wrap > .btn_list {
    margin-top: 3rem;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    gap: 0;
    
    order: 6;
}

#access .layout .img_wrap {
    margin-top: 3rem;
    width: 100%;
    
    order: 5;
}
#access .layout .img_wrap .map_wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 300 / 300;
}
#access .layout .img_wrap .map_wrap iframe {
    width: 100%;
    height: 200%;
    position: absolute;
    top: -50%;
}
  
}