@charset "UTF-8";

body {
    margin: 0;
    font-family: serif;
}

p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    background-color: #FFEB3B;
    color: red;

}

h3 {
    display: block;
    font-size: 47px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    background-color: #8bc34a;
    color: #fff;
}

ul {
    list-style: none;
}


.wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    text-align: inherit;
    vertical-align: baseline;
}

/*--------------------お問い合わせフロート--------------------*/
.flort_contact {
	width: 150px;
	height: 150px;
	position: fixed;
	top: 350px;
	right: 20px;
	border-radius: 50%;
	background-color: #e3007f;
	color: #FFF;
	z-index: 10;
	opacity: .85;
}
.contact_bt_inner {
	position: relative;
}

.flort_contact i {
	-moz-top: 52px;
    top: 95px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 50px;
	position: absolute;
	width: 50px;
	height: auto;
}
.contact_bt_text1 {
    -moz-top: 30px;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 13px;
	font-weight: bold;
	position: absolute;
	width: 100%;
	height: auto;
	font-family: "メイリオ";
}
.contact_bt_text2 {
    -moz-top: 100px;
	top: 200px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 15px;
	font-weight: bold;
	position: absolute;
	width: 100%;
	height: auto;
	font-family: "メイリオ";
}
.flort_contact a {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.flort_contact a:link {
	color: #FFF;
	background-color: #e3007f;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	text-decoration: none;
}
.flort_contact a:visited {
	color: #FFF;
	background-color: #e3007f;
}
.flort_contact a:hover {
	color: #FFF;
	background-color: #FF65BB;
}
.flort_contact a:active {
	color: #FFF;
	background-color: #e3007f;
}

/* Firefox */
@-moz-document url-prefix() {
.flort_contact {
	width: 150px;
	height: 150px;
	position: fixed;
	top: 350px;
	right: 20px;
	border-radius: 50%;
	background-color: #e3007f;
	color: #FFF;
	z-index: 10;
	opacity: .85;
}
.contact_bt_inner {
	position: relative;
}
.flort_contact i {
	top: 52px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 50px;
	position: absolute;
	width: 50px;
	height: auto;
}
.contact_bt_text1 {
	top: 30px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 13px;
	font-weight: bold;
	position: absolute;
	width: 100%;
	height: auto;
	font-family: "メイリオ";
}
.contact_bt_text2 {
	top: 100px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 15px;
	font-weight: bold;
	position: absolute;
	width: 100%;
	height: auto;
	font-family: "メイリオ";
}
.flort_contact a {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.flort_contact a:link {
	color: #FFF;
	background-color: #e3007f;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	text-decoration: none;
}
.flort_contact a:visited {
	color: #FFF;
	background-color: #e3007f;
}
.flort_contact a:hover {
	color: #FFF;
	background-color: #FF65BB;
}
.flort_contact a:active {
	color: #FFF;
	background-color: #e3007f;
}

    
}


/* ヘッダー
============================================================================================================ */
#header {
    max-width: 960px;
    margin: auto;
    padding: 5px 10px;
    background-color: #fff;
    position: static;
    padding: 0 0;
}

.harf0 {
    height: 115px;
}

.a-box0 {
    width: 50%;
    float: left;
}

.b-box0 {
    width: 50%;
    float: left;
}

.b-box0 img {
    width: 65%;
    margin-top: 13px;
    float: right;
}

/* 大型PC 
============================================================================================================ */
@media screen and (min-width:1280px) {}

/* ヘッダー小型PC
============================================================================================================ */
@media screen and (min-width: 960px) and (max-width:1279px) {}

/* ヘッダータブレット
============================================================================================================ */
@media screen and (min-width:600px) and (max-width:959px) {}


/* ヘッダーSP 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* メインビジュアルPC
============================================================================================================ */
#mainvisual {
    margin-bottom: 40px;
    margin: auto;
    background: url(../images/main/pc/backgroundhead.png) no-repeat;
    height: auto;
    background-size: cover;
    padding-bottom: 20px;

}

.mail_sp {
    display: none;
}

#sp_main img {
    display: none;
}

.mainvisual {
    max-width: 960px;
    margin: auto;
}

#bousaikun {
    max-width: 960px;
    margin-bottom: 40px;
    margin: auto;
    width: 150px;
    top: 5px;
    right: 300px;
    position: absolute;
    padding: 0;
}


/* 北海道でも地震対策が必須の時代へ
============================================================================================================ */

.jishin {
    max-width: 100%;
}

.jishin_title {
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    background-color: #FFEB3B;
    color: red;
    text-align: center;
    line-height: 1.2;
}

.jishin_photo_sp,
.jishin_photo_sp2 {
    display: none;
}

/* 北海道胆振東部地震　最大震度７
============================================================================================================ */
.jishin_text1 {
    text-align: center;
    margin: auto;
    max-width: 960px;
    margin-top: 20px;
    margin-bottom: 0px;

}

.jishin_text2pc {
    margin: auto;
    max-width: 960px;
    font-size: 23px;
    padding-bottom: 10px;
}

.jishin_title2pc {
    font-weight: bold;
    padding: 10px;
    text-align: center;
    font-size: 28px;
}


.jishin_text2pc span {
    color: red;
    border-bottom: solid 1px red;
    font-weight: bold;
}

.jishin_text2sp,
.jishin_title2sp {
    display: none;
}



