@charset "utf-8";
@import url(../../commons/css/sanitize.css);

/*テーマカラーの定義（CSS変数）
---------------------------------------------------------------------------*/
:root {
    --primary-color: #ff9888;
}


/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

/* メイン設定 */
body {
	font-family: "Hiragino Maru Gothic Pro", "メイリオ";
	background: #fff;	/*背景色*/
	color: #777;		/*文字色*/
	line-height: 2.5;		/*行間*/
}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #777;		/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	color: var(--primary-color);	/*css冒頭で指定しているテーマカラーを読み込みます*/
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 1800px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
	border-top: 50px solid var(--primary-color);	/*上の線の幅、線種、varは色のことで、ここではcss冒頭で指定しているテーマカラーを読み込みます。*/
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 3%;	/*コンテンツ内の余白*/
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding: 3rem 0;	/*上下、左右へのヘッダー内の余白。remというのは文字単位の事。3remは3文字分。*/
	text-align: center;	/*内容をセンタリング*/
}

/*ロゴ*/
#logo img {
	width: 300px;	/*ロゴの幅*/
}

/*メニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul {
	margin: 0;padding: 0;
	margin-bottom: 3rem;			/*下に空けるスペース。３文字分。*/
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-around;	/*並びかたの種類の指定*/
	border-top: 1px solid #ddd;		/*上の線の幅、線種、色*/
	border-bottom: 1px solid #ddd;	/*下の線の幅、線種、色*/
}

/*メニュー１個あたりの設定*/
#menubar li {
	flex: 1;
	text-align: center;
}
#menubar a {
	text-decoration: none;display: block;
	color: inherit;
	padding: 0.7rem 0.5rem;		/*上下、左右へのメニュー内の余白*/
}

/*マウスオン時*/
#menubar a:hover {
	background: var(--primary-color);	/*背景色。css冒頭で指定しているテーマカラーを読み込みます*/
	color: #fff;						/*文字色*/
}


/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.slideshow {
	width: 100%;
	height: 100%;
	position: relative;
	border: 1px solid lightgrey;
}

.slideshow ul {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

.slideshow li {
	list-style: none;
	display: inline-block;
	scroll-snap-align: center;
	width: 100%;
	height: 100%;
}

.slideshow img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.arrow {
	top: 0;
	position: absolute;
	width: 8%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
}

.arrow:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-left: 4px solid gray;
	border-bottom: 4px solid gray;
	
}

.left {
	left: 0;
}

.left:before {
	top: 50%;
	left: 50%;
	transform: rotate(45deg);
}

.right {
	right:0; 
}

.right:before { 	
	top: 50%; 	
	right: 50%; 	
	transform:rotate(-135deg); 
} 

@media screen and (max-width:480px) {
	.slideshow ul { 		overflow-x:auto; 	} 
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロック*/
main {
	padding: 5%;	/*ブロック内の余白*/
}

/*mainブロック内のh2*/
main h2 {
	font-size: 1.8rem;		/*文字サイズ*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.2em;	/*文字間隔を広くする指定*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているテーマカラーを読み込みます*/
}

/*mainブロック内のh3*/
main h3 {
	font-size: 1.4rem;		/*文字サイズ*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.2em;	/*文字間隔を広くする指定*/
}

/**mainブロック内のpタグ*/
main p {
	margin: 1rem;	/*pの外側にとるスペース*/
}

/*写真リストの設定
---------------------------------------------------------------------------*/
.Photo {
	display: flex;
	flex-wrap: wrap;
}

.Photo h3 {
	display: block;
	margin: 10% auto 0 ;
	width: 100%;
}

.Photo section {
	margin: 2%;
}

.content {
	width: 48%;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
	color: #fff;			/*文字色*/
	background: var(--primary-color);		/*背景色。css冒頭で指定しているテーマカラーを読み込みます*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}

/*空欄設定（Section）
---------------------------------------------------------------------------*/
section {
	display: block;
	margin: 80px;
}