@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. プラグイン

Ex2. プリント設定

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


/*============================================================================================== 1.基本要素
*/


/*------------------------------ ボックスのサイズ計算方式を「border-box」に変更
*/

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*------------------------------ html,body
*/

html { background:#ccc; }
body {
	color:#333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 88%;
	line-height:1.7;
	background:#fff;
	-webkit-text-size-adjust: none;
}

/*------------------------------ 見出し・段落・図表
*/

h1, h2, h3, h4, h5, h6{ font-weight: 900; margin: 0; }
strong, em 		{ font-weight: 900; }

p 				{ margin: 1em 0;}
p:first-child 	{ margin-top: 0; }
p:last-child 	{ margin-bottom: 0; }

img,iframe		{ vertical-align: bottom; }

a img 			{ border: 0; }
figure 			{ margin:0; }
figure img 		{ width: 100%; height: auto; }


/*------------------------------ リンク
*/

a 					{ color:#369;}
a:hover 			{ opacity: .75; }
a:active, a:focus 	{ outline:0;}


/*外部リンク（fa-external-link）*/
.external:after,
a[target="_blank"]:not(.no-icon)::after
{
	display: inline-block;
	margin-left: .5em;
	
	content: "\f08e"; /*fa-external-link*/
	
	font-family:'FontAwesome';
	line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.index #links-section a[target="_blank"]::after,
#slides a[target="_blank"]::after
{
	display: none;
}


/*ファイルリンク*/

/*PDF*/
a[href$=".pdf"]:not(.no-icon)::after,a[href$=".PDF"]:not(.no-icon)::after
{
	display: inline-block;
	margin-left: .5em;
	
	content: "\f1c1"; /*fa-file-pdf-o*/
	
	font-family:'FontAwesome';
	line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*WORD*/
a[href$=".doc"]:not(.no-icon)::after,a[href$=".docx"]:not(.no-icon)::after
{
	display: inline-block;
	margin-left: .5em;
	
	content: "\f1c2"; /*fa-file-word-o*/
	
	font-family:'FontAwesome';
	line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*ECCEL*/
a[href$=".xls"]:not(.no-icon)::after,a[href$=".xlsx"]:not(.no-icon)::after
{
	display: inline-block;
	margin-left: .5em;
	
	content: "\f1c3"; /*fa-file-excel-o*/
	
	font-family:'FontAwesome';
	line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



/*------------------------------ アイコン各種
*/

/*「FontAwesome」から*/
.mk-life,
.mk-gov,
.mk-biz,
.mk-sitemap,
.mk-contact,
.mk-phone,
.mk-sign,
.mk-access,
.mk-desktop,
.mk-mobile,
.mk-kawaraban,
.mk-calendar
{
	display: inline-block;
    font-family:'FontAwesome';
	line-height: 1;
    font-size: 100%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*オリジナルアイコン「HizIcons」から*/
.mk-higashiizu,
.mk-tourism,
.mk-higashiizu,
.mk-lang,
.mk-pagetop
{
	display: inline-block;
	font-family:'HizIcons';
	line-height: 1;
    font-size: 100%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*メインメニューアイコン*/
.mk-life::before 		{ content: "\f015"; } /*くらし（fa-home）*/
.mk-gov::before 		{ content: "\f1ad"; } /*町政・議会（fa-building）*/
.mk-biz::before 		{ content: "\f0d1"; } /*産業・事業者向け（fa-truck）*/
.mk-tourism::before 	{ content: "\e901"; } /*観光（hiz-wind）*/


/*ナビゲーションアイコン*/
.mk-sitemap::before 	{ content: "\f279"; } /*サイトマップ（fa-map）*/
.mk-contact::before 	{ content: "\f0e0"; } /*お問い合わせ（fa-envelope）*/
.mk-lang::before 		{ content: "\e902"; } /*Foreign Language（hiz-flang）*/
.mk-phone::before 		{ content: "\f095"; } /*連絡先（fa-phone）*/
.mk-sign:before 		{ content: "\f277"; } /*案内図（fa-map-signs）*/
.mk-access:before 		{ content: "\f041"; } /*交通アクセス（fa-map-marker）*/
.mk-pagetop:before  	{ content: "\e903"; } /*ページの先頭へ（hiz-pagetop）*/
.mk-desktop:before 		{ content: "\f108"; } /*PC・タブレット（fa-desktop）*/
.mk-mobile:before 		{ content: "\f10b"; } /*スマートフォン（fa-mobile）*/


/*その他アイコン*/
.mk-kawaraban::before 	{ content: "\f15c"; } /*かわらばん（fa-file-text）*/
.mk-higashiizu::before 	{ content: "\e900"; } /*広報ひがしいず（hiz-logo）*/
.mk-calendar::before 	{ content: "\f073"; } /*行事カレンダー（fa-calendar）*/



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

/*------------------------------ レイアウト
*/

/*改行　PCのみ（br-pc）／スマホのみ（br-sp）*/
.br-pc { display: block; }
.br-sp { display: none; }

/*表示　PCのみ（for-pc）／スマホのみ（for-sp）*/
.for-pc { display: block; }
.for-sp { display: none; }

/*文字サイズ*/
.bold	{ font-weight: 900;}
.xx-large	{ font-size: 240%; }
.x-large	{ font-size: 200%; }
.large	{ font-size: 160%; }

/*フロート解除*/
.clearfix::after,
.float::after,
.section::after,
.inner::after,
.item-header::after,
.section-content::after
{
	display: block;
	content:"";
	height: 0;
	line-height: 0;
	clear: both;
}

/*整列*/
.align-left{ text-align: left; }
.align-center{ text-align: center; }
.align-right{ text-align: right; }
img.align-left{ margin: 0 auto 0 0; display: block; }
img.align-center{ margin: 0 auto; display: block;}
img.align-right{ margin: 0 0 0 auto; display: block;}

.alignleft { text-align: left;}
.alignright { text-align: right;}
.aligncenter { text-align: center;}

img.aligncenter { display: block; margin: 0 auto; }
img.alignright { float: right; margin: 2em;  margin-right: 0; margin-top: 1em;}
img.alignleft { float: left; margin: 2em; margin-left: 0; margin-top: 1em; }


/*擬似テーブル*/
.table 	{ display: table; }
.tr 	{ display: table-row; }
.th 	{ display: table-cell; font-weight: bold; vertical-align: top;}
.td 	{ display: table-cell; vertical-align: top; }

.no-table,
.no-table > .tr,
.no-table > .th,
.no-table > .td  { display: block; }

/*width 指定*/
.w100 	{ width: 100%; }
.w90 	{ width: 90%; }
.w80 	{ width: 80%; }
.w75 	{ width: 75%; }
.w70 	{ width: 70%; }
.w66 	{ width: 66%; }
.w60 	{ width: 60%; }
.w50 	{ width: 50%; }
.w40 	{ width: 40%; }
.w33 	{ width: 33%; }
.w30 	{ width: 30%; }
.w25 	{ width: 25%; }
.w20 	{ width: 20%; }
.w10 	{ width: 10%; }



/*------------------------------ ボタン
*/

/*ボタンコンテナ（親）*/
.btns{
	text-align: center;
	margin: 2em 0;
}
.btns:first-child 	{ margin-top: 0; }
.btns:last-child 	{ margin-bottom: 0; }

/*ボタン（子）*/
.btn a, a.btn{
	position: relative;
	display: inline-block;
	background: #00A0CA;
	padding: 1em;
	color: #fff;
	font-size: 120%;
	font-weight: 900;
	margin: .5em;
	
	border-radius: .3em;
	text-decoration: none;
}

/*ボタン用アイコン*/
.btn a::before,
a.btn::before 	{
	margin-right: .5em;
	display: inline-block;
	font-weight: normal;
	font-size: 120%;
    font-family:'FontAwesome';
	line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*ボタンに直接FontAwesomeアイコンを入れた場合*/
.btn a .fa, a.btn .fa{ margin-right: .5em; }


/*「印刷する」ボタン*/
.btn-print				{ background: #666 !important; }
.btn-print::before		{ content: "\f02f"; }

/*「お問い合わせフォームへ」ボタン*/
.btn-contact::before	{ content: "\f0e0"; }




/*------------------------------ フロートレイアウト
*/

.float-item{ float: left; }

.float-left { float: left; }
.float-right{ float: right; }
.no-float	{ float: none; }

.col2 .float-item{ width: 50%; }
.col3 .float-item{ width: 33.3%; }
.col4 .float-item{ width: 25%; }
.col5 .float-item{ width: 20%; }

.col2 .float-item:nth-child(2n+1),
.col3 .float-item:nth-child(3n+1),
.col4 .float-item:nth-child(4n+1),
.col5 .float-item:nth-child(5n+1) { clear: both; }


.float .float-item .item-inner{
	display: block;
	width: 100%;
	padding: 15px;
}




/*============================================================================================== 3. ベースデザイン
*/

/*============================== 3-1.ページラッパー
*/
#page{
	margin:0 auto;
	width:100%;
	position:relative;
}

.inner{
	width: 1200px;
	margin:0 auto;
	position:relative;
}


/*============================== 3-2.ページヘッダー
*/

#header{
	background:#fff url(images/part-header-bar.png) no-repeat 50% -130px;
	border-bottom: 5px solid #00a0ca;
}

#header .inner{
	position: relative;
	height: 160px;
}

#catchcopy{
	position: absolute;
	top:  15px;
	left: 20px;
	font-weight: bold;
	color: #fff;
}

#header-logo{
	margin: 0;
	padding: 0;
	position: absolute;
	top:  80px;
	left: 20px;
	width: 220px;
	height: 64px;
}
#header-logo img{
	width: 100%;
	height: auto;
}

#header ul{
	margin: 0;
	padding: 0;
	list-style: none;
}


/*============================== 3-3.グローバルナビゲーション
*/

#nav-sp{
	/*display: none;*/
}

#menu-global{
	position: absolute;
	top:  80px;
	left: 260px;
}

#nav-global{
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
	line-height: 1;
}

