@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/****************************************
ここからメンテナンス用
****************************************/
.page-id-8 p {
	margin-top: 2em;
	margin-bottom: 2em;
}
.page-id-8 div.wp-block-themeisle-blocks-slider {
	margin-top: 2.25em;
	margin-bottom: 2.25em;
}
p.subtitle {
	margin: 0 0 1em;
	line-height: 1.2em;
	font-size: clamp(28px, 6vw, 38px);
}

/****************************************
ここまでメンテナンス用
****************************************/

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

ここからサイト設定

****************************************/
:root {
	--main-color: #544838;/*var(--main-color)*/
	--main-light-color: #f6f6f5;/*var(--main-light-color)*/
	--main-nuki-color: #ffffff;/*var(--main-nuki-color)*/
	--main-sub-color: #ccc4ad;/*var(--main-sub-color)*/
	--main-point-color: #f5b930;/*var(--main-point-color)*/
	--midashi-en-text: ;/*var()*/
	--midashi-jp-text: ;/*var()*/
	--midashi-en-text: ;/*var()*/
	--content-l-width: 1260px;/*var(--content-l-width)*/
	--content-m-width: ;
	--content-s-width: ;
	--text-base-size: ;
	--text-s-size: 1em;/*var(--text-s-size)*/
	--text-basep-font: "Sawarabi Mincho", serif;/*var(--text-basep-font)*/
}
#header,
#fix_header {
	border-bottom: 2px solid var(--main-color);
	margin-bottom: 2px;	
}
#fix_header {
  box-shadow: 0 2px 0 #fff, 0 2px 4px var(--swl-color_shadow); /* 下方向に2pxの白い帯 */
}
/****************************************
SNS
****************************************/
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram {
    background-color: var(--main-color);
    color: var(--main-nuki-color);
}
/****************************************
フォント
****************************************/
h1,h2,h3,h4,h5,h6 {
	font-family: var(--text-basep-font);
	font-weight: 700;
	font-style: normal;
}
.wp-block-list,
.p-toc__ttl,
.single .wp-block-quote,
.cap_box_ttl,
#footer li {
	font-family: var(--text-basep-font);
	font-weight: 400;
	font-style: normal;
}
.post_content h3 {
	font-size: 1.3em;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    padding: .75em 1em;
    border-left: solid 8px var(--main-point-color);
    background: repeating-linear-gradient(135deg, var(--main-light-color) 0, var(--main-light-color) 5px, #fcfbfb 5px, #fcfbfb 6px)
}
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--main-point-color) 0%, var(--main-point-color) 20%, rgba(105, 90, 70, 0.2 ) 20%, rgba(105, 90, 70, 0.2 ) 100%)
}
.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    border-left: solid 3px var(--main-point-color);
}
.c-secTitle {
    border-left: solid 3px var(--main-point-color);
}
.single .wp-block-quote {
	font-size: 0.9em;
	line-height: 1.75em;
}
.wp-element-caption {
	font-size: 0.6em;
	line-height: 1.25em;
	padding: 0 3em;
	margin-top: 0.5em !important;
}
.blocks-gallery-caption {
	font-size: 0.8em;
	margin-top: -0.8em !important;
}
/***  メニュー系  ***/
.c-gnav,
.p-spMenu__inner {
	font-family: "IM Fell English SC", serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: var(--main-color) !important;
	letter-spacing: 0.1em !important;
}

