@charset "utf-8";
/*
==================================================

    CSS File Name - layout.css
    Last-updated: 2010-05-14
	
    +1: Formatting Reset
    +2: Redefine
	+3: Float, Clear, Align Set, Valign Set
	+4: body
	+5: #wrap
	+6: #container
	+7: #header
	+8: #mainBody
	+9: #footer

==================================================
*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#trend_notification_app {
	width: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
	z-index: -999999;
	position: absolute;
	bottom: 0;
	left: 0;
}

/*--------------------------------------------------
+1: Formatting Reset
==================================================*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
div,
p,
pre,
address,
blockquote,
ul,
ol,
dl,
dt,
dd,
form,
fieldset {
	display: block;
	margin: 0;
	padding: 0;
}
p {
}
strong,
em {
	font-weight: bold;
}
ol,
ul {
	list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-weight: normal;
}
address,
em {
	font-style: normal;
}
img {
	width: auto;
	height: auto;
	max-width: 100%;
	border: none;
	vertical-align: bottom;
}
table,
thead,
tbody,
tfoot,
tr,
th,
td,
caption,
col,
colgroup {
	text-align: inherit;
	line-height: inherit;
	font-size: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
thead {
	display: table-header-group;
}
tbody {
	display: table-row-group;
}
tfoot {
	display: table-footer-group;
}
tr {
	display: table-row;
}
th,
td {
	display: table-cell;
}
caption {
	display: table-caption;
}
col {
	display: table-column;
}
colgroup {
	display: table-column-group;
}
.pb20 {
	padding-bottom: 20px;
}

input,
select,
textarea,
button {
	font-size: inherit;
	line-height: inherit;
}
button {
	cursor: pointer;
}
body {
	text-align: left;
}

.onlysp,.none{display:none;}
@media screen and (max-width: 780px) {
	.onlypc{display:none;}
	.onlysp{display: block;}
}

/*--------------------------------------------------
+2: Redefine
==================================================*/
a {
	text-decoration:underline;
}

a:link {
	text-decoration:underline;
}

a:visited {
	text-decoration:underline;
}

a:hover {
	text-decoration:none;
}

a:active {
	text-decoration:underline;
}


/* clearfix
-------------------------------------------------*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}/*IE7用*/

/* Hides from IE-mac \*/
* html .clearfix { height:1%;}
.clearfix { display:block;}
/* End hide from IE-mac */

/* alpha
-------------------------------------------------*/
a.alpha:hover img {  
	opacity:0.8;  
	filter: alpha(opacity=80);  
	-ms-filter: "alpha( opacity=80 )";  
	background: #fff;  
} 

/*--------------------------------------------------
+3: Float, Clear, Align Set, Valign Set
==================================================*/
.clear {
	font-size: 1px;
	height: 1px;
	clear: both;
}
.left{
	float:left;
	display:inline;
}

.right{
	float:right;
	display:inline;
}
.alignCenter {
	text-align: center;
}
.alignLeft {
	text-align: left;
}
.alignRight {
	text-align: right;
}
.valignTop {
	vertical-align: top;
}
.valignMiddle {
	vertical-align: middle;
}
.valignBottom {
	vertical-align: bottom;
}
/*----------------------------------------------------------------------*/
/*--------------------------------------------------
+4: body
==================================================*/
body {
	color: #333333;
	font-family:'ＭＳ Ｐゴシック','MS PGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;
	font-size: 12px;
	line-height:1.5;
}
.fo10 { font-size:10px; }
.fo11 { font-size:11px; }
.fo13 { font-size:13px; }
.fo14 { font-size:14px; }
.fo15 { font-size:15px; }
/*--------------------------------------------------
+5: #wrap
==================================================*/
div#wrap {
	width:100%;
	margin:0 auto;
}
/*--------------------------------------------------
+6: #container
==================================================*/

div#container{
	width:970px;
	margin:0 auto;
}
/*----------------------------------------------------------------------*/