#nav-global ul {
	overflow: hidden;
	display: table;
	margin: 0 auto;
}
#nav-global ul li {
	display: table-cell;
	vertical-align: bottom;
	font-size: 16px;
	width: 150px;
	height: 80px;
}
#nav-global ul li a {
	position: relative;
	font-weight: bold;
	display: block;
	width: 100%;
	height: 80px;
	padding-top: 10px;
	text-decoration: none;
	color: #333;
}
#nav-global ul li a:hover{
	opacity: 1;
}

#nav-global li a::before{
	display: block;
	position: absolute;
	bottom: 0;
	left:50%;
	font-size: 40px;
	font-weight: normal;
	color: #00a0ca;
	vertical-align: bottom;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	z-index: 100;
}

/*グローバルナビゲーション　ボタンアイコン位置調整*/
#nav-global .nav-life 	 a::before{ bottom: -7px; }
#nav-global .nav-gov 	 a::before{ bottom: -2px; }
#nav-global .nav-tourism a::before{ bottom: -1px; }
#nav-global .nav-biz 	 a::before{ bottom: -3px; }



/*----------------------
グローバルナビゲーション　カレント／ホバー時
*/

/*アイコンカラー変更*/
#nav-global ul li.current a::before,
#nav-global ul li a:hover::before {
	color: #fff;
}

/*背面ぼかし*/
#nav-global ul li a::after {
	display: none;
	content: '';
	
	position: absolute;
	bottom: 0;
	left:50%;
	z-index: 10;
	
	margin-left: -50px;
	margin-bottom: -0px;
	width: 100px;
	height: 50px;
	border-radius: 50px 50px 0 0;
	
	background:radial-gradient(circle closest-side at center,#00a0ca 50%, #fff 100%);
	background-position: 50% 0;
	background-size: 200%;
}

#nav-global ul li.current a::after,
#nav-global ul li a:hover::after {
	display: block;
}


/*============================== 3-4.補助ナビゲーション
*/

#menu-sp{
	position: relative;
	top:0;
	left: 0;
	width: 100%;
}

/*----------------------
3-4-1. サイトメニュー（サイトマップ／お問い合わせ／マルチリンガル）
*/

#nav-sp{
	position: absolute;
	right: 300px;
	top: 0;
}
#nav-sp ul{
	text-align: right;
}
#nav-sp ul li{
	display: inline-block;
}
#nav-sp ul li a{
	display: block;
	padding: 10px;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	line-height: 1.1;
}
#nav-sp ul li a::before{
	margin-right: .5em;
	font-size: 18px;
}

#nav-sp .nav-address{ display: none; }




/*----------------------
3-4-2. 文字サイズ切り替え／キーワード検索
*/


#header-utils{
	position: absolute;
	right: 20px;
	top: 0;
}

#header-utils ul {
}



/*----------------------
3-4-3. フォントサイズ切り替えボタン
*/

#switch-size{
	position: absolute;
	top:8px;
	right: 20px;
}
#switch-size .btns{
	display: table;
}
#switch-size .util-heading,
#switch-size .util-btn {
	display: table-cell;
	vertical-align: middle;
}
#switch-size .util-heading{
	text-align: right;
	color: #fff;
	white-space: nowrap;
	padding: 0 5px;
}
#switch-size .util-btn{
	text-align: center;
	padding: 0 5px;
	line-height: 1;
}

#switch-size .util-btn span{
	cursor: pointer;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 30px;
	border: 2px solid #fff;
	color: #fff;
	line-height: 36px;
	font-weight: bold;
}
#switch-size .util-btn:hover span{
	background: #069;
}

#switch-size #btn-font-small{
	font-size: 85%;
}
#switch-size #btn-font-large{
	font-size: 120%;
}

#switch-size .current {
	background: #069;
}


/*----------------------
3-4-4. キーワード検索
*/

#search-word{
	width: 250px;
	position: absolute;
	top:80px;
	right: 20px;
}

#search-word form{
	display: block;
	width: 100%;
	position: relative;
}

#search-word input[type="search"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
    width: 100%;
	
    border: 1px solid #999;
    border-radius: .5em;
    background: #ddd;
	color: #333;
    padding: .5em;
    font-size: 120%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#search-word input[type="search"]:focus{
	outline: 0;
	background: #ccc;
	color: #000;
}


