@charset "UTF-8";

@import url("//share.cr-cms.net/hp_agency/hpagency.css");

@import url("//fonts.googleapis.com/css?family=Open+Sans:400,700");

@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

@import url("//use.fontawesome.com/releases/v5.6.1/css/all.css");



/* フラット02 ブルー 1カラム*/



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

Common

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

html {

  scroll-behavior: smooth;

}

body {

 	font-size:16px;

 	line-height: 1.9em;

 	letter-spacing: 0.1em;

font-family: "Open Sans", Verdana, -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

 	font-feature-settings: "palt";

}

#wrap {

    background: url(../materials/163582361732601.jpg) no-repeat bottom center #edf2f9;

    background-attachment: scroll;

    background-position: top;

    background-size: 100%;

    overflow: hidden;

}

#wrap_body {

    padding-top:0px;

}

.mainArticles .article,

.mainArticles div.gallery {

    overflow: unset;

}

a {

    color: #3590e8;

    text-decoration: underline;

}

a:hover { 

  	color: #666;

	text-decoration: none;

    cursor: pointer;

}

a img {

	text-decoration:none;

	border:none;

}

a.tel-link {

    font-size: 130%;

}

.mainArticles .article .image img {

    max-width: 100%;

}

strong {

    color: #ed4f4e;

      background: linear-gradient(transparent 60%, #fff79a 0%);

}

#title h1:hover,

table.contactTable input.button:hover,

table.contactTable input[type="button"]:hover,

#mainArticles a:hover img,

#sideBanners  a:hover img,

div.freeHtml a:hover img,

div.image img.gallery:hover {

  filter: alpha(opacity=75);

  -moz-opacity:0.75;

  opacity:0.75;

}



/*maincontent*/

#mainContents {

    box-sizing: border-box;

    width: 1024px;

    background: #FFF;

    padding: 0 40px 10px;

}

.mainArticles .article {

	padding-bottom: 0px;

	border-bottom: none;

}

.mainArticles .article p {

    padding-bottom: 8px;

}

.mainArticles ul.galleryImages li {

    overflow: unset;

}

/**/

.mainArticles .article_right .image {

    margin-right: 0;

}

.mainArticles .article_left .image {

    margin-left: 0;

}

#mainArticles, .mainArticles .article, .mainArticles div.gallery, #mainTopics, #listTopics {

    width: 100%;

}

.mainArticles .article_center .image {

    max-width: 100%;

}



.mainArticles .article.margin-b0,

.mainArticles .gallery.margin-b0 {

    margin: 0;

}



/****************************title****/

#topMenu_outer,

#title_outer {

    width: 1024px;

}

#title_outer {

    background: url(../materials/163600714959801.png) no-repeat right top;

    background-size: 503px;

}

#title {

    padding: 0;

    background: none;

    margin: 0 auto 44px;

}

#title_body {

    padding: 12px 0 0;

}

#title h1 {

    background: url(../materials/163575657601403.png) no-repeat center bottom;

    background-size: 100%;

    margin: 0 0 10px;

    padding: 0;

    text-align: left;

    height: 64px;

    width: 356px;

}

#title h1 a {

    display: inline-block;

    overflow: hidden;

    text-indent: 110%;

    white-space: nowrap;

    height: 100%;

    width: 100%;

}

#title .description {

    padding: 3px 0 5px;

    color: #444;

    font-size: 15px;

    line-height: 1.6em;

    text-align: left;

  	letter-spacing: .08em;

      background: #FFF;

}

/*************************headline*******/



#mainArticles h2, #mainServices h2, #listTopics h2 {

    background: none;

    border: none;

    border-radius: unset;

    color: #053080;

    line-height: 1.4em;

    font-size: 240%;

    font-weight: bold;

    padding-bottom: 20px;

    letter-spacing: .1em;

}



/*記事見出し*/

.mainContents .article h3, .mainContents div.gallery h3, #mainServices h2, #mainTopics h2 {

    font-size: 180%;

    font-weight: normal;

    text-align:center;

    margin: 0 -40px 30px;

    padding: 10px 0;

    color: #fff;

    border:none;

    background: #2794f9;

    line-height: 1.4em;

    border-bottom:solid 4px #d4ecff;

}

#mainTopics h2{

  	border-radius:0;

}

.mainContents .article h3 a,

