@charset "UTF-8";

/* 余白(padding)
----------------------------------------------------------------
基本 coverflex
分割 --3-1 --2-1 --p-1 --2 --1-p --1-2 --1-3
機能 -reverse -early --keep
----------------------------------------------------------------*/
/* カバーflex */
.coverflex{
	display:flex;
	flex-wrap:wrap;
	--width-max:1200px;
	--width-image:.5;
	--width-content:.5;
	--void:calc((100% - var(--width-max)) / 2);
}
.coverflex.--3-1{
	--width-content:.75;
	--width-image:.25;
}
.coverflex.--2-1{
	--width-content:.666;
	--width-image:.334;
}
.coverflex.--p-1{
	--width-content:.618;
	--width-image:.382;
}
.coverflex.--2{
	--width-content:.5;
	--width-image:.5;
}
.coverflex.--1-p{
	--width-content:.382;
	--width-image:.618;
}
.coverflex.--1-2{
	--width-content:.334;
	--width-image:.666;
}
.coverflex.--1-3{
	--width-content:.25;
	--width-image:.75;
}
.coverflex.-reverse{ flex-direction:row-reverse; }
.coverflex > div{
	width:calc(var(--width-max) * var(--width-content));
	padding:var(--gap);
}
.coverflex > figure{ width:calc(var(--void) + var(--width-max) * var(--width-image)); }
.coverflex:not(.-reverse) > div:first-child,
.coverflex.-reverse > div:last-child{ margin:0 0 0 auto; }
.coverflex:not(.-reverse) > div:last-child,
.coverflex.-reverse > div:first-child{ margin:0 auto 0 0; }
.coverflex > figure > img{
	object-fit:cover;
	width:100%;
	height:100%;
	max-width:none;
}
@media screen and (max-width: 1200px){
	.coverflex{ --width-max:100%; }
	.coverflex:not(.-keep).-early > figure,
	.coverflex:not(.-keep).-early > div{ width:100%; }
}
@media screen and (max-width: 960px){
	.coverflex:not(.-keep) > figure,
	.coverflex:not(.-keep) > div{ width:100%; }
}

/* 余白(padding)
----------------------------------------------------------------
上下 p_ p__ p___
上 pt p_t p__t p___t
下 pb p_b p__b p___b
----------------------------------------------------------------*/
.p_{ padding-top:calc(var(--gap) / 1); padding-bottom:calc(var(--gap) / 1); }
.p__{ padding-top:calc(var(--gap) / 2); padding-bottom:calc(var(--gap) / 2); }
.p___{ padding-top:calc(var(--gap) / 4); padding-bottom:calc(var(--gap) / 4); }
.pt{ padding-top:calc(var(--gap) * 2); }
.p_t{ padding-top:calc(var(--gap) / 1); }
.p__t{ padding-top:calc(var(--gap) / 2); }
.p___t{ padding-top:calc(var(--gap) / 4); }
.pb{ padding-bottom:calc(var(--gap) * 2); }
.p_b{ padding-bottom:calc(var(--gap) / 1); }
.p__b{ padding-bottom:calc(var(--gap) / 2); }
.p___b{ padding-bottom:calc(var(--gap) / 4); }

