body {
    font-family: 'Arial', sans-serif;
    background-color: #EDE5DC;
    margin: 0;
    padding: 0;
    overflow-x: hidden;}

/*レイアウト*/
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;}
header {
    padding: 1vw 2vw;
    height: 100vh;}
.sidemenu {
    position:fixed;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width:18%;}
.sidemenu li {
    margin-bottom: 0.5vw;}
.sidemenu li:first-child {
    margin-bottom: 2vw;}
.sidemenu a {
    text-decoration: none;
    font-size: 1.8vw;
    color: #000;}
.sidemenu li img{
    width:100%;}
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 10vw;
    height: 5vw;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 5vw;
    right: 5vw;
    z-index: 100;}
.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 2px;}
.hamburger-menu.top span{
    background-color:#fff;}

@media screen and (max-width: 700px){
.layout {
    display: block;}
header {
    position: fixed;
    top: 0;    right: 0;
    z-index: 99;
    background-color: #fff;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;}
.sidemenu {
    position:fixed;
    width:100%;}
.sidemenu li {
    margin-bottom: 5vw;}
.sidemenu a {
    font-size: 5vw;}
.sidemenu li img{
    width:80%;
    margin:3vw auto 10vw;}
.hamburger-menu {
    display: flex;}
header.active {
    transform: translateX(0);}
header.active + .hamburger-menu{
    width:30px;
    right:30px;}
header.active + .hamburger-menu span{
    background-color: #000;}
header.active + .hamburger-menu span:nth-child(1) {
    transform: rotate(45deg);
    position: absolute;
    top: 9px;}
header.active + .hamburger-menu span:nth-child(2) {
    opacity: 0;}
header.active + .hamburger-menu span:nth-child(3) {
    transform: rotate(-45deg);
    position: absolute;
    top: 9px;}
}
@media screen and (min-width:1501px){
.sidemenu {
    width:200px;}
.sidemenu li{
    margin-bottom:20px;}
.sidemenu a {
    font-size:20px;}
}

/*共通*/
.en-title {
    color: #fff;
    font-size: 5vw;
    margin-bottom: 0;}
.ja-title {
    font-size: 2.1vw;
    color: #000;
    font-weight: bold;
    margin-top: -1vw;}
.btn {
    display: block;
    width: 25vw;
    padding: 1vw 2vw;
    text-decoration: none;
    background-color: #7F0303;
    color: white;
    border-radius: 5vw;
    margin: 2vw auto;
    text-align: center;}
.btn:hover {
    opacity:0.7;} 
.calendar {
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #ddd;} 
.calendar img {
    width: 100%;
    display: block;} 
.headline {
    display: inline-block;
    margin: 2vw 0 1vw;
    padding: 0.3vw 0.7vw;
    background-color: #14826A;
    color: #fff;}
@media screen and (max-width: 700px){
.en-title {
    font-size: 18vw;
    line-height: 1.2;}
.ja-title {
    font-size: 6vw;
    margin-top: -10vw;
    margin-bottom: 5vw;}
.btn {
    width: 65%;
    padding: 3vw 5vw;
    border-radius: 15vw;
    margin: 5vw auto 2vw;}
.headline {
    display: block;
    width: 95%;
    margin: 3vw auto;
    padding: 2vw 5vw;
    text-align: center;}
}


/*メイン*/
main {
    position: relative;}
.mail-contact{
    position: fixed;
    display: block;
    bottom:0;
    right: 0;
    transform: translateY(-50%);
    /*color: #7F0303;*/
    color: #000;
    background-color: #f4ffea;
    text-align: center;
    padding: 4vw 1vw;
    border-top-left-radius:2vw;
    border-bottom-left-radius: 2vw;
    writing-mode: vertical-rl;
    z-index:99;
    text-decoration: none;}
.mail-contact:hover {
    opacity: 0.8;} 
.main-visual{
    position:relative;
    height:42vw;}
.news, .service, .profile, .store, .client, .instagram_feed {
    margin: 0;
    padding: 3vw 0;}
.background-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 42vw;
    z-index: 0;
    overflow: hidden;
    max-width: 100%;
    padding-bottom: 53.25%; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */}
.background-video iframe{
    width: 100%;
    height: 42vw;
    object-fit: cover;
    border-bottom-left-radius: 5vw;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;}
.background-video::after {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    border-bottom-left-radius: 5vw;
    width: 100%;}
.overlay-text{
    position:absolute;
    font-size:1.5vw;
    color:#fff;
    top: 50%;    left: 30%;
    margin:0;
    transform:translate(-50%,-50%);}
@media screen and (max-width:700px){
.mail-contact{
    bottom:0;
    right: 0;   left:0;
    padding: 4vw 1vw;
    border-top-left-radius:0;
    border-bottom-left-radius: 0;
    transform: translateY(0);
    writing-mode: rl;}
.mail-contact:hover {
    opacity: 0.8;} 
.news, .service, .profile, .store, .client, .instagram_feed {
    padding: 10vw 0;}
.background-video, .main-visual{
    height:55vw;}
.background-video iframe,.background-video::after{
    border-bottom-left-radius:0;}
.overlay-text {
    top: 50%;
    left: 45%;
    font-size: 3vw;
    font-weight: normal;
    width: 85%;
    height: 40vw;
    text-align: left;}
}
@media screen and (min-width:1501px){}


/*ニュース*/
.news-lists {
    list-style: none;
    padding: 0;
    margin: 1.5vw 0;}
.news-lists li a{
    display: flex;
    padding: 1vw 5vw 1vw 1vw;
    border-bottom: 0.5px solid #fff;
    text-decoration: none;}
.news-lists li a:first-child{
    border-top:0.5px solid #fff;}
.news-date {
    width:15vw;}
.news-title {
    width:80%;}
@media screen and (max-width: 700px){
.news-lists li a {
    flex-direction: column;
    gap:3vw;
    padding: 5vw;
    border-bottom-width: 1px;}
.news-lists li a:first-child{
    border-top-width: 1px;}
.news-date {
    width: 100%;}
.news-title {
    width: 100%;}
}
@media screen and (min-width:1501px){}


/*サービス紹介*/
.service-introduction__wrap{
    display:flex;
    position:relative;
    gap:2%;
    margin:1vw 3vw 1vw 1vw;}
.service-introduction__title {
    position: relative;
    width:65%;
    font-size: 1vw;
    line-height: 1.8vw;}
.service-introduction__title ul{
    list-style:none;
    margin:0;   padding:0;
    height:25vw;}
.service-introduction__title li a{
    position:relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding-top:1.1vw;
    border-bottom: 1px solid #000;
    cursor: pointer;}
.service-introduction__title li a p {
    margin: 0;}
.service-introduction__title li a p.num {
    position: relative;
    font-size: 4vw;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
.service-introduction__title li a p.card-title{
    font-size:1.8vw;
    margin: 1.5vw;
    color:#000;}
.service-introduction__title li a p.card-title span{
    display: block;
    font-size: 1.8vw;
    margin-bottom: 1vw;}
.service-introduction__title li a:active{
    pointer-events: none;}
.service-introduction__title li a:hover,
.service-introduction__title li a.active{
    border-bottom-color: #14826A;}
.service-introduction__title li a:hover p,
.service-introduction__title li a.active p{
    color:#14826A;}
.service-introduction__title li:hover p.en{
    color:#aaa;}
.service-introduction__section {
    position: relative;
    width:50%;}
.service-introduction__section .overlay {
    position: absolute;
    top:0;   left:0;  right:0; bottom:0;
    overflow:hidden;
    z-index: -1;}
.service-introduction__section .overlay .image-box{
    opacity:0;
    position:relative;}
.service-introduction__section .overlay .image-box .text-box {
    position: absolute;
    bottom: 0;
    left: 0;    right: 0;
    margin: 0;
    padding: 1vw;
    line-height: 2vw;
    background-color: rgba(127, 3, 3, 0.5);
    color: #fff;
    height: 10vw;}
.service-introduction__section .overlay .image {
    width:100%;
    height: 25vw;
    object-fit: cover;
    border-radius: 0;
    z-index: 0;}
.service-introduction__section .overlay.active{z-index:5;}
.service-introduction__section .overlay.active .image-box{opacity:1;}
.service-introduction__title .toggle {display: none;}
.wh-btn {
    display: block;
    width:20vw;
    margin-top: 1vw;
    padding: 0.5vw 1.5vw;
    text-decoration: none;
    text-align:center;
    color:#000;
    background-color: #fff;
    border-radius: 3vw;}
@media screen and (max-width:700px){
.service-introduction__wrap{
    flex-direction: column;
    gap:10vw;
    margin-top:5vw;
    height:140vw;}
.service-introduction__title {
    width:100%;
    height:75vw;
    font-size: 3vw;
    line-height: 5vw;}
.service-introduction__title li a p.num {
    top: 0vw;    left: 2vw;
    font-size: 7vw;}
.service-introduction__title li a p.card-title{
    font-size: 5vw;
    margin: 1.5vw;
    padding: 2.5vw;
    margin-left: 5vw;}
.service-introduction__title li a p.card-title span{
    font-size: 1.8vw;
    margin-bottom: 1vw;}
.service-introduction__title li a:active{
    pointer-events:all;}
.service-introduction__section{
    width:100%;
    height:100vw;}
.service-introduction__section .overlay .image {
    height: 75vw;
    object-fit: cover;}
.service-introduction__section .overlay .image-box .text-box {
    padding: 3vw;
    line-height: 5vw;
    height: 30vw;}
.wh-btn {
    width:50%;
    margin-top: 3vw;
    padding: 2vw 3vw;
    border-radius: 10vw;}
}
@media screen and (min-width:1501px){}


/*プロフィール*/
.profile-wrap {
    display: flex;
    gap:5%;
    justify-content: space-between;
    margin: 2vw 5vw 2vw 0;}
.profile-left {
    width:30%;}
.profile-left_text {
    font-size: 1.7vw;
    padding:3vw 0;
    color: #000;}
.profile-left a {
    display: block;
    text-decoration: none;
    color: #000;
    width: 85%;
    margin: 2vw auto;}
.profile-left a span{
    padding: 2vw;
    background-color: #fff;
    border-radius: 5vw;}
.profile-left a:hover {
    opacity:0.7;}
.profile-right {
    width:65%;
    position:relative;}
.profile-right img {
    width: 100%;
    border-radius: 3vw;}
.profile-right .video-play-btn {
    position: absolute;
    bottom: 0;
    left: 12%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.7);
    padding: 1vw 1.8vw;
    color: #000;
    font-size: 2vw;
    border-radius: 50%;
    cursor: pointer;}
.profile-right .video-play-btn img {
    width: 5vw;
    height: 5vw;} 
@media screen and (max-width: 700px){
.profile-wrap {
    flex-direction: column-reverse;
    gap: 5vw;
    margin: 2vw auto;}
.profile-right {
    width: 90%;
    margin: auto;}
.profile-left {
    width: 90%;
    margin: auto;}
.profile-left_text {
    font-size: 3.5vw;
    padding: 3vw;}
.profile-right .video-play-btn {
    padding: 3vw 4.5vw;
    font-size: 5vw;
    bottom: -3vw;}
}
@media screen and (min-width:1501px){}


/*店舗情報*/
.store-wrap {
    display: flex;
    justify-content: space-between;
    margin: 2vw 5vw 2vw 0;}
.store-left {
    width:48%;}
.store-left img {
    width: 100%;}
.store-right {
    width:50%;}
.store-right_text {
    font-size: 1.5vw;
    color: #000;
    margin-bottom: 1vw;
    line-height: 1.6;}
.store-right_btn {
    display: block;
    width:50%;
    padding: 1vw;
    font-size:1.2vw;
    text-decoration: none;
    color:#000;
    border:1px solid #000;
    border-radius: 1vw;
    margin-bottom: 1vw;}
.store-right_btn:hover {
    background-color: #fff;}
.googlemap iframe{
    width: 90%;
    margin-top: 2vw;
    height: 30vw;}
@media screen and (max-width: 700px){
.store-wrap {
    flex-direction: column;
    margin: 5vw auto;
    gap:5vw;}
.store-left,.store-right {
    width: 90%;
    margin: auto;}
.store-right_text {
    font-size: 3.5vw;
    line-height: 5vw;
    margin-bottom: 0;}
.store-right_btn {
    width: 100%;
    padding: 2vw;
    font-size: 3.5vw;
    margin: 3vw 0;}
.googlemap iframe {
    width: 100%;
    height: 80vw;}
}
@media screen and (min-width:1501px){}


/*取引先*/
.client-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
    margin-top: 2vw;
    text-align: center;
    width:90%;}
.client-wrap a {
    display:flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height:20vw;
    margin:0;
    padding: 2vw;
    border: 1px solid #ccc;
    border-radius: 1vw;
    color:#000;
    text-decoration: none;}
.client-wrap a img{
    width:100%;}
/*Instagram*/
.instagram_feed{
    margin-bottom:10vw;}
@media screen and (max-width: 700px){
.client-wrap {
    grid-template-columns: 1fr 1fr;
    margin: 3vw auto;
    gap: 5vw;}
.client-wrap a {
    width: 100%;
    height: 30vw;
    padding: 0;
    border: 0;}
.client-wrap a img {
    width: 100%;
    height: 30vw;
    object-fit: cover;}
}
@media screen and (min-width:1501px){}


/*フッター*/
footer {
    background-color: #d1d1d1;
    color: #14826A;
    padding: 4vw 2vw;
    position: relative;
    z-index: 90;}
.footer-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap:1vw;
    width: 90%;
    margin: auto;}
.footer-left {
    width:30vw;}
.footer-left img {
    width: 15vw;
    margin-bottom: 2vw;}
.footer-left_text {
    font-size: 1.4vw;
    line-height: 1.8;
    margin-bottom: 2vw;}
.footer-left_sns a {
    display: inline-block;
    margin: 0 0.5vw;
    padding: 0.5vw 0;
    width: 5vw;
    color: #14826A;
    font-size: 2.4vw;
    border: 1px solid #14826A;
    border-radius: 5vw;
    text-decoration: none;
    text-align: center;}
.footer-right {
    width:35vw;
    display: flex;
    gap: 2vw;
    padding-top:2vw;}
.footer-right_nav_1,.footer-right_nav_2 {
    list-style: none;
    padding: 0;}
.footer-right_nav_1 li,.footer-right_nav_2 li {
    margin-bottom: 0.5vw;}
.footer-right_nav_2 .indent {
    margin-left: 2vw;}
.footer-right a {
    text-decoration: none;
    color: #14826A;
    font-size: 1.4vw;}
.copyright {
    margin-top: 5vw;
    text-align:center;
    font-size: 1.4vw;
    color: #14826A;}
@media screen and (max-width: 700px){
footer {
    margin-bottom: 13vw;}
.footer-wrap {
    flex-direction: column;
    width: 90%;}
.footer-left,.footer-right {
    width: 100%;}
.footer-right{
    flex-direction:column;
    gap:0;}
.footer-left img {
    width: 50%;
    margin: 5vw auto;}
.footer-left_text {
    font-size: 4.5vw;
    line-height: 7.5vw;}
.footer-left_sns {
    margin: 5vw auto;
    text-align: center;}
.footer-left_sns a {
    padding: 5vw;
    width: 18vw;
    font-size: 5vw;
    border-radius: 10vw;}
.footer-right_nav_1, .footer-right_nav_2 {
    margin: 0;}
.footer-right_nav_1 li, .footer-right_nav_2 li {
    margin-bottom: 2.5vw;}
.footer-right a {
    font-size: 3.8vw;}
.copyright {
    margin: 10vw auto 5vw;
    font-size: 4vw;}
}
@media screen and (min-width:1501px){}



/*モーダルウィンドウ*/
.modal-video{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    width: 80vw;
    height: 50vw;
    z-index:100;}
.modal-video:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-video.active{
    opacity: 1;
    visibility: visible;}
.modal-video .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-video .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;}
.modal-video .modal-content{
    text-align: left;}
@media screen and (max-width:700px){
.modal-video {
    width: 100vw;
    height: 75vh;
    padding:0;}
.modal-video .modal-close {
    top: -150px;
    right: -5px;
    font-size: 60px;}
}

/*Instagram Graph API*/
/*
#insta {
    padding: 0;
    width: clamp(240px, 100%, 1280px);
    margin: 0 auto;}
#insta a {
    text-decoration: none;}
#insta ul {
    box-sizing: border-box;
    display: flex;
    padding:0;
    flex-flow: row wrap;
    justify-content: space-between;}
#insta ul li {
    list-style: none;
    box-sizing: border-box;
    width: 48%;
    margin-bottom: 1vw;
    height: 240px;
    position: relative;}
#insta ul li .captionTxt {
    display: block;
    width: 100%;
    height: 100%;
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    opacity: 0;}
#insta ul li .like_count {
    font-size: 12px;
    line-height: 2;
    display: block;
    text-align: center;
    position: relative;}
#insta ul li .like_count::before {
    content: "\02665";
    color: #d4245f;
    font-size: 14px;
    vertical-align: middle;
    padding-right: 0.25em;}
#insta ul li:hover .captionTxt {
    transition: 0.5s opacity, 0.25s filter;
    opacity: 1;}
#insta ul li img {
    object-fit: cover;
    width: 100%;
    height: 100%;}
@media screen and (min-width: 700px) {
#insta {
    width: 90%;
    margin: auto;}
#insta ul li {
    width: 20vw;
    height: 25vw;}
#insta ul li .captionTxt{
    height:25vw;
    top:50%;}
#insta ul li img {
    height: 25vw;
    object-fit: cover;}
}
@media screen and (max-width:700px){
#insta ul{
    margin:auto;
    width:90%;}
#insta ul li{height:50vw;}
}

@media screen and (max-width:700px){
.pc{display: none;}
}
@media screen and (min-width:701px){
.smp{display: none;}
}*/


/* 外枠の調整 */
#instaWrapper {
    padding: 2vw 0;
    width: 90%;}
.insta-banner {
    display: block;
    margin: 0 auto;
    text-decoration: none;
    border-radius: 2vw;
    overflow: hidden;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 1vw 3vw rgba(0,0,0,0.2);
    transition: transform 0.3s ease;}
.insta-banner-inner {
    display: flex;
    align-items: center;
    padding: 3vw;
    position: relative;}
.insta-logo-box {
    width: 6vw;
    height: 6vw;
    color: #fff;
    border-radius: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4vw;}
.insta-icon {
    width: 5vw;
    height: 5vw;
    border: 5px solid #fff;
    border-radius: 1vw;
    position: relative;}
.insta-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3vw;
    height: 3vw;
    border: 5px solid #fff;
    border-radius: 50%;}
.insta-icon::after {
    content: "";
    position: absolute;
    top: 0.4vw;
    right: 0.4vw;
    width: 0.4vw;
    height: 0.4vw;
    background: #fff;
    border-radius: 50%;}
/* テキスト部分 */
.insta-info {
    flex: 1;
    color: #ffffff;}
.insta-catch {
    font-size: 3vw;
    font-weight: bold;
    margin: 0 0 1vw 0;
    letter-spacing: 0.05em;
    font-family: sans-serif;}
.insta-description {
    font-size: 2vw;
    line-height: 1.6;
    margin: 0;}
.right-arrow{
    width: 3vw;}
.right-arrow i{
    font-size: 3vw;
    color:#fff;}
@media screen and (max-width: 700px){
.pc-br{display: none;}
#instaWrapper {
    margin: auto;}
.insta-banner {
    border-radius: 1vw;
    box-shadow: 0 1vw 3vw rgba(0,0,0,0.2);}
.insta-banner-inner {
    padding: 3vw;}
.insta-logo-box {
    width: 12vw;
    height: 12vw;
    border-radius: 1vw;
    margin-right: 4vw;}
.insta-icon {
    width: 10vw;
    height: 10vw;
    border: .5vw solid #fff;
    border-radius: 3vw;}
.insta-icon::before {
    width: 5vw;
    height: 5vw;
    border: .5vw solid #fff;}
.insta-icon::after {
    top: 1vw;
    right: 1vw;
    width: 1vw;
    height: 1vw;}
.insta-catch {
    font-size: 4.5vw;
    font-weight: 600;
    margin: 0 0 3vw 0;
    letter-spacing:normal;}
.insta-description {
    font-size: 3.5vw;
    line-height: 1.6;}
.right-arrow{
    width: 10vw;
    text-align: center;}
.right-arrow i{
    font-size: 5vw;}
}

/*フェードイン*/
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;}
.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);}