#search-word input[type="submit"] {
    display: block;
    margin-top: -20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    font-size: 150%;
    position: absolute;
    right: 0;
    top: 50%;
    width: 40px;
    height: 40px;
	cursor: pointer;
}
#search-word input[type="submit"]:hover{
	color: #fff;
}



/*----------------------
3-4-5. スマホ用バーガーメニュー
*/

#btn-menu-sp {
	cursor: pointer;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0px;
    right: 5px;
	background-image:url(images/btn-menu-sp.png);
    background-position: 50% 0;
    background-size: 100%;
    /* background: transparent; */
    content: "";
    z-index: 200;
    outline: 0;
    border: 0;
    text-indent: -9000px;
}

#btn-menu-sp.open {
    background-position: 50% -100% !important;
}

#nav-menu .for-sp { display: none; }



/*============================== 3-5.パンくずリスト・ページナビゲーション
*/

/*----------------------
3-5-1. パンくずリスト
*/

.breadcrumbs{
	background: #00A0CA;
	color: #fff;
	padding-bottom: 5px;
	font-size: 90%;
}
.breadcrumbs a{
	color: #BBDDEF;
}

.breadcrumbs-bottom{
	background: #fff;
	color: inherit;
	padding: 15px 0;
}
.breadcrumbs-bottom a{
	color: inherit;
}

.breadcrumbs .inner{
	padding: 0 20px;
}


/*----------------------
3-5-2. ページナビゲーション
*/
.navigation{
	margin: 50px 0 0;
}

.pagenav{
	display: table;
	width: 100%;
	
	border-collapse: separate;
	border-spacing: 15px;
}
.pagenav a.pagenav-btn{
	display: table-cell;
	background: #00aa8d;
	border-radius: 1em;
	padding: 1em .5em;
	text-align: center;
	color: #fff;
}
.pagenav a.pagenav-btn p{
	margin: .5em 0 0;
}

.pagenav .btns{
	display: table-cell;
	width: 25%;
}
.pagenav .btns a.pagenav-btn{
	display: block;
	background: #999;
}


.pagination{
	padding: 2em 0 0 !important;
    text-align:center;
}
.pagination .screen-reader-text { display:none; }
.pagination .nav-links {}
.nav-links .page-numbers {
	display:inline-block;
	text-decoration:none;
	border-radius: .5em;
   
    padding:5px 10px;
    margin:0 2px;
	background: #E6E6E6;
}
.nav-links .page-numbers.current {
    background: #00aa8d;
    color: #FFF;
}
.pagination a{
	color: #666;
}
.pagination a:hover{
    color: #fff;
    background-color: #00aa8d;
}




/*============================== 3-6.ページフッター
*/


/*----------------------
3-6-1.フッターメニュー
*/

#footer .footer-menu,
#footer .footer-content{
	border-top: 1px solid #ccc;
}

#footer .footer-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
#footer .footer-menu ul li{
	display: inline-block;
	margin: 0 .5em;
}
#footer .footer-menu ul li a{
	display: block;
	padding: 1em .5em;
	text-decoration: none;
}
#footer .footer-menu ul li a::before{
	margin-right: .5em;
	font-size: 110%;
	font-family: 'FontAwesome';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: "\f105";
}


/*----------------------
3-6-2. フッターコンテンツ
*/

#footer .footer-content{
	background: linear-gradient(45deg, #00a0ca 0%, #00a0ca 50%, #fff 50%, #fff 100% );
	color: #fff;
	padding: 0 0;
	min-width: 1200px;
}

#footer .footer-content .inner{ 
	display: table;
	padding: 10px 20px;
}
#footer-address,
#footer-utils	{
	display: table-cell;
	vertical-align: middle;
	width: 50%;
}


/*----------------------
3-6-3. フッターロゴ、アドレス
*/

#footer-logo{
	width: 240px;
	margin-bottom: 1em;
}
#footer-logo img{
	width: 100%;
	height: auto;
}

#footer-address dd{
	padding: 0;
	margin: 0;
}
#footer-address address{
	font-style: normal;
}
#footer-address a{
	color: #fff;
}

/*----------------------
3-6-4. フッター　ボタンメニュー
*/

#footer-utils{
	padding-left: 50px;
}

#footer-utils ul{
	list-style: none;
	margin: 0;
	padding: 0;
	padding: 70px 0 90px 0;
	
}
#footer-utils ul::after{
	content: '';
	display: block;
	clear: both;
}
#footer-utils ul li{
	width: 100px;
	height: 100px;
	float: left;
	background: transparent;
	margin-right: 0;
	-webkit-transform: translate(0%, -50%) rotateZ(45deg);
	-moz-transform: translate(0%, -50%) rotateZ(45deg);
	transform: translate(0%, -50%) rotateZ(45deg);
	position: relative;
}
#footer-utils .nav-info{
	top:100px;
}

#footer-utils ul li a{
	display: block;
	background: #00a0ca;
	color: #fff;
	border: 1px solid #ccc;
	border-radius: 15px;
	width: 120px;
	height: 120px;
	position: relative;
}
#footer-utils ul li a span{
	display: block;
	-webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
	-moz-transform: translate(-50%, -50%) rotateZ(-45deg);
	transform: translate(-50%, -50%) rotateZ(-45deg);
	position: absolute;
	top:50%;
	left: 50%;
	height: 100px;
	padding-top: 60px;
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
}
#footer-utils ul li a span::before{
	display: block;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	position: absolute;
	top:20px;
	left: 50%;
	font-weight: normal;
	font-size: 30px;
}


/*----------------------
3-6-5. 「ページの先頭へ」ボタン
*/

.btn-pagetop{
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 100px;
	height: 100px;
	-webkit-transform: translate(-0%, -0%) rotateZ(45deg);
	-moz-transform: translate(-0%, -0%) rotateZ(45deg);
	transform: translate(-0%, -0%) rotateZ(45deg);
}


.btn-pagetop a{
	display: block;
	background: #00a0ca;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 15px;
	width: 60px;
	height: 60px;
	position: relative;
	margin: 0;
}
.btn-pagetop a span{
	display: block;
	-webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
	-moz-transform: translate(-50%, -50%) rotateZ(-45deg);
	transform: translate(-50%, -50%) rotateZ(-45deg);
	position: absolute;
	top:50%;
	left: 50%;
	height: 100px;
	padding-top: 100px;
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
}
.btn-pagetop a span::before{
	display: block;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top:50%;
	left: 50%;
	font-weight: normal;
	font-size: 24px;
	color: #fff;
}


/*「ページトップへ」ボタン（スマホ時）
*/

.sp #nav-pagetop,
#nav-pagetop-sp  { display: none; }



/*----------------------
3-6-6.デザイン切り替えボタン
*/

#switch-design{
	width: 80%;
}
#switch-design .btns{
	display: table;
	width: 100%;
	border-spacing: 10px;
	padding: 0;
}

#switch-design .util-btn {
	display: table-cell;
	vertical-align: middle;
	width: 50%;

	text-align: center;
	
	line-height: 1;
}

#switch-design .util-btn span{
	cursor: pointer;
	display: block;
	color: #fff;
	background: #0082B0;
	line-height: 36px;
	font-weight: bold;
	padding: 10px;
	vertical-align: middle;
}
#switch-design .util-btn span::before{
	font-size: 20px;
	margin-right: 10px;
	vertical-align: middle;
}