/*--------------------------------------------------
+7: #header
==================================================*/
div#header {
	width:970px;
	height:170px;
	position:relative;
}
div#header #logo {
	position:absolute;
	top:41px;
	left:0;
}
div#header #txt {
	position:absolute;
	top:8px;
	left:0;
}
div#header #htxt {
	position:absolute;
	top:59px;
	left:292px;
}
div#header #himg {
	position:absolute;
	top:119px;
	left:0;
}
div#header #search {
	position:absolute;
	top:7px;
	right:0;
}
div#header #search dl {
	width:158px;
	overflow:hidden;
	clear:both;
}
div#header #search dl dt {
	float:left;
	width:117px;
	height:17px;
	border:1px solid #aeaeae;
	margin-top:1px;
}
div#header #search dl dt input {
	width:112px;
	background:none;
	border:none;
	height:14px;
}
div#header #search dl dd {
	float:right;
}
div#header #search dl dd img {
	vertical-align:top;
}
div#header #hnavi {
	position:absolute;
	top:0;
	left:540px;
}
div#header #hnavi li {
	float:left;
	padding-right:12px;
}
div#header #htel {
	position:absolute;
	top:48px;
	right:0;
	width: 400px;
}
div#header #navi {
	position:absolute;
	top:150px;
	right:0;
}
div#header #navi li {
	display:inline;
	padding-left:24px;
	color:#333333;
}
div#header #navi li a {
	color:#333333;
	text-decoration:none;
}
div#header #navi li a:hover {
	text-decoration:underline;
}
.menuIcon {
	display: none;
}
/*----------------------------------------------------------------------*/
/*--------------------------------------------------
+8: #mainBody
==================================================*/
.contTtl {
	width: 100%;
	border-bottom: 3px solid #D5D5D5;
	position: relative;
	margin-bottom: 10px;
	padding: 0 10px 5px;
	font-size: 15px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-weight: bold;
	display: flex;
	align-items: center;
}
.contTtl::before {
	content: "";
	display: block;
	width: 30%;
	height: 3px;
	background: #AF1A2E;
	position: absolute;
	bottom: -3px;
	left: 0;
	z-index: 1;
}
.contTtl span {
	display: inline-block;
	color: #818181;
	margin-right: 15px;
	position: relative;
}

div#mainBody {
	width:970px;
	padding:0 0 60px 0;
	clear:both;
	overflow:hidden;
}
div.mainContent {
	width:710px;
	float:right;
}
.telBox {
	width:670px;
	padding:0 20px 62px 20px;
	overflow:hidden;
	clear:both;
}
.telBox::after {
	content: "";
	display: block;
	clear: both;
}
.telBox.pb0 {
	padding-bottom:0px;
}
.telBox .img {
	float:right;
}
.telBox .tel {
	padding:40px 0 13px 0;
}
.telBox ul {
	display: flex;
}
.telBox ul li {
	width: 166px;
	margin-right:6px;
}
#pnavi {
	width:710px;
	height:42px;
	overflow:hidden;
	clear:both;
	text-align:right;
	padding:8px 0 0 0;
}
#pnavi li {
	display:inline;
	padding-left:20px;
	color:#979797;
}
#pnavi li a {
	color:#979797;
	text-decoration:none;
}
#pnavi li a:hover {
	text-decoration:underline;
}
#pnavi li span {
	text-decoration:underline;
}
div.subContent {
	width:240px;
	float:left;
}
div.subContent .stit {
	padding-top:14px;
}
.caution a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background: #E40011;
	color: #fff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",'Noto Sans JP', sans-serif ,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 15px 10px;
	border-radius: 5px;
	text-decoration: none;
	margin: 50px 0 30px;
	transition: .2s;
}
.caution a::before,
.caution a::after {
	content: "";
	display: block;
	background: url(../../images/top/icon_note.svg) center center no-repeat;
	background-size: contain;
	width: 19px;
	aspect-ratio: 19/17;
}
.caution a::after {
	background-image: url(../../images/top/icon_blank.svg);
	width: 15px;
}
.caution a:hover {
	background: #000;
}

/* .snavi */
.snavi {
	width:240px;
	overflow:hidden;
	clear:both;
	padding:6px 0 0 0;
	background:url(../images/bg_sub_top.png) no-repeat left top;
}
.snavi ul {
	width:240px;
	padding:0 0 6px 0;
	background:url(../images/bg_sub_bot.png) no-repeat left bottom;
}
.snavi ul li {
	text-align:center;
	background-color:#e6e6e6;
}
/* .sadd */
.sadd {
	padding:30px 0 0 20px;
	width:220px;
	overflow:hidden;
	clear:both;
}
.sadd .txt {
	padding:10px 0 10px 0;
	color:#808080;
}
.sadd .txt a {
	color:#172F6C;
	text-decoration:none;
}
.sadd .txt a:hover {
	text-decoration:underline;
}
.sadd .txt a.mail {
	color:#808080;
}
/*----------------------------------------------------------------------*/
/*--------------------------------------------------
+9: #footer
==================================================*/
div#footer {
	width:100%;
	margin:0 auto;
	clear:both;
	background:url(../images/bg_footer.jpg) repeat-x left top;
	min-width:970px;
}
#finner {
	width:970px;
	height:388px;
	position:relative;
	margin:0 auto;
}
#finner .pagetop {
	width: 105px;
	position:absolute;
	top:-36px;
	right:4px;
}
#finner dl {
	float:left;
	margin:0 40px;
	padding:15px 0 0 0;
}
#finner dl dt {
	background-color:#dae2e4;
	padding:3px 0 2px 20px;
	margin-bottom:7px;
}
#finner dl dd {
	padding:0 0 0 10px;
	line-height:1.9;
	font-size:11px;
}
#finner dl a {
	color:#333333;
	text-decoration:none;
}
#finner dl a:hover {
	text-decoration:underline;
}
#finner dl.w145 {
	width:145px;
}
#finner dl.w210 {
	width:210px;
}
#finner dl.w150 {
	width:150px;
}
#finner dl.last {
	margin-right:0px;
}
#finner #flogo {
	position:absolute;
	top:245px;
	left:29px;
}
#finner #ftxt {
	position:absolute;
	top:263px;
	left:302px;
}
#finner #fimg {
	position:absolute;
	top:319px;
	left:29px;
}
#finner #ftel {
	width: 398px;
	position:absolute;
	top:245px;
	right:30px;
}
#finner #copyright {
	position:absolute;
	bottom:8px;
	left:0;
	color:#FFFFFF;
	width:970px;
	text-align:center;
}

