@charset "euc-jp";
/* CSS Document */
/*-------------------------------------------------Reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, cite, code, del, em, img, q, s, samp,
strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, 
table, caption, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0; font-style:normal; zoom:1; }
li{ list-style-type:none;}
img{ border:0;}
html{}
body{ font-size: 14px; color: #004699; font-family:"¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "Hiragino Kaku Gothic Pro", "¥á¥¤¥ê¥ª", Arial, Helvetica, sans-serif, Meiryo, Osaka, "£Í£Ó £Ð¥´¥·¥Ã¥¯", "MS PGothic", sans-serif;  line-height: 1.6; background-image: url(none); min-width:1020px; }
a:link{ color: #004699;}
a:visited{ color: #004699; }
a:hover{ color: #004699; text-decoration: none; }
a:active{ color: #004699;  }
.Mincyo{font-family:  "¥Ò¥é¥®¥ÎÌÀÄ« Pro W6","Hiragino Mincho Pro","HGSÌÀÄ«E","£Í£Ó £ÐÌÀÄ«",serif; font-family:  "¥Ò¥é¥®¥ÎÌÀÄ« Pro W3","Hiragino Mincho Pro","HGSÌÀÄ«E","£Í£Ó £ÐÌÀÄ«",serif\9; letter-spacing: -1px; font-weight:normal; }

.pagetop{	display: none;
	position: fixed;
	bottom: 30px;
	right: 0px;}

.pagetop a{ display:block;}
.pagetop{ width:80px; height:80px; margin: 0 40px 0 0; display:table;z-index:9999999;}
.pagetop a{ font-size:10px; background-color:#000; display:table-cell; vertical-align:middle; width:80px; height:80px; filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; color:#FFFFFF; text-decoration:none; text-align:center; letter-spacing: 1px; }
.pagetop a:before{ content: "\f106"; font-family: "Font Awesome 5 Free"; padding:0 0 5px 0; display:block; font-size:40px; line-height: 0.8; text-align: center; font-weight: 600; }
.pagetop a:hover{filter: alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}

/*------------------------------------setting*/
#Service .sec {width: 960px;}
.sec{ width:1020px; margin: 0 auto; overflow:hidden; text-align: center;}
.sec h2{ text-align:center; padding-bottom:30px;}
.sec h2 p{ padding-bottom:15px;}
.sec h2 p + p{ font-size: 14px; font-weight:normal;}
.secClear{ overflow:hidden;}
a{-webkit-transition: all .3s ease-out; }