/**
 * コンテンツ幅制限フレックスボックス
----------------------------------------------------------------
基本 wideflex
分割 --2 --1-p --p-1
方向 -reverse
その他 -keep
----------------------------------------------------------------*/
.wideflex{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:var(--gap);
	position:relative;
	margin:var(--gap) 0;
	--outside:calc((100% - var(--bp-pc)) / 2 + var(--gap));
	--inside:calc(var(--bp-pc) - var(--gap) * 3)
}
.wideflex > :nth-child(n){
	box-sizing:border-box;
	position:relative;
	min-width:0;
	overflow-wrap:break-word;
}
.wideflex > :nth-child(2n - 1) img{ width:100%; }
.wideflex > :nth-child(2n){ margin-right:var(--outside); }
.wideflex.-reverse > :nth-child(2n){ margin-right:0; }
.wideflex.-reverse > :nth-child(2n - 1){ margin-left:var(--outside); }
.wideflex.-reverse > :nth-child(2n - 1) img{ width:auto; }
.wideflex.-reverse > :nth-child(2n) img{ width:100%; }
.wideflex.--2 > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) / 2); }
.wideflex.--2 > :nth-child(2n - 0){ flex-basis:calc(var(--inside) / 2); }
.wideflex.--1-p > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) * 0.382); }
.wideflex.--1-p > :nth-child(2n - 0){ flex-basis:calc(var(--inside) * 0.618); }
.wideflex.--p-1 > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) * 0.618); }
.wideflex.--p-1 > :nth-child(2n - 0){ flex-basis:calc(var(--inside) * 0.382); }
.wideflex.-reverse.--2 > :nth-child(2n - 1){ flex-basis:calc(var(--inside) / 2); }
.wideflex.-reverse.--2 > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) / 2); }
.wideflex.-reverse.--1-p > :nth-child(2n - 1){ flex-basis:calc(var(--inside) * 0.618); }
.wideflex.-reverse.--1-p > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) * 0.382); }
.wideflex.-reverse.--p-1 > :nth-child(2n - 1){ flex-basis:calc(var(--inside) * 0.382); }
.wideflex.-reverse.--p-1 > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) * 0.618); }
@media screen and (max-width: 1200px){
	.wideflex{
		--outside:var(--gap);
		--inside:calc(100% - var(--gap) * 3)
	}
}
@media screen and (max-width: 960px){

	/* 継承しない場合は横幅を1カラム化 */
	.wideflex:not(.-keep) > :nth-child(n),
	.wideflex:not(.-keep).-reverse > :nth-child(n){ flex-basis:100%; }
	.wideflex:not(.-keep) > :nth-child(2n){ margin:0 var(--gap); }
	.wideflex:not(.-keep).-reverse > :nth-child(2n){ margin:0; }
	.wideflex:not(.-keep).-reverse > :nth-child(2n - 1){ margin:0 var(--gap); }

}