#switch-design #btn-sp::before{
	font-size: 28px;
}

#switch-design .current {
	background: #069;
}



/*============================================================================================== 4.コンテンツ 基本デザイン
*/

#container{
	
	/*min-height: 100vh;*/
	padding: 0;
	margin: 0 auto;
}


/*============================== 4-1.コンテンツヘッダー
*/

#container .container-header{
	position: relative;
	padding: 30px 0 90px;
	text-align: center;
	background: #BBDDEF url(images/part-container-header-bottom.png) no-repeat 50% 100%;
}

#container .container-header .header-title{
	display: inline-block;
	position: relative;
	vertical-align: top;
	line-height: 1;
	color: #555;
	font-size: 180%;
	font-weight: bold;
	padding-left: 50px;
	
}
#container .container-header .header-title::before{
	display: block;
	font-size: 150%;
	color: #00A0CA;
	position: absolute;
	top:50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0,-50%);
	font-weight: normal;
}


/*============================== 4-2.コンテンツメニュー
*/

#menu-content{ background: #fff; }

#menu-content .nav-content { padding-top: 10px; }

#menu-content .nav-content ul{
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px dotted #999;
}
#menu-content .nav-content ul li{
	border-top: 1px dotted #999;
}
#menu-content .nav-content ul li a{
	display: block;
	color :#00A0CA;
	padding: .5em;
	text-align: center;
	text-decoration: none;
	}


/*============================== 4-3.メインコンテンツ
*/

#main{
	margin: 0;
}

.index #main{
	margin: 0;
}

#container ul,
#container ol {
	margin: 1em 0;
	margin-left: 1.5em;
}
#container li {
	margin: 5px 0;
}

body:not(.index) #container ul{
	margin: 0;
	padding: 0;
	list-style: none;
}



/*============================== 4-4.内容アイテム
*/

#container .item 		{ padding: 10px;}

/*#main .float-item 	{ width: 50%;}*/

#container .item .item-inner {
	background: #00A0CA;
	border-radius: 8px;
	padding: 5px;
}


/*----------------------
4-4-1.アイテムヘッダー
*/

#container .item .item-header{ padding: 0;}

#container .item .item-header .header-title		{ color: #fff; font-size: 100%; }

#container .item .item-header .header-title a,
#container .item .item-header .header-title span { display: block; color: #fff; text-decoration: none; padding: 10px; }



/*----------------------
4-4-2.アイテム内　リストメニュー
*/

#container ul.item-menu{
	padding: 5px;
}

#container .item-menu li{
	font-size: 100%;
	background: #fff;
	color: #333;
	border-radius: 5px;
	padding: 0;
}
#container .item-menu li:first-child{ margin-top:0; }
#container .item-menu li:last-child{ margin-bottom:0; }

#container .item-menu li a{
	display: block;
	color: #333;
	text-decoration: none;
	padding: 5px;
}

#container .sub-menu a::before,
.item-menu .label::after
{
	display: inline-block;
    font-family:'FontAwesome';
	line-height: 1;
    font-size: 100%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* アイテム　サブメニュー */

/*#container .accordion-content { display: none; }*/

#container .sub-menu{
	display: none;
	padding: 5px !important;
}

#container .sub-menu a::before {
    content: "\f0da"; /*fa-caret-right*/
	margin-right: .5em;
	color: #069; /*#999;*/
}


/* -----------------------------------

メニューリンク（記事タイプ）

*/

#container .item-menu .article {
	position: relative;
	display: block;
	padding: 10px;
	padding-left: 1.5em;
	background: #FFF;
	border-radius: 5px;
}

#container .item-menu .article:before {
	content: "\f0da"; /*fa-caret-right*/
	position: absolute;
	top: 1em;
	left: 10px;
	color: #069; /*#999;*/
  
	font-family:'FontAwesome';
	line-height: 1;
    font-size: 100%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* -----------------------------------

メニューリンク（ラベルタイプ）

*/
#container .item-menu .label {
	position: relative;
	display: block;
	padding: 10px;
	background: #FFF;
	border-radius: 5px;
}

#container .item-menu .label::after {
	display: block;
	position: absolute;
	right: 0;
	top:50%;
	-webkit-transform: translate(-100%, -50%);
	-moz-transform: translate(-100%, -50%);
	transform: translate(-100%, -50%);
}

/* メニューリンク（ラベルタイプ）折りたたみメニュー：オープン時 */
#container .open .label{
	background: #BBDDEF;
	border-bottom: 2px dotted #00A0CA;
	border-radius: 5px 5px 0 0;
}

.item-menu  .label::after { content: "\f054"; } /* →（fa-chevron-right）*/ 
.accordion  .label::after { content: "\f078"; } /* ↓（fa-chevron-down）*/ 
.open 		.label::after { content: "\f077"; } /* ↑（fa-chevron-down）*/




/*============================================================================================== 5. フォーム
*/

#form{
	margin: 3em 0;
}

#form dl{
	margin: 2em 0;
}

/*---------------------- 見出し
*/

#form dt {
	font-weight: bold;
	font-size: 120%;
	padding: .2em .5em;
	
	color: #00A0CA;
	/*background: #DCEEF7;*/
	border-left: 5px solid #00A0CA;
	
}

#form dd {
	padding: 1em 0 0;
	margin: 0;
}


/*---------------------- フォームオブジェクト
*/

#form input[type="number"],
#form input[type="email"],
#form input[type="tel"],
#form input[type="text"],
#form textarea
{
	width: 100%;
	padding: 1em;
	background: #FCF5DD;
	border:1px solid #999;
	border-radius: .3em;
	font-size: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



.require{ color: #f00; }

.submit-container{ text-align: center;}


input[type="submit"].btn-form{
	cursor: pointer;
	display: inline-block;
	padding: 1em;
	border-radius: .3em;
	color: #fff;
	background: #999;
	font-size: 120%;
	font-weight: 900;
	
	text-align: center;
	width: auto;
	border: 0;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}
input[type="submit"].btn-form:hover{
	opacity: .8;
}

input[type="submit"].btn-submit{
	color: #fff;
	background: #00a0ca;
}
input[type="submit"].btn-return{
	color: #fff;
	background: #999;
	margin-left: 2em;
}



/*============================================================================================== 6. トップページ
*/

.index #page{ padding-top: 400px; }


/*============================== 6-1.スライドショー
*/

#photos{
	position: relative;
	height: 400px;
	width: 100%;
	min-width: 1200px;
	padding-bottom: 0;
}

#slides a {
	//position: relative;  /*** mod by k.omura ***/
	display: block;
}

.index #photos{
	position: absolute;
	top: 0;
	left: 0;
}

#slides .slide-item {
	display: block;
	position: relative;
	width: 1200px;
	height: 400px;
	margin: 0;
	padding: 0;
	
	overflow: hidden;
}


#slides .slide-item img{
	width: 100%;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}
#slides .slide-item figcaption{
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	color: #ccc;
	padding: 1em;
}

#slides a figcaption{ color: #ccc;}


/*============================== 6-2.セクション
*/

/*----------------------
6-2-1.　セクション 基本デザイン
*/

.index section{
	border-top:1px solid #ccc;
	padding: 0 0 50px;
}

.index .section-header{
}