.f_inner1 {
    max-width: 960px;
    margin: auto;
    height: 481px;
}

.f_inner1 img {

    padding-top: 20px;
    padding-bottom: 20px;
}



/* 北海道胆振東部地震の被害
============================================================================================================ */


.jishin_higai1 {
    margin: auto;
    text-align: center;
    max-width: 960px;
    margin-bottom: 10px;

}

.jishin_higai2 {
    margin: auto;
    max-width: 960px;
    text-align: center;
    font-size: 23px;
}

/* 北海道全域で大停電！
============================================================================================================ */


.f_inner2 {
    max-width: 960px;
    margin: auto;
    height: 420px;
}

.a-box2 {
    float: left;
    width: 50%;
}

.teiden_pc img {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.teiden_sp {
    display: none;
}

.b-box2 {
    float: right;
    width: 50%;
}

.b-box2 p span {

    color: red;
    border-bottom: solid 1px red;
    font-weight: bold;
}


.teiden_title {
    max-width: 960px;
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin: auto;
    margin-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
}

.teiden_text {
    margin: auto;
    max-width: 960px;
    font-size: 23px;
    padding: 20px;
}


/* 非常用発電機が作動しない！
============================================================================================================ */




.f_inner3 {
    max-width: 960px;
    margin: auto;
    height: auto;
    text-align: center;
}

.hatsudenki_title {
    background-color: #FFEB3B;
    color: red;
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin: auto;
}

.f_inner3 img {
    width: 800px;
    padding-top: 20px;
}

.f_inner3 p {
    text-align: start;
    font-size: 23px;
    padding: 20px;
}

.f_inner3 p span {
    color: red;
    border-bottom: solid 1px red;
    font-weight: bold;
}


/* 東日本大震災時に発生した非常用発電機の不具合
============================================================================================================ */
.fuguai {
    max-width: 960px;
    margin: auto;
}

.fuguai_title {
    font-size: 40px;
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
}

.f_inner4 {
    max-width: 960px;
    margin: auto;
    height: 330px;
}

.f_inner4 img {
    width: 100%;
}

.a-box4 {
    float: left;
    width: 50%;
}

.a-box4 img {
    width: 100%;
    padding-top: 20px;
}

.b-box4 {
    float: right;
    width: 50%;
}

.b-box4 p {
    font-size: 23px;
    padding: 20px;
}

.b-box4 p span {
    color: red;
    border-bottom: solid 1px red;
    font-weight: bold;

}

.b-box4sp {
    display: none;
}


.kiken {
    max-width: 960px;
    margin: auto;
}

.kiken h3 {
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin-top: 40px;
}

.kiken_pc {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.kiken_sp {
    display: none;
}


.gimu h3 {
    padding: 10px 10px;
    display: block;
    background-color: #ffeb3b;
    color: red;
    text-align: center;
    line-height: 1.2;
}

.f_inner5 {
    max-width: 960px;
    margin: auto;
    height: 380px;
}

.f_a-box5 {
    float: left;
    width: 50%;
}


.f_a-box5 img {
    width: 100%;
    padding-top: 20px;
}


.f_b-box5 {
    float: right;
    width: 50%;
}

.f_b-box5 p {

    font-size: 23px;
    padding: 20px;
}

.f_b-box5 p span {
    color: red;
    border-bottom: solid 1px red;
    font-weight: bold;
}




/* お任せください
============================================================================================================ */

.omakase_title {
    display: block;
    font-size: 3em;
    font-weight: bold;
    background-color: #3e4880;
    color: #fbfbfb;
    text-align: center;
}

.f_inner6 {
    max-width: 960px;
    margin: auto;
    height: 360px;
}

.f_a-box6 {
    float: left;
    width: 50%;
    height: 360px;
}

.f_logo {
    text-align: center;
}

.f_b-box6 {
    float: right;
    width: 50%;
    height: 360px;
}


.f_a-box6 img {
    width: 70%;
    padding-top: 20px;
    padding-bottom: 10px;
}

.f_a-box6 p {
    text-align: center;
    font-size: 23px;
}

.f_a-box6 p span {
    font-weight: bold;
    color: green;
    border-bottom: solid 1px green;
}


.f_b-box6 img {
    padding-top: 20px;
    width: 100%;
}


.f_inner6sp {
    display: none;
}

/* 北日本防災設備の4つのメリット
============================================================================================================ */
.merit {
    margin: auto;
    max-width: 960px;
    height: auto;
}

.merit_title {
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 10px;
}

.merit {
    text-align: center
}

.merit_img img {
    padding: 10px;
}

.fukashiken_title {
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin-top: 10px;
}

.nagare {
    text-align: center;
}

.nagare img {
    width: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.merit_img01 {
    display: flex;
    max-width: 100%;
}

.merit_img1 {
    width: 50%;
}

.merit_img1 img {
    padding: 20px 5px 15px 0;
    width: 98.5%;
}

.merit_img2 {
    width: 50%;
}

.merit_img2 img {
    padding: 20px 0 15px 5px;
    width: 98.5%;
}

.merit_img02 {
    display: flex;
    max-width: 100%;
}

.merit_img3 {
    width: 50%;
}

.merit_img3 img {
    padding: 0 5px 10px 0;
    width: 98.5%;
}

.merit_img4 {
    width: 50%;
}

.merit_img4 img {
    padding: 0 0 10px 5px;
    width: 98.5%;
}

/* 写真　作業風景
============================================================================================================ */
.sagyou{
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin-top: 10px;
}

.photo_pc {
    display: block;
    max-width: 100%;
    margin-top:20px;
    margin-bottom: 50px;
}


.single-item.slick-initialized.slick-slider {
    display: none;
}

.slick-slider {
    max-width: 90%;
    margin: auto;
}



/* 出張調査・出張見積り０円！
============================================================================================================ */
.mitumori {
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    background-color: #FFEB3B;
    color: red;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
}

.mitsumori0 {
    background-color: rgba(255, 217, 169, 0.1);
    padding-bottom: 50px;
}

.inner {
    margin: 0 auto;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 980px;
}

.flex-row {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
}

.flex-rowimg {
    display: none;
}

.text_area {
    width: 50%;
}

.text_area img {
    width: 98%;
}

.text_area p {
    padding-top: 20px;
}

.photo_area {
    width: 50%;
}

.mitsumori0 .photo_area img {
    margin-left: 30px;
    width: 480px;
}

/* サービス対象地域
============================================================================================================ */
.contents1 {
    background: url(../images/main/pc/hokkaido-bg.png);
}

.service {
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    background-color: #4CAF50;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
}

.servicechiki {
    width: 100%;
    height: 480px;
}

.chiki {
    max-width: 960px;
    margin: auto;
}

.a-box5 {
    width: 50%;
    float: left;
}

.area img {
    width: 100%;
}

.b-box5 {
    width: 50%;
    float: left;
}

.service_midashi {
    padding-top: 20px;
}

.b-box5 p {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 20px;
}

/*点検実績
============================================================================================================ */
.j_photosp{
    display: none;
}

.jisseki h2{
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    background-color: #607D8B;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
}

.jikkeki_inner {
    max-width: 960px;
    margin: auto;
    height: 410px;
}

.jikkeki_inner h4{
    text-align: center;
    padding: 0.2em 1em;
    margin: 1em 0;
    color: #fff;
    background: #7955488c;
    font-weight: bold;
    font-size: 1.3em;
    width: 82%;
}

.jikkeki_inner p{
    max-width: 90%;
    font-size: 20px;
    text-align: center;
}

.j_a-box {
    float: left;
    width: 50%;
}

.j_a-box img{
    width: 90%;
}

.j_b-box {
    float: right;
    width: 50%;
}

.j_b-box img{
    width: 90%;
}

.jikkeki_inner2 {
    max-width: 960px;
    margin: auto;
    height: 410px;
    padding-bottom: 30px;
}

.jikkeki_inner2 h4{
    text-align: center;
    padding: 0.2em 1em;
    margin: 1em 0;
    color: #fff;
    background: #7955488c;
    font-weight: bold;
    font-size: 1.3em;
    width: 82%;
}

.jikkeki_inner2 p{
    max-width: 90%;
    font-size: 20px;
    text-align: center;
}

.j_a-box2 {
    float: left;
    width: 50%;
}

.j_a-box2 img{
    width: 90%;
}

.j_b-box2 {
    float: right;
    width: 50%;
}

.j_b-box2 img{
    width: 90%;
}

.jisseki{
    text-align: center;
    margin-bottom: 30px;
}

.jisseki a {
    background: #4CAF50}

/*お客様の声
============================================================================================================ */

.voice {
    background: #fffceb9e;
    padding-bottom: 50px;
}

.voice h2 {
    background-color: #771c74;
    color: #fffceb;
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin: auto;
}

.voice_box1,
.voice_box2 {
    margin: auto;
    max-width: 960px;
    border: solid 10px #ccb32fcc;
    border-radius: 10px;
    margin-top: 50px;
    height: 365px;
}

.voice1,
.voice2 {
    border-bottom: 2px solid #ccb32fcc;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.voice1 p,
.voice2 p {
    font-weight: bold;
    text-align: center;
}

.a-box_v,
.a-box_v2 {
    text-align: center;
    width: 30%;
    float: left;
    height: auto;
}

.a-box_v img,
.a-box_v2 img {
    width: 75%;
}

.b-box_v,
.b-box_v2 {
    width: 70%;
    float: right;
}

.b-box_vsp {
    display: none;
}

.b-box_v2sp {
    display: none;
}

.b-box_v p,
.b-box_v2 p {
    font-size: 20px;
    padding: 10px 20px 20px 20px;
}

.voice1_title,
.voice2_title {
    font-size: 30px;
}

.voice1_client,
.voice2_client {
    font-size: 25px;
}


/* お問い合わせ
============================================================================================================ */
.otoiawase {
    font-size: 3.5rem;
    padding: 10px 10px;
    display: block;
    background-color: #1c2377;
    color: #fff;
    text-align: center;
    line-height: 1.2;

}

.denwa {
    width: 100%;
    height: 460px;
    background: #0099d417;
}

.harf6 {
    max-width: 960px;
    margin: auto;
}

.a-box6 {
    width: 65%;
    float: left;
}

.mail_area {
    text-align: center;
}

.mail_area img {
    width: 600px;
    margin-top: 20px;
}

.mail_contact, .jisseki a {
    padding: 10px;
    font-size: 27px;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    border-radius: 50px;
    width: 550px;
    text-align: center;
    line-height: 37px;
    letter-spacing: 2px;
    position: relative;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    overflow: hidden;
    margin-top: 10px;
}

.mail_contact{
    background: #e4007f;
}

.mail_contact:before, .jisseki a:before {
    content: "";
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: -10%;
    left: -180%;
    -webkit-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
}

.mail_contact:hover:before, .jisseki a:hover:before {
    left: 60%;
}

.mail_contact:active, .jisseki a:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}

.mail_contactsp {
    display: none;
}

.mail_contact_tab {
    display: none;
}

.b-box6 {
    width: 35%;
    float: right;
}

.b-box6 img {
    padding-top: 15px;
}

.tel_contact {
    display: none;
}

/* 会社概要
============================================================================================================ */
.company {
    width: 100%;
    margin: 0 auto 40px;
    padding-top: 50px;
}

.harf7 {
    max-width: 960px;
    margin: auto;
}

.mod-page-title h2 {
    background-color: #fff;
    color: black;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.1rem;
    margin-bottom: 20px;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border-color: black;
}

.profile_table table {
    border-top: 1px solid #d8d8d8;
    width: 100%;
}

.profile_table table tr {
    border-bottom: 1px solid #d8d8d8;
}

.profile_table table tr th {
    font-size: 1.2rem;
    line-height: 1.79;
    width: 18.3%;
}

.profile_table table tr td {
    padding: 14px 30px;
    font-size: 1.2rem;
    line-height: 1.79;
    letter-spacing: 0.05rem;
}

span.map {
    background: #f6ffeb;
    border-radius: 50px;
    padding: 0 5px;
    margin-right: 0.5em;
}

span.map a {
    color: #4CAF50;
    text-decoration: none;
    font-size: 1rem;
}

span.map a:hover {
    opacity: 0.5;
}

.profile_map {
    width: 100%;
}

iframe {
    width: 100%;
    height: 300px;
}

/* PCで電話番号リンクを無効に */
@media screen and (min-width: 768px) {
    a[href^="tel:"] {
        color: black;
        pointer-events: none;
        cursor: text;
        text-decoration: none;
    }
}

/* 事業パートナー
============================================================================================================ */
.partner1 {
    max-width: 960px;
    margin: auto;
    font-size: 2rem;
    padding: 10px 10px;
    display: block;
    background-color: #009688;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}


.harf8 {
    max-width: 800px;
    margin: auto;
    height: 220px;
}

.a-box7 {
    width: 30%;
    float: left;
}

.photo {
    text-align: center;
}

.photo img {
    width: 100%;
    margin-top: 20px;
}

.b-box7 {
    width: 70%;
    float: left;
}

.b-box7 p {
    padding: 20px;
    font-size: 18px;
    margin-bottom: 0px;
}

.mc {
    text-align: center;
}


/* 非常用発電機の販売
============================================================================================================ */
.hanbai {}

.hanbai h2 {
    max-width: 960px;
    margin: auto;
    font-size: 2rem;
    padding: 10px 10px;
    display: block;
    background-color: #4caf50;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

.harf9 {
    max-width: 800px;
    margin: auto;
    height: 220px;
}

.a-box8 {
    width: 30%;
    float: left;
}

.photo1 {
    text-align: center;
}

.photo1 img {
    width: 100%;
    margin: 20px 0;
}

.b-box8 {
    width: 70%;
    float: left;
}

.b-box8 p {
    padding: 20px;
    padding-bottom: 0px;
    margin-top: 0px;
    font-size: 18px;
    margin-bottom: 0px;
}



/* トップに戻るボタン
============================================================================================================ */

#top-btn {
    position: fixed;
    right: 20px;
    bottom: 0px;
    z-index: 10000;
}

#top-btn a {
    border-width: 2px;
    border-style: solid;
}

#top-btn a {
    width: 60px;
    height: 60px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    font-size: 30px;
    font-size: 1.875rem;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
}

#top-btn a i {
    margin-left: -9px;
    position: absolute;
    top: 14px;
    left: 50%;
    -webkit-font-smoothing: antialiased;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

#top-btn a .top-btn-text {
    position: absolute;
    top: 80px;
    left: 7px;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    font-size: .8875rem;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
}

#top-btn a:hover {
    animation: to-top-btn 1s ease infinite;
}

#top-btn a:hover .top-btn-text {
    top: 15px;
}

