@charaset "UTF-8";

/***** 全体 *****/

.container {
	background-image: none;
	}
.contents {
	width: 100%;
	float: none;
	}
.side,
.about-appendix {
	display: none;
	}

#home {
	margin-top:50px;
}

section {
	border-bottom: solid 2px #2569b4;
	padding: 40px 0 40px 0;
	margin: 0;
	}

section.page-title {
	border-bottom: none;
	background-image: url(../images/home/main.png);
	background-repeat: no-repeat;
	background-position: 105% 30px;
	background-size: 600px;
	padding: 0;
	}
section.spec {
	border: none;
	padding: 40px 0 0 0;
	}
section:last-child {
	border: none;
	padding: 30px 0 0 0;
	}
section.detail-contents {
	border-bottom: none;
	padding-bottom: 0;
	}
	
figure {
	text-align: center;
	}
figcaption {
	font-size: 90%;
	color: #888;
	margin-top: 10px;
	}

.app-title {
	height: 220px;
	}
.title-img {
	display: none;
	}
	
.app-title {
	height: 260px;
	display: table-cell;
	vertical-align: middle;
	}
h1 {
	color: #153b8a;
	font-size: 400%;
	height: auto;
	width: auto;
	padding: 0;
	margin: 20px 0 10px 0;
	text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;
	}
h1 .topic-title {
	background-image: url(../app/images/icon.png);
	background-position:0 center;
	padding-left: 105px;
	}
.title-catch02 {
	font-size: 200%;
	font-weight: bold;
	text-align: center;
	color: #fff;
	display: block;
	width: 100%;
	background-color: #38afff;
	padding: 0.5em 0  0.4em 0;
	margin-bottom: 0.7em;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}



section.page-title p {
	width: 50%;
	text-shadow: 0 0 5px #fff;
	text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;
	}

.summary {
	color: #3768BD;
	}

h2 {
	color: #153b8a;
	background: none;
	font-size: 180%;
	line-height: 140%;
	padding: 0;
	margin: 0 0 20px 0;
	text-shadow: 0 0 10px #fff;
	}
.down-grade h2 {
	font-size: 140%;
	}
		
/*.list-manner {
	background-color: #b27c92;
	}
.list-livinginfo {
	background-color: #95abcc;
	}
.list-trivias {
	background-color: #9dac7e;
	}*/

.grid-4 {
	float: left;
	margin-left: 3%;
	}

.grid-4 {
	width: 22.75%;
	}
	
.grid-2:first-child,
.grid-3:first-child,
.grid-4:first-child {
	margin-left: 0;
	}

/*.frame {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.5);
	box-shadow: 0 0 1px rgba(0,0,0,0.5)
	}*/


/*****　動画　*****/

.box-video {
	background-color: #b5e4ff;
	text-align: center;
	padding: 10px 100px;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}
section.page-title p.go-movie {
	width: 100%;
	font-size: 90%;
	line-height: 140%;
	text-shadow: none;
	}


/*****　仕様　*****/

.table-info th {
	width: 20%;
	background-color: #eee;
	}

/*****　ストアバナー　*****/

.store-banner {
	/*border: solid 1px #ccc;*/
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}


/*****　ドリカムバナー　home　*****/


section.dct-banner {
	padding: 20px 0 10px 0;
	}


/*****　スマホ　*****/


.img-sp {
	margin-top: 30px;
	height: 544px;
	overflow: hidden;
	}
.count-list {
	position: relative;
	left: 0;
	bottom: 120px;
	background-color: #ff9900;
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	font-size: 120%;
	line-height: 110%;
	width: 120px;
	height: 120px;
	
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	}
.count-list span {
	font-size: 200%;
	}


/*****　タブ　*****/

.detail-tab{
	margin-top: -30px;
	}

.ui-tabs .ui-tabs-nav li {
	float: left;
	width: 31.333%;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	font-size: 120%;
	margin-left: 3%;
	
	-moz-border-radius:  12px 12px 0 0;
	-webkit-border-radius:  12px 12px 0 0;
	border-radius: 12px 12px 0 0;
	}
