@charset "UTF-8";

/* ********** CDN読み込み ********** */
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://use.fontawesome.com/releases/v6.4.2/css/all.css');

/* base */
/* --px */
:root {
	--px: calc(100vw / 1440);
}
@media screen and (min-width: 1441px) {
  :root {
    --px:1px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 811px) {
  :root {
    --px: calc(100vw / 1440);
  }
} 
@media screen and (max-width: 810px) {
  :root {
        --px: calc(100vw / 810);
  }
}

/* --rem */
:root {
  --rem: calc(10 * 100vw / 1440);
}
@media screen and (min-width: 1441px) {
  :root {
    --rem: 10px; 
  }
}
@media screen and (max-width: 810px) {
  :root {
    --rem: clamp(10px, calc(10 * 100vw / 375), 12px);
  }
}

@media screen and (max-width: 450px) {
  :root {
    --rem: calc(10 * 100vw / 375); 
  }
}

@media screen and (max-width: 374px) {
  :root {
    --rem: clamp(9px, calc(10 * 100vw / 375), 10px);
  }
}

/* ********** ノーマライズstyle（変更不可） ********** */
img,iframe {
	vertical-align:top;
}
li {
	list-style: none;
}

/* ********** サイト全体のstyle ********** */
html {
	width:100%;
	font-size:62.5%;
	scroll-padding-top: 100px; 
	scroll-behavior: smooth;
}
@media screen and (max-width: 1080px) {
	html {
		 font-size:60.5%;
	}
}
@media screen and (max-width: 810px) {
	html {
		font-size:60.5%;
		/* font-size:54.6%; */
		scroll-padding-top: 0; 
	}
}
body  {
	color:#333;
	font-family: 'Merriweather', serif; /* フォントファミリー */
	font-feature-settings: "palt";
	/* text-align: justify; */
	margin: 0 auto;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	overflow:hidden;
}
p,li,th,td {
	font-size:calc(1.5 * var(--rem)); /* 基本フォントサイズ */
	font-weight: 400;
}
a {
	font-size:inherit;
	text-decoration:none;
	transition: all .3s;
	color: inherit;
}
a:hover {
	opacity:0.7;
}

/* ********** 固定共通モジュールのstyle（原則変更不可）********** */
/* コンテナ・ラップ */
.c-container {
	width:100%;
	margin:0 auto;
	position: relative;
}
.c-wrap {
	position: relative;
}
/* 基本レイアウト */
.c-col1,
.c-col2 {
	display:flex;
	flex-wrap:nowrap;
	width:100%;
	position: relative;
}
.c-col1 {
	flex-direction:column;
}
.c-col2 {
	justify-content:space-between;
}
.c-col2 > div:nth-of-type(1){
	margin-left:0;
}
.c-col2 > div:nth-of-type(2){
	margin-right:0;
}
/* パネルレイアウト */
.c-col1--panel,
.c-col2--panel,
.c-col3--panel,
.c-col4--panel,
.c-col5--panel {
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
.c-col1--panel .c-item {
	display:flex;
	width: 100%;
}
.c-col2--panel .c-item,
.c-col3--panel .c-item,
.c-col4--panel .c-item,
.c-col5--panel .c-item {
	display:flex;
	flex-direction: column;
}
/* /////パネルの幅・余白変更///// */
.c-col2--panel .c-item {
	width:47.5%;
}
.c-col2--panel .c-item:nth-of-type(2n+1){
	margin: 0 calc(50% - 47.5%) 0 0;
}
.c-col2--panel .c-item:nth-of-type(2n){
	margin:0 0 0 calc(50% - 47.5%);
}
.c-col3--panel .c-item {
	width:31%;
}
.c-col3--panel .c-item:nth-of-type(3n+2) {
	margin:0 calc((100% - (31% * 3)) / 2);
}
.c-col4--panel .c-item {
	width:23.5%;
}
.c-col4--panel .c-item:nth-of-type(4n+2) {
	margin-left: calc((100% - (23.5% * 4)) / 3);
}
.c-col4--panel .c-item:nth-of-type(4n+3) {
	margin: 0 calc((100% - (23.5% * 4)) / 3);
}
.c-col5--panel .c-item {
	width:18.5%;
}
.c-col5--panel .c-item:not(:nth-of-type(5n+1)) {
	margin-left: calc((100% - (18.5% * 5)) / 4);
}
.c-col5--panel .c-item:nth-of-type(5n+1) {
	margin-left: 0;
}
/* /////パネルの幅・余白変更ここまで///// */

.c-col1--panel > .c-item:nth-of-type(n+2),
.c-col2--panel > .c-item:nth-of-type(n+3),
.c-col3--panel > .c-item:nth-of-type(n+4),
.c-col4--panel > .c-item:nth-of-type(n+5),
.c-col5--panel > .c-item:nth-of-type(n+6){
	margin-top:calc(40 * var(--px));
}
/* 画像要素 */
[class*="c-photo"] {
	width:100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
[class*="c-photo"] img {
	margin:auto;
	object-fit: cover;
	font-family: "object-fit: cover;, object-position: center;";
	width: 100%;
	height: 100%;
	object-position: center;
	vertical-align: top;
}
.c-photo--con img {
	object-fit: contain;
	font-family: "object-fit: contain;, object-position: center;";
}
/* グーグルマップ埋め込み */
.c-map {
	width:100%;
	margin: 0 auto;	
	position: relative;	
}
.c-map iframe {
	width:100%;
	height: 100%;
}
/* YouTube埋め込み */
.c-youtube {
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}
.c-youtube iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
/* リスト要素横並び */
.c-rowlists {
	position:relative;
	display:flex;
	width: 100%;
}
.c-rowlists__list {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* リスト縦横並び */
.c-collists {
	position:relative;
	display:flex;
	flex-direction:column;
}
.c-collists li {
	display: block;
}
/* パネル切り替え */
/* アコーディオン表示 */
.c-tab__panel,
.c-accordion {
	cursor:pointer;
}

/* **************************************************************** */
/* ********************** スマートフォン対応 ************************* */

@media screen and (max-width:810px) {
	/* ********** 固定共通モジュールのstyle（原則変更不可） ********** */ 
	/* ベースレレイアウト */
	.c-col2,
	.c-col1--panel .c-item,
	.c-col2--panel,
	.c-col3--panel,
	.c-col4--panel,
	.c-col5--panel	{
		flex-direction: column;
	}
	.c-col2--panel .c-item,
	.c-col3--panel .c-item,
	.c-col4--panel .c-item,
	.c-col5--panel .c-item {
		width:100%;
		margin:20px auto 0!important;
	}
	.c-col2--panel .c-item:first-of-type,
	.c-col3--panel .c-item:first-of-type,
	.c-col4--panel .c-item:first-of-type {
		margin:0 auto!important;
	}
	.c-col2 > div:nth-of-type(1) {
		margin-left:auto;	
	}
	.c-col2 > div:nth-of-type(2) {
		margin-right:auto;	
	}
	.c-col2 > .c-wrap {
		order:1;
		margin:20px auto 0;
		padding-right: 0!important;
		padding-left: 0!important;
	}
	.c-col1--panel .c-item > .c-wrap {
		order:1;
		margin:0 auto 20px;
	}
	.c-col2 > .c-map,
	.c-col1--panel .c-item > .c-map,
	.c-col2 > .c-youtube,
	.c-col1--panel .c-item > .c-youtube	{
		order:1;
		padding-right: unset!important;
		padding-left: unset!important;
	}
}