#top-btn a:hover i {
    top: -40px;
}


.fa-angle-double-up:before {
    content: "\f102";
}


#top-btn a {
    border-color: #fff;
    color: #fbfbfb;
    background: #4caf50;

}

/* スマホ用電話ボタンPC
============================================================================================================ */
#tel {
    display: none;
}


/* フッター
============================================================================================================ */

#footer {
    background: #4caf50;
    color: #fbfbfb;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
}

.footer-logo {
    text-align: center;
}


/* スマホ
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

@media screen and (min-width:300px) and (max-width:360px) {
/*
    .jisseki {
    height: 795px!important;
}
*/
}
    
@media screen and (min-width:300px) and (max-width:414px) {
/*---お問い合わせフロート追記---*/
	.flort_contact {
		display: none;
	}
/*---お問い合わせフロート追記---*/
    p {
        font-size: 16px;
    }

    .text {
        display: inline-block;
    }

    h2 {
        padding: 5px;
    }

    h3 {
        padding: 5px;
    }
}

/* ヘッダーSP 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

@media screen and (min-width:300px) and (max-width:414px) {

    .a-box0 {
        width: 100%;
        height: 90px;
    }

    .a-box0 img {
        width: 97%;
    }

    .b-box0 {
        display: none;
    }

    .harf0 {
        height: 90px;
    }


 
    /* メインビジュアルSP
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    #mainvisual {
        background: none;
        padding-bottom: 0px;

    }

    #sp_main img {
        display: block;
        width: 100%;
    }

    #main {
        display: none;
    }

    .mail_sp {
        display: block;
        text-align: center;
        background: #fff;
    }

    .mail_contactsp1 {
        padding: 5px;
        background: #1c2377;
        font-size: 17px;
        display: inline-block;
        text-decoration: none;
        color: #FFF;
        border-radius: 50px;
        width: 95%;
        text-align: center;
        line-height: 30px;
        letter-spacing: 2px;
        position: relative;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        overflow: hidden;
        margin-top: 10px;
    }

    .mail_contactsp1:before {
        content: "";
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: -10%;
        left: -180%;
        -webkit-transition: 0.7s ease-in-out;
        transition: 0.7s ease-in-out;
    }

    .mail_contactsp1:hover:before {
        left: 60%;
    }

    .mail_contactsp1:active {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        border-bottom: none;
    }





    /* 北海道でも地震対策が必須の時代へ！SP
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    .jishin_title {
        font-size: 125%;
    }


    .f_inner1 {
        height: auto;
    }

    .f_inner1 img {
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;

    }

    .jishin_text2sp {
        display: block;
        padding: 10px;
    }

    .jishin_title2sp {
        display: block;
        font-weight: bold;
        padding: 10px;
        text-align: center;
        font-size: 16px;
    }


    .jishin_text2sp span {
        color: red;
        border-bottom: solid 1px red;
        font-weight: bold;
    }

    .jishin_text2pc,
    .jishin_title2pc {
        display: none;
    }

    .jishin_photo_sp,
    .jishin_photo_sp2 {
        display: block;
    }

    .jishin_photo {
        display: none;
    }


    /* 北海道胆振東部地震　最大震度７SP
============================================================================================================ */

    .jishin_text1 {
        font-size: 125%;
        margin-top: 0;
    }

    .jishin_text2 {
        font-size: 16px;
    }



    /* 北海道胆振東部地震の被害SP
============================================================================================================ */


    .jishin_higai1 {
        font-size: 125%;
    }

    .jishin_higai2 {
        font-size: 16px;
    }

    .jishin_hikai1 {
        font-size: 125%;
    }



    /* 北海道全域で大停電！SP
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    .f_inner2 {
        height: 430px;
    }

    .a-box2 {
        width: 100%;
    }

    .teiden_pc {
        display: none;
    }

    .teiden_sp {
        display: block;
        padding;
        0;
    }

    .teiden_sp img {
        width: 100%;
    }

    .teiden_title {
        font-size: 125%;
    }

    .b-box2 {
        width: 100%;
    }

    .teiden_text {
        padding: 10px;
        font-size: 16px;
        margin-right: 0px;
    }


    /* 非常用発電機が作動しない！SP
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    .hatsudenki_title {
        font-size: 125%;
    }


    .f_inner3 img {
        padding-top: 0;
        width: 100%;
    }

    .f_inner3 p {
        padding: 10px;
        font-size: 16px;
    }


    /* 東日本大震災時に発生した非常用発電機の不具合SP
============================================================================================================ */
    .f_inner4 {
        height: 420px;
    }


    .a-box4 {
        width: 100%;
    }

    .a-box4 img {
        padding-top: 10px;
    }

    .b-box4 {
        width: 100%;
    }

    .b-box4 {
        display: none;
    }

    .b-box4sp {
        display: block;
        padding: 10px;
        font-size: 16px;
    }

    .b-box4sp p span {
        color: red;
        border-bottom: solid 1px red;
        font-weight: bold;
    }



    .fuguai_title {
        margin-top: 0;
        font-size: 125%;
    }

    .kiken h3 {
        font-size: 125%;
    }

    .kiken {
        text-align: center;
    }

    .kiken_pc {
        display: none;
    }

    .kiken_sp {
        width: 100%;
        display: inline-block;
        padding: 5px 0;
    }

    /* 非常用発電機の点検(1年1回)は義務です!!SP
============================================================================================================ */
    .f_inner5 {
        height: 490px;
    }

    .gimu h3 {
        font-size: 125%;
    }

    .f_a-box5 {
        width: 100%;
    }

    .f_a-box5 img {
        padding-top: 0;
    }

    .f_b-box5 {
        width: 100%;
    }

    .f_b-box5 p {
        padding: 10px;
        font-size: 16px;
    }




    /* お任せください！SP
============================================================================================================ */
    .omakase_title {
        font-size: 125%;
    }


    .f_inner6 {
        display: none;
    }

    .f_inner6sp {
        display: block;
        height: 510px;
    }

    .f_a-box6sp {
        width: 100%;
    }

    .f_b-box6sp p span {
        font-size: 18px;
        font-weight: bold;
        color: green;
        border-bottom: solid 1px green;
    }

    .f_staffsp img {
        width: 100%;
    }

    .f_b-box6sp {
        text-align: center;
        width: 100%;
    }


    .f_b-box6sp img {
        width: 70%;
    }

    .f_b-box6sp p {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 16px;
    }





    /* 北日本防災設備の4つのメリットSP
============================================================================================================ */
    .merit_title {
        font-size: 125%;
        margin-bottom: 0;
    }

    .merit_img1,
    .merit_img2,
    .merit_img3,
    .merit_img4 {
        width: 100%;
    }

    .merit_img1 img {
        padding: 10px 0 0 0;
        width: 100%;
    }

    .merit_img2 img {
        padding: 2px 0 0 0;
        width: 100%;
    }

    .merit_img3 img {
        padding: 2px 0 0 0;
        width: 100%;
    }

    .merit_img4 img {
        padding: 2px 0 0 0;
        width: 100%;
    }

    .merit_img01 {
        display: block;
        box-sizing: border-box;
        padding-left: 2px;
        padding-right: 2px;

    }

    merit_img1 {}

    .merit_img02 {
        display: block;
        box-sizing: border-box;
        padding-left: 2px;
        padding-right: 2px;
    }


    /* 負荷試験点検の流れSP
============================================================================================================ */

    .fukashiken_title {
        margin-top: 0;
        font-size: 125%;
    }

    .nagare img {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* 写真　作業風景SP
============================================================================================================ */


    .sagyou {
        display: block;
        font-size: 125%;
        text-align: center;
    }

    .photo_pc {
        display: none;
    }

    .single-item.slick-initialized.slick-slider {
        display: block;
    }

    /* slickボタンの位置調整 */
    .single-item .slick-prev {
        left: 0px;
    }

    .single-item .slick-next {
        right: 0px;
    }



    /* 出張調査・出張見積り０円！SP
============================================================================================================ */
    .mitumori,
    .service,
    .otoiawase {
        font-size: 125%;
        margin-top: 0px;
        margin-bottom: 0px;
    }


    .mitsumori0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .inner {
        padding: 0;
    }

    .flex-row {
        display: block;
    }

    .flex-rowimg {
        display: block;
    }

    .flex-rowimg img {
        width: 100%;
    }

    .text_area {
        width: 100%;
    }

    .text_area p {
        padding: 10px;
        font-size: 16px !important;
    }

    .photo_area {
        display: none;
    }

    /* サービス対象地域SP
============================================================================================================ */
    .servicechiki {
        height: auto;
    }

    .chiiki {
        height: auto;
    }

    .a-box5 {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .a-box5 img {
        width: 75% !important;
        padding-top: 0px !important;
    }

    .b-box5 {
        width: 100%;
        height: auto;
        float: unset;
    }

    .area img {
        margin-top: 10px;
    }

    .b-box5 p {
        padding-top: 0px;
        font-size: 16px;
    }

    .b-box5 ul {
        margin-bottom: 0px;
        padding-left: 0px;
    }

    .b-box5 li {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
    }
    
    
    /*点検実績SP
============================================================================================================ */
    .j_photosp{
        display: block;
    }
    
    ul.slick-slider{
        display: none;
    }
    
    .jisseki{
        height: auto;
    }
    
    .jisseki h2{
    font-size: 1.3rem;
        margin-bottom: 5px;
}


.jikkeki_inner h4{
    text-align: center;
    padding: 0.2em 0;
    margin: 5px 0 0 0;
    color: #fff;
    background: #7955488c;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
}

.jikkeki_inner p{
    max-width: 100%;
    font-size: 20px;
    text-align: center;
}

.j_a-box {
    float: left;
    width: 100%;
}

.j_a-box img{
    width: 100%;
}

.j_b-box {
    float: right;
    width: 100%;
}

.j_b-box img{
    width: 100%;
}

.jikkeki_inner2 {
    max-width: 960px;
    margin: auto;
    padding-bottom: 30px;
}

.jikkeki_inner2 h4{
    text-align: center;
    padding: 0.2em 0;
    margin: 5px 0 0 0;
    color: #fff;
    background: #7955488c;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
}

.jikkeki_inner2 p{
    max-width: 100%;
    font-size: 20px;
    text-align: center;
}

.j_a-box2 {
    float: left;
    width:100%;
}

.j_a-box2 img{
    width: 100%;
}

.j_b-box2 {
    float: right;
    width: 100%;
}

.j_b-box2 img{
    width: 100%;
}



    /* お客様の声SP
============================================================================================================ */
    .voice h2 {
        font-size: 150%;
    }


    .voice {
        padding-bottom: 20px
    }

    .voice_box1 {
        margin-top: 20px;
        height: 560px;
    }

    .voice1_title {
        font-size: 20px;
    }

    .voice2_title {
        font-size: 19px;
    }

    .voice1_client,
    .voice2_client {
        font-size: 16px;
    }

    .voice1 {
        margin-bottom: 0;
    }

    .a-box_v,
    .a-box_v2,
    .b-box_v,
    .b-box_v2 {
        width: 100%;
    }

    .a-box_v img,
    .a-box_v2 img {
        padding-top: 20px;
        padding-bottom: 10px;
        width: 40%;
    }

    .voice2 {
        margin-bottom: 0;
    }

    .b-box_v,
    .b-box_v2 {
        display: none;
    }

    .b-box_vsp,
    .b-box_v2sp {
        display: block;
    }

    .b-box_vsp p,
    .b-box_v2sp p {
        font-size: 16px;
        padding: 10px 5px 10px 10px;
    }

    .voice_box2 {
        margin-top: 20px;
        height: 600px;
    }


    /* お客様の声SP iphone5/SE
============================================================================================================ */
    @media screen and (min-width: 320px) and (max-width: 340px) {
        .voice_box2 {
            height: 640px;
        }
    }



    /* お問い合わせSP
============================================================================================================ */

    .denwa {
        height: auto;
    }

    .a-box6 {
        width: 100%;
        float: unset;
    }

    .b-box6 {
        width: 100%;
        text-align: center;
        float: unset;
    }

    .b-box6 img {
        width: 50%;
    }

    .mail_area img {
        width: 100%;
    }

    .mail_contact {
        display: none;
    }

    .mail_contactsp, .jisseki a {
        padding: 5px;
        font-size: 17px;
        display: inline-block;
        text-decoration: none;
        color: #FFF;
        border-radius: 50px;
        width: 90%;
        text-align: center;
        line-height: 30px;
        letter-spacing: 2px;
        position: relative;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        overflow: hidden;
        margin-top: 10px;
    }
    .mail_contactsp {
        background: #e4007f;}
    
    .mail_contactsp {
        background: #e4007f;}

    .mail_contactsp:before,
    .tel_contact:before {
        content: "";
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: -10%;
        left: -180%;
        -webkit-transition: 0.7s ease-in-out;
        transition: 0.7s ease-in-out;
    }

    .mail_contactsp:hover:before,
    .tel_contact:hover:before {
        left: 60%;
    }

    .mail_contactsp:active,
    .tel_contact:active {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        border-bottom: none;
    }

    .mail_contact_tab {
        display: none;
    }

    .tel_contact {
        padding: 5px;
        background: #1c2377;
        font-size: 17px;
        display: inline-block;
        text-decoration: none;
        color: #FFF;
        border-radius: 50px;
        width: 90%;
        text-align: center;
        line-height: 30px;
        letter-spacing: 2px;
        position: relative;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        overflow: hidden;
        margin-top: 10px;
    }

    /* 会社概要SP
============================================================================================================ */
    .company {
        margin-top: 20px;
        margin-bottom: 0px;
    }

    .mod-page-title h2 {
        font-size: 125%;
    }

    .profile_table table tr th {
        font-size: 1rem;
        line-height: 1.79;
        width: 20%;
    }

    .profile_table table tr td {
        padding: 10px;
        font-size: 1rem;
        line-height: 1.79;
        letter-spacing: 0.05rem;
    }

    th {
        padding: 10px;
    }

    .profile_map {
        height: 300px;
    }



    /* 事業パートナーSP
============================================================================================================ */
    .partner1 {
        font-size: 120%;
        padding: 10px 10px;
        display: block;
        background-color: #009688;
        color: #fff;
        text-align: center;
        line-height: 1.2;
    }

    .harf8 {
        height: auto;
    }

    .a-box7 {
        width: 100%;
        height: auto;
        float: unset;
    }

    .photo img {
        width: 60%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 20px;
    }

    .b-box7 {
        width: 100%;
        height: auto;
        float: unset;
    }

    .b-box7 p {
        padding: 10px;
        font-size: 16px;
    }

    .mail_contact1 {
        padding: 5px;
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 10px;
        width: 90%;
    }


    /* 非常用発電機の販売も行っております。SP
============================================================================================================ */
    .hanbai h2 {
        font-size: 115%;
    }

    .harf9 {
        height: 300px;
    }

    .a-box8 {
        width: 100%;
    }

    .photo1 img {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 20px;
    }

    .b-box8 {
        width: 100%;
    }

    .b-box8 p {
        padding: 10px;
        font-size: 16px;
    }

    .photo1 img {
        width: 60%;
    }

    /* 電話ボタンSP
============================================================================================================ */


    a#tel {
        position: fixed;
        bottom: -8px;
        display: block;
    }

    a#tel img {
        width: 100%;
    }



    /* フッターSP
============================================================================================================ */
    .footer-logo img {
        width: 80%;
    }

    .copyright span {
        font-size: 10px !important;
    }



    /* トップへ戻るボタン非表示 */
    #top-btn {
        display: none;
    }

}

