@charset "utf-8";

/*------------------------------------------
■ ブラウザのマージンとパディング初期化
------------------------------------------*/
*{margin:0;padding:0;}
body,div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,table,tr,td {
padding: 0;
margin: 0;
}
/*------------------------------------------
■ イメージ初期化
------------------------------------------*/
img {vertical-align:middle;margin:0;padding:0;}
/*------------------------------------------
■ リンク設定
------------------------------------------*/
a img{border: none;}
a {color: #1a7995;text-decoration:underline;}
a:hover {color:#f2951d; text-decoration:none;}
a:visited {color:#1a7995;text-decoration:underline;}
/*------------------------------------------
■ リンク画像のhover半透明化設定
------------------------------------------*/
a:hover img{
opacity:0.70;
/*--IE,FF対応--*/
filter:alpha(opacity=85);
-ms-filter: "alpha( opacity=85)";
}

/*------------------------------------------
■ 画像回り込み
------------------------------------------*/
.img_left{float:left;margin-right:0px;margin-bottom:10px;}
.img_right_non{float:right;margin-left:0px;margin-bottom:10px;}
.img_right {float:right;margin-left:10px;margin-bottom:10px; width: 240px;}
.img_center{ width:100% auto; margin:10px;}
img.w100{ width:100%; margin:0;}

.img_margin{margin:10px auto;clear:both; width:100%;}

/*------------------------------------------
■ テキスト装飾
------------------------------------------*/

.txt_small{font-size:75%;}
.txt_big{font-size:120%;}

.txt_red {color:#d01c4e;}
.txt_green {color:#009b00;}

.txt_16{ font-size:24px;}
.txt_18{ font-size:26px;}
.txt_20{ font-size:26px;}
.txt_24{ font-size:28px; line-height: 40px;}
.txt_30{ font-size:34px; line-height: 48px;}

.txt_bold{ font-weight:bold;}
.txt_underline{ text-decoration:underline;}
.txt_center { text-align: center;}

.txt_un_y {background: url(../images/txt_y.png) repeat-x bottom;}
.txt_bg_f6f6f6 { width:100% auto; background: #f6f6f6; padding: 30px; text-align: left; line-height: 160%; margin: 20px 0;}


div.hr { border-bottom:dashed 1px #999999; margin: 20px 0; padding: 0px 0px 20px; width: 100% auto;}
div.hr h5 {color:#106881; margin-bottom: 15px; font-weight: normal; font-size: 24px;}



/*■■■■■■■■■■■■■■■■■■■■■■
　　各コンテンツ　【　基本設定　】
■■■■■■■■■■■■■■■■■■■■■■*/
/*------------------------------------------
■ メイン設定
------------------------------------------*/
body {
background:#ffffff;
font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
color:#313131;
font-size: 24px;
line-height: 170%;
margin:0; padding:0;
}
.sp-none{ display:none;}
.pc-none{ }
.clear{ clear:both;}


header { background: #ffffff;  border-bottom:solid 1px #bbc4c9; height:80px; width: 640px;}
header div { height: 80px;}
header a.logo {display: block; position: absolute;}
header a.logo img{ width:480px; margin: 10px 0 0 10px; display: block; z-index: 22222;}

ul.menu {display:none;}

/*------------------------------------------
■ MENU
------------------------------------------*/
/* MENU */
.hamburger-menu-wrapper{
    margin-top: 10px;
	width:80px;
    padding: 10px;
    display: inline-block;
}
.hamburger-menu-wrapper.bounce-effect{
    animation: bounce 0.3s ease 1;
}
.menu-overlay {
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1111;
}
.menu{
    position: relative;
    min-width: 600px;
    text-align: right;
}
.hamburger-menu {
    border: 0;
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 45px;
    height: 45px;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 9999;
    cursor: pointer;
    background: transparent;
}
.menu-list{
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    width: 100%;
    text-align: center;
    z-index: 9999;
}
.menu-list a{
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    margin: 0px 0;
    transition: all 0.5s ease;
	background: #000000;
	padding: 15px 0;
	width: 100%;
	opacity:0.80;
	border-bottom: #333333 solid 2px;
}
.menu-list a:hover{
    color: #2a8ea8;
}
.hamburger-menu:focus {
    outline: none;
}
.hamburger-menu span {
    display: block;
    position: absolute;
    top: 20px;
    left: 5px;
    right: 5px;
    height: 4px;
    background: #2a8ea8;
}

.hamburger-menu span:before,
.hamburger-menu span:after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #2a8ea8;
    content: "";
}

.hamburger-menu span:before {
    top: -10px;
}

.hamburger-menu span:after {
    bottom: -10px;
}

.hamburger-menu span:before,
.hamburger-menu span:after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}

.hamburger-menu span:before {
    transition-property: top, transform;
}

.hamburger-menu span::after {
    transition-property: bottom, transform;
}


.hamburger-menu.active span {
    background: none;
}
.hamburger-menu.active span:before {
    top: 0;
    transform: rotate(225deg);
}

.hamburger-menu.active span:after {
    bottom: 0;
    transform: rotate(135deg);
}

.hamburger-menu.active span:before,
.hamburger-menu.active span:after {
    transition-delay: 0s, 0.3s;
}


@keyframes bounce {
    0%{
        transform: rotate(0);
    }
    45%{
        transform: rotate(15deg);
    }
    90%{
        transform: rotate(-7deg);
    }
    100%{
        transform: rotate(0);
    }
}



h1{}
h1 img{ width:100%; margin:0;}
h1 p {display:none;}

h1.page-tit-base{ width:100%; height: 36px; font-size: 34px; font-weight: normal; text-align: center;padding: 32px 0 32px;letter-spacing: 0.3em; background: url() #106881; color: #ffffff;}


div.contents {width:640px}
.text_box { width:600px; margin: 80px 20px;}

h2{margin: 0 0 50px;}


h2.hikaku { color:#106881; font-size: 28px; text-align: center; padding: 25px 0; border: solid #106881; width: 100% auto;margin: 70px 0 50px;}

h3{ border-left:solid 5px #2a8eab; padding: 18px 0 15px 15px; font-size: 28px; margin-bottom: 40px;}
h3.h3_red{ border-left:solid 5px #d01c4e; padding: 18px 0 15px 15px; font-size: 28px; margin-bottom: 40px; color: #d01c4e;}

h4 { background:#2a8eab; font-size: 28px; font-weight: normal; color: #ffffff; text-align: center; padding: 20px 0 20px; width: 100%; margin: 50px 0 30px;}
h4.plan { background:#2a8eab; font-size: 28px; font-weight: bold; color: #ffffff; text-align: center; padding: 20px 0 20px; width: 100%; margin: 50px 0 30px;}


a.btn_y {background: url(../images/btn_icon.png) no-repeat right #efcf3a; color: #222222; font-size: 24px; width: 100%; text-align: center; display: block; height: 40px; padding: 29px 0 21px; margin: 10px 0 ;color:#222222;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a.btn_r500 {background: url(../images/btn_icon_w.png) no-repeat right #d01c4e; font-size: 28px; font-weight: normal; width: 600px; text-align: center; display: block; height: 40px; padding: 25px 0; margin: 50px auto;color:#ffffff;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a.btn_b500 {background: url(../images/btn_icon_w.png) no-repeat right #1a7995; font-size: 28px; font-weight: normal; width: 600px; text-align: center; display: block; height: 40px; padding: 25px 0; margin: 50px auto;color:#ffffff;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a.btn_r500_b {background: url(../images/btn_icon_w.png) no-repeat right #d01c4e; font-size: 28px; font-weight: bold; width: 600px; text-align: center; display: block; height: 40px; padding: 25px 0; margin: 50px auto;color:#ffffff;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a.btn_b500_b {background: url(../images/btn_icon_w.png) no-repeat right #1a7995; font-size: 28px; font-weight: bold; width: 600px; text-align: center; display: block; height: 40px; padding: 25px 0; margin: 50px auto;color:#ffffff;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a.btn_y500 {background: url(../images/btn_icon.png) no-repeat right #efcf3a; color: #222222; font-size: 32px; font-weight: bold;width: 600px; text-align: center; display: block; height: 75px; padding: 40px 0; margin: 50px auto;color:#222222;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a.btn_b {background: url(../images/btn_icon.png) no-repeat right #cedce0; color: #222222; font-size: 24px; width: 100%; text-align: center; display: block; height: 40px; padding: 29px 0 21px; margin: 10px 0 ;color:#222222;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

.btn_area { width:600px; margin: 50px auto; display: block;}

a.btn_excel {background: url(../images/btn_icon_excel.png) no-repeat right #f4f3ee; color: #222222; font-size: 24px; width: 600px; text-align: center; display: block; height: 40px; padding: 25px 0; margin: 20px auto;color:#222222;text-decoration:none; border: solid 2px #207245; 
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
a.btn_excel img{ margin:-8px 10px 0 0;}

a.btn_pdf {background: url(../images/btn_icon_pdf.png) no-repeat right #f4f3ee; color: #222222; font-size: 24px; width: 600px; text-align: center; display: block; height: 40px; padding: 25px 0; margin: 20px auto;color:#222222;text-decoration:none; border: solid 2px #c01400;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
a.btn_pdf img{ margin:-8px 10px 0 0;}

div.top_plan1 { width:600px; margin: 0 20px 30px; padding: 0;}
div.top_plan1 div.text01 { border-bottom: 10px solid #ee3468; border-left: 10px solid #ee3468; border-right: 10px solid #ee3468; padding: 15px 20px 15px; margin: 0; text-align: left; font-weight: normal; line-height: 170%; font-size: 22px;}

div.top_plan2 { width:600px; margin: 0 20px 30px; padding: 0;}
div.top_plan2 div.text02 { border-bottom: 10px solid #2a8eab; border-left: 10px solid #2a8eab; border-right: 10px solid #2a8eab; padding: 15px 20px 15px; margin: 0; text-align: left; font-weight: normal; line-height: 170%; font-size: 22px;}

div.top_plan3 { width:600px; margin:0 20px 30px; clear: both;}
div.top_plan3 div.text03 { border-bottom: 10px solid #65af06; border-left: 10px solid #65af06; border-right: 10px solid #65af06; padding: 15px 20px 15px; margin: 0 0 50px; text-align: left; font-weight: normal; line-height: 170%; font-size: 22px;}

div.brand {margin: 30px 50px 50px; display: block;font-size: 16px; font-weight: normal;}

div.brand table.brand_list01 {widh:600px; border: none; float: left; margin: 0;display: block;}
div.brand table.brand_list01 td {padding: 3px 3px;text-align: left; width: 280px;}
div.brand table.brand_list01 td ul li { list-style:square; margin: 2px 0 2px 20px;font-size: 20px; font-weight: normal;}

div.brand table.brand_list02 {widh:350px; border: none; float: left; margin: 30px 0 0 0px;display: block;}
div.brand table.brand_list02 td {padding: 3px 3px;text-align: left;widh:350px;}
div.brand table.brand_list02 td ul li { list-style:square; margin: 2px 0 2px 20px;font-size: 20px; font-weight: normal;}

div.brand table.brand_list03 {widh:200px; border: none; float: left; margin: 30px 0 0px 50px;display: block;}
div.brand table.brand_list03 td {padding: 3px 3px;text-align: left;widh:200px;}
div.brand table.brand_list03 td ul li { list-style:square; margin: 2px 0 2px 20px;font-size: 20px; font-weight: normal;}



footer{ background:#287990; text-align: center; color: #ffffff;width: 100%;}
footer div.text{padding:30px 0px;}
footer div.text img{ width:450px;margin: 0 auto 20px; display: block;}
footer div span{ border:solid 1px #ffffff; padding: 2px 3px  3px; line-height: 220%;}
footer div.copyright{background:#106881; text-align:center;color: #ffffff; padding: 14px 0;width: 100%; font-size: 20px;}


ol { margin: 15px 0 15px 40px;}
ol li { margin:5px 0;}


/*------------------------------------------
■ plan
------------------------------------------*/

table.step { widht:600px; margin: 60px 0px 30px; border: none;}
table.step th { width: 170px; vertical-align: top; padding: 0 0 30px}
table.step th img{ widht:140px;}
table.step td { padding: 5px 0 40px; vertical-align: top;}

.box_red { border:solid 3px #ee3468; padding: 40px 30px; text-align: left; width: 540px; margin: 50px auto 10px;}
.box_red h5 { font-size:30px; line-height: 40px; font-weight: bold; text-align: center;color: #ee3468; margin: 0 0 20px;}
.box_red ul{ margin: 10px 0 0 20px;}
.box_red ul li { list-style:square; margin: 5px 0;}


.howto_line01 { background:url("../images/howto_line01.png") no-repeat top left; background-size: 200px 61px; border: solid 1px #cccccc; padding: 90px 20px 0px 20px; width:520px; margin: 30px 20px 30px; font-size: 30px; font-weight: bold;}
.howto_line01 img{ margin: 20px auto 20px; display: block; width: 400px;}

.howto_line02 { background:url("../images/howto_line02.png") no-repeat top left; background-size: 200px 61px; border: solid 1px #cccccc; padding: 90px 20px 10px 20px; width:520px; margin: 30px 20px 30px; font-size: 30px; font-weight: bold;}
.howto_line02 img{ margin: -100px auto 0; display: block; width: 280px; float: right;}

.howto_line03 { background:url("../images/howto_line03.png") no-repeat top left; background-size: 200px 61px; border: solid 1px #cccccc; padding: 90px 20px 10px 20px; width:520px;  margin: 30px 20px 70px; font-size: 30px; font-weight: bold;}
.howto_line03 img{ margin: 20px auto 20px; display: block; width: 500px;}

.review{
  width: 100% auto;
  height: 400px;
  background-color:#ffffff;
  border: solid 1px #cccccc;
  padding:20px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*------------------------------------------
■ about
------------------------------------------*/

.about_bg{ width:600px; padding: 60px 20px; text-align: left;
			background: url(../images_sp/about_bg.png) no-repeat center; background-size: 750px 1148px; height: 800px;}

.about_bg span{ font-size:36px; line-height: 50px; color: #106881;}

table.about { margin:0; border: none; width: 100%;}
table.about th { border-top:solid 1px #cccccc; padding: 17px 10px 15px; text-align: center; font-weight: normal; width: 160px;}
table.about th.btm { border-bottom:solid 1px #cccccc;}
table.about td { border-top:solid 1px #cccccc; padding: 17px 10px 15px;}
table.about td.btm { border-bottom:solid 1px #cccccc;}

/*------------------------------------------
■ case
------------------------------------------*/

table.case{ width:100%; border: solid #106881 3px; margin: 50px 0 0px;}
table.case th { font-size: 24px; padding: 15px 15px 12px; text-align: left; font-weight: bold;}
table.case td { padding: 20px 15px 12px;}
table.case td.tit { text-align: center; height: 30px; color: #ffffff; background: #106881; width: 50%; }
table.case td.price {text-align: right; height: 30px; width: 50%;border-top: solid #106881 1px;border-bottom: solid #106881 1px;}
table.case td.case_pic {padding: 20px 15px 0px; }
table.case td.case_pic img { width:100% auto; margin: 0px auto 0px; max-width: 560px; max-height: 560px; display: block;}

/*------------------------------------------
■ packing
------------------------------------------*/

.pack_img01{ width:100%; max-width: 674px; margin: 20px 0;}
.pack_img02{ width:100%; max-width: 645px; margin: 20px 0;}
.pack_img03{ width:100%; max-width: 1012px; margin: 20px 0;}

/*------------------------------------------
■ FAQ
------------------------------------------*/

.icon_q{ background:#eff3f6; width: 100% auto;min-height: 20px; padding: 15px 10px 15px 90px; color: #106881; font-weight: bold; font-size: 24px; margin-bottom: 10px; }
.icon_a{width: 100% auto;min-height: 50px; padding: 5px 10px 5px 90px; margin-bottom: 50px;}

.icon_q01{ background:url(../images/icon_q01.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a01{ background:url(../images/icon_a01.png)no-repeat left top;background-size: 70px 70px;}

.icon_q02{ background:url(../images/icon_q02.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a02{ background:url(../images/icon_a02.png)no-repeat left top;background-size: 70px 70px;}

.icon_q03{ background:url(../images/icon_q03.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a03{ background:url(../images/icon_a03.png)no-repeat left top;background-size: 70px 70px;}

.icon_q04{ background:url(../images/icon_q04.png)no-repeat left top #eff3f6 ;background-size: 70px 70px;}
.icon_a04{ background:url(../images/icon_a04.png)no-repeat left top;background-size: 70px 70px;}

.icon_q05{ background:url(../images/icon_q05.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a05{ background:url(../images/icon_a05.png)no-repeat left top;background-size: 70px 70px;}

.icon_q06{ background:url(../images/icon_q06.png)no-repeat left top #eff3f6 ;background-size: 70px 70px;}
.icon_a06{ background:url(../images/icon_a06.png)no-repeat left top;background-size: 70px 70px;}

.icon_q07{ background:url(../images/icon_q07.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a07{ background:url(../images/icon_a07.png)no-repeat left top;background-size: 70px 70px;}

.icon_q08{ background:url(../images/icon_q08.png)no-repeat left top #eff3f6 ;background-size: 70px 70px;}
.icon_a08{ background:url(../images/icon_a08.png)no-repeat left top;background-size: 70px 70px;}

.icon_q09{ background:url(../images/icon_q09.png)no-repeat left top #eff3f6 ;background-size: 70px 70px;}
.icon_a09{ background:url(../images/icon_a09.png)no-repeat left top;background-size: 70px 70px;}

.icon_q10{ background:url(../images/icon_q10.png)no-repeat left top #eff3f6 ;background-size: 70px 70px;}
.icon_a10{ background:url(../images/icon_a10.png)no-repeat left top;background-size: 70px 70px;}

.icon_q11{ background:url(../images/icon_q11.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a11{ background:url(../images/icon_a11.png)no-repeat left top;background-size: 70px 70px;}

.icon_q12{ background:url(../images/icon_q12.png)no-repeat top left #eff3f6 ;background-size: 70px 70px;}
.icon_a12{ background:url(../images/icon_a12.png)no-repeat left top;background-size: 70px 70px;}

.icon_q13{ background:url(../images/icon_q13.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a13{ background:url(../images/icon_a13.png)no-repeat left top;background-size: 70px 70px;}

.icon_q14{ background:url(../images/icon_q14.png)no-repeat left #eff3f6 ;background-size: 70px 70px;}
.icon_a14{ background:url(../images/icon_a14.png)no-repeat left top;background-size: 70px 70px;}