.index .section-header .header-title{
	color: #00a0ca;
	padding: 50px 0 25px;
}

.index .content-item a{
	text-decoration: none;
	color: #333;
}
.index .content-item .item-header{
	width: 100%;
	position: relative;
	background: #00a0ca;
	color: #fff;
	text-align: center;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height: 1;
}

.index .content-item .item-header .header-title{
	
	padding: 1em;
	font-size: 100%;
}

.index .content-item .item-content{
	padding: 1em 0 0;
	font-size: 85%;
}

/*----------------------
6-2-2.「緊急情報」セクション
*/

#emergency-section{
	border: 0;
	padding: 50px 0;
}
#emergency-section dl{
	border: 3px solid #f66;
	padding: 5px;
	margin: 0 auto;
	width: 1200px;
}
#emergency-section dt{
	padding: .3em;
	background: #c33;
	color: #fff;
	font-weight: bold;
}
#emergency-section dd{
	margin: 0;
	padding: 1em;
}

#emergency-section .fa{
	margin-right: .5em;
}

#emergency-section .fa::before{
	font-size: 20px;
}


/*----------------------
6-2-3.「フィーチャー（トピックス＆SNS）」セクション
*/

#feature-section{
	border: 0;
	background: #bdccd4;
	position: relative;
	padding: 50px 0 80px;
}
#feature-section::after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(images/part-header-bar.png) 50% 0;
	height: 100px;
	width: 100%;
}

#feature-section .inner{
	display: table;
	
}
#feature-section .section-header {
	display: table;
	width: 100%;
	margin-bottom: 1em;
	color: #666;
}
#feature-section .section-header .header-title{
	color: #666;
	padding: 0;
}

#feature-topics,
#feature-sns {
	display: table-cell;
	vertical-align: top;
}
#feature-section .header-title,
#feature-section .header-content {
	display: table-cell;
	vertical-align: middle;
}

#feature-section .header-content{
	text-align: right;
	
}
#feature-section .header-content a{
	color: #369;
	text-decoration: none;
}
#feature-section .header-content a::before{
	color: #666;
	margin-right: .5em;
}


#feature-topics{
	
	background: #fff;
	padding: 1em;
	border-radius: 15px;
}

#feature-topics ul{
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
#feature-topics ul li{
	border-top:1px dotted #999;
	margin: 0;
}
#feature-topics ul li a{
	display: block;
	position: relative;
	padding: 1em 0;
	padding-left: 60px;
	text-decoration: none;
}
#feature-topics ul li a span.heading{
	color: #369;
	text-decoration: underline;
	font-weight: bold;
	line-height: 1.5;
}
#feature-topics ul li a span.date{
	display: block;
	color: #666;
	font-size: 80%;
	margin-bottom: .8em;
}
#feature-topics ul li a::before{
	background: #00a0ca;
	color: #fff;
	display: block;
	text-align: center;
	font-size: 24px;
	line-height: 40px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	left: 5px;
}

#feature-sns{
	padding-left: 40px;
	width: 440px;
}
#feature-sns .widget{
}


/*----------------------
6-2-4.「インフォメーション」セクション
*/

#information-section{
	border: 0;
}
#information-section .kawaraban .item-header::before{
	content: '';
	display: block;
	background: url(images/heading-kawaraban.png) no-repeat 50% 50%;
	width: 160px;
	height: 80px;
	position: absolute;
	top:  -30px;
	left: -20px;
	z-index: 100;
}
#information-section .kawaraban .item-header .date{
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.70);
	color: #fff;
	padding: 5px;
	font-size: 70%;
	line-height: 1;
	text-align: right;
	width: 100%;
}


/*----------------------
6-2-5.「メインメニュー」セクション
*/

#mainmenu-section{}

#mainmenu-section .item-header::before{
	display: block;
	background: #ddd;
	width: 100%;
	height: 170px;
	line-height: 170px;
	font-size: 100px;
	color: #00a0ca;
}

/*----------------------
6-2-6.「リンク」セクション
*/

#links-section{
}

.list-bannerLink,
.list-textLink {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.list-bannerLink li,
.list-textLink li {
	display: inline-block;
}

.list-bannerLink li a{
	display: inline-block;
}

.list-textLink li a {
	display: inline-block;
	background: #ddd;
	color: #00a0ca;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	margin: .5em;
	padding: .5em 1em;
	border-radius: 1em;
}
.list-textLink li a::before {
	display: inline-block;
	margin-right: .5em;
	font-family: 'FontAwesome';
    font-size: inherit;
	font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: "\f105";
}

#links-section .list-bannerLink li{
	width: 19%;
}

#links-section .list-textLink{
	margin-top: 30px;
}



/*============================================================================================== 7. 一覧ページ（.archive）
*/


/*2カラム レイアウト基本設定*/
.archive #container .float .float-left,
.entry #container 	.float .float-left		{ width: 30%; padding-right: 30px; }

.archive #container .float .float-right,
.entry #container 	.float .float-right		{ width: 70%; }



/*============================== 7-1.「こんな時どうする？」メニュー（「くらし」限定）
*/

/*----------------------
リスト設定
*/
#menu-case #case-ul {
	overflow: hidden;
	padding: 0;
}

#menu-case #case-ul li{
	float: left;
	width: 12.5%;
	padding: 5px;
	margin: 0;
	background: none;
}
#menu-case #case-ul li:first-child{ margin-left: 0; }

/*----------------------
リンク（コンテナ）
*/
#menu-case #case-ul li a{
	position: relative;
	display: block;
	width: 100%;
	height: 100px;
	
	background: #fff;
	color: #333;
	border-radius: 5px;
	padding: 5px;
	text-align: center;
	font-size: 90%;
	line-height: 1.1;
}


/*----------------------
テキスト
*/
#menu-case #case-ul li a span{
	display: block;
	position: absolute;
	top:80px;
	left:0;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0,-50%);
	width: 100%;
	margin: 0;
	padding: 0;
}

/*----------------------
イラストアイコン
*/
#case-ul li a::before{
	content: '';
	display: block;
	width: 100%;
	height: 55px;
	background: no-repeat 50% 50%;
	background-size: contain;
	position: absolute;
	top:5px;
	left:0;
}

/*----------------------
イラストアイコン　画像設定
*/
#case-ul .btn-case-childBirth	 	a::before { background-image: url(images/icon-life-childBirth.png); } 		/*妊娠・出産*/
#case-ul .btn-case-childRaising	 	a::before { background-image: url(images/icon-life-childRaising.png); }		/*子育て*/
#case-ul .btn-case-enterSchool	 	a::before { background-image: url(images/icon-life-enterSchool.png); }		/*入園・入学*/
#case-ul .btn-case-marriage_divorce	a::before { background-image: url(images/icon-life-marriage_divorce.png); }	/*結婚・離婚*/
#case-ul .btn-case-abidance	 		a::before { background-image: url(images/icon-life-abidance.png); }			/*住まい*/
#case-ul .btn-case-move	 			a::before { background-image: url(images/icon-life-move.png); }				/*引っ越し*/
#case-ul .btn-case-resign_retire	a::before { background-image: url(images/icon-life-resign_retire.png); }	/*退職・老後*/
#case-ul .btn-case-decease	 		a::before { background-image: url(images/icon-life-decease.png); }			/*ご不幸のときは*/