.mainContents .article h3 a:hover {

    color: #fff;

    text-decoration: none;

}



.article h4 {

    font-size: 140%;

    padding: 10px 20px;

    margin: 1em 0;

    display: flex;

    color: #333;

    background-image: linear-gradient( -45deg, #fff 25%, #efefef 25%, #efefef 50%, #fff 50%, #fff 75%, #efefef 75%, #efefef );

    background-size: 5px 5px;

    box-sizing: border-box;

    border-bottom: solid 2px #0866c1;

}

.article h5 {

    font-size: 130%;

    color: #0c64c1;

    padding: 10px;

}



/*mainimage*/

#mainImage {

    margin-bottom: 0;

    width: 100%;

    min-width:1024px;

    background: none;

}

.mainImage img {

    max-width: 1024px;

}

/*topmenu*/

#topMenu,  #topMenu_body, #topMenu .topMenu {

	width: 1024px;

	max-width: 1024px;

}

#topMenu {

    background: #2794f9;

    position: absolute;

    min-height: 36px;

    top: 118px;

    left: 0;

    right: 0;

    margin: auto;

}

#topMenu_outer {

    margin: 0 auto;

	background: none;

}

#topMenu .topMenu li {

    height: 100%;

    width: 20%;

    box-sizing: border-box;

    padding: 0;

    position: relative;

}

#topMenu .topMenu li a {

    background: none;

    box-sizing: border-box;

    color: #FFF;

    font-size: 18px;

    letter-spacing: 0;

    padding: 4px 0 6px;

    min-height: 36px;

    width: 100%;

    line-height: 34px;

    position: relative;

}

#topMenu .topMenu li a:after {

    content: '';

    width: 1px;

    height: 36px;

    display: block;

    background-color: #ffffff;

    -moz-transform: skew(-20deg, -20deg);

    -ms-transform: skew(-20deg, -20deg);

    -webkit-transform: skew(-20deg, -20deg);

    transform: skew(-20deg, -20deg);

    position: absolute;

    top: -4px;

    right: 0;

}

#topMenu .topMenu li:last-child a::after {

    content: none;}

#topMenu .topMenu li a:hover {

    color: #8ec7ff;

}

/*maintopic*/

#mainTopics {

    border-bottom: none;

}

#mainTopics .topics li .thumb, #mainTopics .topics li .thumb img {

	max-width: 100px;

	max-height: 100px;

}

#mainTopics .topics li .date, .mainTopics .topics li .date {

	font-size: 14px;

}

#mainTopics .topics h3, .mainTopics .topics li h3 {

	font-size: 16px;

}

.mainTopics .topics li h3 a {

	text-decoration: underline;

}

#mainTopics .topics .description, .mainTopics .topics li .description {

	font-size: 14px;

	color: #aaa;

	margin-top: 0px;

}

#mainTopics .topics li .more a, .mainTopics .topics li .more {

	padding: 8px 16px;

	font-size: 14px;

  	border-radius: 4px;

}

.mainTopics .topics li .more a {

    border: none;

    background-color: #e9e2da;

    border-radius: 2px;

    color: #999;

    border: 1px solid #e9e2da;

}

.mainTopics .topics li .more a:hover {

	border: none;

	background-color: #fff;

	color: #999;

  	border: 1px solid #e9e2da;

}

.mainTopics .topics {

	width: 100%;

	padding: 0;

	margin: 0px 0 15px;

  	border-bottom: none;

}

.mainTopics .topics li {

	padding: 40px 0px;

	font-size: 14px;

}

#mainTopics .listview {

    width: 110px;

    font-size: 14px;

    margin: 0 auto;

}

#mainTopics .listview a {

    background: none;

    padding: 4px 8px;

    color: #444;

}

/*side*/

#sideContents {

    margin: 0;

    background: none;

}

#sideContents_outer {

    width: 1024px;

    padding: 0;

}

.freeHtml {

    font-size: 16px;

}

.freeHtml_outer {

    padding: 0;

    background: none;

}

#sideContact {

    position: static;

    margin: 0 auto;

    clear: both;

}

.sideServices h2,.sideMobile h2,

.sideBlogCategories h2, .sideBlogDates h2 {

    overflow: hidden;

    font-size: 120%;

    line-height: 1.6;

}

.sideServices ul li a {

    background: none;

    padding: 4px 12px;

}