.ui-tabs .ui-tabs-nav li:first-child {
	margin-left: 0;
	}
.tab-manner {
	border: solid 2px #b07a91;
	}
.tab-livinginfo {
	border: solid 2px #94abcb;
	}
.tab-trivias {
	border: solid 2px #99aa7d;
	}
.tab-manner,
.tab-livinginfo,
.tab-trivias {
	border-bottom: none;
	-moz-border-radius:  12px 12px 0 0;
	-webkit-border-radius:  12px 12px 0 0;
	border-radius: 12px 12px 0 0;
	}

.ui-tabs-nav a {
	display: block;
	color: #333;
	background-color: #fff;
	height: 50px;
	outline: 0; /* prevent dotted border in Firefox */
	text-shadow: none;
	text-decoration: none;
	}
.ui-tabs-nav a:hover.tab-manner {
	background-color: #f7e4ec;
	}
.ui-tabs-nav a:hover.tab-livinginfo {
	background-color: #e0eaf8;
	}
.ui-tabs-nav a:hover.tab-trivias {
	background-color: #e9f1dc;
	}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .tab-manner {
	background-color: #b07a91;
	}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .tab-livinginfo {
	background-color: #94abcb;
	}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .tab-trivias {
	background-color: #99aa7d;
	}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
	color: #fff;
	}


/*****　コンテンツ解説　*****/

.detail-manner {
	border-top: solid 2px #b07a91;
	border-bottom: solid 2px #b07a91;
	background-color: #faf3f3;
	}
.detail-livinginfo {
	border-top: solid 2px #94abcb;
	border-bottom: solid 2px #94abcb;
	background-color: #f3f5f8;
	}
.detail-trivias {
	border-top: solid 2px #99aa7d;
	border-bottom: solid 2px #99aa7d;
	background-color: #f9fcf2;
	}
.detail-manner,
.detail-livinginfo,
.detail-trivias {
	padding: 20px 2%;
	}

.detail-manner P:first-child,
.detail-livinginfo P:first-child,
.detail-trivias P:first-child {
	font-size: 160%;
	line-height: 160%;
	font-weight: bold;
	padding: 0 2% 10px 2%;
	}
.detail-manner P:first-child {
	color: #b0367c;
	}
.detail-livinginfo P:first-child {
	color: #2c51a6;
	}
.detail-trivias P:first-child {
	color: #408723;
	}
	
.detail-contents .grid-2:first-child {
	margin-left: 0;
	}
.detail-contents .grid-2 {
	text-align: center;
	}
.detail-contents .grid-2 h3 {
	background-color: #fff382;
	/*background-color: #ecb8c8;*/
	width: 90%;
	padding: 10px 0;
	margin:auto;
	margin-bottom: 10px;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}
.detail-contents .grid-2 p {
	text-align: left;
	width: 90%;
	margin:auto;
	}
.detail-contents .grid-2 img {
	width: 90%;
	margin-bottom: 10px;
	}
.detail-contents .grid-row {
	margin-bottom: 40px;
	}

/*　項目移動ボタン　*/

.catch {
	float: left;
	width: 70%;
	}
.icon-topic {
	float: right;
	width: 25%;
	font-size: 90%;
	}
.icon-topic a {
	padding: 5px 0 5px 10px;
	}
.icon-topic.manner a {
	background-color: #b27c92;
	}
.icon-topic.livinginfo a {
	background-color: #95abcc;
	}
.icon-topic.trivias a {
	background-color: #9dac7e;
	}


/*****　項目一覧　*****/

h2.list {
	font-size: 140%;
	border-top: solid 1px #ccc;
	text-shadow: none;
	padding-top: 20px;
	margin-bottom: 0;
	
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	}
.detail-manner h2.list {
	color: #aa5b7d;
	border-color: #b07a91;
	}
.detail-livinginfo h2.list {
	color: #6188c1;
	border-color: #94abcb;
	}
.detail-trivias h2.list {
	color: #7a9a49;
	border-color: #99aa7d;
	}