/****************************************
レイアウト
****************************************/
.p-articleThumb {
    margin: 1em 0 2em;
    padding-top: 1em;
    border-top: 1px solid var(--main-sub-color);
    text-align: center;
    width: 100%
}
#main_visual .l-container {
	padding: 1em;
}
.p-mainVisual__slideTitle{
	font-family: "IM Fell English SC", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2em;
	letter-spacing: 0.3em;
	opacity: 0.7;
}
p.siteCatch{
	font-family: "IM Fell English SC", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2em;
	letter-spacing: 0.1em;
	line-height: 1.25em;
	padding: 2em 1em;
	color: var(--main-color);
	text-align: center;
	border-top:  2px solid var(--main-color);
	border-bottom: 2px solid var(--main-color);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.home #content {
	/*padding-bottom: 4em;*/
}
.home #main_content {
	max-width: 1260px;
}
.home .post_content {
	padding: 0;
}
.home .swell-block-tab {
	margin: 0px auto;
}
.home .purpose,
.home .tours {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 3em;
	margin-bottom:3em;
	padding: 3em 2em;
	background-repeat: repeat;
	background-position: center;
	background-image: url("/wp-content/themes/swell_child/images/paper_2.webp");
	
}
.home .tours {
	padding: 3em 1.25em 5em;	
}
.instaBack{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
}
.longWidth {
	max-width: var(--content-l-width);
	margin: 0px auto;
	position: relative;
}
.homeArticles {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
}
.home .tours {
	position: relative;
}
.home .purpose h2{
	all: unset;/**/
	display: block;   /* pとしての挙動を戻す */
	font-size: 1.5em;
	line-height: 1.2em;
	margin: 0px auto 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px dashed var(--main-sub-color);
	text-align: center;
}
.home .post_content h2::before{/*フッター直前の線削除*/
	content: none !important;
}
.home .purpose h2,
.home .purpose p {
	max-width: 1000px;
	font-family: var(--text-basep-font);
	font-weight: 400;
	font-style: normal;
	color: var(--main-color);
	letter-spacing: 0.1em;
}
.home .purpose p{
	font-size: 1em;
	margin: 0px auto;
	padding: 0 0.5em;
}

/****************************************
記事レイアウト
****************************************/
.l-mainContent__inner>.post_content {
    margin: 2em 0;
}

/****************************************
見出し左上がり
****************************************/
/* 15度傾けたSVG背景（SWELL子テーマ images/path.svg） */
.midashiL,
.midashiR {
	height: 80px;
	position: relative;
	display: flex;
	align-items: center;   /* 縦中央 */
	/* overflow: hidden; はみ出しを隠したいなら。不要なら外す */
	margin-bottom: 0;
}
/* 背景用レイヤー */
.midashiL::before{
	content: "";
	position: absolute;
	inset: 1%;                 /* 回転で角が欠けないよう少し大きめに */
	background-image: url("/wp-content/themes/swell_child/images/path_1.svg");
	background-repeat: no-repeat;
	background-size: contain;    /* 目的により cover / 具体pxでもOK */
	background-position: center;
	transform: rotate(2deg);
	transform-origin: center;
	pointer-events: none;        /* クリック操作を邪魔しない */
	z-index: 0;
	opacity: 1;                  /* 薄くしたいなら 0.2 など */
}
/* 中身を前面に */
.midashiL > *,
.midashiR > * {
	position: relative;
	z-index: 1;
}
.midashiL p,
.midashiR p {
	font-family: "IM Fell English SC", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	color: var(--main-color);
	background-color: white;
	margin-right: auto;
	margin-left: auto;
	
	width: fit-content;       /* 中身にフィット */
	padding: 0 20px;           /* 左右合計 +10px */
	margin: 0 auto;           /* 中央寄せ */
	box-sizing: content-box;  /* 念のため */
}
/****************************************
見出し右上がり
****************************************/
/* 15度傾けたSVG背景（SWELL子テーマ images/path.svg） */
/* 背景用レイヤー */
.midashiR::before{
	content: "";
	position: absolute;
	inset: 1%;                 /* 回転で角が欠けないよう少し大きめに */
	background-image: url("/wp-content/themes/swell_child/images/path_1.svg");
	background-repeat: no-repeat;
	background-size: contain;    /* 目的により cover / 具体pxでもOK */
	background-position: center;
	transform: rotate(178deg);
	transform-origin: center;
	pointer-events: none;        /* クリック操作を邪魔しない */
	z-index: 0;
	opacity: 1;                  /* 薄くしたいなら 0.2 など */
}
.tours .midashiR {
	max-width: var(--content-l-width);
	margin-right: auto;
	margin-left: auto;
	mix-blend-mode: multiply;
	opacity: 1; /* 必要なら */
}
/****************************************
旅ガチャバナー
****************************************/
.tabiGachaPc {
	display: none;
}
/****************************************
GootTours
****************************************/
.toursBox {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 15px;
}
.tours figure {
	position: relative;
}

/* =========================
   toursBox：画像カード（16:9）＋内側焦げ茶影＋中央キャプション帯
   ========================= */

/* figure を重ね合わせ用のグリッドにする */
.toursBox figure.wp-block-image{
  margin: 0;
  display: grid;
}