/**
 * 3D直方体
----------------------------------------------------------------
基準直方体 cube
----------------------------------------------------------------*/
.cube{
	--cube-w:300px;
	--cube-h:100px;
	--cube-d:200px;
	--rotate-y:15deg;
	--rotate-x:-15deg;
	--outline:#ccc;
	position:absolute;
	transform-style:preserve-3d;
	width:var(--cube-w);
	height:var(--cube-h);
	transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(0deg);
	transform-origin:right top;
	transform-origin:center center;
}
.cube > *{
	position:absolute;
	box-sizing:border-box;
	border:1px solid var(--outline);
	text-align:center;
	padding-top:10px;
	color:var(--main);
}
.cube > :nth-child(1){
	width:var(--cube-w);
	height:var(--cube-h);
	transform:translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(2){
	width:var(--cube-w);
	height:var(--cube-h);
	transform:rotateY(180deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(3){
	width:var(--cube-d);
	height:var(--cube-h);
	transform:rotateY(90deg) translateZ(calc(var(--cube-w) - var(--cube-d) / 2));
}
.cube > :nth-child(4){
	width:var(--cube-d);
	height:var(--cube-h);
	transform:rotateY(-90deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(5){
	width:var(--cube-w);
	height:var(--cube-d);
	transform:rotateX(90deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(6){
	width:var(--cube-w);
	height:var(--cube-d);
	transform:rotateX(-90deg) translateZ(calc(var(--cube-h) - var(--cube-d) / 2));
}

/**
 * 新着一覧
----------------------------------------------------------------
基本 topics
----------------------------------------------------------------*/
.topics > section{
	display:flex;
	gap:var(--gap);
	flex-wrap:wrap;
}
.topics > section:not(:first-child){
	border-top:1px solid #ccc;
	padding-top:var(--gap);
	margin-top:var(--gap);
}
.topics > section > figure{ width:calc(33.3333% - var(--gap)); }
.topics > section > figure + div{ width:66.6666%; }
.topics > section > div > time{ color:var(--sub); }
.topics > section > div > h2{ font-size:var(--l); }
@media screen and (max-width: 520px){
	.topics > section{ display:block; }
	.topics > section > figure{
		padding-top:var(--gap);
		width:auto;
	}
	.topics > section > figure + div{ width:auto; }
}

/**
 * 印刷設定
----------------------------------------------------------------*/
@page{
	margin:10mm;
	size:portrait;
}
@media print{
	body{
		-webkit-print-color-adjust:exact;
		width:1024px;
		zoom:0.8;
	}
	#menu,
	body > footer{ display:none !important; }
}

/**
 * 全体
----------------------------------------------------------------*/
:root{

	/* 配色 */
	--main:rgb(10,10,10);
	--sub:rgb(0,158,207);
	--main-hover:rgb(83,83,83);
	--sub-hover:rgb(76,187,221);
	--black:rgb(10,10,10);
	--gray:rgb(181,181,181);
	
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--tab) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
	
	--xxxl:clamp(30px, calc(50 / var(--sp) * 100vw), 50px);
	--xxxxl:clamp(40px, calc(60 / var(--sp) * 100vw), 60px);

}

/* フォント */
:root body.lang_chn{
	--mincho: "宋体", 'Noto Serif SC', 'Kaiti SC', 'SimSun', serif;
	--gothic: "微软雅黑", 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
:root body.lang_eng{
	--mincho: 'Garamond', 'Calisto MT', serif;
	--gothic: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
}

/* リッチフォーム初期設定 */
.richform{

	/* 配色 */
	--black:rgb(10,10,10);
	--gray:rgb(181,181,181);
	--silver:#f5f5f5;
	--blue:rgb(0,158,207);
	--blue-disabled:rgb(127,206,231);
	--white:white;
	--red:crimson;
	--default-color:rgba(0,0,0,0);
	
	/* その他 */
	--border-radius:0;
	--border-radius-top:0;
	--border-radius-right:0;
	--border-radius-bottom:0;
	--border-radius-left:0;

}
:focus{ outline:none; }

/* ボディ */
body{
	color:rgb(59,59,59);
	font-size:var(--xs);
	font-family:var(--mincho);
	font-feature-settings:'palt';
}

/* WPバー */
#wpadminbar{ display:none; }

/**
 * ヘッダー
----------------------------------------------------------------*/
/* 言語ナビ */
#langnav{
	position:absolute;
	top:40px;
	right:40px;
	z-index:1000;
	font-family:var(--gothic);
	background:white;
	line-height:40px;
	font-size:20px;
}
#langnav::after{
	content:'';
	background:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/interface/icons/arrow.png") no-repeat center center / 30px;
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:60px;
}
#langnav > p{
	height:60px;
	padding:10px 70px 10px 20px;
	cursor:pointer;
}
#langnav > ul{ display:none; }
#langnav:hover > ul{ display:block; }
#langnav > ul > li > a{
	height:50px;
	padding:5px 70px 5px 20px;
	display:block;
	border-top:1px solid var(--gray);
}
#langnav > p:hover,
#langnav > ul > li > a:hover{ background:rgb(242,242,242); }
@media screen and (max-width: 960px){
	#langnav{
		top:10px;
		right:10px;
		line-height:30px;
		font-size:14px;
	}
	#langnav::after{
		background-size:20px;
		width:40px;
		height:40px;
	}
	#langnav > p{
		height:40px;
		padding:5px 45px 5px 10px;
	}
	#langnav > ul > li > a{
		height:30px;
		padding:0 45px 0 10px;
	}
}

/* 固定お問い合わせナビ */
#fixedcontact{
	position:absolute;
	bottom:calc(50vh - 350px / 2);
	right:0;
	z-index:1000;
	width:80px;
	display:block;
	background:rgba(250,250,250,.8);
}
#fixedcontact:hover{ background:rgb(250,250,250); }
@media screen and (max-width: 768px){
	#fixedcontact{
		position:fixed;
		bottom:0;
		width:10vw;
	}
}