.detail-contents article {
	padding: 0;
	}
h3 {
	font-size: 100%;
	}
h3.no-list,
ul.home-list {
	border-bottom: dotted 1px #ccc;
	border-bottom : dotted 1px rgba(0,0,0,0.2);
	padding-bottom: 5px;
	margin-bottom: 10px;
	}
.no-list:last-child,
ul.home-list:last-child {
	border-bottom: none;
	padding-bottom: 10px;
	}
.home-list li {
	display: block;
	float: left;
	line-height: 18px;
	width: 20%;
	font-size: 90%;
	padding-left: 0;
	}

.list-row h3 {
	width: 32%;
	float: left;
	}
.list-row h3 {
	margin-right: 2%;
	}
.list-row h3:nth-child(3) ,
.list-row h3:nth-child(6),
.list-row h3:nth-child(9),
.list-row h3:nth-child(12)  {
	margin-right: 0;
	}
.list-row h3.no-list:last-child {
	border-bottom: dotted 1px #ccc;
	border-bottom : dotted 1px rgba(0,0,0,0.2);
	padding-bottom: 5px;
	margin-bottom: 5px;
	}
	
.home-list.prefecture li {
	width: 10%;
	}


.ad-bottom-away {
	display: none;
	}


@media (min-width: 1024px) {	

/*　ストアアイコン　*/
.banner-row {
	background-position: 18.5% 0;
	background-size: 12%;
	}
.banner-row img {
	width: 50%;
	}

}


/*****　スマホ・タブレットでの非表示対応　*****/

@media (max-width: 1024px) {

section,
h1
/*.ad-header,*/
/*.ad-bottom*/ {
	display: block;
	}
header,
footer,
.contents {
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	}
section {
	width: 100%;
	}
.contents {
	float: none;
	}

section.page-title {
	background-size: 57%;
	}
section.page-title p {
	width: 60%;
	}
	
.app-title {
	height: 250px;
	}
h1 {
	font-size: 360%;
	margin: 10px 0 10px 0;
	}
h1 .topic-title {
	padding-left: 105px;
	}
.title-catch02 {
	font-size: 180%;
	padding: 0.5em 0  0.4em 0;
	margin-bottom: 0.7em;
	}

h2 {
	font-size: 150%;
	}


/*****　スマホ　*****/


.img-sp {
	height: 534px;
	}


article {
	padding: 10px;
	}
.home-list li {
	line-height: 18px;
	width: 33.3%;
	}
.home-list.prefecture li {
	width: 16.66%;
	}

}


@media (max-width: 905px) {

/*****　スマホ　*****/

.img-sp {
	height: 520px;
	}

}

@media (max-width: 800px) {

/*****　スマホ　*****/

.img-sp {
	height: 460px;
	}

}

@media (max-width: 768px) {
	
	
/****　グリッド　*****/

section .detail-manner .grid-2,
section .detail-livinginfo .grid-2,
section .detail-trivias .grid-2 {
	float: left;
	width: 50%;
	}
.grid-2 + .grid-2 {
	margin-top: 0;
	padding-left: 0;
	}



section {
	padding: 20px 0 20px 0;
	}

section.page-title {
	background-size: 58%;
	background-position: 108% 20px;
	}


.app-title {
	height: 200px;
	}
h1 {
	font-size: 300%;
	margin: 20px 0 5px 0;
	}
h1 .topic-title {
	background-size: 80px;
	padding-left: 95px;
	}
.title-catch02 {
	font-size: 160%;
	}

section.page-title p {
	width: 100%;
	}

.detail-contents .grid-3 {
	width: 32.66%;
	margin-left:1%;
	}
.detail-contents .grid-3:first-child {
	margin-left: 0;
	}



/*****　動画　*****/

.box-video {
	padding: 10px 70px;
	}


/*****　スマホ　*****/

.img-sp {
	margin-top: 20px;
	height: 454px;
	}
.count-list {
	bottom: 110px;
	font-size: 110%;
	line-height: 110%;
	width: 110px;
	height: 110px;
	
	-moz-border-radius: 55px;
	-webkit-border-radius: 55px;
	border-radius: 55px;
	}
.count-list span {
	font-size: 180%;
	}


/*****　タブ　*****/

.ui-tabs .ui-tabs-nav li {
	width: 32.66%;
	font-size: 110%;
	margin-left: 1%;
	}

/*****　コンテンツ解説　*****/

.detail-contents .grid-2 h3 {
	width:95%;
	padding: 10px 0;
	}
.detail-contents .grid-2 p,
.detail-contents .grid-2 img {
	width: 95%;
	}

	
.detail-livinginfo P:first-child,
.detail-manner P:first-child,
.detail-trivias P:first-child {
	font-size: 120%;
	}

/*.home-list li {
	width: 31%;
	}*/

.detail-manner,
.detail-livinginfo,
.detail-trivias {
	padding: 20px 1%;
	}

h2.list {
	margin-bottom: 20px;
	}

/*　項目移動ボタン　*/

.catch {
	width: 65%;
	}
.icon-topic {
	width: 30%;
	font-size: 80%;
	}
.icon-topic a {
	padding: 3px 0 3px 8px;
	}
	

/*****　共通解説　*****/

.down-grade h2 {
	font-size: 120%;
	}

}