/*============================================================================================== 8. 記事ページ（.entry）
*/

.entry #container > .inner { padding: 75px 0 50px; }


/*============================== 8-1. 記事ヘッダー
*/

.entry #main .entry-header{
	
	margin-bottom: 2em;
	padding: 0;
	position: relative;
	
}

/*----------------------
タイトル
*/
.entry #main .entry-header h1,
.entry #main .entry-header .header-title{
	display: block;
	width: 100%;
	font-weight: bold;
	font-size: 160%;
	line-height: 1.5;
	border: 3px solid #00A0CA;
	border-radius: 1em;
	padding: 1em 1em;
}
.entry #main .entry-header h1::before,
.entry #main .entry-header .header-title::before{
	color: #00A0CA;
	font-weight: normal;
	font-size: 120%;
	margin-right: .5em;
}

/*----------------------
カテゴリー表示
*/
.entry #main .entry-header .entry-term{
	position: absolute;
	top:  0;
	left: -1em;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
	
	font-weight: bold;
	font-size: 120%;
	line-height: 1.1;
	
	color: #fff;
	background: #00A0CA;
	border-radius: 1.5em;
	padding: .5em 1em;
	
}
.entry #main .entry-header .entry-term::before{
	font-weight: normal;
	font-size: 120%;
	margin-right: .2em;
}


/*============================== 8-2. 記事フッター
*/

.entry #main .entry-footer{
	margin-top: 3em;
	padding-top: 3em;
	border-top:1px solid #ccc;
}



/*============================== 8-3. 記事コンテンツ・見出し（h2〜h6）
*/

.entry #main .entry-content{}

/*----------------------
基本設定
*/
.entry #main .entry-content p{ margin: 1em 0; }

.entry #main .entry-content h2,
.entry #main .entry-content h3,
.entry #main .entry-content h4,
.entry #main .entry-content h5,
.entry #main .entry-content h6 {
	margin: 3em 0 1em;
	font-weight: bold;
	line-height: 1.5;
}

.entry #main .entry-content p:first-child,
.entry #main .entry-content h2:first-child,
.entry #main .entry-content h3:first-child,
.entry #main .entry-content h4:first-child,
.entry #main .entry-content h5:first-child,
.entry #main .entry-content h6:first-child 	{ margin-top: 0; }

.entry #main .entry-content p:last-child,
.entry #main .entry-content h2:last-child,
.entry #main .entry-content h3:last-child,
.entry #main .entry-content h4:last-child,
.entry #main .entry-content h5:last-child,
.entry #main .entry-content h6:last-child 	{ margin-bottom: 0; }


/*----------------------
見出し2
*/
.entry #main .entry-content h2 {
	font-size: 140%;
	padding: 1em;
	
	color: #00A0CA;
	background: #DCEEF7;
	border-left: 5px solid #00A0CA;
	
	
}

/*----------------------
見出し3
*/
.entry #main .entry-content h3 {
	font-size: 120%;
	padding: 1em;
	color: #fff;
	background: #00A0CA;
	position: relative;
	margin-bottom: 2em;
}
.entry #main .entry-content h3::before {
	display: block;
	content: '';
	position: absolute;
	top: 100%;
	left:0;
	border-style: solid;
	border-color: transparent #ccc transparent transparent;
	border-width: 0 15px 15px 0;
}
.entry #main .entry-content h3::after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right:0;
	border-style: solid;
	border-color: transparent #fff transparent  transparent;
	border-width: 2em 1em 2em 0;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
}


/*----------------------
見出し4
*/
.entry #main .entry-content h4 {
	/*display: inline-block;*/
	display: block;
	color: #333;
	font-size: 120%;
	padding: .5em 1em .5em 2.5em;
	margin: 1.5em 0 .5em;
	position: relative;
	
	background: #EEE5D7;
	border-radius: 2em;
	
	/*white-space: nowrap;
	background: linear-gradient( #fff 0%, #fff 60%, #EEE5D7 60%, #EEE5D7 100% );
	border-bottom: .3em solid #EEE5D7;*/
}

.entry #main .entry-content h4:before {
	position: absolute;
	top: 50%;
	left: 10px;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
	
	color: #00A0CA;
	font-size: 150%;
    content: "\f00c";
	display: inline-block;
	margin-right: .5em;
	font-family: 'FontAwesome';
	font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


/*----------------------
見出し5
*/
.entry #main .entry-content h5 {
	font-size: 110%;
	padding: .2em .5em;
	margin: 1em 0 .5em;
	/*display: inline-block;*/
	display: block;
	font-weight: bold;
	color: #000;
	background:#ccc;
}

/*----------------------
見出し6
*/
.entry #main .entry-content h6 {
	font-size: 110%;
	margin: 1em 0 .5em;
	padding: .2em 0 .2em .5em;
	border-left: 3px solid #00A0CA;
	/*display: inline-block;*/
	display: block;
	font-weight: bold;
	color: #000;
}



/*============================== 8-4. リスト（記事専用）
*/

#main .entry-content ul{
	margin: 1em 0;
	padding: 0;
}


#main .entry-content ol {
	padding-left: 1.5em;
	margin: 1em 0;
}


#main .entry-content li{
	margin: 1em 0;
	
}
#main .entry-content li:first-child 	{ margin-top: 0; }
#main .entry-content li:last-child 	{ margin-bottom: 0; }

#main .entry-content ul li{
	position: relative;
	padding: 0;
	padding-left: 1.5em;
	line-height: 1.5;
}

#main .entry-content ul:not(#recent) li::before{      /**mod by k.omura**/
	
	content: "\f0da"; /*fa-caret-right*/
	
	position: absolute;
	top: 0;
	left: 10px;
	color: #999;
  
	font-family:'FontAwesome';
	line-height: 1.5;
	
    font-size: 100%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



/*============================== 8-5. テーブル（記事専用）
*/

.entry #main table{
	margin: 1.5em 0;
	width:100%;
	/*border: 1px solid #999;*/
	border-collapse: collapse;
}

.entry #main th,
.entry #main td
{
	border: 1px solid #999;
	padding: 10px;
	vertical-align: middle;
}

.entry #main th {
	font-weight: 900;
	text-align: left;
}

/*----------------------
テーブルタイトル
*/
.entry #main th,
.entry #main th.table-header{
	font-size: 120%;
	background: #BBDDEF; 
}

/*----------------------
行タイトル
*/
.entry #main th.tr-header {
	min-width: 25%;
}

/*----------------------
テーブルコンテンツ内　リスト
*/
.entry #main .entry-content td ul{
	padding-left: 0;
	list-style: none;
	margin: 0;
}


/*============================== 8-6. 強調・注意（記事専用）
*/

.entry #main .entry-content em 			{ font-weight: bold; font-style: italic; }				/*強調*/
.entry #main .entry-content strong 		{ font-weight: bold; }									/*より強調*/
.entry #main .entry-content .note 		{ font-weight: bold; color: #f00; background:#F2DDE6; }	/*注意*/
.entry #main .entry-content .attention  { font-weight: bold; color: #000; background:#FFFF00; }	/*より強い注意*/



/*============================== 8-7. 枠付きボックス（記事以外でも使用可能）
*/