/* タブレット
============================================================================================================ */
@media screen and (min-width:600px) and (max-width:1024px) {

/*---お問い合わせフロート追記---*/
	.flort_contact {
		display: none;
	}
/*---お問い合わせフロート追記---*/

    h3 {
        font-size: 40px;
    }

    /* ヘッダーTAB
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    .b-box0 img {
        width: 80%;
        margin-top: 13px;
    }


    /* メインビジュアルTAB
============================================================================================================ */
    .mainvisual img {
        width: 100%;
    }




    /* 北海道でも地震対策が必須の時代へ！TAB
============================================================================================================ */
    .jishin_title {
        font-size: 2.5rem;
    }

    .jishin_photo {
        width: 100%;
    }

    .f_inner1 {
        height: 400px;
    }

    .jishin_text2pc {
        padding-bottom: 30px;
    }

    /* 北海道全域で大停電！TAB
============================================================================================================ */
    .f_inner2 {
        height: 520px;
    }

    .teiden_pc img {
        padding-top: 100px;
    }


    /* 東日本大震災時に発生した非常用発電機の不具合TAB
============================================================================================================ */
    .f_inner4 {
        height: 400px;
    }

    .a-box4 img {
        padding-top: 100px;
    }


    /* 非常用発電機が作動しない！TAB
============================================================================================================ */
    .f_inner3 img {
        width: 100%;
    }




    /* 非常用発電機の点検(1年1回)は義務です!!TAB
============================================================================================================ */
    .f_inner5 {

        height: 490px;
    }

    .f_a-box5 img {
        padding-top: 100px;
    }

    /* お任せください！TAB
============================================================================================================ */
    .omakase_title {
        font-size: 2.1em;
        padding: 7px 0;
    }

    .f_a-box6 {
        height: 300px;
    }

    .f_b-box6 {
        height: 300px;
    }

    .f_inner6 {
        height: 300px;
    }

    .f_a-box6 p {
        font-size: 20px;
    }




    /* 出張調査・出張見積り０円！TAB
============================================================================================================ */
    .mitumori {
        font-size: 2.5rem;
    }

    .mitsumori0 .photo_area img {
        width: 100%;
        padding-left: 20px;
        margin-left: 0;
        padding-top: 100px;

    }

    /* サービス対象地域TAB
============================================================================================================ */
    .service {
        font-size: 2.5rem;
    }

    .a-box5 img {
        width: 100%;
        padding-top: 50px !important;

    }

    .b-box5 ul {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    /* お問い合わせTAB
============================================================================================================ */
    .otoiawase {
        font-size: 2.5rem;
    }


    .denwa {
        text-align: center;
        padding-bottom: 0;
        height: 420px;
    }


    .mail_area img {
        width: 520px;
        padding-left: 20px;
    }

    .b-box6 {
        width: 30%;
        padding-right: 20px;
    }

    .b-box6 img {
        padding-top: 0;
    }


    .mail_contact_tab {
        padding: 10px;
        background: #e4007f;
        font-size: 27px;
        display: inline-block;
        text-decoration: none;
        color: #FFF;
        border-radius: 50px;
        width: 550px;
        text-align: center;
        line-height: 37px;
        letter-spacing: 2px;
        position: relative;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        overflow: hidden;
        margin-top: 10px;
    }

    .mail_contact_tab:before {
        content: "";
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: -10%;
        left: -180%;
        -webkit-transition: 0.7s ease-in-out;
        transition: 0.7s ease-in-out;
    }

    .mail_contact_tab:hover:before {
        left: 60%;
    }

    .mail_contact_tab:active {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        border-bottom: none;
    }

    .mail_contact {
        display: none;
    }


    /* お客様の声TAB
============================================================================================================ */
    .voice_box1 {
        height: 420px;
    }
    
    .voice1_title{
        font-size: 24px;
    }
    .voice1_client{
        font-size: 20px;
    }

    .voice_box2 {
        height: 460px;
    }
    .voice2_title{
        font-size: 24px;
    }
    .voice2_client{
        font-size: 20px;
    }


    /* 会社概要TAB
============================================================================================================ */
    .company {
        margin-top: 0px;
        padding-top: 30px;
    }

    .profile_map {
        height: 300px;
    }

    /* 事業パートナーTAB
============================================================================================================ */

    .partner1 {
        font-size: 1.6rem;
    }
}
    /* ipad pro
============================================================================================================ */

@media screen and (min-width:1023px) and (max-width:1024px) {
    
    .f_inner1 {
    height: auto;
}
    .f_inner6{
        height: 360px;
    }
}

/* 小型PC
============================================================================================================ */
@media screen and (min-width: 1025px) and (max-width:1279px) {
    .flort_contact{
        top:280px;
    }
    
    
}


/*ナビゲーションドロワー　*/
#navTgl:checked ~ .contents {
	transform: translateX(250px);
}