/*****　スマホ・タブレットでの非表示対応　*****/

@media (max-width: 600px) {

section.page-title {
	background-position: 108% 15px;
	background-size: 55%;
	}
	
	
.app-title {
	height: 200px;
	}
h1 {
	font-size: 260%;
	margin: 20px 0 0 0;
	}
h1 .topic-title {
	background-size: 80px;
	padding-left: 95px;
	}
.title-catch02 {
	font-size: 140%;
	}
	
h2 {
	margin-bottom: 15px;
	}

/*****　動画　*****/

.box-video {
	padding: 10px;
	}


/*****　スマホ　*****/

.img-sp {
	margin-top: 20px;
	height: 360px;
	}
.count-list {
	bottom: 85px;
	font-size: 100%;
	line-height: 100%;
	width: 90px;
	height: 90px;
	
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	}
.count-list span {
	font-size: 160%;
	}
	

/*****　タブ　*****/

.ui-tabs .ui-tabs-nav li {
	font-size: 100%;
	line-height: 40px;
	}

/*****　コンテンツ解説　*****/

.detail-contents .grid-2 h3 {
	font-size: 100%;
	}

.ui-tabs-nav a {
	height: 40px;
	}

/*　項目移動ボタン　*/

.catch {
	width: 55%;
	}
.icon-topic {
	width: 40%;
	}


/*****　項目一覧　*****/

h2.list {
	font-size: 120%;
	}
.detail-contents h2 {
	padding-left: 1%;
	}
.detail-contents article {
	border-bottom: none;
	padding: 0 1%;
	}


/*****　解説・共通　*****/

.detail-common {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
	}
.detail-common.down-grade {
	border-bottom: solid 2px #2569b4;
	padding-top: 0;
	margin-bottom: 0;
	}
.detail-common .grid-2,
.detail-common .grid-3 {
	float: none;
	width: 100%;
	border-bottom: solid 1px #ccc;
	padding-bottom: 2%;
	margin: 0;
	margin-bottom: 20px;
	}
.detail-common .grid-3:last-child {
	border-bottom: none;
	padding-bottom: 0px;
	}
.detail-common .grid-2 img {
	width: 60%;
	}
.detail-common .grid-3 p {
	float: left;
	width: 50%;
	}
.detail-common .grid-3 img {
	width: 45%;
	float: right;
	}
.detail-common .grid-3.no-img p {
	float: none;
	width: 100%;
	}

.down-grade h2 {
	font-size: 140%;
	}

}


/*****　スマホ・タブレットでの非表示対応　*****/