.sideBlogDates li {

    line-height: 12px;

}

.sideServices ul li a,.sideBlogCategories li a, .sideBlogDates dt a,.sideBlogDates li a {

    font-size: 16px;

}

.sideServices ul li a:hover,.sideBlogCategories li a:hover,

.sideBlogDates dt a:hover,.sideBlogDates li a:hover{

    color: #0866c1;

    text-decoration:underline;

}

.sideMobile .qrcode {

    margin: 0 0px 12px 30px;

    float: none;

}

.sideMobile p {

    padding: 0;

    font-size: 14px;

    line-height: 1.2em;

    width: 160px;

    text-align: center;

}



span.recommend {

    display: inline-block;

    font-size: 14px;

    background: #ed504d;

    color: #FFF;

    line-height: 1.6em;

    padding: 0 8px;

    margin-right: 6px;

    border-radius: 20px;

}



/*list*/

.menubox{

    overflow:hidden;

}

.menubox li {

    display: inline-block;

    width: 49.4%;

}

.menubox li a{

    width: 100%;

    display: block;

    background: #ffe066;

    border-radius: 24px;

    text-align: center;

    margin: 3px 2px;

    padding: 6px;

    border-bottom: solid 2px #c1a32c;

    box-sizing: border-box;

    color: #555;

    font-weight: bold;

    font-size: 120%;

    text-decoration: none;

}

.menubox li a:hover {

    opacity: 0.7;

}

.menubox li a:before{

    content:'▼';

    display:inline-block;

    padding-right:6px;

    color: #e4bf28;

    transform: scaleY(0.5);

}



/*galleryGrid*/

#info-link .image {

    display: block;

    overflow: hidden;

    border: solid 3px #053080;

    margin: 0;

    border-radius:6px;

}

#info-link .galleryGrid_body {

    position: relative;

}

#info-link .image:hover {

    background: #fff5c2;

}

#mainArticles #info-link a:hover img {

    opacity: 1;

}

#info-link .comment {

	position:absolute;

	width:100%;

    bottom: -36px;

    background: #053080;

    color: #FFF;

    text-align: center;

    padding: 4px 0;

    border-radius:0 0 6px 6px;

}



/*banner*/

/*div#sideBanners {

    width: 100%;

}*/

ul#sideBanners_body {

    overflow: hidden;

}

ul#sideBanners_body li.sideBanner {

  	/*width: 31%;*/

    float: left;

    margin: 1%;

}

#sideBanners li img {

    /*width: 98%;*/

    padding: 0;

    background: unset;

}

.freeHtml_body {

    overflow: hidden;

}

.freeHtml_body a.side_banner01, .freeHtml_body a.side_banner02 {

    display: block;

    width: 49.4%;

    float: left;

    margin-bottom: 10px;

}

.freeHtml_body a.side_banner01 {

    margin-right: 10px;

}

/*footer*/

#footer {

    background: #0c64c1;

    padding: 20px 0 12px;

}

.footer *,

.footer li a {

    font-size:100%;

    color: #FFF;

}

.footer a:hover, .footer p a:hover{

    color: #8ebeff;

}



/*font*/

.notation {

    font-size: 90%;

}

.align-c {

    text-align: center;

}

/*link*/

.link-wrap {

    margin: 20px;

}

a.btn, table.contactTable input.button {

    padding: 10px 60px;

    border-bottom: solid 2px #043f77;

    border-radius: 4px;

    text-align: center;

    margin: 15px 2px;

    font-weight: bold;

    color: #FFF;

    text-decoration: none;

    display: inline-block;

    position: relative;

    background: #0866c1;

}

a.btn:hover, .freeHtml a.btn:hover, table.contactTable input.button:hover {

    background-color: #0052a0;

    color: #FFF;

    text-decoration: none;

}

