﻿@charset "UTF-8";
	/*common*/
    body{
        margin: 0;
    }
	article a,
	.profile a{
        border-bottom: 0.5px solid;
	}
	/*  hero  */
    section.hero{
        position: relative;
        width: calc(100vw-16px);
        margin: 0;
    }
	.hero__bg img{
        display:block;
        width:100%;
	}

    img.hero__title{
        position: absolute;
        top:0;
        right:0;
        height: 75vh;
        padding: 5% 5% 0 0;
        }
	@media (max-width:768px){
        img.hero__title{
            height: 54vh;
            padding: 30px 20px 0 0;
        }
	}
    article{
        margin: 0 auto;
    }
/*
    article.lead{
        width: 100vw;
        max-width: 680px;
        margin: 80px auto 100px;
        padding: 0 0 0 80px;
    }
*/
	article.lead{
        width:100%;
        max-width:680px;
        margin:80px auto 100px;
        padding-left:clamp(20px, 6vw, 80px);
        padding-right:20px;
        box-sizing:border-box;
	}
	@media (max-width:768px){
        article h2 {
            line-height: 2.0rem;
        }
        article.lead{
    		margin:40px auto 60px;
    		padding:0 20px;
  		}
}
    article p.text__margin__s{
        margin: 0 auto 40px;
    }
    article h3{
        margin: 0 auto 20px;
        font-size: 20px;
    }
    article h2{
        color: #444;
        font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
        line-height: 2.5rem;
        font-weight: 600;
        letter-spacing: 0.8;
    }
    article p{
        margin: 0 auto 1.4rem;
        line-height: 2.25rem;
        font-size: 16px;
        font-weight: 300;
        line-break: strict;
        word-break: normal;
        overflow-wrap: break-word;
    }
    article p.last{
        margin: 0 auto 60px;
    }
    article h3,article p{
        width: min(100%, 680px);
        color: #444;
        font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    }

	@media (max-width:768px){
        article h2 {
            line-height: 2.0rem;
        }
        .article__title{
            font-size:18px;
        }
        .article__title,
        .article__text{
            width:100%;
            padding-inline:clamp(16px, 5vw, 32px);
            box-sizing:border-box;
        }
        article p.last{
        margin: 0 auto 40px;
        }
	}

	/* bg */
	.chapter-bg{
        position:relative;
      	width:100%;
      	height:50vh;
      	overflow:hidden;
      	clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
      	-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
	}
	.chapter-bg::before{
  		content:"";
  		position:fixed;
  		top:0;
  		left:0;
  		z-index:-1;
  		width:100%;
 		height:100%;
	}
	.chapter-bg__wrap{
        position:absolute;
        inset:0;
        z-index:2;
        transform:translateZ(0);
	}
	@media (min-width:769px){
        .chapter-bg--intro{
            background:url(/cms/egf/img/travelogue/41/01.jpg) center/cover no-repeat !important;
            background-attachment:fixed !important;
        }
        .chapter-bg--outro{
            background:url(/cms/egf/img/travelogue/41/26.jpg) center/cover no-repeat !important;
            background-attachment:fixed !important;
        }
	}

	/* bg__sp */
	@media (max-width:768px){
        .chapter-bg{
            height:270px;
        }
        .chapter-bg::before{
            inset:0;
            width:100%;
            height:100svh;
            transform:translate3d(0,0,0);
            will-change:transform;
        }
        .chapter-bg--intro::before{
            background:url(/cms/egf/img/travelogue/41/01.jpg) center top/cover no-repeat !important;
        }
        .chapter-bg--outro::before{
            background:url(/cms/egf/img/travelogue/41/26.jpg) center top/cover no-repeat !important;
        }
	}
	
	/* chapter-contents */
	section.chapter-contents{
        margin: 100px auto;
    }
    section.chapter-contents h2{
        width: min(100%, 680px);
        margin: 0 auto 100px;
        font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 2rem;
        letter-spacing: 1.4;
        text-align: center;
    }
    h2.chapter-title small{
        display: block;
        margin: 0 auto 3rem;
        letter-spacing: 0.1em;
    }
	/* chapter-contents__sp */
	@media (max-width:768px){
        section.chapter-contents {
            margin: 60px auto;
        }
        section.chapter-contents h2{
            font-size:20px;
            line-height:1.8;
            margin:0 auto 60px;
            padding:0 20px;
            box-sizing:border-box;
  		}

  		h2.chapter-title small{
    		margin:0 auto 24px;
    		font-size:16px;
  		}
	}

	/*  profile */
    .profile{
        margin: 60px 0;
        background-color: #f8f8f8;
    }
    .profile__figure{
        display: flex;
        padding: 60px 180px;
        gap: 40px;
    }
    .profile__figure img{
        width:40%;
    }
    .profile__caption{
        width:60%;
    }
    .profile__name{
        font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
        font-size: 26px;
        color: #252525;
        font-weight: 400;
    }
    .profile__caption p{
        font-size: 16px;
        line-height: 2rem;
        margin: 0 0 1rem;
        color: #252525;
        font-weight: 400;
    }
	.artisan__info{
        color: #999999;
    	font-size: 16px;
    	font-family: 'Sackers Gothic Std', "Sackers Gothic";
	}

	/*profile__sp*/
	@media (max-width: 1024px){
        .profile {
            margin: 60px 20px;
        }
        .profile__figure{
            flex-direction: column;
            padding: 40px 6vw;
        }
        .profile__figure img {
            width: 100%;
        }
        .profile__caption {
            width: 100%;
        }
        .profile__caption p {
    		font-size: 14px;
            line-height: 1.6rem;
		}
	}
	/* next-chapter */
	section.next-chapter{
        width: 100%;
    	max-width: 680px;
    	margin: 0 auto;
	}
	section.next-chapter h2{
        font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
        font-size: 34px;
        letter-spacing: 0.1em;
        font-weight: initial;
        color: #252525;
	}
	section.next-chapter p{
        margin: 0 0 1rem;
        line-height: 2.25rem;
        font-size: 16px;
        font-weight: 300;
	}
	/* next-chapter__sp */
	@media (max-width: 768px){
        section.next-chapter {
            padding-inline:clamp(16px, 5vw, 32px);
    		box-sizing:border-box;
        }
        section.next-chapter h2 {
            font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
            font-size: 24px;
        }
	}
