@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:10px;}
.img_right{float:right;margin-left:10px;}
.img_center{display:block;margin:0px auto;clear:both;}

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


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

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

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

.txt_16{ font-size:16px;}
.txt_18{ font-size:18px;}
.txt_20{ font-size:20px;}
.txt_24{ font-size:24px; line-height: 38px;}
.txt_30{ font-size:30px; line-height: 45px;}

.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%;}

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

/*■■■■■■■■■■■■■■■■■■■■■■
　　各コンテンツ　【　基本設定　】
■■■■■■■■■■■■■■■■■■■■■■*/
/*------------------------------------------
■ メイン設定
------------------------------------------*/
body {
font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
	background: url(../images/bg.png) #eeeeee;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
color:#313131;
font-size: 16px;
line-height: 170%;
margin:0; padding:0;
text-align:left;
}
.sp-none{}
.pc-none{display:none;}
.clear{ clear:both;}


header { background: #ffffff; border-bottom:solid 1px #bbc4c9; height: 80px;}
header div { width: 1200px; margin: 0 auto; display: block;}
header a.logo {}
header a.logo img{ width:360px; margin: 15px 0 0 0px;  }

.gv_menu { float: right; text-align: right; margin-top: 30px; font-size: 15px; width: 840px;}
.gv_menu a{ text-decoration:none; color: #333333;}
.gv_menu :hover {color:#1a7995; text-decoration:none;}



/* 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%;
	right: 0;
    text-align: center;
    z-index: 9999;
}
.menu-list a{
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin: 0px 0;
    transition: all 0.5s ease;
	background: #000000;
	border-bottom: #333333 solid 1px;
	padding: 15px 0;
	width: 100% ;
	opacity:0.80;
}
.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);
    }
}


.contents{
	width: 1200px; margin: 0 auto; display: block;
}
.text_box { width:1100px; margin: 70px 50px;}

h1 { background: url(../images/main.png) no-repeat center top; width: 100%; height: 750px;}
h1 p { display:none;}

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

h1.page-tit-kantan{ background: url(../images/page_tit_kantan_non.png) no-repeat center top; width: 100%; height: 210px;}
h1.page-tit-line{ background: url(../images/page_tit_line.png) no-repeat center top; width: 100%; height: 210px;}
h1.page-tit-mail{ background: url(../images/page_tit_mail.png) no-repeat center top; width: 100%; height: 210px;}
h1.page-tit-line_mail{ background: url(../images/page_tit_line_mail.png) no-repeat center top; width: 100%; height: 210px;}
h1.page-tit-store{ background: url(../images/page_tit_store.png) no-repeat center top; width: 100%; height: 210px;}

h2{margin: 0 0 50px;}

h2.hikaku { color:#106881; font-size: 35px; text-align: center; padding: 25px 0; border: solid #106881; width: 1100px;margin: 70px 0 50px;}
h3{ border-left:solid 5px #2a8eab; padding: 15px 0 12px 15px; font-size: 22px; margin-bottom: 20px;}
h3.h3_red{ border-left:solid 5px #d01c4e; padding: 15px 0 12px 15px; font-size: 22px; margin-bottom: 20px; color: #d01c4e;}

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

a.btn_y {background: url(../images/btn_icon.png) no-repeat right #efcf3a; color: #222222; font-size: 18px; width: 100%; text-align: center; display: block; height: 25px; padding: 25px 0; 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: 26px; font-weight: normal; letter-spacing: 0.05em;
	width: 500px; text-align: center; display: block; height: 25px; padding: 30px 0; margin: 50px 50px;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: 26px; font-weight: normal; letter-spacing: 0.05em;
	width: 500px; text-align: center; display: block; height: 25px; padding: 30px 0; margin: 50px 50px;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: 30px; font-weight: bold; letter-spacing: 0.05em;
	width: 500px; text-align: center; display: block; height: 25px; padding: 30px 0; margin: 50px 50px;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: 30px; font-weight: bold; letter-spacing: 0.05em;
	width: 500px; text-align: center; display: block; height: 25px; padding: 30px 0; margin: 50px 50px;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: 30px; font-weight: bold; width: 800px; text-align: center; display: block; height: 25px; padding: 40px 0; margin: 60px auto;text-decoration:none;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}

a:hover.btn_y500 {
opacity:0.70;
/*--IE,FF対応--*/
filter:alpha(opacity=85);
-ms-filter: "alpha( opacity=85)";
}


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

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

a.btn_excel {background: url(../images/btn_icon_excel.png) no-repeat right #f4f3ee; color: #222222; font-size: 18px; width: 400px; text-align: center; display: block; height: 25px; padding: 25px 0; margin: 10px 10px ;text-decoration:none; border: solid 2px #207245; float: left;
	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: 18px; width: 400px; text-align: center; display: block; height: 25px; padding: 25px 0; margin: 10px 10px ;color:#222222;text-decoration:none; border: solid 2px #c01400; float: left;
	border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
a.btn_pdf img{ margin:-8px 10px 0 0;}

div.top_plan1 { width:650px; float: left; margin: 0 0 30px 50px; padding: 0;}
div.top_plan1 div.text01 { border-bottom: 10px solid #ee3468; border-left: 10px solid #ee3468; border-right: 10px solid #ee3468; padding: 15px 15px 10px; margin: 0; text-align: left; font-weight: normal; line-height: 160%; font-size: 16px;}

div.top_plan2 { width:430px; float: right; margin: 0 50px 30px 0; padding: 0;}
div.top_plan2 div.text02 { border-bottom: 10px solid #2a8eab; border-left: 10px solid #2a8eab; border-right: 10px solid #2a8eab; padding: 15px 15px 10px; margin: 0; text-align: left; font-weight: normal; line-height: 160%; font-size: 16px;}

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

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

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

div.brand table.brand_list02 {widh:350px; border: none; float: left; margin: 0;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: 5px 0 5px 20px;font-size: 16px; font-weight: normal;}

div.brand table.brand_list03 {widh:200px; border: none; float: left; margin: 0 0 0px 80px;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: 5px 0 5px 20px;font-size: 16px; font-weight: normal;}


footer{ background:#287990; text-align: center; color: #ffffff; width: 100%;}
footer div.text{width:1160px; text-align: left; margin: 0 auto; display: block; padding: 25px 0 15px;}
footer div.text img{ width:450px; float: right; margin: 30px 0 0;}
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%;}


.fotter_link{ width:800px; float: right; margin: 25px 0 -20px; text-align: right;}
.fotter_link a{ text-decoration:none; color: #ffffff;}
.fotter_link :hover {color:#ffffff; text-decoration: underline;}


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

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

table.step { widht:1100px; margin: 50px 0px 50px; border: none;}
table.step th { width: 220px; vertical-align: top; padding: 0 0 30px}
table.step td { padding: 10px 0 30px; vertical-align: top;}

.box_red { border:solid 3px #ee3468; padding: 30px; text-align: left; width: 1040px; margin: 50px auto 10px;}
.box_red h5 { font-size:24px; 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: 140px 43px; border: solid 1px #cccccc; padding: 70px 20px 10px 20px; width:300px; height: 300px; float: left; margin: 20px 30px 70px 0; font-size: 18px; font-weight: bold;}
.howto_line01 img{ margin: 60px auto 0; display: block; width: 220px;}

.howto_line02 { background:url("../images/howto_line02.png") no-repeat top left; background-size: 140px 43px; border: solid 1px #cccccc; padding: 70px 20px 10px 20px; width:300px; height: 300px; float: left; margin: 20px 30px 70px 0; font-size: 18px; font-weight: bold;}
.howto_line02 img{ margin: 30px auto 0; display: block; width: 220px;}

.howto_line03 { background:url("../images/howto_line03.png") no-repeat top left; background-size: 140px 43px; border: solid 1px #cccccc; padding: 70px 20px 10px 20px; width:300px; height: 300px; float: left; margin: 20px 0px 70px 0; font-size: 18px; font-weight: bold;}
.howto_line03 img{ margin: 10px auto 0; display: block; width: 220px;}

.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:1100px; padding: 80px 50px; text-align: left;
			background: url(../images/about_bg.png) no-repeat center; height: 300px;}

.about_bg span{ font-size:24px; line-height: 38px; 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: 200px;}
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
------------------------------------------*/

div.case_box { width:320px; margin: 0px 23px 40px 23px; float: left;}

table.case{ width:320px; border: solid #106881 2px; margin: 0px 0 0; height: 650px;}
table.case th { font-size: 18px; padding: 15px 10px 10px; text-align: left;vertical-align: top;height: 60px;}
table.case td { padding: 15px 10px 12px; vertical-align: top;}
table.case td.tit { text-align: center; height: 30px; color: #ffffff; background: #106881; width: 80px;}
table.case td.price {width: 70px; height: 30px; text-align: right; border-top: solid #106881 1px;  border-bottom: solid #106881 1px;}
table.case td.case_pic { height: 290px; vertical-align: middle; padding: 15px 0 0;}
table.case td.case_pic img{margin: 0 auto 0px; width: 100% auto; max-width: 290px; max-height: 290px; 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: 20px 0 20px 75px; color: #106881; font-weight: bold; font-size: 18px; margin-bottom: 10px; }
.icon_a{width: 100% auto;min-height: 50px; padding: 5px 0 5px 75px; margin-bottom: 50px;}

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

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

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

.icon_q04{ background:url(../images/icon_q04.png)no-repeat left #eff3f6 ;background-size: 60px 60px;}
.icon_a04{ background:url(../images/icon_a04.png)no-repeat left top;background-size: 60px 60px;min-height: 37px; padding: 18px 0 5px 75px;}

.icon_q05{ background:url(../images/icon_q05.png)no-repeat left #eff3f6 ;background-size: 60px 60px;}
.icon_a05{ background:url(../images/icon_a05.png)no-repeat left top;background-size: 60px 60px;min-height: 37px; padding: 18px 0 5px 75px;}

.icon_q06{ background:url(../images/icon_q06.png)no-repeat left #eff3f6 ;background-size: 60px 60px;}
.icon_a06{ background:url(../images/icon_a06.png)no-repeat left top;background-size: 60px 60px;min-height: 37px; padding: 18px 0 5px 75px;}

.icon_q07{ background:url(../images/icon_q07.png)no-repeat left #eff3f6 ;background-size: 60px 60px;}
.icon_a07{ background:url(../images/icon_a07.png)no-repeat left top;background-size: 60px 60px;min-height: 37px; padding: 18px 0 5px 75px;}

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

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

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

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

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

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

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


/*------------------------------------------
■ contact
------------------------------------------*/

.contact_01 { background: url(../images/contact.jpg) no-repeat center top; width: 100%;}
.contact_01 div { width:1050px; margin: 0 auto; display: block; text-align: center; padding: 120px 0 110px; font-size: 14px; line-height: 40px;}
.contact_01 h2 { font-size: 30px; line-height: 70px; text-align: left; color: #ffffff; width: 460px; float: left; padding-left: 70px; margin-bottom: 230px;}
.contact_01 h2 span { font-size: 44px; line-height: 65px;}
.contact_01 h2 span.txt22 { font-size: 22px; line-height: 35px; font-weight: normal;}
.contact_01 h3 { font-size: 24px; line-height: 38px; clear: both; font-weight: normal; margin-bottom: 30px;}

form{ width:600px; margin: 0 auto; display: block; text-align: left;}
input.w600 { padding:10px 5px ; border: solid 1px #cccccc; width: 600px;}
input.w300 { padding:10px 5px ; border: solid 1px #cccccc; width: 300px;}
textarea  { padding:10px 5px ; border: solid 1px #cccccc; width: 600px;}

#image-btn {
    border: 0px;
    width: 268px;
    height: 65px;
    background: url(../images/submit.png) left top no-repeat;
	margin: 30px auto; display: block;
}

#image-btn02 {
    border: 0px;
    width: 268px;
    height: 65px;
    background: url(../images/submit02.png) left top no-repeat;
	margin: 30px auto; display: block;
}

.btn_back { margin-top: -20px;
    width: 268px;
    height: 65px;}


/*------------------------------------------
■ モーダルウィンドウ
------------------------------------------*/

.myModal_popUp,
input[name="myModal_switch"],
#myModal_open + label ~ label {
  display: none;
}
#myModal_open + label,
#myModal_close-button + label {
  cursor: pointer;
}

.myModal_popUp {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open:checked ~ #myModal_close-button + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open:checked + label ~ .myModal_popUp {
  background: #fff;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
  width: calc(100% - 40px);
  height: calc(100% - 20px - 44px );
  padding: 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

#myModal_open:checked + label + #myModal_close-overlay + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open:checked ~ #myModal_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 0px;
  width: 100%;
  height: 0px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}
#myModal_open:checked ~ #myModal_close-button + label::before {
  content: '×';
}
#myModal_open:checked ~ #myModal_close-button + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media (min-width: 768px) {
  #myModal_open:checked + label ~ .myModal_popUp {
    width: 700px;
    height: 700px;
  }
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    margin-left: 240px;
    margin-top: -285px;
    overflow: hidden;
  }
  #myModal_open:checked ~ #myModal_close-button + label::after {
    display: none;
  }
}

.Modal_img { width:100%;}