/* 画像リンクとキャプションを同じセルに重ねる */
.toursBox figure.wp-block-image > a,
.toursBox figure.wp-block-image figcaption{
  grid-area: 1 / 1;
}

/* 画像を16:9でトリミング（角丸なし） */
.toursBox figure.wp-block-image img{
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 0;
}

/* 内側シャドウ（リンクに疑似要素で重ねる） */
.toursBox figure.wp-block-image > a{
  position: relative;
  display: block;
  z-index: 1;
}
.toursBox figure.wp-block-image > a::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 9999px rgba(60, 35, 18, 0.18),
    inset 0 0 28px rgba(60, 35, 18, 0.55);
}

/* figcaption を中央に重ねる（縦横中央） */
.toursBox figure.wp-block-image figcaption{
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  z-index: 2;
  pointer-events: none;

  /* ここは !important で潰しすぎない */
  margin: 0;
  padding: 14px 18px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: min(78%, 520px);
  background: rgba(40, 40, 40, .9);
  color: #fff;
  font-weight: 600;
  letter-spacing: .18em;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* 上下のダッシュライン */
.toursBox figure.wp-block-image figcaption::before,
.toursBox figure.wp-block-image figcaption::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,.85) 0 5px,
    rgba(255,255,255,0)   5px 7px
  );
  opacity: .9;
}

.toursBox figure.wp-block-image figcaption::before{ top: 8px; }
.toursBox figure.wp-block-image figcaption::after { bottom: 8px; }

/* 影より文字を上に（念のため） */
.toursBox figure.wp-block-image > a{ z-index: 1; }

/* トップのスマホは4件まで */
.home .toursBox figure.tourList:nth-child(n+5){ display:none; }

/****************************************
装飾系
****************************************/
.stamp_L {
	width: 30%;
	position: absolute;
	left: 3%;
	top: 4em;
	z-index: -1;
}
.stamp_R {
	width: 15%;
	position: absolute;
	right: 10%;
	top: 4em;
	z-index: -1;
}
.homeArticles .stamp_R {
	width: 30%;
	position: absolute;
	right: -5%;
	top: -4.5em;
	z-index: -1;
}
.stamp_R2 {
	width: 50%;
	position: absolute;
	right: -5%;
	bottom: -1.5em;
	mix-blend-mode: multiply;
	/*z-index: -1;*/
}
.stampTerm_1{
	width: 30%;
	position: absolute;
	right: -3%;
	top: 2em;
	z-index: -1;
}


/****************************************
鋏痕系
****************************************/
.purpose {
	position: relative;
}
.kk_1 {
	width: 25px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 5%;
}
.kk_2 {
	width: 25px;
	height: 25px;
	position: absolute;
	bottom: 0;
	right: 10%;
}

.purpose .kk_1 {
	width: 25px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 10%;
}
.purpose .kk_2 {
	width: 25px;
	height: 25px;
	position: absolute;
	bottom: 0;
	right: 10%;
}
/****************************************
検索フォーム
****************************************/
.c-searchForm{
  border-radius: 999px;
  overflow: hidden;
}

/* 入力とボタン自体も角丸を合わせる（保険） */
.c-searchForm__s{
  border-radius: 999px 0 0 999px;
}

.c-searchForm__submit{
  border-radius: 0 999px 999px 0;
}

/* ボタン内の要素が四角い背景を持っている場合の保険 */
.c-searchForm__submit *{
  border-radius: inherit;
}
/****************************************
カード系
****************************************/
li.p-postList__item{
	position: relative;
}
.p-postList__link .icon-folder {
	display: none;
}
.cardCat {
	display: flex;
	justify-content: space-between;
	letter-spacing: 0.1em;
	border-bottom: 2px solid var(--main-point-color);
	margin: 0.5em 0 0.3em;
	font-size: 0.7em;
	padding-bottom: 0.3em;
}
.cardCatH {
	background-color: var(--main-color);
	color: var(--main-nuki-color);
	padding: 0.2em 0.3em 0.1em 0.5em;
	font-size: 0.9em;
}
.cardCatName {
	padding-top: 0.3em;
}
.p-postList__meta {
	justify-content: flex-end;
}
.cardBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100px;
}
.p-postList__meta {
	margin-top: 2px;
	padding-bottom: 9px;
}
.icon-posted::before{
  content: none !important;
}
/****************************************
フォーム系
****************************************/
#content form p {
	margin-top: 1em;
	font-family: var(--text-basep-font);
}
#content form p textarea,
#content form p input[type="text"],
#content form p input[type="email"] {
	width: 100%;
}
/****************************************
フッター系
****************************************/
#footer {
	background-repeat: repeat;
	background-position: center;
	background-image: url("/wp-content/themes/swell_child/images/paper_1.webp");
	padding-top: 5px;
}
#footer .l-container{
	position: relative;
}
.gootChara {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 150px;
}
.l-footer__nav{
  display: flex;          /* 念のため明示（テーマ側がflex前提の場合） */
  flex-direction: column; /* 縦方向に並べる */
  gap: 8px;               /* 行間（不要なら削除） */
}
#footer ul li {
  line-height: 1.2;
  padding: 0.1em 0;
  list-style-type: none!important;
}