/*----------------------
ボックス枠
*/
.box{
	background: #E2D6C6;
	border-radius: 1em;
	padding: 10px;
	margin: 2em 0;
	text-align: center;
}
.box:first-child 	{ margin-top: 0; }
.box:last-child 	{ margin-bottom: 0; }


/*----------------------
ボックスタイトル
*/
.box-title{
	display: inline-block;
	margin-bottom: .5em;
	padding: .5em .5em .5em 2.5em;
	position: relative;
	color: #544;
	font-size: 120%;
}
/*アイコン*/
.box-title::before{
	position: absolute;
	top:50%;
	left: .2em;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
	
	font-size: 140%;
    content: "\f1d8"; /* .fa-paper-plane */
	display: block;
	font-family: 'FontAwesome';
	font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/*----------------------
ボックスコンテンツ
*/
.box-content{
	background: #fff;
	border-radius: .8em;
	padding: 1.5em;
	
}
.box-content h3{
	font-size: 140%;
}

/*----------------------
連絡先（電話・FAXなど）
*/
.tel-fax{
	font-weight: bold;
	font-size: 100%;
	color: #765;
}

/*----------------------
電話・FAXなど　番号の強調
*/
.number{
	font-family: "Crimson Text", serif;
	font-weight: bold;
	font-size: 320%;
	vertical-align: baseline;
	line-height: 1;
}



/*============================================================================================== 10. 観光
*/



.tourism #container .container-header {
    position: relative;
	padding: 30px 0;
    text-align: center;
    background: #BBDDEF;
}

.tourism #container .container-body{
	padding: 50px 0;
}

/*============================== 10-1. セクション 共通設定
*/

.tourism section{
	border-top: 1px solid #666;
}
.tourism section:first-child,
.tourism section:nth-child(2),
.tourism #photos,
.tourism #genre-section
{
	border: 0;
}





/*----------------------
セクションヘッダー
*/

.tourism .section-header{
	position: relative;
	display: table;
	margin: 3em auto;
}
.tourism .section-header .header-title{
	color: #666;
	position: relative;
	z-index: 10;
}
.tourism .section-header::before,
.tourism .section-header::after {
	content: '';
	display: block;
	width:100px;
	height: 50px;
	position: absolute;
	top:0;
	left: 0;
	border-radius: 50%;
	background: rgba(187,221,239,.5);
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
}

.tourism .section-header::before{
	width:60px;
	height: 30px;
	top:-20px;
	left: -45px;
	
}
.tourism .section-header::after {
	width:100px;
	height: 50px;
	top:0;
	left: -30px;
}


/*----------------------
セクション内容
*/

.tourism .section-content{
	margin-bottom: 2em;
}



/*----------------------
セクション　見出し
*/

.tourism #main h3 {
    font-size: 120%;
    padding: 1em;
    color: #fff;
    background: #00A0CA;
    position: relative;
    margin-bottom: 2em;
	text-align: center;
}
.tourism #main h3::before {
	display: block;
	content: '';
	position: absolute;
	top: 100%;
	left:0;
	border-style: solid;
	border-color: transparent #ccc transparent transparent;
	border-width: 0 15px 15px 0;
}
.tourism #main h3::after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right:0;
	border-style: solid;
	border-color: transparent #fff transparent  transparent;
	border-width: 2em 1em 2em 0;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.tourism #main .spring h3 { background: #FF657C; }
.tourism #main .summer h3 { background: #22B573; }
.tourism #main .autumn h3 { background: #F36540; }
.tourism #main .winter h3 { background: #7072B4; }



/*----------------------
セクション　情報アイテム
*/

.tourism .content-item a {
    text-decoration: none;
    color: #333;
}


.tourism .content-item .item-header {
    width: 100%;
    position: relative;
    background: none;
    color: #00A0CA;
    text-align: center;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
}

.tourism .content-item .header-title {
    padding: 1em;
    font-size: 100%;
}

.tourism .content-item .month {
    
	font-weight: bold;
	margin-bottom: .8em;
}



/*============================== 10-2. お知らせ
*/

.tourism #feature-section {
    border: 0;
    background: none;
    position: relative;
    padding: 0;
	margin-bottom: 5em;
}
.tourism #feature-section::after{ display: none; }

.tourism #feature-section .section-header {
    display: table;
    width: 100%;
    margin: 0;
    color: #fff;
	padding-bottom: 10px;
}
.tourism #feature-section .section-header::before,
.tourism #feature-section .section-header::after {
	display: none;
}
.tourism #feature-section .section-header .header-title,
.tourism #feature-section .header-content a {
    color: #fff;
    text-decoration: none;
}
.tourism #feature-section .header-content a::before {
    color: #fff;
    margin-right: .5em;
}

.tourism #feature-topics{
	display: block;
	padding: 0;
	width: 100%;
	background: #00A0CA;
	border: 10px solid #00A0CA;
	border-radius: 15px;
}
.tourism #feature-topics ul li:first-child {
    border-top: 0;
}
.tourism #feature-topics ul li a {
    padding-left: 0;
}

.tourism #feature-topics ul{
	background: #fff;
	border-radius: 10px;
	padding: 0 15px !important;
}


/*============================== 10-3. ジャンル別リスト
*/

.tourism #genre-section ul{
	text-align: center;
	margin-bottom: 2.5em !important;
}

.tourism #genre-section ul li{
	display: inline-block;
	position: relative;
	padding: 0;
	padding-left: 1.5em;
	line-height: 1.5;
}

.tourism #genre-section ul li::before{
	
	content: "\f0da"; /*fa-caret-right*/
	
	position: absolute;
	top: 0;
	left: 10px;
	color: #999;
  
	font-family:'FontAwesome';
	line-height: 1.5;
	
    font-size: 100%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*============================== 10-4. YouTube動画
*/

.tourism #video-section .section-header{
	padding-left: 140px;
	position: relative;
}

.tourism #video-section .section-header a{
	color: #000;
	text-decoration: none;
	vertical-align: middle;
}
.tourism #video-section .section-header img{
	display: inline-block;
	vertical-align: middle;

}
.tourism #video-section .section-header::before{
	content: '';
	display: block;
	border-radius: 0;
	background: transparent url(images/logo-youtube.png) no-repeat 50% 50%;
	background-size: contain;
	width: 120px;
	height: 30px;
	margin-top: -15px;
	position: absolute;
	top:50%;
	left: 0;
	transform:none;
}

.tourism #video-section .section-header::after {
	display: none;
}


.tourism #video-section .section-body{
	text-align: center;
}

.tourism #video-section iframe{
	display:inline-block;
}



/*============================== 10-5. 観光リンク・バナー
*/

.tourism #menu-content{}


.tourism #menu-content .menu-header { text-align: center; color: #666;}
.tourism #menu-content .menu-header .header-title { font-size: 140%; }

/*----------------------
観光リンク
*/

.tourism #menu-content .links{}

#menu-content .links .nav-content ul li{
	text-align: center;
}

#menu-content .links .nav-content ul li a {
    display: block;
    color: #369;
    padding: .5em;
    text-align: center;
    text-decoration: none;
	font-weight: bold;
	font-size: 100%;
}
#menu-content .links .nav-content ul li .tel::before{
	display: inline-block;
	margin-right: .2em;
	color: #00A0CA;
}