a.btn:after {

    content: '';

    position: absolute;

    display: block;

    right: 20px;

    top: 40%;

    width: 8px;

    height: 8px;

    border-top: 1px solid #FFF;

    border-right: 1px solid #FFF;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}

a.btn {

display: block;

margin: 15px auto;

}

/*wrap*/

.envelope {

    padding: 10px;

    margin-top: 10px;

    background: #fffbd8;

    text-align: center;

}





/*table*/

.article table:not(.contactTable) {

    border-collapse: collapse;

    border-left: 1px solid #ccc;

    border-spacing: 0;

    border-top: 1px solid #ccc;

    margin: 10px auto;

    width: 100%;

}

.article table:not(.contactTable) td,

.article table:not(.contactTable) th {

    border-bottom: 1px solid #ccc;

    border-right: 1px solid #ccc;

    height: auto;

    padding: 10px;

    box-sizing: border-box;

}

.article table:not(.contactTable) th {

    background-color: #f7f7f7;

    text-align: center;

}

.article table.normalTbl,

#sideContents table.normalTbl{

    border-collapse: collapse;

    border-spacing: 0;

    border:none;

    margin: 0 0 24px;

    width: 100%;

}

#sideContents table.normalTbl {

    margin: 20px auto 0;

}

.article table.normalTbl th,

#sideContents table.normalTbl th {

    background: none;

    border:none;

    border-bottom: 2px solid #333;

    height: auto;

    line-height: 150%;

    padding: 16px 10px;

    text-align: center;

    vertical-align: middle;

    width: 34%;

    white-space: nowrap;

}

.article table.normalTbl td,

#sideContents table.normalTbl td {

    border:none;

    border-bottom: 1px solid #999;

    height: auto;

    line-height: 150%;

    padding: 16px 10px;

}

.article table.normalTbl td li {

    text-align: left;

}

.article table.normalTbl.basic {

font-size: 140%;

}



/*list*/

ul.baseList {

    padding-left: 2em;

}

ul.baseList li {

    list-style-type: disc;

    padding: 5px;

}

ul.baseList.half li {

	width:48%;

  	display:inline-block;

}

ul.check {

list-style: outside none;

line-height: 2;

/*padding-left: 2.5em;*/

}

ul.check li {

position: relative;

font-weight: bold;

font-size: 20px;

margin: 0 0 .5em;

line-height: 1.5;

padding: .25em 0 .5em;

display: flex;

border-bottom: dashed 1px #ccc;

}

ul.check li strong {

font-size: 20px;

}

ul.check li::before {

display: inline-block;

content: '';

width: 0.9em;

height: 0.5em;

margin-right: 0.5em;

border-left: 4px solid #c71c1c;

border-bottom: 4px solid #E55;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

ol.baseOrderedList {

    padding-left: 2em;

    counter-reset: number 0;

    list-style: outside none none;

}

ol.baseOrderedList li {

    list-style-type: decimal;

    padding: 5px;

}





.envelope ul.baseList {

    font-size: 90%;

    line-height: 1.4em;

    text-align: left;

}



/*FAQ*/

ul.faq li.qus, ul.faq li.ans {

    display: block;

    font-size: 100%;

    line-height: 1.8;

    padding-bottom:6px;

    padding-left: 60px;

    padding-right: 25px;

}

ul.faq li.qus {

    background: #EEE;

    font-weight:bold;

}

 ul.faq li.ans {

    background: #FFF;

    line-height:1.4em;

    padding-bottom:18px;

    }

ul.faq li.qus::before, ul.faq li.ans::before {

    color: #404040;

    display: inline-block;

    font-size: 180%;

    font-weight:bold;

    line-height:1.6em;

    margin: 0 14px 0 -36px;

    text-align: center;

}

ul.faq li.qus::before {

    content: "Q";

}

ul.faq li.ans::before {

    content: "A";

    color: #E53;

}







/*flow*/

table#flowTbl,

table#flowTbl th,

table#flowTbl td{

    border: none;

}

table#flowTbl {

    border-collapse: collapse;

    border-spacing: 0;

    margin: 30px auto 0;

    width: 90%;

}

#flowTbl tr {

    background: #f1f1f1;

    border-radius: 10px;

    display: block;

    height: auto;

    margin-bottom: 50px;

    padding: 10px 30px;

    position: relative;

}

#flowTbl th, #flowTbl td {

    display: block;

}

#flowTbl td p.title {

    font-size: 140%;

    font-weight: bold;

    color: #FFF;

    background: #555;

    border-radius: 24px;

    padding: 6px 0 4px;

    margin-bottom:14px;

    text-align: center;

}

#flowTbl td::after {

    color: #f1f1f1;

    content: "▼";

    font-size: 90px;

    position: absolute;

    text-align: center;

    bottom: -20px;

    transform: scaleY(0.5);

    left: 0;

    right: 0;

    margin: auto;

}