/* ========================================
media 共通
======================================== */
.media{
    margin:0;
    padding:0;
    list-style:none;
}

.media img{
    display:block;
    width:100%;
    height:auto;
}


/* ========================================
1枚
======================================== */
.media--single{
    width:100%;
    max-width:960px;
    margin:0 auto 60px;
}
.media--single.last{
    margin:0 auto 100px;
}
.media--single.medium{
    max-width:780px;
}

.media--single.small{
    max-width:680px;
}
	@media (max-width:768px){
        .media--single{
            margin: 0 auto 40px;
        }
}
    

/* ========================================
2枚並列
======================================== */
	.media--pair{
        display:grid;
        column-gap:60px;
        align-items:start;
        max-width:980px;
        margin:0 auto 80px;
	}
	@media (max-width:768px){
        .media--pair{
            margin: 0 auto 40px;
        }
	}
	/* ヨコ×タテ */
	.media--pair.hv{
        grid-template-columns:6fr 4fr;
	}
	.media--pair.hv.media--stagger-right{
        grid-template-columns:4fr 6fr;
	}
	@media (max-width:768px){
        .media--pair.hv{
            column-gap: 0;
        }
	}
	/* タテ×ヨコ */
	.media--pair.vh{
        grid-template-columns:4fr 6fr;
	}
	.media--pair.vh.media--stagger-left.media--stagger-left .media__item--2 {
    	transform: translateY(150px);
    	margin: 120px 0  140px;
	}
	@media (max-width:768px){
        .media .media--pair .vh .media--stagger-left .media__item .media__item--1{
            width:117%;
        }
        .media--pair.vh{
            column-gap: 10px;
        }
        .media--pair.vh.media--stagger-left.media--stagger-left .media__item--2 {
    	transform: translateY(0px);
    	margin: 200px 0px 0 -40px;
        width: 110%;
        }
	}
    /* 左が上 */
	.media--stagger-left .media__item--2{
        margin-top:120px;
	}
	@media (max-width:768px){
        .media--stagger-left .media__item--1{
            width: 115%;
        }
        .media--stagger-left .media__item--2{
        	margin: 130px 20px 0 -30px;
        }
	}
	/* 右が上*/
	.media--stagger-right .media__item--1{
        margin-top:120px;
	}
	@media (max-width:768px){
        .media--stagger-right .media__item--1{
            width: 120%;
        	margin: 120px 0 0 20px;
        }
        .media--stagger-right .media__item--2{
            width: 110%;
            margin: 0 0 0 -20px;
        }
	}

/* ========================================
2枚重ね（横×横）
======================================== */
.media--overlap2{
    display:flex;
    align-items:flex-start;
    max-width:980px;
    margin:0 auto 80px;
    padding-bottom:18%;
}