#footer ul li:before {
  content: ">";
  position: absolute;
  left : 0.9em; /*左端からのアイコンまで*/
  color: var(--main-color); /*アイコン色*/
}
#footer li a {
	color: var(--main-color);
}
.copyright p {
	/*border-top: 1px solid var(--main-color);*/
	border-top: 4px solid transparent;
	padding-top: 0.25em;
	border-image: url("/wp-content/themes/swell_child/images/line_1.svg") 4 stretch;
}
/****************************************
instagramfeed
****************************************/
#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{
	margin: 0;
}
/****************************************
スペーサー系
****************************************/
.mb0 {
	margin-bottom: 0;
}
.mb1 {
	margin-bottom: 0.5em;
}
.mb2 {
	margin-bottom: 1em;
}
/****************************************
メディアクエリー600
****************************************/
@media screen and (min-width:600px) {
	/****************************************
	GootTours
	****************************************/
	.toursBox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.tours figure {
		position: relative;
	}
	/*  */
	.toursBox figure.tourList{
	  margin: 0;
	  flex: 0 0 calc(50% - 16px); /* 5枚並び */
	}
}
/****************************************
メディアクエリー960
****************************************/
@media screen and (min-width:960px) {
    /*　画面サイズが960pxからはここを読み込む　
	#wp-block-themeisle-blocks-advanced-heading-1560cc4d{
		margin-top: -250px !important;
	}
	#wp-block-themeisle-blocks-advanced-heading-1560cc4d{
		
	}*/
	.p-breadcrumb__list {
        font-size: 0.8em;
    }
	#main_visual .l-container {
	}
	p.siteCatch{
		font-size: 2.5em;
		letter-spacing: 0.1em;
		line-height: 1.8em;
		padding: 4em 0;
		text-align: center;
		border-top:  2px solid var(--main-color);
		border-bottom: 2px solid var(--main-color);
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.home .purpose,
	.home .tours {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-top: 6em;
		margin-bottom:6em;
		padding: 6em;
		background-repeat: repeat-y;
		background-position: center;
		background-size: 100% auto; /* 幅に合わせる */
		background-image: url("/wp-content/themes/swell_child/images/paper_1.webp");
	}
	.home .purpose h2{
		all: unset;/**/
		display: block;   /* pとしての挙動を戻す */
		font-size: 1.5em;
		margin: 0px auto 1em;
		padding-bottom: 0.5em;
		border-bottom: 2px dashed var(--main-sub-color);
	}
	.home .purpose h2,
	.home .purpose p {
		max-width: 1000px;
		font-family: var(--text-basep-font);
		font-weight: 400;
		font-style: normal;
		color: var(--main-color);
		text-align: center;
		letter-spacing: 0.3em;
	}
	.home .purpose p{
		font-size: 1.1em;
		margin: 0px auto;
		padding: 0;
	}
	.home .tours{
		padding: 3em 1.25em 4.75em;
	}
	.home .swell-block-tab {
		width: 900px;
		margin: 0px auto;
	}
	.home #content {
		/*padding-bottom: 6em;*/
	}
	.midashiL p,
	.midashiR p {
		font-size: 2em;
	}
	/****************************************
	旅ガチャバナー
	****************************************/
	.tabiGachaPc {
		display: block;
	}
	.tabiGachaMobile {
		display: none;
	}
	/****************************************
	GootTours
	****************************************/
	.toursBox figure.tourList{
	  margin: 0;
	  flex: 0 0 calc(25% - 16px); /* 5枚並び */
	}
	/* 5〜12件目を“元の形（grid）で”再表示 */
	.toursBox figure.tourList:nth-child(n+5):nth-child(-n+8){
		display: grid;
	}
	
	/* 13件目以降は非表示 */
	.toursBox figure.tourList:nth-child(n+9){
		display: none;
	}
	/****************************************
	鋏痕系
	****************************************/
	.kk_1 {
		width: 25px;
		height: 25px;
		top: 0;
		left: 10%;
	}
	.kk_2 {
		width: 25px;
		height: 25px;
		bottom: 0;
		right: 10%;
	}
	
	.purpose .kk_1 {
		width: 30px;
		height: 30px;
		top: 0;
		left: 10%;
	}
	.purpose .kk_2 {
		width: 30px;
		height: 30px;
		bottom: 0;
		right: 10%;
	}
	
	/****************************************
	装飾
	****************************************/
	.stamp_L {
		width: 20%;
		position: absolute;
		left: -5%;
		top: 4em;
		z-index: -1;
	}
	.stampTerm_1{
		width: 15%;
		position: absolute;
		right: 10%;
		top: 6em;
		z-index: -1;
	}
	.stamp_R {
		width: 20%;
		position: absolute;
		right: 0%;
		top: 4em;
		z-index: -1;
		transform: rotate(-15deg);
		transform-origin: center;
	}
	.homeArticles .stamp_R {
		width: 20%;
		position: absolute;
		right: 0%;
		top: 4em;
		z-index: -1;
	}
	.stamp_R2 {
		width: 25%;
		position: absolute;
		right: -5%;
		bottom: -2.5em;
		mix-blend-mode: multiply;
		/*z-index: -1;*/
	}

	
	/****************************************
	カード系
	****************************************/
	.cardCat {
		letter-spacing: 0.2em;
		margin: 0.5em 0 0.3em;
		font-size: 0.8em;
		padding-bottom: 0.3em;
	}
	.cardCatH {
		padding: 0.2em 0.3em 0em 0.5em;
	}
	.cardCatName {
		padding-top: 0.3em;
	}
	.p-postList__meta {
		margin-top: 2px;
		padding-bottom: 9px;
	}

	/****************************************
	フッター系
	****************************************/
	#footer {
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto; /* 幅に合わせる */
	}
	.gootChara {
		position: absolute;
		top:-20px;
		right:0;
		width: 200px;
	}
	.l-footer__nav{
	  display: flex;          /* 念のため明示（テーマ側がflex前提の場合） */
	  flex-direction: column; /* 縦方向に並べる */
	  gap: 8px;               /* 行間（不要なら削除） */
	  padding-left: 2em;
	}
	#footer ul li {
		font-size: var(--text-s-size);
	  line-height: 1.2;
	  padding: 0.1em 0;
	  list-style-type: none!important;
	}
	
	#footer ul li:before {
	  content: ">";
	  position: absolute;
	  left : 2em; /*左端からのアイコンまで*/
	  color: var(--main-color); /*アイコン色*/
	}
	#footer .l-footer__nav {
		position: relative;
		max-width: var(--content-l-width);
	}
	#footer li a {
		font-size: var(--text-s-size);
		border: none;
	}
	.copyright {
		margin: 10px;
	}
	/****************************************
	スペーサー系
	****************************************/
	.mb0 {
		margin-bottom: 0;
	}
	.mb1 {
		margin-bottom: 1.5em;
	}
	.mb2 {
		margin-bottom: 3em;
	}
}

/****************************************
Home Articles
****************************************/
.is-style-default .c-tabBody {
    border: 1px solid var(--main-sub-color);
}
.is-style-default>.c-tabList .c-tabList__button {
    background: none;
    box-sizing: border-box;
    opacity: .5;
    padding-bottom: .75em;
    padding-top: .75em
}
.is-style-default>.c-tabList .c-tabList__button:hover,.is-style-default>.c-tabList .c-tabList__button[aria-selected=true] {
    background-color: var(--main-color);
    color: var(--main-nuki-color);
    /*opacity: 1*/
}

/****************************************
テスト用
****************************************/
/* コンテンツ末尾（= footer手前）に入っている区切り線だけ消す */