@charset "UTF-8";

/*============================================================================================== 

東伊豆町ウェブサイト レスポンシブ用CSS
Copyright © Higashiizu Town., All Rights Reserved.

1. 基本要素
2. 基本クラス
3. ベースデザイン

	3-1.ページラッパー
	3-2.ページヘッダー
	3-3.グローバルナビゲーション
	3-4.補助ナビゲーション
	3-5.パンくずリスト
	3-6.ページフッター
	
4. コンテンツデザイン
	
	4-1.コンテンツヘッダー
	4-2.コンテンツメニュー
	4-3.メインコンテンツ
	4-4.内容アイテム

5. フォームデザイン

6. トップページ
7. 一覧ページ
8. 記事ページ
9. お問い合わせ
10. 観光
11. 東伊豆町プロフィール
12. 情報配信メール

Ex. プラグイン

*/


/*============================================================================================== スマホ（〜750px）
*/


@media only screen and (max-width:750px){


	/*============================================================================================== 2.基本クラス
	*/

	.br-pc { display: none; }
	.br-sp { display: block; }
	
	.for-pc { display: none; }
	.for-sp { display: block; }
	
	#nav-pagetop{ display: none;}
	
	#nav-menu {display: none;}
	
	#btn-menu-sp,
	#nav-menu .for-sp { display: block; }
	
	.table,
	.tr,
	.th,
	.td 	{ display: block; }
	
	.w100,
	.w90,
	.w80,
	.w75,
	.w70,
	.w66,
	.w60,
	.w50,
	.w40,
	.w33,
	.w30,
	.w25,
	.w20,
	.w10 { width: 100%; }
	
	.btn a, a.btn 				{ font-size: 100%; }
	.btn-print a, a.btn-print 	{ display: none; }
	
	
	.inner{ width: 100%; }
	
	
	
	/*============================================================================================== 3. ベースデザイン
	*/

	/*============================== 3-2.ページヘッダー
	*/
	
	#header{
		background: #fff;
		border-bottom-width: 0;
	}
	
	#header .header-content{
		position: relative;
		padding-bottom: 50px;
	}
	
	#header .header-content::after{
		display: block;
		content: '';
		width: 100%;
		height: 50px;
		background:url(images/part-header-bar.png) no-repeat 50% -140px;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 500;
	}
	.index #header .header-content::after{
		height: 250px;
	}
	
	#catchcopy{
		position: static;
		text-align: center;
		color: #666;
		padding-top: 15px;
	}
	#header-logo {
		width: 200px;
    	margin: 0 auto;
    	position: static;
	}
	#header-logo{
		margin: 15px auto;
	}
	#header .inner {
		height: auto;
	}
	
	
	/*============================== 3-3.グローバルナビゲーション
	*/

	#menu-global {
		width: 100%;
    	position: absolute;
		top:auto;
		bottom: -50px;
		left:0;
		z-index: 600;
	}
	
	
	#nav-global ul{
		width: 100%;
	}
	#nav-global ul li {
    	width: 25%;
    	font-size: 3vw;
		white-space: nowrap;
	}
	
	#nav-global ul li a {
    	position: relative;
		bottom:0px;
		height: 100px;
    	padding-top: 60px;
    	text-decoration: none;
    	color: #fff;
		
	}
	#nav-global li a::before {
		width: 50px;
		height: 40px;
    	bottom: auto;
		top:50px;
    	transform: translate(-50%, -100%);
   		z-index: 100;
	}
	#nav-global .nav-life a::before { top: 57px; }
	#nav-global .nav-gov a::before { top: 52px; }
	#nav-global .nav-tourism a::before { top: 52px; }
	#nav-global .nav-biz a::before { top: 53px; }
	
	
	#nav-global ul li a::after {
    	bottom: auto;
		top: 50px;
		left: 50%;
		transform: translate(0, -100%);
	}
	
	
	/*============================== 3-4.補助ナビゲーション
	*/
	
	#menu-sp {
    	position: static;
    	width: 100%;
		display: none;
		background: #00a0ca;
		padding: 10px 0;
	}
	
	#nav-sp,
	#header-utils,
	#search-word,
	#switch-size
	{
		position: static;
	}
	
	#header-utils{
		display: table;
	}
	#search-word,
	#switch-size
	{
		display: table-cell;
		vertical-align: middle;
		width: 50%;
		padding: 10px;
	}
	#nav-sp{
		display: table;
		border-collapse: separate;
		border-spacing: 10px;
	}
	#nav-sp ul{
		display: table-row;
		
	}
	#nav-sp .nav-address,
	#nav-sp ul li{
		display: table-cell;
		vertical-align: middle;
		width: 25%;
	}
	#nav-sp ul li a{
		display: table;
		border-collapse: collapse;
		border-spacing: 0;
		position: relative;
		width: 100%;
		height: 90px;
		padding: 0;
		text-align: center;
		background: #fff;
		border-radius: 10px;
		color: #666;
		font-size: 80%;
	}
	#nav-sp ul li a span{
		display: table-cell;
		vertical-align: middle;
		padding: 5px;
		padding-top: 40px;
		margin: 0;
		font-weight: bold;
	}
	/*#nav-sp .nav-address{ display: block; }*/
	#nav-sp ul li a::before {
		position: absolute;
		top: 30%;
		left: 50%;
    	margin-right: 0;
    	font-size: 32px;
		transform: translate(-50%, -50%);
		color: #00a0ca;
	}
	
	
	/*============================== 3-5.パンくずリスト・ページナビゲーション
	*/

	/*----------------------
	3-5-1. パンくずリスト
	*/
	
	.breadcrumbs-top:first-of-type 	{ margin-top:30px; }
	.breadcrumbs-top a{color:#369; text-decoration: none; }
	//.breadcrumbs .inner { padding: 10px 10px; background:#fff; color:#333; font-size:smaller;}
	.breadcrumbs .inner { padding: 15px 10px; background:#fff; color:#333;}

	
	/*============================== 3-6.ページフッター
	*/
	
	#footer { position: relative; width: 100%; }
	#footer small{
		position: absolute;
		bottom:0;
		left: 0;
		display: block;
		margin: 0 auto;
		text-align: center;
		width: 100%;
		padding: 1em 0;
	}
	#footer .footer-menu ul{ padding: 15px 0; }
	#footer .footer-menu ul li { display: block; }
	#footer .footer-menu ul li a {
    	display: block;
    	padding: .5em;
    	text-decoration: none;
	}
	
	/*----------------------
	3-6-2. フッターコンテンツ
	*/
	
	#footer .footer-content{
		min-width: 100%;
		padding-bottom: 100px;
		background: #00a0ca;
	}
	#footer .footer-content .inner {
    	display: block;
		position: static;
    	padding: 0;
	}
	
	
	/*----------------------
	3-6-3. フッターロゴ、アドレス
	*/
	
	#footer-address,
	#footer-utils {
    	display: block;
		width: 100%;
	}
	
	#footer-address{
		padding: 30px 0;
		margin: 0;
		text-align: center;
	}
	#footer-logo{ margin: 0 auto 15px; }
	
	
	/*----------------------
	3-6-4. フッター　ボタンメニュー
	*/
	
	#footer-utils 			{ padding-left: 0px; text-align: center; }
	#footer-utils ul 		{ padding-top: 120px; display: inline-block; }
	#footer-utils ul li 	{ transform: translate(0, 0) rotateZ(45deg); }
	#footer-utils ul li a 				{ background: #fff; color: #333; }
	#footer-utils ul li a span::before 	{ color: #00a0ca; }
	
	#footer-utils .nav-info { top: -100px; }
	
	
	/*----------------------
	3-6-5. 「ページの先頭へ」ボタン
	*/
	
	#nav-pagetop{ display: none; }
	
	#nav-pagetop-sp{
		display: block; 
    	position: absolute;
    	bottom: 0px;
    	right: auto;
		left: 50%;
    	width: 100px;
		height: 100px;
    	transform: translate(-50%, -50%) rotateZ(45deg);
	}
	
	#nav-pagetop-sp a 				{ background: #fff; color: #fff; }
	#nav-pagetop-sp a span::before  { color: #00a0ca; }
	
	
	/*----------------------
	3-6-6.デザイン切り替えボタン
	*/
	
	#switch-design { width: 100%; }
	
	
	/*============================================================================================== 4.コンテンツ 基本デザイン
	*/
	
	#container{
		width: 100%;
		margin: 0;
	}
	
	#main{
		width: 100%;
		margin: 0 auto;
		padding: 10px 5px;
	}
	
	.index #main{
		padding: 10px 0;
	}
	
	.col2 .float-item,
	.col3 .float-item,
	.col4 .float-item,
	.col5 .float-item { width: 50%; }
	
	.col3 .float-item:nth-child(3n+1),
	.col4 .float-item:nth-child(4n+1),
	.col5 .float-item:nth-child(5n+1) { clear:none; }
	
	
	.col2 .float-item:nth-child(2n+1),
	.col3 .float-item:nth-child(2n+1),
	.col4 .float-item:nth-child(2n+1) { clear:both; }

	
	
	/*============================================================================================== 6.トップページ
	*/
	
	.index #page { padding-top: 0; }
	
	#photos{
		min-width: 100%;
		height: auto;
	}
	
	.index #photos{
		position: relative;
		height: 250px;
		margin-bottom: 20px;
	}
	.index #slides .slide-item{
		height: 250px;
	}
	#slides .slide-item figcaption {
		padding: .5em;
		font-size: 90%;
	}
	
	#feature-section .inner,
	#feature-topics,
	#feature-sns	{
		display: block;
	}
	
	.index section {
		padding: 0 0 20px;
	}
	.index .section-header .header-title {
    	padding: 20px 0;
		text-align: center;
	}
	.index .content-item .item-header .header-title {
		line-height: 1.3;
		padding: 1em .3em;
	}
	
	#emergency-section dl{
		width: 100%;
	}
	
	#feature-sns {
		margin-top: 20px;
    	padding-left: 0;
   		width: 100%;
	}
	
	#links-section .list-bannerLink li {
    	width: 45%;
		margin: 10px 0;
	}
	#links-section .list-bannerLink li img{
		width: 100%;
		height: auto;
	}
	
	#emergency-section {
    	padding: 20px;
	}
	
	#feature-section {
		padding: 20px;
		padding-bottom: 50px;
	}
	#feature-section .header-title{ text-align: left; }
	
	.list-textLink li a {
		font-size: 90%;
		margin: .3em;
	}
	
	#information-section .kawaraban .item-header::before {
		background-size: 100%;
    	width: 110px;
    	height: 45px;
    	top: -15px;
    	left: -20px;
	}
	
	
	/*============================================================================================== 7.一覧ページ（.archive）
    */
	
	.archive #container .float .float-left,
	.archive #container .float .float-right { width: 100%; float: none; }
	
	.archive #container .col2 .float-item,
	.archive #container .col3 .float-item { width: 100%; float: none; }
	
	
	#container .container-header {
    	//padding: 60px 0 25px;
    	padding: 40px 0 25px;
    	background: #BBDDEF;
	}
	
	#menu-content{
		background: #BBDDEF;
		padding: 0 !important;
	}
	
	
	#menu-content ul {
		list-style: none;
		margin: 0;
		padding: 0 5px 15px;
		text-align: center;
		border: 0;
	}
	
	#menu-content .sub-menu { text-align: left; }

	#menu-content .nav-content ul li { display: inline-block; border: 0; }

	#menu-content .nav-content ul li a{
		display: inline-block;
		background: #00A0CA;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-size: 95%;
		line-height: 1;
		margin: .3em;
		padding: .3em .5em;
		border-radius: 1em;
	}
	#menu-content .nav-content ul li a::before {
		content: "\f105";
		display: inline-block;
		margin-right: .5em;
		font-family: 'FontAwesome';
    	font-size: inherit;
		font-weight: normal;
    	text-rendering: auto;
    	-webkit-font-smoothing: antialiased;
	}
	
	
	#menu-case #case-ul li {
    	width: 25%;
	}
	
	
	
	/*============================================================================================== 8.記事ページ（.entry）
    */
	
	.entry #container .float .float-left,
	.entry #container .float .float-right { width: 100%; float: none; }
	
	.entry #container .col2 .float-item,
	.entry #container .col3 .float-item { width: 100%; float: none; }
	
	.entry #main{ padding: 0 20px 20px; }
	
	.entry #container > .inner { padding: 45px 0 0; }
	
	.entry #main .entry-header .entry-term { left: -.3em; }
	
	.entry #container .item { padding: 20px; }
	
	.box-content	{ padding: 10px; }
	.box-content h3 { font-size: 120%; }
	
	.number { font-size: 240%; }
	
	
	
	
	/*============================================================================================== 10.観光
    */
	
	.tourism #photos{
		position: relative;
		height: 160px;
		margin-bottom: 20px;
	}
	.tourism #slides .slide-item{
		height: 160px;
	}
	
	.tourism #container .container-header 	{ padding: 50px 0 30px; }
	.tourism #container .container-body 	{ padding: 20px 0; }
	
	.tourism #main{ padding: 0; }
	
	.tourism #feature-section,
	.tourism #main h3{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.tourism #main h3{ padding: .5em 1em; margin-bottom: 1em; }
	
	.tourism #video-section iframe {
		width: 90%;
		height: 240px;
	}
	
	
	.tourism #container .col3 .float-item {
    	width: 50%;
    	float: left;
	}
	
	.tourism #genre-section ul { width: 90%; margin: 0 auto 1.5em !important; padding-right: 1em !important; }
	
	.tourism #menu-content { background: none; margin-top: 30px; }
	.tourism #menu-content .nav-content ul { border: 0; }
	
	#menu-content .banners { margin: 0 0 30px; }
	
	#menu-content .links .nav-content ul li a { color: #fff; }
	#menu-content .banners .nav-content ul li a { color: #fff; background: none;  }
	
	#menu-content .links .nav-content ul li a::before,
	#menu-content .banners .nav-content ul li a::before { display: none; }
	
	
	
	/*============================================================================================== 11. 東伊豆町プロフィール
    */
	
	.town-info-header h1{ font-size: 160%; }
	
	.town-info figure,
	.town-info .no-table > .td > figure{ padding: 2em ; }
	
	
	/*============================================================================================== 12. 情報配信メール
    */
	
	
	/*============================================================================================== Ex. プラグイン
	*/
	
	.slick-dots {
    	position: absolute;
    	top: 100%;
    	bottom: auto;
		padding: 5px 10px !important;
    	width: 100%;
    	text-align: left;
		line-height: 1;
		z-index: 1000;
	}
	
	.slick-arrow {
    	bottom:-30px;
		width: 100px;
	}
	.slick-arrow .fa{
		width: 48px;
		height: 48px;
	}
	.slick-arrow .fa::before {
    	font-size: 28px;
   		line-height: 44px;
	}
	
	.slick-arrow span, .slick-arrow label {
    	padding-top: 4px;
		padding-bottom: 56px;
		font-size: 12px;
		
	}
	.slick-toggle {
    	right: 20px;
	}
	.entry-content img:not(.noresize){
		width:100%;
		height:auto;
	}
	.entry-content table {
		width:100% !important;
		height:auto !important;
	}
	.entry-content iframe {
		width:100% !important;
	}
	
}/*End of max-width:750*/