.media--overlap2 .media__item--1{
    width:65%;
    margin:auto 0;
    z-index:1;
}

.media--overlap2 .media__item--2{
    width:65%;
    margin-left:-60px;
    transform:translateY(75%);
    z-index:2;
}


/* ========================================
2枚重ね（縦×縦）
======================================== */
.media--overlap2.vertical{
    justify-content: space-between;
    max-width:780px;
    padding-bottom:14%;
    margin: 0 auto 120px;
}

.media--overlap2.vertical .media__item--1{
    width:52%;
    transform: translateY(40%);
}

.media--overlap2.vertical .media__item--2{
    width:52%;
    transform: unset;
}
	/* ========================================
	2枚重ね（縦×横）
	======================================== */
	.media--overlap2.vh{
        max-width:780px;
        padding-bottom: 0;
        margin: 0 auto 60px;
	}
	.media--overlap2.vh .media__item--1{
        width:38%;
        margin-top:120px;
        transform:none;
	}
	.media--overlap2.vh .media__item--2{
        width:72%;
        margin-left:-40px;
        transform:none;
	}
	@media (max-width:768px){
		.media--overlap2.vh{
            margin: 0 auto 40px;
        }
	}


/* ========================================
3枚重ね
======================================== */
.media--overlap3{
    max-width:1010px;
    margin:0 auto 100px;
}

.media--overlap3 .media__group--overlap{
    position:relative;
    padding-top:140px;
}

/* 左中 */
.media--overlap3 .media__group--overlap img:first-child{
    width:55%;
    margin:100px auto 0 80px;
}

/* 右上 */
.media--overlap3 .media__group--overlap img:last-child{
    position:absolute;
    top:0;
    right:70px;
    width:34%;
}

/* 下 */
.media--overlap3 .media__single{
    width:68%;
    margin:90px 0 0 auto;
}

    /* slider */
    .slick-slide {
    height: auto;
    }
    .slick-slide img{
        width: 100%;
    }
    .media.media--slider{
        width: 100%;
        max-width: 780px;
        margin: 0 auto 60px;
    }
    .slider-ui{
        display:flex;
        width: 230px;
        margin: 20px auto;
        justify-content: space-between;
        align-items:flex-start;
    }

    .slider-ui .media__prev,
    .slider-ui .media__next{
        width:40px;
        height:40px;
  border:1px solid #111;border-radius:50%;
  background:transparent;cursor:pointer;
}
.slider-ui .media__prev::before,
.slider-ui .media__next::before{
  content:"";display:block;margin:auto;
  width:14px;height:14px;
}
.slider-ui .media__prev::before{ content:"←"; }
.slider-ui .media__next::before{ content:"→"; }

.slider-ui .slick-dots{
  display:flex;gap:10px;margin:0;padding:0;list-style:none;
}
.slider-ui .slick-dots button{
  width:6px;height:6px;border:0;border-radius:50%;
  background:#ccc;font-size:0;padding:0;
}
.slider-ui .slick-dots .slick-active button{background:#111;}
	@media (max-width: 768px){
        .media.media--slider {
            margin: 0 auto 20px;
        }
	}
	/* nav */
	.article-nav{
      margin:120px 0 80px;
    }

    .article-nav__list{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:80px;

      margin:0;
      padding:0;
      list-style:none;
    }

    .article-nav__list a{
      color:#111;
      text-decoration:none;

      font-size:16px;
      letter-spacing:.08em;
      transition:
          opacity .3s ease,
          transform .3s ease;
    }


/* hover */
.article-nav__list a:hover{
  opacity:.5;
  transform:translateY(-2px);
}

    /* 矢印 */
    .article-nav__list li:first-child a::before{
      content:"←";
      margin-right:12px;
    }

    .article-nav__list li:last-child a::after{
      content:"→";
      margin-left:12px;
    }

	@media (max-width:768px){

  .article-nav{
    padding-inline:20px;
  }

  .article-nav__list{
    gap:24px;
    font-size:14px;
  }

}

    /*fafein*/
    .fadein{
      opacity:0;
      transform:translateY(60px);
      transition:
        opacity 1.4s ease,
        transform 1.4s ease;
      will-change:transform, opacity;
    }

    .fadein.is-show{
      opacity:1;
      transform:translateY(0);
    }
        /* cms */
        .pane-footer .block-footer-content {
            display: none;
        }
		#block_top_category .block-top-category--header .block-top-category--next a {
            color: #252525;}
		.block_border--desc-btn {
            margin: 40px auto 120px;
}