.contents:nth-child(odd){ background-color:#F3F3F3; }
.contents{ padding:40px 0 60px 0;}

.lines-on-sides{ position:relative;}
.lines-on-sides:before {
    content: "";
    display: block;
    border-top: solid 2px #004699;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 45%;
    z-index: 1;
}
#LowerMain h2.lines-on-sides:before{ margin-top:-0.4em;}
.lines-on-sides span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}
.contents:nth-child(odd) .lines-on-sides span{background-color:#F3F3F3}
.txt_bg {border-bottom: 2px solid #004699; font-size: 16px; padding: 2px; line-height: 2.5;}

/*----------------------------------------MainVisual*/
#MainVisual{ position:relative;min-width:1000px;}
#MainVisual #container{ height:730px; width:100%;}
.skippr > div{ height:730px;}

#Head{ height:96px; background-image: url(../images/opavity_white85.png); position:absolute; top:0; width:100%; left:0; z-index:999;}
#Lower #Head{ background-image:none; background-color:#F3F3F3; position:relative;}
#HeadIn{ margin:0 auto; padding: 0; overflow:hidden; width:100%; }
#HeadIn h2{ width:64px;  text-align:right; padding-left:20px; float:left; padding-top:20px;}
#HeadIn h1{ float:left; padding-left: 50px; padding-top:20px; }
#HeadIn  h1 p:first-child img{width: 80%; height: auto;}
#HeadIn  h1 p{ display:inline-block; padding-top:8px;}
#HeadIn  h1 p + p{ display:inline-block; padding-left: 0px; }


#HeadIn .menu{ text-align:right; float:right; padding-top:50px; padding-right: 20px; }

#HeadIn .menu ul{  text-align:right; }
#HeadIn .menu li{display:inline-block; }
#HeadIn .menu li a{ font-weight:normal; }
#HeadIn .menu li + li{ padding-left:10px;}
#HeadIn .menu li + li:before{content:url(../images/menu_line.png); display:inline-block; padding-right:10px;}

#HeadIn .btn{ display: table; float:right; width:96px; height:96px; }
#HeadIn .btn a{ display:table-cell; width:96px; text-align:center; text-decoration:none; background-color:#004699; color:#fff; height:96px; vertical-align:middle; font-size:14px; }
#HeadIn .btn a:after{content:"\f107"; font-weight:bold; display:block; text-align:center; color:#FFFFFF; font-family: "Font Awesome 5 Free";
}
#HeadIn .btn a:hover{ background-color:#076CB8;}

#MainVisual_ttl{ position:absolute; top:200px; ; width: 935px; z-index: 9999; left:50%; margin-left:-465px; }
#MainVisual_ttl dt{}
#MainVisual_ttl dd{ text-align:center;  padding-top:15px;}

#MainVisual #container p{ position:absolute; z-index:9999; left:50%; top:490px; margin-left:-200px;}


/*----------------------------------------Service*/
#Service{ background-color:#FFFFFF; width:1020px; position:relative; margin:10px auto 60px auto; z-index:9999; }
#Service .sec{ padding-top:40px; text-align: left; }

#Service .Item{}
#Service .Item + .Item{ margin-top:50px; }
#Service .Item h3{ background-color:#004699; display:table; width:100%; padding:10px 0; margin-bottom:20px; }
#Service .Item h3 p{ display:table-cell; text-align:left; vertical-align:middle; padding-left:20px;}
#Service .Item h3 p +p{ text-align:right; color:#FFFFFF; font-size:14px; font-weight:normal; vertical-align:middle; padding-right:10px;}

#Service .Item .secClear{ display: table; width:100%; table-layout:fixed;}
#Service .Item .secClear + .secClear{ margin-top:20px;}
#Service .Item .Entry{ display:table-cell; text-align:center; padding-right:10px;}
#Service .Item .Entry + .Entry{ padding-left:10px; padding-right:0;}
#Service .Item .EntryIn{ border: 1px solid #CCC; padding:20px 15px }

#Service .Item .Entry .icon{padding-bottom:5px;}
#Service .Item .Entry h4{ font-size:24px; font-weight:normal; padding-bottom:0px;}
#Service .Item .secClear + .secClear h4{ font-size:20px;}
#Service .Item .Entry .txt{ text-align:left; padding-top: 10px; }
#Service .Item .Entry .caution{ text-align:center; padding-bottom:15px;}

#Service .Item .EntryPlus { display:table-cell; text-align:center; padding-right:10px;}
#Service .Item .EntryPlus + .EntryPlus {padding-left:10px;}
#Service .Item .EntryInPlus {border: 1px solid #CCC; padding:15px 20px; font-size: 20px; width: 428px}
#Service .Item .EntryInPlus p {display: inline-block; margin: 10px 24px; vertical-align: top;}
#Service .Item .New {width: 0;height: 0;
border-style: solid;
border-width: 0 0 25px 25px;
border-color: transparent transparent #007bff transparent; position: absolute; bottom: 0; right: 30px;}
#Service .Item .New1 {width: 0;height: 0;
border-style: solid;
border-width: 0 0 25px 25px;
border-color: transparent transparent #007bff transparent; position: absolute; bottom: 0; left: 475px;}
#Service a:link{ text-decoration: none;}
#Service .Item .EntryInPlus:hover {background-color: rgba(238,238,238,0.5);}

#Service .Point{ padding-top:10px; }
#Service .Point dt{ font-size:18px; padding-bottom: 5px; }
#Service .Point dd{ display:table; width:100%;}
#Service .Point dd p.txt{ display:table-cell; vertical-align: top; }
#Service .Point dd p.linkBtn{ display:table-cell; padding-left:20px; width:170px; }
#Service .Point dd p.linkBtn a{ display:block; background-color:#EAEAEA; text-decoration:none; padding:10px; text-align:center; font-weight:bold; }
#Service .Point dd p.linkBtn a:before{content:"\f105"; font-family:FontAwesome;padding-right:5px;}
#Service .Point dd p.linkBtn a:after{ content:url(../images/icon_pdf.png); padding-left:3px;}
#Service .Point dd p.linkBtn a:hover{ background-color:#D7D7D7; }

#Service .BrandList{ overflow:hidden; }
#Service .BrandList dl{ width:152px; float:left; display: block; }
#Service .BrandList dt{ padding-top:8px;}
#Service .BrandList dd{ padding-bottom:8px; font-size:12px;}
#Service .BrandList dd:before{content:"\f0d8"; font-family:FontAwesome;padding-right:2px;} 
#Service .BrandList dl + dl{}
#Service1{ background-color:#FFFFFF; width:1020px; position:relative; margin:10px auto 60px auto; z-index:9999; }
#Service1 .sec {
 width: 960px;}

/*----------------------------------------Campaign*/
#Campaign .bn{ display:table; width:100%;}
#Campaign .bn li{ display:table-cell; }
#Campaign .bn li + li{ padding-left:27px;}

/*----------------------------------------Tie Up*/
#TieUp {margin: auto; text-align: center; width:700px; padding: 30px 0; color: #555555; display: table;
 border-collapse: separate; border-spacing: 50px 0;table-layout:fixed;}