#flowTbl tr:last-child td {

    margin-bottom: 0;

}

#flowTbl tr:last-child td::after {

    display:none;

}





/*contact*/

table.contactTable tr td label {

    display: block;

    margin-left: 6px;

}

table.contactTable th {

    width: 30%;

    background: #fff;

}

table.contactTable th, table.contactTable td {

    padding: 16px 5px;

    border-top: solid 1px #aaa;

}



table.contactTable input.button, table.contactTable input[type="button"] {

    display: block;

    float: left;

    line-height: 40px;

    color: #fff;

    text-decoration: none;

    font-size: 16px;

    text-align: center;

    height: 60px;

    margin: 8px;

    margin-bottom: 16px;

    border: none;

    border-radius: 2px;

  	cursor: pointer;

}

table.contactTable input.button{

	width: 33%;

}

table.contactTable input[type="button"],

table.contactTable input[type="button"]:hover{

    width: 33%;

    color: #fff;

    background: #666;

}

table.contactTable input[type="text"], table.contactTable input[type="password"], table.contactTable textarea {

    padding: 6px;

    border: solid 1px #b6b6b6;

    font-size: 16px;

    margin-left: 6px;

}

.validator-form .validator-message-valid,

.validator-form .validator-message-invalid{

    padding-left: 24px;

    font-size: 14px;

    padding-top: 2px;

}

/*side*/

.side-logo img {

    display: block;

    width: 356px;

    margin: 0 auto;

}





/*フリーダイヤル*/

span.freedial {

font-size: 150%;

font-weight: bold;

}

span.freedial:before {

content: "";

background: url(../materials/163600764348101.png);

display: inline-block;

width: 32px;

height: 32px;

margin-right: 4px;

background-size: contain;

vertical-align: middle;

}



.article.zero_margin {

    margin-bottom: 0;

}



.article.mini img {

width: 256px;

}



.gallery.menu .comment {

    text-align: center;

    background: #0c64c1;

    font-weight: bold;

    color: #fff;

    padding: 4px 0;

}

.gallery.menu .gallery_grid li.galleryGrid .image {

    margin: 0;

}

.gallery .comment {

text-align: center;

}



/*注意事項のリスト用*/

ol.pp {

padding-left: 1.55em;

}

ol.pp li {

list-style-type: decimal;

padding: 5px;

}

ul.notes {

list-style-type: none;

margin-left:1em;

}

ul.notes li::before {

content: "◆";

margin-left: -1em;

}

ul.ps {

list-style-type: none;

margin-left:1em;

}

ul.ps li::before {

content: "※";

margin-left: -1em;

}

ul.maru {

list-style-type: none;

margin-left:1em;

}

ul.maru li::before {

content: "●";

margin-left: -1em;

}



/*---

202204追記

---*/

/*番号リスト*/

ol.StyleOrderList {

    counter-reset: number 0;

    list-style: outside none none;

    padding-left: 40px;

    line-height: 2;

}

ol.StyleOrderList li::before {

    background: #03c55f;

    color: #fff;

    content: counter(number, decimal);

    counter-increment: number 1;

    display: inline-block;

    height: 2.5em;

    margin-left: -50px;

    margin-right: 0.5em;

    text-align: center;

    width: 2.5em;

    font-weight:bold;

    line-height:2.5em;



}

ol.StyleOrderList li {

    margin-bottom: 0.4em;

    font-size: 110%;

    border-bottom:dashed 1px #CCC;

}



/*チェックリスト*/

ul.StyleCheckList {

    list-style: outside none;

    line-height: 1.8;

    padding-left: 2.5em;

}

ul.StyleCheckList li {

    position: relative;

    font-size: 110%;

    padding-bottom:0.75em;

    margin-bottom:0.75em;

    border-bottom:dashed 1px #CCC;

}

ul.StyleCheckList li::before {

    display: block;

    content: '';

    position: absolute;

    top: 0.4em;

    left: -2em;

    width: 1.3em;

    height: 0.7em;

    border-left: 5px solid #E55;

    border-bottom: 5px solid #E55;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}



.mainImage #slider li {

        height: auto !important;

}

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

  .ctaAttentionNote{

    font-weight: 900;

    font-size: 120%;

    letter-spacing: 2px;}

}