@charset "utf-8";

/* ==================================================== */

/*  フォント
/* ==================================================== */
.font-poppins{font-family:Poppins,sans-serif;font-weight:700;}
.font-rubik{font-family:Rubik,sans-serif;font-weight:700;}
.acmin-pro-c{font-family:"acumin-pro-condensed",sans-serif;font-weight:800;font-style:italic;}

/* ==================================================== */

/*  基本
/* ==================================================== */
html,body{width:100%;height:100%;font-size:62.5%;}
body{position:relative;min-height:100%;height:100vh;color:#000000;font-family:'Noto Sans JP',sans-serif;font-size:clamp(13px,calc(13px + (14 - 13) * ((100vw - 768px) / (1366 - 768))),14px);-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:normal;z-index:2;}
body:before{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100vh;background-image:url('../img/common/mainvisual_bg.jpg');background-position:center center;background-repeat:no-repeat;background-size:cover;z-index:-1;}
body.active{    /*ハンバーガーメニューを開いたら背景固定*/
position:fixed;width:100%;height:100%;top:0;left:0;overflow:hidden;}
@media screen and (max-width:767px){
    body:before{background-image:url('../img/common/mainvisual_bg_sp.jpg');background-position:top center;background-repeat:no-repeat;background-size:cover;}
}
main{display:block;}
a{color:inherit;text-decoration:none;transition:opacity 0.3s ease;}
a:hover{opacity:0.7;transition:opacity 0.3s ease;}
@media screen and (max-width:1024px){
    a a[href^="tel"]{pointer-events:none;}
    a:hover{opacity:0.7;transition:opacity 0.3s ease;}
}
img{width:100%;height:auto;}
img[src$=".svg"]{    /*IEでimgタグのsrcにsvgを指定した時に崩れる防止*/
width:100%;height:auto;}
sup{font-size:70%;vertical-align:top;position:relative;top:-0.1em;}
sub{font-size:70%;vertical-align:bottom;position:relative;bottom:-0.1em;}

/* ==================================================== */

/*  全ページ共通（common）クラス
/* ==================================================== */

.flex{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;-js-display:flex;display:flex;}
.c-pc-only{display:inline-block!important;}
.c-tab-only{display:none!important;}
.c-sp-only{display:none!important;}
.c-tab-over{display:inline-block!important;}
.c-tab-less{display:none!important;}
.clear{clear:both!important;}
.c-justify{text-align:justify;text-justify:inter-ideograph;text-justify:inter-character;}
@media screen and (min-width:768px) and (max-width:1024px){
    .c-pc-only{display:none!important;}
    .c-tab-only{display:inline-block!important;}
    .c-sp-only{display:none!important;}
    .c-tab-over{display:inline-block!important;}
    .c-tab-less{display:inline-block!important;}
}
@media screen and (max-width:767px){
    .c-pc-only{display:none!important;}
    .c-tab-only{display:none!important;}
    .c-sp-only{display:inline-block!important;}
    .c-tab-over{display:none!important;}
    .c-tab-less{display:inline-block!important;}
}

/* ==================================================== */

/*  全ページ共通レイアウト
/* ==================================================== */

/*header*/
header{    /*position: absolute;*/
position:fixed;width:100%;top:0;margin:0 auto;z-index:998;}
.l-header-area{height:83px;display:flex;justify-content:space-between;padding:0 3.8% 0 3.6%;align-items:center;}
.l-header-area h1{position:relative;max-width:290px;width:21%;padding-top:5px;z-index:5;}
.l-header-area h1 img.logo_w{display:none;}
.header-nav{display:flex;cursor:pointer;}
.header-nav>ul{display:flex; align-items: center;}
.header-nav>ul>li{padding:0 22px;font-size:clamp(15px,calc(15px + (20 - 15) * ((100vw - 768px) / (1366 - 768))),20px);font-weight:bold;}
.header-nav>ul>li:last-child{padding-right:0;}
.header-nav>ul>li a{white-space: nowrap;}
.header-nav>ul>li a:hover{opacity:1;}
.header-nav>ul>li a::after{display:block;content:"";width:0%;height:8px;margin-top:-0.5em;background-color:#ffa56e;}
.header-nav>ul>li:nth-child(1) a::after{background-color:#DAFDD8;}
.header-nav>ul>li:nth-child(2) a::after{background-color:#FFF39F;}
.header-nav>ul>li:nth-child(3) a::after{background-color:#FDB6DE;}
.header-nav>ul>li:nth-child(6) a{display: block;width: 48px;padding: 0;}
.header-nav>ul>li:nth-child(7) a{display: block;width: 48px;padding: 0;}
.header-nav>ul>li:last-child a::after{background-color:#B3FBF3;}
.header-nav>ul>li a:hover::after{width:100%;transition:width 1s cubic-bezier(0.01,0.48,0,1.02);}
.header-nav-parent{position:relative;}
.header-nav-parent>p{cursor:default;}
.header-nav-parent a{padding-bottom:20px;}

/*ヘッダー 子ナビ*/
.header-nav-child{display:none;position:absolute;top:25px;left:50%;transform:translateX(-50%);width:200px;padding:30px;text-align:center;background-color:#000;color:#fff;}
.header-nav-child.active{display:block;}

/*ハンバーガーメニュー 基本*/
.header-hamburger{display:none;}
.header-slidemenu{display:none;}
@media screen and (max-width:767px){
    .l-header-area{position:relative;padding:0 4.2% 0 3.2%;z-index:4;}
    .l-header-area h1{width:189px;margin-top:0;padding-top:0;}
    .header-nav{background-color:#000;}
    .header-nav>ul{display:none;}
    .header-hamburger{position:relative;display:block;width:55px;height:55px;border:solid 1px #fff;color:#fff;z-index:3;}
    .header-hamburger span{position:absolute;right:22%;width:30px;height:1px;background-color:#fff;transition:.5s;}
    .header-hamburger span:first-of-type{top:32%;}
    .header-hamburger span:nth-of-type(2){top:50%;}
    .header-hamburger span:last-of-type{top:68%;}
    .header-slidemenu{position:fixed;top:0;width:100%;height:100vh;right:0;padding:157px 0;background-color:#000;color:#fff;opacity:0;transform:translateX(100%);transition:.5s;z-index:2;}
    .header-slidemenu li{max-width:305px;margin:0 auto 30px;padding-bottom:30px;font-weight:bold;letter-spacing:2px;font-size:2rem;border-bottom:1px dashed #fff;}
    .header-slidemenu li:last-child{
        display: flex;
        align-items: center;
        padding-bottom: 0;
        margin-bottom:0;
        border-bottom: none;
    }
    .header-slidemenu li:last-child a{
        display: block;
        width: 50px;
    }
    .header-slidemenu li:last-child a:first-child{
        margin-right: 20px;
    }

    /*ハンバーガーメニュー開いた後*/
    body.active .l-header-area h1 img.logo_color{display:none;}
    body.active .l-header-area h1 img.logo_w{display:block;}
    .header-slidemenu.active{display:block;transform:translateX(0);opacity:1;overflow:auto;-webkit-overflow-scrolling:touch;}
    .header-hamburger.active{border:none;}
    .header-hamburger.active span:first-of-type{top:50%;transform:rotate(45deg);}
    .header-hamburger.active span:nth-of-type(2){opacity:0;}
    .header-hamburger.active span:last-of-type{top:50%;transform:rotate(-45deg);}
    .header-slidemenu li .header-slidemenu__parent{margin:0 auto;}
    .header-slidemenu li.no-anchor .header-slidemenu__wrapper{margin:0 auto;}
    .header-slidemenu .header-slidemenu__wrapper{position:relative;transition:0.2s all ease;}
    .header-slidemenu .header-slidemenu__wrapper a{display:block;}
    .header-slidemenu__child{display:none;position:relative;top:0px;width:100%;}
    .header-slidemenu__parent.open .header-slidemenu__child{display:block;}
    .header-slidemenu__child>p{font-weight:normal;font-size:1.4rem;}
    .header-slidemenu__child>p a{display:block;}

    /*矢印*/
    .header-slidemenu .header-slidemenu__wrapper:after{content:"";position:absolute;right:25px;top:43%;width:7px;height:7px;border:0;border-top:solid 1px #000;border-right:solid 1px #000;transform:rotate(45deg);}
    .header-slidemenu__child>p{position:relative;}

    /*＋、－*/
    .header-slidemenu__parent .header-slidemenu__wrapper:before,.header-slidemenu__parent .header-slidemenu__wrapper:after{position:absolute;content:"";display:block;transition:all 0.4s;background:#000;right:12px;top:50%;width:15px;height:1px;transform:translate(-50%,-50%);border:none;}
    .header-slidemenu__parent .header-slidemenu__wrapper:before{transform:translate(-50%,-50%) rotate(90deg);}
    .header-slidemenu__parent .header-slidemenu__wrapper.open:before{transform:translate(-50%,-50%) rotate(0deg);}
    .header-slidemenu__parent .header-slidemenu__wrapper.open{margin-bottom:0;}
}

/*header show*/
header.show{background-color:#ffffffab;}
header.show .l-header-area{transition:all .3s ease;height:70px;}
header.show .l-header-area h1{width:18%;transition:all .3s ease;}
header.show .header-nav>ul>li a{font-size:90%;transition:all .3s ease;}
@media screen and (max-width:767px){
    header.show .l-header-area h1{width:170px;}
}

/*footer*/
footer{position:relative;margin-top:70px;z-index:997;background-color:#000000;color:#fff;}
footer h2{margin-bottom:55px;font-size:clamp(19px,calc(19px + (22 - 19) * ((100vw - 768px) / (1366 - 768))),22px);font-weight:bold;}
footer .inner{padding:52px 40px 50px;}
footer .footer_contents{}
footer .footer_contents .flex{margin-bottom:66px;line-height:1.7;}
footer .footer_contents .flex:last-child{margin-bottom:0;}
footer .footer_contents .flex h3{width:160px;font-weight:bold;}
footer .footer_contents .flex p{width:78%;font-weight:bold;}
footer .footer_contents .flex p a{display:block;font-weight:normal;}
footer .footer_contents .flex p a[target="_blank"]{display:inline-block;padding-right:20px;background:url(../img/common/ico_target.svg) no-repeat right center;background-size:15px;}
footer .footer_contents .flex span{display:inline-block;width:100%;font-size:1.3rem;font-weight:normal;}
footer .sns_area{margin-top:60px;}
footer .sns_area h4{margin-bottom:20px;font-size:1.7rem;font-weight:bold;text-align:center;}
footer .sns_area ul{display:flex;justify-content:center;}
footer .sns_area ul li{margin:0 4%;text-align:center;font-size:1.4rem;}
footer .sns_area ul li figure{width:40px;margin:0 auto 4px;}
footer .sns_area ul li p{font-size:1.3rem;}
@media screen and (max-width:767px){
    footer .inner{padding:57px 5.7% 100px;}
    footer h2{margin-bottom:35px;text-align:center;font-size:1.8rem;}
    footer .footer_contents .flex{display:block;margin-bottom:25px;}
    footer .footer_contents .flex h3{width:auto;margin-bottom:13px;}
    footer .footer_contents .flex p,footer .footer_contents .flex span{width:100%;}
    footer .sns_area h4{font-size:1.5rem;}
    footer .sns_area ul li figure{width:30px;}
}

/*ページトップ*/
footer .pagetop{display:none;position:fixed;bottom:30px;right:15px;}
footer .pagetop a{display:inline-block;position:relative;width:64px;height:64px;padding:26px 21px 0;border-radius:33px;background-color:#000;border:solid 1px #fff;z-index:3;}
footer .pagetop a:after{content:"";display:block;width:20px;height:20px;border-top:solid 1px #fff;border-right:solid 1px #fff;-webkit-transform:rotate(315deg);transform:rotate(315deg);}
@media screen and (max-width:767px){
    footer .pagetop a{width:56px;height:56px;padding:24px 20px 0;}
    footer .pagetop a:after{width:14px;height:14px;}
}

/*白背景*/
.wbase__bg{position:relative;max-width:1200px;width:87.8%;margin:0 auto 12vw;background-color:#ffffffe3;z-index:10;}
@media screen and (max-width:767px){
    .wbase__bg{width:92%;margin:0 auto 70px;}
}

/*エントリーボタン*/
.entry_btn{text-align:center;}
.entry_btn p{margin-bottom:20px;font-size:2rem;font-weight:bold;}
.entry_btn .font-rubik{position:relative;display:inline-block;width:516px;height:130px;line-height:130px;text-align:center;border:solid 3px transparent;background-color:#000;color:#fff;font-size:clamp(35px,calc(35px + (40 - 35) * ((100vw - 768px) / (1366 - 768))),40px);font-style:italic;border-radius:90px;transition:all .5s cubic-bezier(0.49,0,0,0.98);opacity:1;}
.entry_btn .font-rubik span::after{position:absolute;top:37%;right:35px;content:"";display:inline-block;width:16px;height:16px;border:solid 13px #fff;border-radius:50px;transition:all .5s cubic-bezier(0.49,0,0,0.98);}
.entry_btn .font-rubik:hover{background-color:#fff;border:solid 3px #000;color:#000;letter-spacing:2px;}
.entry_btn .font-rubik:hover span::after{border:solid 13px #000;}
.entry_btn .share_box{width:362px;margin:30px auto 0;}
.entry_btn .share_box .sns_flex{display:flex;justify-content:center;margin-top:21px;}
.entry_btn .share_box .sns_flex>div a{display:block;}
.entry_btn .share_box .sns_flex>div{width:59.76px;margin:0 15px;}
@media screen and (max-width:1024px){
    .entry_btn .font-rubik{max-width:510px;width:70%;height:110px;line-height:110px;}
    .entry_btn .font-rubik span::after{top:30%;}
    .entry_btn .share_box{width:95%;margin:30px auto;}
    .entry_btn .share_box .sns_flex{margin-top:12px;}
    .entry_btn .share_box .sns_flex>div{width:14%;margin:0 10px;}
}

/*クローズ*/
.entry_btn.close a.font-rubik{background-color:#d0d0d0;pointer-events:none;}
.entry_btn.close .close_text{margin:10px auto 0;font-size:1.5rem;font-size:clamp(16px,calc(16px + (17 - 16) * ((100vw - 768px) / (1366 - 768))),17px);}
@media screen and (max-width:767px){
    .entry_btn p{margin-bottom:16px;font-size:1.6rem;}
    .entry_btn .font-rubik{width:305px;height:78px;line-height:75px;}
    .entry_btn .font-rubik span::after{top:23%;right:15px;}
}

/*その他*/
#main{}
.inner{max-width:1080px;margin:0 auto;padding:5.5vw 40px 6vw;}
.inner-s{padding:0 4%;}
@media screen and (max-width:1024px){
    .inner{padding:70px 40px 100px;}
    .inner-s{padding:0;}
}
@media screen and (max-width:767px){
    .inner{padding:42px 5.7% 52px;}
}

/* ==================================================== */

/*  アニメーション
/* ==================================================== */

/*黄色ボーダー*/
.borderline{display:inline-block;line-height:1;}
.borderline::after{display:block;content:"";width:0%;height:17px;margin-top:-0.3em;background-color:#FEDC50;}
.borderline.active::after{width:100%;transition:width 1s cubic-bezier(1,0.01,0.02,1.03);}
@media screen and (max-width:767px){
    .borderline::after{height:8px;margin-top:-3px;}
}

/*下から上*/
.animation_up{opacity:0;}
.animation_up.active{animation:slide-up 1s cubic-bezier(1,0.04,0,0.99) forwards;}
@keyframes slide-up{
    0%{opacity:0;transform:translateY(20%);}
    100%{opacity:1;transform:translateY(0)}
}
@media screen and (max-width:767px){
    .animation_up{opacity:1;}
}

/*左から右へ アニメーション*/
.animation_line{position:relative;line-height:1;font-size:clamp(16px,calc(16px + (18 - 16) * ((100vw - 768px) / (1366 - 768))),18px);display:inline-block;}
.animation_line span{opacity:0;}
.animation_line.out span{opacity:1;}
.animation_line::after{content:"";width:0;height:100%;background:linear-gradient(90deg,#c1c3ff 0,#ffb6df 100%);display:block;position:absolute;top:0;left:0;transition:width .35s cubic-bezier(1,0,0,1.02),left .35s cubic-bezier(.95,.05,.795,.035);}
.animation_line.fadein::after{width:100%;}
.animation_line.out::after{transition:width .5s cubic-bezier(.19,1,.22,1),left .5s cubic-bezier(.19,1,.22,1),background .4s cubic-bezier(.47,0,.745,.715);left:100%;width:0;}

/*左から右へ ペンキ アニメーション*/
.common-title__box h2::after{clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 0.8s cubic-bezier(1,0.01,0,1.02);}
.common-title__box.active h2::after{clip-path:polygon(100% 0,0 0,0 100%,100% 100%);}

/* A4縦でPCレイアウトを印刷させる
==================================================== */
@media print{
    html,html body{*zoom:0.65;}
    body{width:960px;}
}


/************************Single Article Page Classes*******************************/
.imagebox.tokyobestiestoha {
    width: 70%;
    margin: 0 auto;
}
.imagebox.imagesmall {
    width: 57%;
    margin: 0 auto;
}
.imagebox.workshop {
    width: 50%;
    margin: 0 auto;
}
    .single-article{
        background-color: #ffffff;
        max-width: 1200px;
        width: 87.8%;
        margin: 186px auto 150px;
	}
	.single-article .single-article-inner{				
		padding-inline: 93px;
        padding-block: 4.687vw;
	}
	.single-article h1{
		font-family: "Noto Sans JP", sans-serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
        font-size: clamp(24px, calc(24px + (40 - 24) * ((100vw - 768px) / (1366 - 768))), 40px);      
		line-height: 1.5;
		text-align: center;
		padding-bottom: 24px;
	}
	.single-article .article-container .imagebox{
/*		aspect-ratio: 1015 / 571;*/
		background-color: #D1D1D1;
		margin-block: 24px;
	}
	.single-article .article-container .imagebox img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.single-article .article-container .article-content{
        font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 768px) / (1366 - 768))), 18px);
		font-weight: 500;
	}
	.single-article .article-container .article-content p{
		padding-block: 24px;
        line-height: 1.5;
	}
	.single-article .article-container .article-content h5{
		font-family: "Noto Sans JP", sans-serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
        font-size: clamp(18px, calc(18px + (26 - 18) * ((100vw - 768px) / (1366 - 768))), 26px);
		line-height: 1.5;
		padding-top: 12px;
		padding-bottom: 16px;
	}
	.single-article .article-container .article-img-gallery-container{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		margin-top: 20px;
        margin-bottom: 20px;
	}
	.single-article .article-container .article-img-gallery-container{
		
	}
    /* PC/Tablet: このギャラリーだけ 70% : 30% に */
.single-article .article-container .article-img-gallery-container.ratio-6-4{
  grid-template-columns: 6fr 4fr;
}

/* SP は既存どおり 1 カラム（保険で明記） */
@media all and (max-width:767px){
  .single-article .article-container .article-img-gallery-container.ratio-6-4{
    grid-template-columns: 1fr;
  }
  .imagebox.tokyobestiestoha {
    width: 100%;
}
.imagebox.workshop {
    width: 100%;
}
.imagebox.imagesmall {
    width: 100%;
}
}
	.single-article .article-container .right-text{
		text-align: right;
        font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 768px) / (1366 - 768))), 16px);
		font-weight: 500;
		line-height: 1.875;
		margin-block: 17px;
	}
	.single-article .article-container .single-article-link{
        font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1366 - 768))), 20px);
		font-weight: 500;
		line-height: 1.5;
		color: #4AA5E3;
		display: inline-block;
		margin-bottom: 24px;
	}
	.single-article .article-container .article-img-gallery-container .article-img{
/*		aspect-ratio: 492 / 369;*/
	}
	.single-article .article-container .article-img-gallery-container .article-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.show-in-mobile{
		display: none;
	}
@media all and (max-width:1199px){
	.single-article {
		margin-top: 186px;
		margin-bottom: 150px;
	}
}
@media all and (max-width: 1024px) {
    .single-article .single-article-inner {
        padding: 70px 40px 100px;
    }
}
@media all and (max-width:767px){
	.show-in-mobile{
		display: block;
	}
	.show-in-desktop{
		display: none;
	}
	.single-article {
        margin-top: 141px;
        margin-bottom: 100px;
    }
	.single-article h1 {
		padding-bottom: 14px;
	}
	.single-article .single-article-inner {        
		padding-inline: 20px;
		padding-top: 33px;
		padding-bottom: 75px;
	}
	.single-article .article-container .imagebox {
		margin-block: 14px;
	}
	.single-article .article-container .article-content p {
		padding-block: 12px;
	}
	.single-article .article-container .article-content h5 {
		line-height: 1.66;
		letter-spacing: 1px;
		padding-bottom: 11px;
	}
	.single-article .article-container .right-text {
		margin-block: 12px;
	}
	.single-article .article-container .single-article-link{
		margin-top: 12px;
		margin-bottom: 10px;
	}
	.single-article .article-container .article-img-gallery-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}
/*@media all and (max-width:550px){
	.single-article h1 {
		text-align: center;
    }
}*/

/*****************************************************************************/