/**
 * フッター
----------------------------------------------------------------*/
/* 問い合わせBOX */
.contactbox{
	background:rgb(204,235,245);
	border-radius:10px;
	max-width:728px;
	margin:80px auto 40px;
	display:block;
	padding:30px 20px;
	font-size:var(--m);
	letter-spacing:.2em;
	text-align:center;
	line-height:1.5;
}
.contactbox > span{ font-size:var(--xxl); }
.contactbox:hover{
	background:rgb(0,158,207);
	color:white;
}
.contactbox:hover > span{ transition:unset; }
@media screen and (max-width: 768px){
	.contactbox{
		margin:80px 20px 40px;
		max-width:none;
	}
}

/* フッターカード */
#fcard > img{ max-width:400px; }
#fcard > address{
	text-align:center;
	font-size:var(--s);
	padding:20px;
	text-align:center;
}

/* 著作権表記 */
#cr{
	background:var(--sub);
	color:white;
	font-size:var(--s);
	text-align:center;
	padding:5px 20px;
}

/**
 * ContactFormカスタマイズ
----------------------------------------------------------------*/
/* メッセージ：成功時 */
.wpcf7 form.sent .wpcf7-response-output{
	background:#d5edda;
	color:#185626;
	border:1px solid #c4e5cc !important;
	padding:10px
}

/* メッセージ：失敗時 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
	background:#f7d7da;
	color:#711d26;
	border:1px solid #f4c6cb !important;
	padding:10px
}

/* 個別：エラー文 */
.wpcf7-not-valid-tip{
	color:red !important;
	margin-top:5px;
	font-size:12px !important;
}