#TieUp .TieBn {box-shadow: 3px 3px 3px #cccccc; border: 1px solid #eeeeee; margin: auto; padding: 5px 0; display: table-cell; width: 250px;}
#TieUp .TieBn a {text-decoration: none; color: #555555;}
#TieUp a:hover{opacity: 0.6;}
#TieUp .TieBn img {border: 1px solid #dddddd; margin: 10px 0;}
#TieUp .TieBn h2 {margin: auto; font-size: 15px;}
#TieUp .TieBn p {padding: 10px 15px; font-size: 13px; text-align: left;}

/*----------------------------------------Contact*/
#Contact{ text-align:center;border-bottom: 1px solid #004699;  background: #fff;}
#Contact span {background: #fff;}
#Contact h3{ text-align:center; padding:60px 0 40px 0;}
#Contact .tel{ width:428px; text-align:center; float:left; }
#Contact .tel + .tel{ float:right;}
#Contact .tel dt{ padding-bottom:15px;}
#Contact .tel dd{}
#Contact .tel dd p{ padding-bottom:20px;}
#Contact .tel dd p + p{}

#Contact .atte{ border: 1px solid #CCC; padding:10px; width: 1020px; margin: 20px auto 0 auto; text-align: left; }
#Contact .atte dl{}
#Contact .atte dt{ font-weight:bold;}
#Contact .atte dd{ padding-top:5px;}
#Contact .atte dd + dd{ }
#Contact .atte dd:before{content:"\f14a"; font-family: "Font Awesome 5 Free"; padding-right:5px; font-weight: 700;}

/*----------------------------------------HowTo*/
#HowTo{ background: #eeeeee;}
#HowTo .Entry{text-align: left;}
#HowTo .Entry + .Entry:before{ content:url(../images/howto_icon_arrow.png); display:block; text-align:center; padding:30px 0;}
#HowTo .Entry dl{ overflow:hidden;}
#HowTo .Entry dt{ float:left; width:60px; padding-right:20px; padding-top:5px;}
#HowTo .Entry dd{ float:left; width:880px;}
#HowTo .Entry dd ul{}
#HowTo .Entry dd li{ font-size:22px; padding-bottom:5px;}
#HowTo .Entry dd li + li{ font-size:14px;}


/*----------------------------------------Footer*/
#Footer{ background-color:#004699; color:#FFF; text-align:center; padding:40px 0;}
#Footer p{ padding-bottom:15px;}
#Footer p.atte{ padding:0; font-size:12px;}
#Footer ul{ padding-bottom:15px;}
#Footer li{ display:inline; padding:0 5px;}
#Footer li a{ color:#FFFFFF;}
#Footer li + li:before{ content:"¡Ã"; padding-right:10px;}


/*----------------------------------------LowerMain*/
#LowerMain{ margin-top:40px; padding-bottom:60px;}
#LowerMain h2{ font-size:36px; font-weight:normal;}
#LowerMain a[href$=".pdf"]:after { content:url(../images/icon_pdf.png); padding-left:2px;}

#LowerMain .list{}
#LowerMain .list dl{ display:table; width:100%;}
#LowerMain .list dt{ display:table-cell; width:200px; background-color:#DAEBF3; padding:10px 15px; text-align:center;  vertical-align:middle;}
#LowerMain .list dd{display:table-cell;vertical-align:middle; padding-left:10px;}
#LowerMain .list dl + dl{ margin-top:10px;}


#LowerMain .policyEnt{}
#LowerMain .policyEnt h3{ font-size:24px; font-weight:normal; padding-bottom:10px;}
#LowerMain .policyEnt p{}
#LowerMain .policyEnt p + p{ padding-top:20px;}
#LowerMain .policyEnt + .policyEnt{ margin-top:30px; border-top: 1px dotted #004699; padding-top:30px;}

#SMPContainer {display: none;}


@media screen and (max-width:450px) {
#Contact .Onpc {display: none;}
#SMPContainer {display: block; }
	/* Ãí°Õ»ö¹à¡¡*/
#Contact .atte{ border: 1px solid #CCC; padding:20px; width: 910px; margin: 20px auto 0 auto; text-align: left; font-size: 42px; line-height: 1.2; }
#Contact .atte dl{}
#Contact .atte dt{ font-weight:bold;}
#Contact .atte dd{ padding-top:5px;}
#Contact .atte dd + dd{ }
#Contact .atte dd:before{content:"\f046"; font-family: "Font Awesome 5 Free"; padding-right:5px;}
#Head .menu {display: none;}
}



/*¥³¥í¥Êinfo*/
.info_area{
	width: 950px;
	margin-bottom: 2.5%;
}
.colona_info{
	padding: 10px 20px;	
	border: 1px solid #999999;	
}
.colona_info p{
	font-size: 14px;
	line-height: 2;
	color: #000;
	
}
.colona_info a{
	text-decoration: underline !important;
}