@media (max-width: 480px) {

section.page-title {
	background-image: none;
	}
.title-img {
	display: block;
	margin-top: 20px;
	}

.app-title {
	width: 100%;
	display: block;
	height: auto;
	margin-bottom: 20px;
	}
h1 {
	font-size: 300%;
	line-height: 80px;
	margin: 20px 0 10px 0;
	}
h1 .topic-title {
	background-size: 80px;
	margin: auto;
	display: block;
	width: 240px;
	}
.title-catch02 {
	font-size: 160%;
	width: 330px;
	margin: auto;
	}
	
h2 {
	font-size: 130%;
	}


/*****　スマホ　*****/

.img-sp {
	margin-top: 20px;
	height: 294px;
	}
.count-list {
	bottom: 75px;
	font-size: 90%;
	line-height: 100%;
	width: 80px;
	height: 80px;
	
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	}
.count-list span {
	font-size: 140%;
	}


/*****　コンテンツ解説　*****/

.detail-manner P:first-child,
.detail-livinginfo P:first-child,
.detail-trivias P:first-child {
	font-size: 110%;
	width: 96%;
	margin: 0;
	}
	
.detail-contents .grid-2 {
	float: none;
	width: 100% !important;
	margin-left: 0 !important;
	margin-bottom: 20px;
	}
.detail-contents .grid-2 h3 {
	width: 90%;
	padding: 10px 0;
	}
.detail-contents .grid-2 p,
.detail-contents .grid-2 img {
	width: 90%;
	}

.detail-manner .grid-row {
	margin-bottom: 0;
	}

/*　項目移動ボタン　*/

.catch,
.icon-topic {
	float: none;
	width: 100%;
	}
.icon-topic {
	margin-bottom: 20px;
	}


/*****　項目一覧　*****/

h2.list {
	margin-bottom: 10px;
	}
	
.home-list li {
	font-size: 90%;
	}
.home-list li {
	width: 50%;
	}
.home-list.prefecture li {
	width: 16.66%;
	}

h3,
.no-child li a {
	font-size: 100%;
	}
	
.list-row h3 {
	width:49%;
	float: left;
	}
.list-row h3 {
	margin-right: 0;
	}
.list-row h3:nth-child(odd) {
	margin-right: 2%;
	}

.home-list.prefecture li {
	width: 16.666%;
	}
	

/*****　解説・共通　*****/

.down-grade h2 {
	font-size: 130%;
	}

/*****　仕様　*****/

.table-info th {
	width: 30%;
	}

}


@media (max-width: 420px) {

/*****　スマホ　*****/

.img-sp {
	height: 240px;
	}

}

/*****　スマホ・タブレットでの非表示対応　*****/

@media (max-width: 380px) {

header,
footer,
.contents {
	width: 94%;
	}

section.page-title {
	background-image: none;
	}

h1 {
	font-size: 300%;
	line-height: 80px;
	margin: 10px 0 5px 0;
	}
h1 .topic-title {
	background-size: 70px;
	margin: auto;
	display: block;
	width: 220px;
	}
.title-catch02 {
	font-size: 120%;
	width: 320px;
	margin: auto;
	}
	

h2 {
	font-size: 120%;
	}

.home-list li {
	width: 50%;
	font-size: 85%;
	}
.home-list.prefecture li {
	width: 25%;
	}


/*****　スマホ　*****/

.img-sp {
	display: none;
	}

/*****　タブ　*****/

.detail-tab{
	margin-top: 0;
	}

/*****　解説・共通　*****/

.detail-common .grid-2 img {
	width: 70%;
	}
.detail-common .grid-3 p {
	float: none;
	width: 100%;
	}
.detail-common .grid-3 img {
	float: none;
	width: 55%;
	}
.detail-common .grid-3.no-img p {
	float: none;
	width: 100%;
	}

.down-grade h2 {
	font-size: 120%;
	}

}


@media (max-width: 320px) {

h1 {
	font-size: 260%;
	line-height: 80px;
	margin: 10px 0 5px 0;
	}
h1 .topic-title {
	background-size: 70px;
	margin: auto;
	display: block;
	width: 190px;
	}
.title-catch02 {
	font-size: 120%;
	width: 290px;
	margin: auto;
	}

.list-row h3 {
	width: 100%;
	}

}