/**
 * 投稿コンテンツ
----------------------------------------------------------------*/
#post{ padding-bottom:80px; }
#post > *{
	max-width:1024px;
	margin:0 auto;
}
#post .wp-block-columns{
	padding:40px 20px;
	box-sizing:border-box;
}
#post_post{
	padding:20px;
}
#post_post h2{
	font-size:30px;
	padding-top:20px;
}
#post_post h3{
	font-size:16px;
	padding-top:10px;
	font-weight:bold;
	color:var(--main);
}
#post_post table tr > td:first-child{ min-width:120px; }
#post_post table tr > td{ padding:10px; }
@media screen and (max-width: 768px){
	#post_post h2{ font-size:18px; }
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* フォントサイズ */
.--xxl{ font-size:var(--xxl); }
.--xl{ font-size:var(--xl); }
.--l{ font-size:var(--l); }
.--m{ font-size:var(--m); }
.--s{ font-size:var(--s); }
.--xs{ font-size:var(--xs); }
.--xxs{ font-size:var(--xxs); }

/* 映像 */
.video{
	max-width:580px;
	margin:0 auto 40px;
}
@media screen and (max-width: 768px){
	.video{ max-width:100%;}
}

/* ワイド時表示 */
@media screen and (max-width: 1200px){
	.wide{ display:none; }
}

/* 汎用文章 */
.p{ font-family:var(--gothic); }

/* 強調 */
.strong{ color:var(--sub); }

/* 脚注 */
.note{
	font-size:var(--xs) !important;
	color:var(--sub);
	padding:10px 0;
}

/* 見出し */
.h2{ margin:100px 0 40px; }
.h2 > img{
	max-height:40px;
	margin:20px 0;
}
.h2 > h2{
	font-size:var(--xxl);
	letter-spacing:.2em;
	font-weight:normal;
	line-height:1.5;
}
body.lang_eng .h2 > h2{ letter-spacing:0; }
.h2_sub{
	margin:100px 0 40px;
	text-align:center;
}
.h2_sub.-white{ color:white; }
.h2_sub > img{
	max-height:30px;
	margin:20px auto;
}
.h2_sub > span{
	display:block;
	color:var(--sub);
	font-size:var(--xxxxl);
	line-height:1.2;
}
.h2_sub > h2{
	font-size:var(--xl);
	letter-spacing:.1em;
}
body.lang_eng .h2_sub > h2{ letter-spacing:0; }
.h3{
	font-size:var(--xxl);
	text-align:center;
	letter-spacing:.1em;
	font-weight:normal;
}
body.lang_eng .h3{
	font-size:var(--xl);
	letter-spacing:0;
}
.h3_dbline > img{ width:80px; }
.h3_dbline > h3{
	position:relative;
	text-align:center;
}
.h3_dbline > h3::before{
	content:'';
	display:block;
	position:absolute;
	border-top:1px solid var(--sub);
	border-bottom:1px solid var(--sub);
	height:5px;
	top:50%;
	margin-top:-2.5px;
	left:0;
	right:0;
}
.h3_dbline > h3 > span{
	font-size:var(--xxl);
	background:white;
	margin:0 auto;
	display:inline-block;
	padding:0 20px;
	z-index:1;
	position:relative;
}
.h4{
	font-size:var(--xl);
	letter-spacing:.1em;
	font-weight:normal;
}
body.lang_eng .h4{ letter-spacing:0; }
.h5{
	font-size:var(--l);
	letter-spacing:.1em;
	margin-top:0;
}
body.lang_eng .h5{ letter-spacing:0; }

/* レイアウト */
.base1000{
	max-width:1000px;
	margin:0 auto;
}

/* コピー */
.bluecopy{
	background:var(--sub);
	color:white;
	padding:4px 20px;
	font-size:var(--m);
	letter-spacing:.1em;
}
figure + .bluecopy{ margin-top:30px; }

/* フレーム */
.frame{
	background:rgba(255,255,255,.8);
	border:2px solid var(--sub);
	border-radius:20px;
	overflow:hidden;
}
.frame.-circle{
	border-width:5px;
	border-radius:50%;
}

/* フロート */
.float{
	display:flex;
	align-items:center;
	gap:20px;
}
.float > :first-child{ width:calc(100% - 20px - 180px); }
.float > :last-child{ width:180px; }
@media screen and (max-width: 520px){
	.float{ display:block; }
	.float > :nth-child(n){ width:auto; }
	.float > :last-child{
		margin-top:20px;
		max-width:180px;
		margin:0 auto;
	}
}

/* ギャラリー */
.gallery{
	display:flex;
	margin:var(--gap) 0;
	gap:5px;
	flex-wrap:wrap;
}
.gallery > *{
	flex-basis:calc((100% - 5px * 2) / 3);
	max-width:none;
	min-width:0;
}
@media screen and (max-width: 768px){
	.gallery > *{ flex-basis:calc((100% - 5px * 2) / 2); }
}

/* レイヤー */
.layer1{
	position:relative;
	z-index:1;
}

/* ロゴ */
.logo{ width:400px; }
@media screen and (max-width: 768px){
	.logo{ width:300px; }
}

/* 画像キャプション */
.figcaption{
	font-family:var(--gothic);
	color:var(--sub);
	font-size:var(--s);
	text-align:center;
	margin-top:10px;
}

/* 真珠オブジェ */
.pearls{ position:relative; }
.pearls::before{
	background:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/interface/theme/object_pearls.png") no-repeat center center / contain;
	width:210px;
	height:210px;
	top:-160px;
	left:20px;
	position:absolute;
	content:'';
	display:block;
	z-index:100;
}
.pearls.-right::before{
	left:auto;
	right:20px;
}
.pearls.-deg45::before{ transform:rotate(45deg); }
.pearls.-deg90::before{ transform:rotate(90deg); }
.pearls.-deg135::before{ transform:rotate(135deg); }
.pearls.-deg180::before{ transform:rotate(180deg); }
.pearls.-deg225::before{ transform:rotate(225deg); }
.pearls.-deg270::before{ transform:rotate(270deg); }
.pearls.-deg315::before{ transform:rotate(315deg); }
@media screen and (max-width: 1200px){
	.pearls::before{
		width:18vw;
		height:18vw;
		top:-7vw;
		left:2vw;
	}
	.pearls.-right::before{
		left:auto;
		right:5vw;
	}
}
@media screen and (max-width: 768px){
	.pearls::before{
		width:24vw;
		height:24vw;
	}
}

/* リンク */
.link{
	background:white;
	color:var(--main);
	padding:4px 20px;
	font-size:var(--xs);
	display:block;
	margin-top:20px;
}
.link:hover{ background:#eee; }

/* 背景 */
.bg_sectors_blue{ background:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/interface/theme/bg_loop_sectors.png") center center; }
.bg_sectors_green{ background:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/interface/theme/bg_loop_sectors_green.png") center center; }
.bg_blue30{ background:rgb(178,225,240); }
.bg_hotels{
	color:white;
	background:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/article/index/bg_hotels.jpg") repeat-y center center / cover;
}
@media screen and (max-width: 768px){
	.bg_hotels{ background-image:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/article/index/bg_hotels_sp.jpg"); }
}

/* 傾斜背景 */
.skew{
	position:relative;
	z-index:-1;
}
.skew > *{
	position:relative;
	z-index:1;
}
.skew::before,
.skew::after{
	background:inherit;
	position:absolute;
	z-index:-1;
	height:100%;
	width:100%;
}
.skew.-top-up::before,
.skew.-top-down::before,
.skew.-bottom-up::after,
.skew.-bottom-down::after{ content:''; }
.skew.-top-up::before{
	top:0;
	transform:skewY(-6deg);
	transform-origin:top left;
}
.skew.-top-down::before{
	top:0;
	transform:skewY(6deg);
	transform-origin:top right;
}
.skew.-bottom-up::after{
	bottom:0;
	transform:skewY(-6deg);
	transform-origin:bottom right;
}
.skew.-bottom-down::after{
	bottom:0;
	transform:skewY(6deg);
	transform-origin:bottom left;
}
.skew.-contain-top.-top-up,
.skew.-contain-top.-top-down{ margin-top:11vw; }
.skew.-contain-bottom.-bottom-up,
.skew.-contain-bottom.-bottom-down{ margin-bottom:11vw; }
.skew.-inset-top::before,
.skew.-inset-bottom::after{
	background:white;
	height:22vw;
	z-index:0;
}

/* カバー付き傾斜概要文 */
.coversummary{
	display:flex;
	transform:skewY(-6deg);
}
.coversummary > figure{
	width:65%;
	margin:0;
}
.coversummary > figure > img{
	width:100%;
	height:100%;
	max-height:500px;
	object-fit:cover;
	max-width:none;
}
.coversummary > div{
	width:35%;
	background:url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/article/index/bg_h2_sub.jpg") no-repeat center center / cover;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.coversummary > div > p{
	transform:skewY(6deg);
	padding:60px var(--gap);
	line-height:2;
	max-width:400px;
}
.coversummary.-reverse{
	transform:skewY(6deg);
	flex-direction:row-reverse;
}
.coversummary.-reverse > div > p{
	margin:0 0 0 auto;
	transform:skewY(-6deg);
}
@media screen and (max-width: 1200px){
	.coversummary{
		display:block;
		transform:skewY(0deg);
	}
	.coversummary > figure{
		transform:skewY(-6deg);
		width:auto;
	}
	.coversummary > figure > img{
		height:auto;
		object-fit:none;
	}
	.coversummary > div{
		width:auto;
		margin:-10vw 40px 40px;
		position:relative;
		z-index:1;
	}
	.coversummary > div > p{
		transform:skewY(0deg);
		padding:var(--gap);
		max-width:none;
	}
	.coversummary.-reverse{ transform:skewY(0deg); }
	.coversummary.-reverse > figure{ transform:skewY(6deg); }
	.coversummary.-reverse > div > p{ transform:skewY(0deg); }
}

/**
 * スポット
----------------------------------------------------------------*/
/* メインビジュアル */
#spot_mvis > :nth-child(1){
	max-width:none;
	width:100%;
}
#spot_mvis  > :nth-child(2){ display:none; }
#spot_mvis  > :nth-child(3){ display:none; }
@media screen and (max-width: 1200px){
	#spot_mvis  > :nth-child(1){ display:none; }
	#spot_mvis  > :nth-child(2){ display:block; }
}
@media screen and (max-width: 768px){
	#spot_mvis  > :nth-child(2){ display:none; }
	#spot_mvis  > :nth-child(3){ display:block; }
}

/* リードコピー */
#leadcopy > .flex > div > .h2{ margin:0 0 40px; }
#leadcopy > .flex > div > .h2 > h2{ font-size:var(--xl); }

/* 真珠養殖体験 */
#spot_experience{
	max-width:1000px;
	margin:0 auto;
	padding:40px 0;
}
#spot_experience > div{
	display:flex;
	gap:100px;
	margin-top:-210px;
}
#spot_experience > div > section{ width:calc(100% - 50px); }
#spot_experience > div > section > h3{
	font-size:var(--xxxl);
	text-align:center;
	font-weight:normal;
	margin-bottom:20px;
	letter-spacing:.2em;
}
body.lang_chn #spot_experience > div > section > h3{
	font-size:var(--xl);
	letter-spacing:0;
}
body.lang_eng #spot_experience > div > section > h3{
	font-size:var(--xl);
	letter-spacing:0;
}
@media screen and (max-width: 1040px){
	#spot_experience{
		max-width:none;
		margin:0 20px;
	}
	#spot_experience > div{ margin-top:-20vw; }
}
@media screen and (max-width: 768px){
	#spot_experience > div{
		margin-top:0;
		display:block;
	}
	#spot_experience > div > section{
		width:auto;
		border-top:1px solid #ccc;
		padding-top:20px;
	}
	#spot_experience > div > section:first-child{ margin-bottom:20px; }
	#spot_experience > div > section > h3{
		font-size:var(--xl);
		text-align:left;
		margin:0;
	}
}