/*----------------------
バナー
*/

#menu-content .banners { margin: 30px 0; }

#menu-content .banners .menu-header { display: none; }

#menu-content .banners .nav-content ul,
#menu-content .banners .nav-content ul li{
	border: 0;
}

#menu-content .banners .nav-content ul li a {
    display: block;
    color: #00A0CA;
    padding: 0;
	margin: .5em 0;
    text-align: center;
    text-decoration: none;
}


/*============================================================================================== 11. 東伊豆町プロフィール
*/



/*----------------------
東伊豆町プロフィールページ専用ヘッダー
*/

.town-info-header {
	text-align: center;
	margin-bottom: 2.5em;
}

.town-info-header h1{
	color: #00A0CA;
	font-size: 180%;
}

.town-info-header .copy{
	position: relative;
	font-weight: bold;
	font-size: 140%;
	color: #000;
	padding-left: 70px;
	margin: 1.5em 0;
}
.town-info-header .copy::before{
	font-weight: normal;
	font-size: 240%;
	color: #00A0CA;
	position: absolute;
	top:50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
}



/*----------------------
セクションヘッダー
*/

.town-info .section-header{
	position: relative;
	display: table;
	margin: 5em auto 3em;
}
.town-info .section-header .header-title{
	color: #666;
	position: relative;
	z-index: 10;
}
.town-info .section-header::before,
.town-info .section-header::after {
	content: '';
	display: block;
	width:100px;
	height: 50px;
	position: absolute;
	top:0;
	left: 0;
	border-radius: 50%;
	background: rgba(187,221,239,.5);
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
}

.town-info .section-header::before{
	width:60px;
	height: 30px;
	top:-20px;
	left: -45px;
	
}
.town-info .section-header::after {
	width:100px;
	height: 50px;
	top:0;
	left: -30px;
}


/*----------------------
見出し
*/

.town-info #main .entry-content h2 {
    font-size: 140%;
    padding: 0;
    color: #666;
    background: none;
    border-left: 0;
}

.town-info  #main .entry-content h4 {
	display: block;
}


/*----------------------
レイアウト用
*/

.town-info .table {margin: 2em 0; }

.town-info figure{ padding: 0 2em;}

.town-info .no-table > .td > figure{ padding: 2em ; }




/*============================================================================================== 12. 情報配信メール
*/


.infomail #process-section{
	margin-top: 2em;
	padding-top: 1em;
	border-top : 1px solid #999;
}

.infomail #main .float .float-right {
    width: 30%;
}

.infomail #main .float-item{
	margin: 1em 0;
}

.infomail #main .item-thumbnail{
	margin-top: 1em;
}

.infomail #main .item-thumbnail img{
	border: 1px solid #666;
}

.infomail #main .item-body{
	overflow: hidden;
}

.infomail #main .item-body::before{
	content: attr(title);
	display: inline-block;
	padding: 0;
	background: #00A0CA;
	color: #fff;
	font-weight: bold;
	font-size: 130%;
	border-radius: 3em;
	width: 2.2em;
	height: 2.2em;
	line-height: 2.2em;
	text-align: center;
	float: left;
	margin-right: .5em;
}


/*============================================================================================== Ex. プラグイン設定
*/

/*------------------------------ カルーセル「slick」カスタマイズ
*/
/*
================================================== プラグイン
*/

.slick-arrow {
	cursor: pointer;
	position: absolute;
	
	display: block;
	bottom: 20px;
	top: auto;
	width: 120px;
	height: 80px;
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	transform: translate(0,0);
	z-index: 500;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 15px rgba(0,0,0,0.9);
	line-height: 1;
	font-size: 100%;
}
.slick-arrow:hover .fa{
	background: #069;
	color: #fff;
}
.slick-arrow:hover span{
	color: #fff;
}
.slick-arrow span,
.slick-arrow label
{
	display: block;
	position: relative;
	padding-bottom: 70px;
}
.slick-arrow .fa{
	position: absolute;
	left:50%;
	bottom: 0;
	width: 60px;
    height: 60px;
	background: #00a0ca;
	border: 2px solid #fff;
	border-radius: 30px;
	transform: translate(-50%,0);
	vertical-align: middle;
}
.slick-arrow .fa::before{
	font-size: 32px;
	line-height: 56px;
	text-shadow: none;
}

#btn-slide-toggle{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background: none;
	border: 0;
	outline: 0;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
#btn-slide-toggle label{
	display: block;
}
#btn-slide-toggle.play #label-play { display: none; }
#btn-slide-toggle.pause #label-pause { display: none; }

.slick-toggle{
	right: 200px;
}
.slick-prev {
    left: auto;
	right: 300px;
	
}
.slick-next {
    right: 100px;
}

.slick-prev:before,
.slick-next:before {
    content: '';
}

.slick-dots {
    position: absolute;
	top: 10px;
    bottom: auto;
	
    list-style: none;
    display: block;
    text-align: right;
    padding: 0;
	padding-right: 80px !important;
    margin: 0;
    width: 100%;
}

.slick-dots li {
    margin: 0 5px !important;
}

.slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0px;
    font-size: 0px;
    color: transparent;
    padding: 5px;
    cursor: pointer;
}

.slick-dots li button:before {
    display: block;
    content: "";
    width: 12px;
    height: 12px;
	background: #000;
	border-radius: 10px;
	
	border: 0;
    opacity: 0.25;
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	
}
.slick-dots li.slick-active button:before {
    color: black;
    opacity: 0.75;
	border: 2px solid rgba(255,255,255,1.00);
}





/*============================================================================================== Ex2. プリント設定
*/

@page {
	size: A4;
	margin: 8mm 5mm;
}

@media only print {

	body {
		zoom: 70%;
        -webkit-print-color-adjust: exact;
    }

	#header,
	#footer,
	#menu-content{
		display: none;
	}
	
	.entry #container .float .float-right,
	.entry #container .float .float-left {
    	width: 100%;
    	padding-right: 0;
		float: none;
	}
	
	.entry #main .entry-header .entry-term {
		left: 0;
	}
	
}

@media print and (-ms-high-contrast:none) {
    *::-ms-backdrop, body {
        zoom: 95%;
    }
}


/* =========

End of CSS

Copyright © Higashiizu Town., All Rights Reserved.

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


/*======== below added by k.omura ========*/

#feature-topics-list{
	vertical-align: top;
}

#feature-topics-list{
	
	background: #fff;
	padding: 1em;
	border-radius: 15px;
}

#feature-topics-list ul{
	list-style: none;
}
#feature-topics-list ul li{
	border-top:1px dotted #999;
	margin: 0;
}
#feature-topics-list ul li a{
	display: block;
	position: relative;
	padding: 1em 0;
	padding-left: 60px;
	text-decoration: none;
}
#feature-topics-list ul li a span.heading{
	color: #369;
	text-decoration: underline;
	font-weight: bold;
	line-height: 1.5;
}
#feature-topics-list ul li a span.date{
	display: block;
	color: #666;
	font-size: 80%;
	margin-bottom: .8em;
}
#feature-topics-list ul li a::before{
	background: #00a0ca;
	color: #fff;
	display: block;
	text-align: center;
	font-size: 24px;
	line-height: 40px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	left: 5px;
}