/* :::::: toggle button :::::: */
#navTgl {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
}
.open {
	z-index: 2;
	width: 100px;
	height: 115px;
    font-size:22px;
    font-weight: bold;
    color: #fff;
	background: lightSeaGreen;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	left: 5%;
    top:35%;
	width: 100%;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open span:first-child{
    border-bottom: solid 2px #FFF;
    width: auto;
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
    transform: translateY(8px);
}
.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}
#navTgl:checked + .open {
	background: indianRed;
	transform: translateX(250px);
}
.open span:last-child{
    	transform: scaleX(0);
}
#navTgl:checked + .open span:last-child {
    	position: absolute;
	left: 18%;
    top:35%;
	transform: scaleX(1);
    border-bottom: solid 2px #FFF;
    width: auto;
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

#navTgl:checked + .open {
	background: indianRed;
	transform: translateX(250px);
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(0,0,0,.6);
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu a {
	color: white;
}
.menu h2 {
	text-align: center;
    color: #607D8B;
    font-size: 24px;
    background-color: #fff;
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	font-size: 18px;
    font-weight: bold;
	line-height: 1.4;
}
.menu li:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
	display: block;
	padding: 1em 1.8em;
	text-decoration: inherit;
	transition: background .6s;
}
.menu a:hover {
	background: black;
}
#navTgl:checked ~ .menu {
	transform: none;
}

@media screen and (min-width:320px) and (max-width:1024px) {
    .open,.close,.menu{
        display: none;
    }
}
/*ナビゲーションドロワー　*/