/* 真珠養殖体験：その他 */
#spot_experience_others > h3{
	font-weight:normal;
	margin:80px 20px 40px;
}
body.lang_eng #spot_experience_others > .base1000 > .flex > section > h4{ font-size:var(--l); }
@media screen and (max-width: 768px){
	#spot_experience_others > .base1000{ max-width:384px; }
	#spot_experience_others p{ text-align:center; }
}

/* 自分だけの真珠をつくる */
#spot_makemypearl{ background:white; }
#spot_makemypearl > .coverflex > div > p{ font-size:var(--s); }
#spot_makemypearl > .coverflex > figure{ margin:0; }

/* ハイライト */
#spot_highlights > section > figure{
	margin:0;
	position:relative;
}
#spot_highlights > section > figure > header{
	background:var(--sub);
	color:white;
	width:100px;
	position:absolute;
	bottom:0;
	left:0;
	padding:6px 6px 2px 6px;
	text-align:center;
	font-size:var(--xl);
	line-height:1.2;
}
#spot_highlights > section > div{ padding:var(--gap); }

/* うまし國 志摩 */
#spot_shima{
	max-width:1340px;
	margin:0 auto;
	background:repeating-linear-gradient(-45deg, rgb(178,225,240), rgb(178,225,240) 9px, white 9px, white 18px);
	padding:15px;
}
#spot_shima > div{
	border:15px solid white;
	background:white url("https://pearl-umikaze.jp/wp-content/themes/umikaze/image/interface/theme/bg_loop_sectors_green.png") center center;
	padding:var(--gap);
	position:relative;
}
#spot_shima > div > img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	max-width:none;
}
#spot_shima > div > div{ position:relative; }
#spot_shima > div > div > section{ position:relative; }
#spot_shima > div > div > section > div{
	background:rgba(255,255,255,.9);
	padding:var(--gap);
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	height:fit-content;
	width:calc(50% + var(--gap));
	right:0;
}
#spot_shima > div > div > section > div > header{
	display:flex;
	align-items:center;
	gap:20px;
	margin-bottom:var(--gap-half);
}
#spot_shima > div > div > section > div > header > span{
	font-size:100px;
	color:var(--sub);
	font-weight:normal;
	padding-right:20px;
	border-right:5px solid var(--sub);
	display:block;
}
#spot_shima > div > div > section > div > header > h3{
	text-align:left;
	font-size:var(--xl);
	letter-spacing:.1em;
}
body.lang_eng #spot_shima > div > div > section > div > header > h3{ letter-spacing:0; }
#spot_shima > div > div > section:nth-child(1){
	position:absolute;
	top:-1200px;
	left:0;
	right:0;
}
#spot_shima > div > div > section:nth-child(1) > figure{ width:50%; }
#spot_shima > div > div > section:nth-child(2){ margin-top:1200px; }
#spot_shima > div > div > section:nth-child(2) > figure{
	margin-left:50%;
	width:50%;
}
#spot_shima > div > div > section:nth-child(2) > div{
	right:auto;
	left:0;
}
#spot_shima > div > div > section:nth-child(3){ margin-top:40px; }
#spot_shima > div > div > section:nth-child(3) > figure{ width:80%; }
@media screen and (max-width: 1420px){
	#spot_shima{
		margin:0 var(--gap);
		padding:10px;
		background:repeating-linear-gradient(-45deg, rgb(178,225,240), rgb(178,225,240) 6px, white 6px, white 12px);
	}
	#spot_shima > div{
		border-width:10px;
		padding:var(--gap-half);
	}
	#spot_shima > div > div > section > div{ padding:var(--gap-half); }
	#spot_shima > div > div > section > div > header > span{ font-size:7vw; }
	#spot_shima > div > div > section > div > header > h3{ font-size:var(--l); }
	#spot_shima > div > div > section:nth-child(1){ top:-80vw; }
	#spot_shima > div > div > section:nth-child(2){ margin-top:80vw; }
}
@media screen and (max-width: 1200px){
	#spot_shima{
		padding:5px;
		background:repeating-linear-gradient(-45deg, rgb(178,225,240), rgb(178,225,240) 4px, white 4px, white 8px);
	}
	#spot_shima > div{ border-width:5px; }
}
@media screen and (max-width: 768px){
	#spot_shima > div > div > section:nth-child(1){
		position:relative;
		top:0;
		margin-top:60vw;
	}
	#spot_shima > div > div > section:nth-child(2){ margin-top:20px; }
	#spot_shima > div > div > section:nth-child(3){ margin-top:20px; }
	#spot_shima > div > div > section > div{
		position:static;
		width:auto;
	}
	#spot_shima > div > div > section:nth-child(n) > figure{
		width:auto;
		margin:0;
	}
	#spot_shima > div > div > section > div > header > span{ border-right-width:3px; }
}

