@charset "utf-8";

body { font-family: 'Noto Sans JP', sans-serif; /*font-family: 'Noto Serif JP', serif;*/ font-size: 16px; line-height: 22px; font-weight: normal; color: #222;}
/* ページトップボタン */
#page-top { position: fixed; right: 20px; }
#page-top a { display: block; width: 68px; height: 79px; background: url("../img/arrow.png")top no-repeat;}
.hyoji { display: none;}
/*アンカータグ用*/
.con_inner { padding-top: 30px; margin-top: -30px; overflow: hidden;}
* { box-sizing: border-box;}
* img { vertical-align: bottom;}
#wrap {}

/*header*/
header { overflow: hidden;}
.navigation { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0; background: #133FE7; box-shadow: 0 0 0 100vmax #133FE7; clip-path: inset(0 -100vmax);}
.navigation ul { display: flex; justify-content: center; padding: 10px 0;}
.navigation li { text-align: center;}
.navigation li a { display: block; text-decoration: none; padding: 3px 20px;  border-right: solid 1px #fff; color: #fff;}
.navigation li:first-child a { border-left: solid 1px #fff; }

.top_img_area {  min-width:1200px; width: 100%; height: 800px; background-image: url("../img/top01.jpg"); background-size: cover; background-repeat: no-repeat; background-position: bottom ; }
.top_img { max-width: 1200px; width: 100%; height: 800px; aspect-ratio: 4 / 3; margin: 0 auto; position: relative; }
.logo { position: absolute; top: 15px;}
.tel { }
.tel a { position: absolute; right: 0; bottom: 30px; font-size: 40px; font-weight: bold; color: #fff!important; text-decoration: none!important;}
.info { max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px 150px 0; font-size: 20px; line-height: 140%;}

/*メインコンテンツ*/
main { max-width: 1200px; width: 100%; margin: 0 auto;}
.titles { display: block; width: 100%; margin: 30px 0; font-size: 24px; line-height: 200%; text-align: center; background: #3366ff; box-shadow: 0 0 0 100vmax #3366ff; clip-path: inset(0 -100vmax); color: #fff;}

/*カレンダー*/
.calendar_area { width: 100%; margin: 0 auto;}
.calendar_area iframe { width: 100%;}

/*釣物及び釣行時間*/
#tsurimono { max-width: 900px; margin: 0 auto;}
.fish li { font-size: 22px; font-weight: 700; margin-bottom: 10px;line-height: 100%; padding: 12px 30px 14px; }
.fish li:nth-child(1) { background: #FFBABB;}
.fish li:nth-child(2) { background: #7CCBA1;}
.fish li:nth-child(3) { background: #79B4EF;}
.moon { margin-right: 10px;}

/*料金*/
#fee { max-width: 750px; margin: 0 auto;}
.ryoukin_area { }
.ryoukin_area dl { display: flex; flex-wrap: wrap;}
.ryoukin_area dt { width: 180px; font-weight: 700; margin-bottom: 10px; padding: 5px 10px 7px ; background: #7F8AEA; color: #fff;}
.ryoukin_area dd { width: 570px; margin-bottom: 10px; padding: 5px 0 7px 20px; background: #eee;}
.ryoukin_area p { margin-bottom: 30px;}

/*ご予約*/
.tel_area { max-width: 900px; margin: 0 auto; text-align: center}
.tel_area dt { font-size: 24px; font-weight: 500; margin-bottom: 15px; }
.tel_area dd a { font-size: 32px; font-weight: 700; text-decoration: none!important; color: #222!important;}

/*MAP*/
#access { max-width: 800px; margin: 0 auto;}

/*ごあんない*/
#info { max-width: 700px; margin: 0 auto;}
.sub_title { font-size: 20px; font-weight: 700; border-left: solid 7px #133FE7; padding: 5px 0 7px 10px; border-bottom: solid 1px #133FE7;}

.list1 { display: flex; flex-wrap: wrap; width: 650px; margin: 20px auto; }
.list1 dt { width: 150px; border: solid 1px #222; margin-bottom: -1px; padding: 5px 0 7px 10px;}
.list1 dt::before {  content:'□'; padding-right: 5px;}
.list1 dd { width: 500px; border: solid 1px #222; margin: 0 0 -1px -1px; padding: 5px 0 7px 10px;}

.list2 { display: flex; flex-wrap: wrap; width: 650px; margin: 20px auto; }
.list2 dt { width: 220px; border: solid 1px #222; margin-bottom: -1px; padding: 5px 0 7px 10px;}
.list2 dt::before {  content:'□'; padding-right: 5px;}
.list2 dd { width: 430px; border: solid 1px #222; margin: 0 0 -1px -1px; padding: 5px 0 7px 10px;}

.list3 { display: flex; flex-wrap: wrap; width: 650px; margin: 20px auto; }
.list3 dt { width: 200px; border: solid 1px #222; margin-bottom: -1px; padding: 5px 0 7px 10px;}
.list3 dt::before {  content:'□'; padding-right: 5px;}
.list3 dd { width: 450px; border: solid 1px #222; margin: 0 0 -1px -1px; padding: 5px 0 7px 10px;}

.list4 { display: flex; flex-wrap: wrap; width: 650px; margin: 20px auto; }
.list4 dt { width: 300px; border: solid 1px #222; margin-bottom: -1px; padding: 5px 0 7px 10px;}
.list4 dt::before {  content:'□'; padding-right: 5px;}
.list4 dd { width: 350px; border: solid 1px #222; margin: 0 0 -1px -1px; padding: 5px 0 7px 10px;}


/*footer*/
footer { max-width: 1200px; width: 100%; margin: 50px auto 0 auto; padding: 10px 0; background: #3457df; box-shadow: 0 0 0 100vmax #3457df; clip-path: inset(0 -100vmax);}
.copy{ color: #fff; font-size: 14px; text-align: center;}



@media screen and (max-width: 768px) {
	.navigation ul { justify-content: flex-start; flex-wrap: wrap; padding: 10px 10px 7px;}
	.navigation li { text-align: center; margin-bottom: 5px;}
	.navigation li a {  border-left: solid 1px #fff; margin-left: -1px;}
	.navigation li:first-child a { }

	.top_img_area { min-width: auto; width: 100%; height: 360px; }
	.top_img { height: 360px; }
	.logo img { width: 250px;; height: auto;}
	.tel a {  font-size: 24px; bottom: 15px; right: 10px; }
	.info { margin: 0; padding: 15px 15px 0; font-size: 16px;}

	/*メインコンテンツ*/
	.titles { margin: 20px auto; font-size: 20px; line-height: 200%; }
	
	
	/*釣物及び釣行時間*/
	.fish { padding: 0 10px;}
	.fish li { font-size: 16px; font-weight: 600; margin-bottom: 10px;line-height: 100%; padding: 10px 10px 14px; }
	.fish_come { padding: 0 10px;}
	.fish span { display: inline-block; padding: 0 0 0 0; line-height: 140%;}

	/*料金*/
	.ryoukin_area { padding: 0 10px; }
	.ryoukin_area dt { width: 100%; margin-bottom: 0; padding: 5px 0 7px 10px; }
	.ryoukin_area dd { width: 100%; margin-bottom: 10px; padding: 5px 0 7px 10px; background: #ddd;}
	.ryoukin_area p { margin-bottom: 20px; padding: 0 10px;}
	
	/*ご予約*/
	.tel_area dt { font-size: 20px; font-weight: 500; margin-bottom: 10px; }
	
	
	/*MAP*/
	.map_area {}
	.map_area iframe { width: 100%; height: auto; aspect-ratio: 4 / 3;}
	.acc_jouhou { padding: 20px 15px}
	.acc_jouhou h3 { font-size: 20px; padding-bottom: 5px}
	.acc_jouhou span { display: inline-block;}

	/*ごあんない*/
	.sub_title { border-left: none; color: #133FE7; }
	.sub_title::before {  content:'■'; padding-right: 5px;}
	.sub_title span { display: inline-block; font-size: 16px;}
	
	.list1 { width: 100%; padding: 0 10px;}
	.list1 dt { width: 100%; border: none; margin: 0; padding: 5px 0 7px 10px; background: #aaa; font-weight: 700;}
	.list1 dd { width: 100%; border: none; margin: 0 0 5px 0; padding: 5px 10px 7px 10px; text-align: center; background: #eee;}
	.list1 dd span { display: inline-block; }
	
	.list2 { width: 100%; padding: 0 10px;}
	.list2 dt { width: 100%; border: none; margin: 0; padding: 5px 0 7px 10px; background: #aaa; font-weight: 700;}
	.list2 dd { width: 100%; border: none; margin: 0 0 5px 0; padding: 5px 10px 7px 10px; text-align: center; background: #eee;}
	
	.list3 { width: 100%; padding: 0 10px;}
	.list3 dt { width: 100%; border: none; margin: 0; padding: 5px 0 7px 10px; background: #aaa; font-weight: 700;}
	.list3 dd { width: 100%; border: none; margin: 0 0 5px 0; padding: 5px 30px 7px 30px; background: #eee;}
	
	.list4 { width: 100%; padding: 0 10px;}
	.list4 dt { width: 100%; border: none; margin: 0; padding: 5px 0 7px 10px; background: #aaa; font-weight: 700;}
	.list4 dd { width: 100%; border: none; margin: 0 0 5px 0; padding: 5px 30px 7px 30px; background: #eee;}
	
	
	
	/*header*/
	
	
	/*footer*/
}