/*============================================================================================== スマホ（〜320px）
*/


@media only screen and (max-width:320px){


	.index #photos,
	.index #slides figure{
		height: 200px;
	}

	#footer-address 		{ padding-bottom: 0; }
	#footer .footer-content { padding-bottom: 60px; }

	#switch-design .util-btn span { font-size: 80%; }
	
	#nav-pagetop-sp { bottom: -20px; }
	
	#footer-utils .nav-info { top: -80px; }
	#footer-utils ul li 	{ width: 80px; height: 80px; }
	#footer-utils ul li a 	{ width: 100px; height: 100px; }

	#menu-content .banners 		{ width: 90%; margin: 0 auto; }
	#menu-content .banners img 	{ width: 100%; height: auto; }
	
	
	.tourism .section-header {
		
	}
	.tourism .section-header .header-title {
		font-size: 120%;
	}
	.tourism .section-header::before {
    	width: 60px;
    	height: 30px;
    	top: -20px;
    	left: -25px;
	}
	.tourism .section-header::after {
    	width: 90px;
    	height: 40px;
    	top: 0;
    	left: -15px;
	}
	
	.tourism #video-section .section-header::before {
    
    	width: 80px;
    	height: 20px;
    	margin-top: -10px;
	}
	.tourism #video-section .section-header {
    	padding-left: 90px;
		margin: 1em auto;
	}
	

}/*End of max-width:320px*/