/* ハイライト子セクション */
.spot_higilight{
	margin-top:-200px;
	padding-top:200px;
	padding-bottom:60px;
}

/* 2.食事 */
#spot_foods{
	background:white;
	border-radius:20px;
	position:relative;
	z-index:1;
	margin:var(--gap);
	padding:var(--gap);
}

/* 3.ホテルステイ */
#spot_hotelstay > section{ align-items:center; }
#spot_hotelstay > section:not(:first-child){ margin-top:-100px; }
#spot_hotelstay > section > .frame{
	margin-left:-80px;
	flex-basis:calc(80px + var(--basis) / var(--split));
	padding:var(--gap-half) var(--gap);
	display:flex;
	flex-direction:row-reverse;
	justify-content:space-between;
	align-items:center;
}
#spot_hotelstay > section.-reverse > .frame{
	flex-direction:row;
	margin-left:0;
	margin-right:-80px;
}
#spot_hotelstay > section > .frame > header{
	font-size:var(--xxxl);
	color:var(--sub);
	padding-left:20px;
	line-height:1;
}
#spot_hotelstay > section.-reverse > .frame > header{
	padding-right:20px;
	padding-left:0;
}
#spot_hotelstay > section > .frame > p{ font-size:var(--l); }
#spot_hotelstay > section.-reverse > .frame > p{ text-align:right; }
@media screen and (max-width: 768px){
	#spot_hotelstay > section:not(:first-child){ margin-top:0; }
	#spot_hotelstay > section > .frame{
		margin-left:0;
		flex-basis:calc(100% - var(--gap) * 2);
		margin:-80px var(--gap) var(--gap);
	}
	#spot_hotelstay > section.-reverse > .frame{ margin-right:var(--gap); }
}