.l_bn {
	background-color:#E40011;
	color:#FFF;
	font-size:14px;
	text-align:center;
	padding:5px;
}
.mt15 {
	margin-top: 15px;
}
.mt20{
	margin-top:20px;
	}
.mt10{
	margin-top:10px;
	}
.mb10{
	margin-bottom:10px;
	}
.spMenu {
	display: none;
}
/*-----------Flexbox-----------*/
.d-flex {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
.f-wrap {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.f-nowrap {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.jc-start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
.jc-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.jc-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.jc-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.ai-start {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
.ai-end {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}
.ai-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.ac-center {
	-ms-flex-line-pack: center;
	align-content: center;
}
.order-1 {
	-webkit-box-ordinal-group:2;
	-ms-flex-order:1;
	order:1;
}
.order-0 {
	-webkit-box-ordinal-group:1;
	-ms-flex-order:0;
	order:0;
}
.box-borderbox {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.flex-center {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
}
.flex-center > * {width: 100%;}
.row-r {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

@media screen and (max-width: 780px) {
	body {
		min-width: 350px;
	}
	body.active {
    overflow: hidden;
	}
	div#container {
		width: 100%;
	}
	.fo11 {
		font-size: 12px;
	}
	
	/*header
	---------------------------------------*/
	div#header {
		width: 100%;
		height: auto;
		padding: 10px;
		padding-top: 23px;
	}
	div#header * {
		position: static!important;
	}
	div#header #htxt,
	div#header #htel,
	div#header #search,
	div#header #navi,
	div#header #hnavi {
		display: none;
	}
	div#header #logo {
		position: static;
		max-width: 100%;
		margin-bottom: 10px;
	}
	div#header #logo img {
		max-height: 38px;
	}
	div#header #txt {
		font-size: 10px;
		position: absolute!important;
		width: 100%;
		top: 3px;
		left: 0;
		right: 0;
		padding: 0 10px;
	}
	div#header #himg {
	}
	
	
	/*cont
	---------------------------------------*/
	body {
		background: #fff!important;
	}
	div#mainBody {
		width: 100%;
	}
	div.mainContent {
		padding: 0 10px;
		width: 100%;
		overflow: hidden;
	}
	div.subContent {
		width: 100%;
		margin-top: 40px;
	}
	#pnavi {
		width: 100%;
		text-align: left;
	}
	#pnavi li {
		padding: 0 5px 0 0;
		font-size: 11px;
	}
	.telBox {
		width: 100%;
		text-align: center;
		padding: 0 10px
	}
	.telBox .img {
		max-width: 200px;
		margin: 0 auto 15px;
		float: none;
	}
	.telBox .tel {
		padding: 0 0 10px;
	}
	.telBox ul {
		display: flex;
		justify-content: space-between
	}
	.telBox ul li {
		width: 49%;
		display: block;
		padding: 0;
	}
	.telBox ul li img {
		width: 100%;
		height: auto;
	}
	.contTtl {
		display: block;
		font-size: 16px;
		padding: 0 0 5px;
		margin-bottom: 15px;
	}
	.contTtl::before {
		width: 40%;
	}
	.contTtl span {
		font-size: 80%;
	}
	.caution a {
		font-size: 14px;
	}
	.caution a::before {
		width: 24px;
	}
	.caution a::after{
		width: 20px;
	}

	/*subContent
	---------------------------------------*/
	div.subContent .stit {
		text-align: center;
		padding-bottom: 10px;
		padding-left: 15px;
	}
	.snavi {
		width: 100%;
		background: #e6e6e6;
		padding: 5px;
	}
	.snavi ul {
		width: 100%;
		background: none;
		padding: 0;
	}
	.snavi._01,div.subContent .stit,.snavi {
		display: none;
	}
	.snavi._01 {
		background: #fff;
	}
	.snavi._01 ul {
		max-width: 180px;
		margin: 0 auto;
	}
	.snavi._02 ul {
		display: flex;
		flex-wrap: wrap;
	}
	.snavi._02 li {
		width: 50%;
	}
	.sadd {
		width: 100%;
		padding: 20px 10px 15px;
		position: relative;
		border-top: 1px solid #dae2e4;
	}
	.sadd .img._01 {
		text-align: center;
		position: absolute;
		top: 50px;
		right: 10px;
		width: 48%;
		max-width: 165px;
	}

	.sideBnr {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		position: relative;
	}
	.sideBnr > * {
		width: 49%;
		margin-right: 2%;
		margin-top: 10px;
	}
	.sideBnr > *:nth-of-type(even) {
		margin-right: 0;
	}
	.l_bn {
		font-size: 13px;
		line-height: 1.3;
		padding: 8px 0 0 
	}
	/*footer
	---------------------------------------*/
	div#footer {
		min-width: inherit;
		background: #fff;
	}
	#finner {
		width: 100%;
		height: auto;
	}
	#finner * {
		position: static;
	}
	#finner #flogo,
	#finner #ftxt,
	#finner #fimg,
	#finner #ftel {
		position: static;
	}
	#finner dl {
		width: 100%!important;
		float: none;
		margin: 0!important;
	}
	#finner dl dt,
	#finner dl dd {
		font-size: 13px;
		padding-top: 5px;
	}
	#finner dl dt {
		padding: 10px 20px;
		margin-bottom: 0;
		position: relative;
	}
	#finner dl dt::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 7px 0 7px;
		border-color: #4260A0 transparent transparent transparent;
		position: absolute;
		top: 50%;
		right: 20px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		z-index: 5;
		transition: .2s;
	}
	#finner dl dt.active::after {
		-webkit-transform: translateY(-50%) scale(1,-1);
		-ms-transform: translateY(-50%) scale(1,-1);
		transform: translateY(-50%) scale(1,-1);
	}
	#finner dl dd li {
		margin-top: 5px;
		padding: 5px
	}
	#finner dl dd li:not(:last-of-type) {
		border-bottom: 1px solid #dae2e4;
	}
	.fWrap {
		text-align: center;
		padding: 15px 10px;
		border-top: 2px solid #4260A0
	}
	#finner #flogo {
		max-width: 160px;
		margin: 0 auto;
	}
	#finner #ftel {
		width: 100%;
		margin-top: 10px;
	}
	#finner .pagetop {
		right: 0;
	}
	#finner #copyright {
		position: static;
		width: 100%;
		background: #172F6F;
		padding: 10px
	}
	.menuIcon {
		position: fixed;
		top: 16px;
		right: 15px;
		width: 30px;
		height: 22px;
		z-index: 99999;
		cursor: pointer;
		display: block;
		transition: .25s ease-in;
	}
	.menuIcon::before {
    content: "";
    display: block;
    background: #4260A0;
    width: 60px;
    height: 54px;
    position: absolute;
    right: -15px;
    top: -16px;
    z-index: -1;
	}
	.menuIcon span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		z-index: 10;
		transition: .2s;
	}
	.menuIcon span:nth-of-type(1) {top: 0px;}
	.menuIcon span:nth-of-type(2) {top: 10px;	}
	.menuIcon span:nth-of-type(3) {bottom: 0px;	}
	.menuIcon.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}
	.menuIcon.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menuIcon.active span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(-45deg);
		transform: translateY(-10px) rotate(-45deg);
	}
	#nav {
		position: fixed!important;
    top:0;
		bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
		z-index: 99990;
    background: #fff;
    padding: 15px 5% 30px;
		opacity: 0;
    visibility: hidden;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-weight: bold;
	}
	#nav.active{
		display: block;
		right: 0;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
		opacity: 1;
    visibility: visible;
	}	
	.spMenu {
		display: block;
	}
	.spMenu .logo {
		width: 55%;
		margin-bottom: 10px;
	}
	.spMenu .search form {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}
	.spMenu .search form input[type="image"] {
		margin-left: 5px;
	}
	.spTel {
	}
	.spMenu02 {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}
	.spMenu02 li {
		width: 49%;
	}
	.spMenu02 a {
	}
	
	.spscroll {
		overflow: auto;
		background: url("../images/sp_img.jpg") top center no-repeat;
		background-size: 100% auto;
		padding-top: 17vw!important;
	}
	.spscroll img {
		max-width: none;
	}

	
	
	
}